luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light theme

Browse Source
This commit is contained in:
Thomas Nordquist
2019-04-03 06:09:34 +02:00
parent acbaced1ec
commit 6853066a19
18 changed files with 166 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/index.html
View File

@@ -11,13 +11,20 @@
padding: 0; padding: 0;
} }
@keyframes example { @keyframes updateDark {
0% {background-color: none;} 0% {background-color: none;}
25% {background-color: #3f51b5 ;} 25% {background-color: #3f51b5;}
50% {background-color: #3f51b5;} 50% {background-color: #3f51b5;}
100% {background-color: none;} 100% {background-color: none;}
} }
@keyframes updateLight {
0% {background-color: none; color: inherit}
25% {background-color: #bfc9c8; color: #000}
50% {background-color: #bfc9c8; color: #000}
100% {background-color: none; color: inherit}
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
@@ -36,30 +43,6 @@
} }
</style> </style>
<style> <style>
#splash {
z-index: 1000000;
background-color: #303030;
display: block;
width: 100vw;
height: 100vh;
position: fixed;
opacity: 1;
}
#splash1 {
margin: 37vh auto 0 auto;
height: 25vh;
width: 25vh;
/* background-image:url('../rings.svg'); */
background-size: cover;
}
#splash2 {
margin: 0 auto;
}
@keyframes unsplash {
0% {opacity: 1;}
100% {opacity: 0;}
}
.Resizer { .Resizer {
background: #eee; background: #eee;
opacity: .2; opacity: .2;
@@ -114,7 +97,6 @@
<script src="http://localhost:35729/livereload.js"></script> <script src="http://localhost:35729/livereload.js"></script>
</head> </head>
<body> <body>
<div id="splash"><div id="splash1"></div></div>
<div id="app" style="font:-webkit-control"></div> <div id="app" style="font:-webkit-control"></div>
<script> <script>
function loadScript(path) { function loadScript(path) {

49
app/src/App.tsx
View File

@@ -15,6 +15,7 @@ import { globalActions, settingsActions } from './actions'
import { Theme, withStyles } from '@material-ui/core/styles' import { Theme, withStyles } from '@material-ui/core/styles'
const Settings = React.lazy(() => import('./components/Settings')) const Settings = React.lazy(() => import('./components/Settings'))
const ContentView = React.lazy(() => import('./components/ContentView'))
interface Props { interface Props {
connectionId: string connectionId: string
@@ -23,6 +24,7 @@ interface Props {
error?: string error?: string
actions: typeof globalActions actions: typeof globalActions
settingsActions: typeof settingsActions settingsActions: typeof settingsActions
launching: boolean
} }
class App extends React.PureComponent<Props, {}> { class App extends React.PureComponent<Props, {}> {
@@ -51,6 +53,10 @@ class App extends React.PureComponent<Props, {}> {
const { settingsVisible } = this.props const { settingsVisible } = this.props
const { content, contentShift, centerContent, paneDefaults, heightProperty } = this.props.classes const { content, contentShift, centerContent, paneDefaults, heightProperty } = this.props.classes
if (this.props.launching) {
return null
}
return ( return (
<div className={centerContent}> <div className={centerContent}>
<CssBaseline /> <CssBaseline />
@@ -63,26 +69,10 @@ class App extends React.PureComponent<Props, {}> {
<div className={`${settingsVisible ? contentShift : content}`}> <div className={`${settingsVisible ? contentShift : content}`}>
<TitleBar /> <TitleBar />
</div> </div>
<div> <div className={settingsVisible ? contentShift : content}>
<SplitPane <React.Suspense fallback={<div>Loading...</div>}>
step={20} <ContentView heightProperty={heightProperty} connectionId={this.props.connectionId} paneDefaults={paneDefaults} />
primary="second" </React.Suspense>
className={`${settingsVisible ? contentShift : content} ${heightProperty}`}
split="vertical"
minSize={250}
defaultSize={500}
resizerStyle={{ width: '2px', margin: '0 -10px 0 0px' }}
allowResize={true}
style={{ position: 'relative' }}
pane1Style={{ overflow: 'hidden' }}
>
<div className={paneDefaults}>
<Tree />
</div>
<div className={paneDefaults}>
<Sidebar connectionId={this.props.connectionId} />
</div>
</SplitPane>
</div> </div>
</div> </div>
<UpdateNotifier /> <UpdateNotifier />
@@ -93,15 +83,6 @@ class App extends React.PureComponent<Props, {}> {
} }
} }
const mapStateToProps = (state: AppState) => {
return {
settingsVisible: state.settings.visible,
connectionId: state.connection.connectionId,
error: state.globalState.error,
highlightTopicUpdates: state.settings.highlightTopicUpdates,
}
}
const styles = (theme: Theme) => { const styles = (theme: Theme) => {
const drawerWidth = 300 const drawerWidth = 300
return { return {
@@ -151,4 +132,14 @@ const mapDispatchToProps = (dispatch: any) => {
} }
} }
const mapStateToProps = (state: AppState) => {
return {
settingsVisible: state.settings.visible,
connectionId: state.connection.connectionId,
error: state.globalState.error,
highlightTopicUpdates: state.settings.highlightTopicUpdates,
launching: state.globalState.launching,
}
}
export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(App)) export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(App))

11
app/src/actions/Global.ts
View File

@@ -1,13 +1,12 @@
import { ActionTypes, AppState, CustomAction } from '../reducers' import { ActionTypes, AppState, CustomAction } from '../reducers'
import { Dispatch } from 'redux'; import { Dispatch } from 'redux'
export const showError = (error?: string) => ({ export const showError = (error?: string) => ({
error, error,
type: ActionTypes.showError, type: ActionTypes.showError,
}) })
export const toggleTheme = () => (dispatch: Dispatch<CustomAction>, getState: () => AppState) => { export const didLaunch = () => ({
dispatch({ type: ActionTypes.didLaunch,
type: getState().globalState.theme === 'light' ? ActionTypes.setDarkTheme : ActionTypes.setLightTheme, })
})
}

2
app/src/actions/Publish.ts
View File

@@ -1,8 +1,8 @@
import { Action, ActionTypes } from '../reducers/Publish' import { Action, ActionTypes } from '../reducers/Publish'
import { AppState } from '../reducers' import { AppState } from '../reducers'
import { Base64Message } from '../../../backend/src/Model/Base64Message'
import { Dispatch } from 'redux' import { Dispatch } from 'redux'
import { makePublishEvent, rendererEvents } from '../../../events' import { makePublishEvent, rendererEvents } from '../../../events'
import { Base64Message } from '../../../backend/src/Model/Base64Message';
export const setTopic = (topic?: string): Action => { export const setTopic = (topic?: string): Action => {
return { return {

3
app/src/actions/Settings.ts
View File

@@ -11,9 +11,9 @@ import {
ActionTypes, ActionTypes,
SettingsState, SettingsState,
TopicOrder, TopicOrder,
Action,
} from '../reducers/Settings' } from '../reducers/Settings'
import { Base64Message } from '../../../backend/src/Model/Base64Message'; import { Base64Message } from '../../../backend/src/Model/Base64Message';
import { globalActions } from '.';
const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = { const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
id: 'Settings', id: 'Settings',
@@ -29,6 +29,7 @@ export const loadSettings = () => async (dispatch: Dispatch<any>, _getState: ()
} catch (error) { } catch (error) {
dispatch(showError(error)) dispatch(showError(error))
} }
dispatch(globalActions.didLaunch())
} }
export const storeSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => { export const storeSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {

3
app/src/components/BrokerStatistics.tsx
View File

@@ -6,6 +6,7 @@ import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
import { TopicViewModel } from '../TopicViewModel' import { TopicViewModel } from '../TopicViewModel'
import { Typography } from '@material-ui/core' import { Typography } from '@material-ui/core'
import { Base64Message } from '../../../backend/src/Model/Base64Message'; import { Base64Message } from '../../../backend/src/Model/Base64Message';
import lime from '@material-ui/core/colors/teal'
const abbreviate = require('number-abbreviate') const abbreviate = require('number-abbreviate')
@@ -22,7 +23,7 @@ const styles: StyleRulesCallback = theme => ({
container: { container: {
width: '100%', width: '100%',
height: '224px', height: '224px',
backgroundColor: 'rebeccapurple', backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb',
marginBottom: 0, marginBottom: 0,
padding: '8px', padding: '8px',
}, },

8
app/src/components/CodeBlockColors.ts Normal file
View File

@@ -0,0 +1,8 @@
export enum CodeBlockColors {
text = "#080808",
background = "#F9F9F9",
numeric = "#811F24",
boolean = "#811F24",
string = "#0B6125",
variable = "#234A97"
}

28
app/src/components/CodeDiff.tsx
View File

@@ -4,6 +4,7 @@ import * as React from 'react'
import { Theme, withStyles } from '@material-ui/core' import { Theme, withStyles } from '@material-ui/core'
import 'prismjs/components/prism-json' import 'prismjs/components/prism-json'
import 'prismjs/themes/prism-tomorrow.css' import 'prismjs/themes/prism-tomorrow.css'
import { CodeBlockColors } from './CodeBlockColors';
interface Props { interface Props {
previous: string previous: string
@@ -44,7 +45,7 @@ class CodeDiff extends React.Component<Props, {}> {
}) })
return ( return (
<div> <div style={{ backgroundColor: '#ebebeb' }}>
<pre className={`language-json ${this.props.classes.codeBlock}`}> <pre className={`language-json ${this.props.classes.codeBlock}`}>
{code} {code}
</pre> </pre>
@@ -99,6 +100,7 @@ const style = (theme: Theme) => {
} }
const before = { const before = {
margin: '0 2px 0 -9px', margin: '0 2px 0 -9px',
color: CodeBlockColors.text,
} }
return { return {
additions: { additions: {
@@ -113,7 +115,29 @@ const style = (theme: Theme) => {
codeBlock: { codeBlock: {
fontSize: '12px', fontSize: '12px',
maxHeight: '200px', maxHeight: '200px',
marginLeft: '-16px', marginLeft: '33px !important',
backgroundColor: `${CodeBlockColors.background} !important`,
'& .token.number': {
color: CodeBlockColors.numeric,
},
'& .token.boolean': {
color: CodeBlockColors.numeric,
},
'& .token.property': {
color: CodeBlockColors.variable,
},
'& .token.string': {
color: CodeBlockColors.string,
},
'& .token': {
color: CodeBlockColors.text,
},
'& .token.operator': {
color: CodeBlockColors.text,
},
'& .token.punctuation': {
color: CodeBlockColors.text,
},
}, },
noChange: { noChange: {
...baseStyle, ...baseStyle,

8
app/src/components/ConnectionHealthIndicator.tsx
View File

@@ -12,11 +12,15 @@ const styles: StyleRulesCallback = theme => ({
color: red[700], color: red[700],
}, },
online: { online: {
color: green[500], color: green[400],
}, },
connecting: { connecting: {
color: orange[600], color: orange[600],
}, },
icon: {
boxShadow: theme.shadows[10],
padding: '4px', borderRadius: '50%', backgroundColor: '#eee'
}
}) })
interface Props { interface Props {
@@ -38,7 +42,9 @@ class ConnectionHealthIndicator extends React.Component<Props, {}> {
return ( return (
<Tooltip title={`Connection health "${health}"`}> <Tooltip title={`Connection health "${health}"`}>
<div className={classes.icon}>
<DeviceHubOutlined className={classes[health]} /> <DeviceHubOutlined className={classes[health]} />
</div>
</Tooltip> </Tooltip>
) )
} }

28
app/src/components/ContentView.tsx Normal file
View File

@@ -0,0 +1,28 @@
import * as React from 'react'
import SplitPane from 'react-split-pane'
import { Sidebar } from './Sidebar'
import Tree from './Tree/Tree';
export default function ContentView(props: {heightProperty: any, paneDefaults: any, connectionId: any}) {
return (
<SplitPane
step={20}
primary="second"
className={props.heightProperty}
split="vertical"
minSize={250}
defaultSize={500}
resizerStyle={{ width: '2px', margin: '0 -10px 0 0px' }}
allowResize={true}
style={{ position: 'relative' }}
pane1Style={{ overflow: 'hidden' }}
>
<div className={props.paneDefaults}>
<Tree />
</div>
<div className={props.paneDefaults}>
<Sidebar connectionId={props.connectionId} />
</div>
</SplitPane>
)
}

11
app/src/components/Sidebar/History.tsx
View File

@@ -14,6 +14,7 @@ interface Props {
onClick?: (index: number, element: EventTarget) => void onClick?: (index: number, element: EventTarget) => void
classes: any classes: any
contentTypeIndicator?: JSX.Element contentTypeIndicator?: JSX.Element
theme: Theme
} }
interface State { interface State {
@@ -30,7 +31,7 @@ class MessageHistory extends React.Component<Props, State> {
public renderHistory() { public renderHistory() {
const style = (element: HistoryItem) => ({ const style = (element: HistoryItem) => ({
backgroundColor: element.selected ? 'rgba(120, 120, 120, 0.6)' : 'rgba(80, 80, 80, 0.6)', backgroundColor: element.selected ? this.props.theme.palette.action.selected : this.props.theme.palette.action.hover,
margin: '8px', margin: '8px',
padding: '8px 8px 0 8px', padding: '8px 8px 0 8px',
cursor: this.props.onClick ? 'pointer' : 'inherit', cursor: this.props.onClick ? 'pointer' : 'inherit',
@@ -53,7 +54,7 @@ class MessageHistory extends React.Component<Props, State> {
const visible = this.props.items.length > 0 && this.state.collapsed const visible = this.props.items.length > 0 && this.state.collapsed
return ( return (
<div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}> <div className={this.props.classes.main}>
<Typography <Typography
component={'span'} component={'span'}
onClick={this.toggle} onClick={this.toggle}
@@ -93,7 +94,11 @@ class MessageHistory extends React.Component<Props, State> {
} }
const styles = (theme: Theme) => ({ const styles = (theme: Theme) => ({
main: {
backgroundColor: 'rgba(170, 170, 170, 0.2)',
marginTop: '16px',
},
badge: { right:'-25px' }, badge: { right:'-25px' },
}) })
export default withStyles(styles)(MessageHistory) export default withStyles(styles, { withTheme: true })(MessageHistory)

8
app/src/components/Sidebar/Publish/Publish.tsx
View File

@@ -3,6 +3,7 @@ import 'brace/mode/json'
import 'brace/mode/text' import 'brace/mode/text'
import 'brace/mode/xml' import 'brace/mode/xml'
import 'brace/theme/monokai' import 'brace/theme/monokai'
import 'brace/theme/dawn'
import * as React from 'react' import * as React from 'react'
import * as q from '../../../../../backend/src/Model' import * as q from '../../../../../backend/src/Model'
@@ -20,6 +21,8 @@ import {
MenuItem, MenuItem,
Tooltip, Tooltip,
Fab, Fab,
Theme,
withTheme,
} from '@material-ui/core' } from '@material-ui/core'
// tslint:disable-next-line // tslint:disable-next-line
@@ -45,6 +48,7 @@ interface Props {
retain: boolean retain: boolean
editorMode: string editorMode: string
qos: 0 | 1 | 2 qos: 0 | 1 | 2
theme: Theme
} }
interface State { interface State {
@@ -310,7 +314,7 @@ class Publish extends React.Component<Props, State> {
return ( return (
<AceEditor <AceEditor
mode={this.props.editorMode} mode={this.props.editorMode}
theme="monokai" theme={this.props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
name="UNIQUE_ID_OF_DIV" name="UNIQUE_ID_OF_DIV"
width="100%" width="100%"
height="200px" height="200px"
@@ -341,4 +345,4 @@ const mapStateToProps = (state: AppState) => {
} }
} }
export default connect(mapStateToProps, mapDispatchToProps)(Publish) export default withTheme(connect(mapStateToProps, mapDispatchToProps)(Publish))

5
app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
View File

@@ -2,10 +2,10 @@ import * as q from '../../../../../backend/src/Model'
import * as React from 'react' import * as React from 'react'
import CodeDiff from '../../CodeDiff' import CodeDiff from '../../CodeDiff'
import { AppState } from '../../../reducers' import { AppState } from '../../../reducers'
import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { default as ReactResizeDetector } from 'react-resize-detector' import { default as ReactResizeDetector } from 'react-resize-detector'
import { ValueRendererDisplayMode } from '../../../reducers/Settings' import { ValueRendererDisplayMode } from '../../../reducers/Settings'
import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
interface Props { interface Props {
message: q.Message message: q.Message
@@ -42,7 +42,6 @@ class ValueRenderer extends React.Component<Props, State> {
if (renderMode === 'raw') { if (renderMode === 'raw') {
compareMessage = message compareMessage = message
} }
if (!message.value) { if (!message.value) {
return null return null
} }
@@ -69,7 +68,7 @@ class ValueRenderer extends React.Component<Props, State> {
const compare = this.messageToPrettyJson(compareStr) || compareStr const compare = this.messageToPrettyJson(compareStr) || compareStr
const language = current && compare ? 'json' : undefined const language = current && compare ? 'json' : undefined
return this.renderDiff(str, compareStr, language) return this.renderDiff(current, compare, language)
} }
} }

6
app/src/components/TitleBar.tsx
View File

@@ -69,6 +69,10 @@ const styles: StyleRulesCallback = theme => ({
marginLeft: -12, marginLeft: -12,
marginRight: 20, marginRight: 20,
}, },
disconnect: {
margin: 'auto 8px auto auto',
color: theme.palette.primary.contrastText,
}
}) })
interface Props { interface Props {
@@ -97,7 +101,7 @@ class TitleBar extends React.Component<Props, {}> {
</IconButton> </IconButton>
<Typography className={classes.title} variant="h6" color="inherit">MQTT Explorer</Typography> <Typography className={classes.title} variant="h6" color="inherit">MQTT Explorer</Typography>
{this.renderSearch()} {this.renderSearch()}
<Button style={{ margin: 'auto 8px auto auto' }} onClick={actions.connection.disconnect}> <Button className={classes.disconnect} onClick={actions.connection.disconnect}>
Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/> Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/>
</Button> </Button>
<ConnectionHealthIndicator /> <ConnectionHealthIndicator />

10
app/src/components/Tree/TreeNode.tsx
View File

@@ -32,10 +32,10 @@ const styles = (theme: Theme) => {
marginLeft: theme.spacing(1.5), marginLeft: theme.spacing(1.5),
}, },
selected: { selected: {
backgroundColor: 'rgba(170, 170, 170, 0.55)', backgroundColor: theme.palette.type === 'dark' ? 'rgba(170, 170, 170, 0.55)' : 'rgba(170, 170, 170, 0.55)',
}, },
hover: { hover: {
backgroundColor: 'rgba(100, 100, 100, 0.55)', backgroundColor: theme.palette.type === 'dark' ? 'rgba(100, 100, 100, 0.55)' : 'rgba(200, 200, 200, 0.55)',
}, },
} }
} }
@@ -55,6 +55,7 @@ interface Props {
didSelectTopic: any didSelectTopic: any
highlightTopicUpdates: boolean highlightTopicUpdates: boolean
selectTopicWithMouseOver: boolean selectTopicWithMouseOver: boolean
theme: Theme
} }
interface State { interface State {
@@ -184,7 +185,8 @@ class TreeNode extends React.Component<Props, State> {
this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates
const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {} const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark'
const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` } : {}
this.animationDirty = shouldStartAnimation this.animationDirty = shouldStartAnimation
const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '') const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
@@ -269,4 +271,4 @@ class TreeNode extends React.Component<Props, State> {
} }
} }
export default withStyles(styles)(TreeNode) export default withStyles(styles, { withTheme: true })(TreeNode)

27
app/src/index.tsx
View File

@@ -9,6 +9,16 @@ import { batchDispatchMiddleware } from 'redux-batched-actions'
import { createMuiTheme, MuiThemeProvider, Theme } from '@material-ui/core/styles' import { createMuiTheme, MuiThemeProvider, Theme } from '@material-ui/core/styles'
import { Provider, connect } from 'react-redux' import { Provider, connect } from 'react-redux'
import './tracking' import './tracking'
import blue from '@material-ui/core/colors/blue'
import red from '@material-ui/core/colors/red'
import pink from '@material-ui/core/colors/pink'
import orange from '@material-ui/core/colors/orange'
import deepOrange from '@material-ui/core/colors/deepOrange'
import indigo from '@material-ui/core/colors/indigo'
import lime from '@material-ui/core/colors/lime'
import green from '@material-ui/core/colors/green'
import teal from '@material-ui/core/colors/teal'
import amber from '@material-ui/core/colors/amber'
const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
const store = createStore( const store = createStore(
@@ -21,14 +31,6 @@ const store = createStore(
), ),
) )
setTimeout(() => {
const splash = document.getElementById('splash')
if (splash) {
splash.style.animation = 'unsplash 0.5s ease-in 0s 1 normal forwards'
setTimeout(() => splash.remove(), 600)
}
}, 300)
function createTheme(type: 'light' | 'dark') { function createTheme(type: 'light' | 'dark') {
if (type === 'dark') { if (type === 'dark') {
return createMuiTheme({ return createMuiTheme({
@@ -40,6 +42,15 @@ function createTheme(type: 'light' | 'dark') {
return createMuiTheme({ return createMuiTheme({
palette: { palette: {
type: 'light', type: 'light',
background: {
default: '#fafafa',
},
primary: teal,
secondary: amber,
// error: red,
action: {
disabledBackground: '#fafafa',
},
}, },
}) })
} }

1
app/src/reducers/Settings.ts
View File

@@ -68,6 +68,7 @@ export const settingsReducer = createReducer(initialState, {
export interface SetTheme { export interface SetTheme {
type: ActionTypes.SETTINGS_SET_THEME_LIGHT | ActionTypes.SETTINGS_SET_THEME_DARK type: ActionTypes.SETTINGS_SET_THEME_LIGHT | ActionTypes.SETTINGS_SET_THEME_DARK
theme: 'light'
} }
export interface DidLoadSettings { export interface DidLoadSettings {

13
app/src/reducers/index.ts
View File

@@ -10,8 +10,7 @@ export enum ActionTypes {
showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION', showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
showUpdateDetails = 'SHOW_UPDATE_DETAILS', showUpdateDetails = 'SHOW_UPDATE_DETAILS',
showError = 'SHOW_ERROR', showError = 'SHOW_ERROR',
setDarkTheme = 'GLOBAL_SET_DARK_THEME', didLaunch = 'DID_LAUNCH',
setLightTheme = 'GLOBAL_SET_LIGHT_THEME',
} }
export interface CustomAction extends Action { export interface CustomAction extends Action {
@@ -34,10 +33,12 @@ export interface GlobalState {
showUpdateNotification?: boolean showUpdateNotification?: boolean
showUpdateDetails: boolean showUpdateDetails: boolean
error?: string error?: string
launching: boolean
} }
const initialGlobalState: GlobalState = { const initialGlobalState: GlobalState = {
showUpdateDetails: false, showUpdateDetails: false,
launching: true,
} }
const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = initialGlobalState, action) => { const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = initialGlobalState, action) => {
@@ -45,7 +46,7 @@ const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = ini
throw Error('No initial state') throw Error('No initial state')
} }
trackEvent(action.type) trackEvent(action.type)
console.log(action.type)
switch (action.type) { switch (action.type) {
case ActionTypes.showUpdateNotification: case ActionTypes.showUpdateNotification:
return { return {
@@ -59,6 +60,12 @@ const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = ini
error: action.error, error: action.error,
} }
case ActionTypes.didLaunch:
return {
...state,
launching: false,
}
case ActionTypes.showUpdateDetails: case ActionTypes.showUpdateDetails:
if (action.showUpdateDetails === undefined) { if (action.showUpdateDetails === undefined) {
return state return state