Skip to content

Commit

Permalink
feat: Load appbar and menu only when not in live mode
Browse files Browse the repository at this point in the history
  • Loading branch information
TimSusa committed Aug 2, 2020
1 parent c2b737e commit 6e2743b
Show file tree
Hide file tree
Showing 7 changed files with 795 additions and 750 deletions.
96 changes: 65 additions & 31 deletions packages/midi-bricks/src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,74 @@
import { Drawer } from '@material-ui/core'
import React, { useState } from 'react'
// import { Drawer } from '@material-ui/core'
import React, { useState, Suspense } from 'react'
import Home from './pages/Home'
import { useTheme } from '@material-ui/styles'
import MenuAppBar from './components/menu-app-bar/MenuAppBar'
import DrawerList from './components/drawer-list/DrawerList'
// import MenuAppBar from './components/menu-app-bar/MenuAppBar'
// import DrawerList from './components/drawer-list/DrawerList'
import Footer from './components/footer/Footer'
import { makeStyles } from '@material-ui/styles'
import { connect } from 'react-redux'

export default App
// export default App

function App() {
export default connect(mapStateToProps)(App)

function App({ isLiveMode }) {
const theme = useTheme()
const classes = makeStyles(styles.bind(this, theme))()
const [isMobileOpen, setIsMobileOpen] = useState(false)

return (
<div className={classes.root}>
<div className={classes.appBar}>
<MenuAppBar handleDrawerToggle={() => setIsMobileOpen(!isMobileOpen)} />
<Drawer
variant='temporary'
anchor={'left'}
open={isMobileOpen}
classes={{
paper: classes.drawerPaper
}}
onClose={() => setIsMobileOpen(!isMobileOpen)}
>
<DrawerList
onFileChange={() => setIsMobileOpen(false)}
handleSaveFile={() => setIsMobileOpen(false)}
handleResetSliders={() => setIsMobileOpen(false)}
classes={classes}
onClose={() => setIsMobileOpen(!isMobileOpen)}
/>
</Drawer>
<Home />
if (!isLiveMode) {
const MenuAppBar = React.lazy(() =>
import('./components/menu-app-bar/MenuAppBar.jsx')
)
const Drawer = React.lazy(() =>
import('./components/drawer-list/DrawerLoader.jsx')
)
const DrawerList = React.lazy(() =>
import('./components/drawer-list/DrawerList.jsx')
)

return (
<div className={classes.root}>
<div className={classes.appBar}>
<Suspense fallback={<div>Loading...</div>}>
<MenuAppBar
handleDrawerToggle={() => setIsMobileOpen(!isMobileOpen)}
/>
<Drawer
variant='temporary'
anchor={'left'}
open={isMobileOpen}
classes={{
paper: classes.drawerPaper
}}
onClose={() => setIsMobileOpen(!isMobileOpen)}
>
<DrawerList
onFileChange={() => setIsMobileOpen(false)}
handleSaveFile={() => setIsMobileOpen(false)}
handleResetSliders={() => setIsMobileOpen(false)}
classes={classes}
onClose={() => setIsMobileOpen(!isMobileOpen)}
/>
</Drawer>
</Suspense>
<Home />

<Footer />
<Footer />
</div>
</div>
</div>
)
)
} else {
return (
<div className={classes.root}>
<div className={classes.appBar}>
<Home />
<Footer />
</div>
</div>
)
}
}

function styles(theme) {
Expand Down Expand Up @@ -82,3 +110,9 @@ function styles(theme) {
}
}
}

function mapStateToProps({ viewSettings: { isLiveMode } }) {
return {
isLiveMode
}
}
267 changes: 1 addition & 266 deletions packages/midi-bricks/src/components/drawer-list/DrawerList.jsx
Original file line number Diff line number Diff line change
@@ -1,266 +1 @@
import {
Divider,
List,
ListItem,
ListItemText,
ListItemIcon
} from '@material-ui/core'
import SaveIcon from '@material-ui/icons/Save'
import HomeIcon from '@material-ui/icons/Home'
import GlobalIcon from '@material-ui/icons/Public'
import ViewIcon from '@material-ui/icons/ViewCarousel'
import DeleteIcon from '@material-ui/icons/Delete'
import VersionIcon from '@material-ui/icons/FormatListNumberedRtl'
import IconDriverSettings from '@material-ui/icons/SettingsInputSvideo'
import React, { useState } from 'react'
import DeleteModal from '../DeleteModal'
import ViewSettingsDialog from '../ApplicationSettingsDialog'
import { ListItemLoadFileOnElectron } from './ListItemLoadFileOnElectron'
import { ListItemSaveFileOnElectron } from './ListItemSaveFileOnElectron'
import { ListItemLoadFileOnWeb } from './ListItemLoadFileOnWeb'
import { PAGE_TYPES } from '../../reducers'
import { PropTypes } from 'prop-types'

import { bindActionCreators } from 'redux'
import { thunkLoadFile } from '../../actions/thunks/thunk-load-file'
import { thunkDelete } from '../../actions/thunks/thunk-delete'
import { thunkLiveModeToggle } from '../../actions/thunks/thunk-live-mode-toggle'
import { Actions as MidiSliderActions } from '../../actions/slider-list'
import { Actions as ViewSettingsActions } from '../../actions/view-settings'
import { connect } from 'react-redux'

const version = process.env.REACT_APP_VERSION || 'dev'

export default connect(
mapStateToProps,
mapDispatchToProps
)(DrawerList)

DrawerList.propTypes = {
classes: PropTypes.object,
deleteAll: PropTypes.func,
deleteFooterPages: PropTypes.func,
thunkLoadFile: PropTypes.func,
thunkDelete: PropTypes.func,
handleResetSliders: PropTypes.func,
handleResetSlidersTmp: PropTypes.func,
handleSaveFile: PropTypes.func,
handleSaveFileTmp: PropTypes.func,
onClose: PropTypes.func,
onFileChange: PropTypes.func,
saveFile: PropTypes.func,
sliders: PropTypes.object,
pages: PropTypes.object,
togglePage: PropTypes.func,
viewSettings: PropTypes.object
}

function DrawerList(props) {
const {
classes,
togglePage,
saveFile,
onFileChange,
deleteAll,
deleteFooterPages,
handleSaveFile: handleSaveFileTmp,
handleResetSliders: handleResetSlidersTmp,
pages,
viewSettings,
sliders,
thunkLoadFile,
thunkDelete,
} = props
const [open, setOpen] = useState(false)
const [isOpenViewSettings, setIsOpenViewSettings] = useState(false)
return (
<React.Fragment>
<div className={classes.drawerHeader} />
<Divider />
<List>
<ListItem
button
onClick={() =>
togglePage({
pageType: PAGE_TYPES.HOME_MODE
})
}
>
<ListItemIcon className={classes.iconColor}>
<HomeIcon />
</ListItemIcon>
<ListItemText primary='Main' />
</ListItem>
<ListItem
button
onClick={() =>
togglePage({
pageType: PAGE_TYPES.GLOBAL_MODE
})
}
>
<ListItemIcon className={classes.iconColor}>
<GlobalIcon />
</ListItemIcon>
<ListItemText primary='Controllers' />
</ListItem>

<ListItem
button
onClick={() =>
togglePage({
pageType: PAGE_TYPES.MIDI_DRIVER_MODE
})
}
>
<ListItemIcon className={classes.iconColor}>
<IconDriverSettings />
</ListItemIcon>
<ListItemText primary='Drivers' />
</ListItem>

<ListItem
button
onClick={
!isOpenViewSettings
? (e) => {
setIsOpenViewSettings(!isOpenViewSettings)
}
: () => {}
}
>
<ListItemIcon className={classes.iconColor}>
<ViewIcon />
</ListItemIcon>
<ListItemText primary='Preferences' />
<ViewSettingsDialog
isOpen={isOpenViewSettings}
onClose={(e) => {
setIsOpenViewSettings(!isOpenViewSettings)
props.onClose()
}}
iconColor={classes.iconColor}
/>
</ListItem>
</List>
<Divider />
<List>
{process.env.REACT_APP_IS_WEB_MODE === 'true' ? (
<ListItemLoadFileOnWeb
onFileChange={(e) =>
handleFileChange(e, thunkLoadFile, onFileChange)
}
iconColor={classes.iconColor}
/>
) : (
<ListItemLoadFileOnElectron
onFileChange={(e) =>
handleFileChange(e, thunkLoadFile, onFileChange)
}
iconColor={classes.iconColor}
/>
)}
</List>
<List>
{process.env.REACT_APP_IS_WEB_MODE === 'true' ? (
<ListItem
button
onClick={handleSaveFile.bind(
this,
saveFile,
handleSaveFileTmp,
pages,
viewSettings,
sliders,
version
)}
>
<ListItemIcon className={classes.iconColor}>
<SaveIcon />
</ListItemIcon>
<ListItemText primary='Save Preset' />
</ListItem>
) : (
<ListItemSaveFileOnElectron
onFileChange={(e) =>
handleFileChange(e, thunkLoadFile, onFileChange)
}
iconColor={classes.iconColor}
/>
)}
<ListItem button onClick={() => setOpen(!open)}>
<ListItemIcon className={classes.iconColor}>
<DeleteIcon />
</ListItemIcon>
<ListItemText primary='Delete All' />
<DeleteModal
isOpen={open}
asButton={false}
sliderEntry={{
i: 'me'
}}
onAction={handleResetSliders.bind(
this,
thunkDelete,
handleResetSlidersTmp,
deleteAll,
deleteFooterPages
)}
onClose={setOpen}
/>
</ListItem>
<ListItem>
<ListItemIcon className={classes.iconColor}>
<VersionIcon />
</ListItemIcon>
<ListItemText primary={`${version}`} />
</ListItem>
</List>
<Divider />
</React.Fragment>
)
}

function handleResetSliders(thunkDelete, cb, deleteAll, deleteFooterPages) {
cb()
return thunkDelete('all')
}

function handleSaveFile(saveFile, handleSaveFile, pages, viewSettings, sliders) {
saveFile({
pages,
viewSettings,
sliders,
version
})
handleSaveFile()
}

function mapStateToProps({ pages, viewSettings, sliders, version }) {
return {
pages: pages,
viewSettings,
sliders
}
}

function mapDispatchToProps(dispatch) {
const { togglePage, saveFile, deleteFooterPages, deleteAll } = {
...MidiSliderActions,
...ViewSettingsActions
}
return {
togglePage: bindActionCreators(togglePage, dispatch),
saveFile: bindActionCreators(saveFile, dispatch),
deleteFooterPages: bindActionCreators(deleteFooterPages, dispatch),
deleteAll: bindActionCreators(deleteAll, dispatch),
thunkLoadFile: bindActionCreators(thunkLoadFile, dispatch),
thunkDelete: bindActionCreators(thunkDelete, dispatch),
thunkLiveModeToggle: bindActionCreators(thunkLiveModeToggle, dispatch)
}
}

async function handleFileChange(content, thunkLoadFile, cb) {
await thunkLoadFile(content.content, content.presetName)
cb(content.content, content.presetName)
}
export { DrawerList as default } from './DrawerListCmp'
Loading

0 comments on commit 6e2743b

Please sign in to comment.