fix: Multi-Copy-Workflow hardened

packages/midi-bricks/src/actions/thunks/thunk-add-element.js

@@ -5,41 +5,41 @@ import { STRIP_TYPE } from '../../reducers/slider-list'
 
 const { PAGE } = STRIP_TYPE
 const { addPage, addMidiElement, setMidiPage } = sliderListActions
-const { setLastFocusedPage, setLastFocusedIndex, addPageTarget } = viewSettingsActions
+const { setLastFocusedIndex, addPageTarget } = viewSettingsActions
 
 export function addElement(type, payload) {
   return async function(dispatch, getState) {
+    const {
+      viewSettings: { lastFocusedPage, pageTargets }
+    } = getState()
+
     if (type === PAGE) {
-      await createPage(dispatch, getState)
+      await createPage(dispatch, lastFocusedPage, pageTargets)
     } else {
-      const {
-        viewSettings: { lastFocusedPage },
-      } = getState()
-      await dispatch(addMidiElement({ lastFocusedPage, type, id: getUniqueId() }))
+      await dispatch(
+        addMidiElement({ lastFocusedPage, type, id: getUniqueId() })
+      )
     }
   }
 }
 
-function createPage(dispatch, getState) {
+function createPage(dispatch, lastFocusedPage, pageTargets) {
   const pageId = `page-${getUniqueId()}`
 
-  const { viewSettings } = getState()
-
   return Promise.all([
-    dispatch(addPage({ id: pageId, lastFocusedPage: viewSettings.lastFocusedPage })),
+    dispatch(setLastFocusedIndex({ i: 'none' })),
     dispatch(
       addPageTarget({
         pageTarget: {
           id: pageId,
-          label: Array.isArray(viewSettings.pageTargets)
-            ? `Page ${viewSettings.pageTargets.length + 1}`
+          label: Array.isArray(pageTargets)
+            ? `Page ${pageTargets.length + 1}`
             : 'Page',
           colors: { colorFont: '#123456', color: '#dddddd' }
         }
       })
     ),
-    dispatch(setLastFocusedPage({ lastFocusedPage: pageId })),
-    dispatch(setLastFocusedIndex({i: 'none'})),
-    //dispatch(setMidiPage({focusedPage: pageId, lastFocusedPage: viewSettings.lastFocusedPage}))
+    dispatch(addPage({ id: pageId, lastFocusedPage })),
+    dispatch(setMidiPage({ focusedPage: pageId }))
   ])
 }

packages/midi-bricks/src/actions/thunks/thunk-copy-to-next-page.js

@@ -1,12 +1,12 @@
 import { Actions as sliderListActions } from '../slider-list'
 import { Actions as viewSettingsActions } from '../view-settings'
-const { copyToNextPage, setMidiPage } = sliderListActions
-const { setLastFocusedPage } = viewSettingsActions
+const { copyToNextPage } = sliderListActions
+const { setLastFocusedPage,setLastFocusedIndex, toggleSettingsMode } = viewSettingsActions
 
 export function thunkCopyToNextPage(payload) {
   return async function(dispatch, getState) {
     const {
-      viewSettings: { lastFocusedIdxs, lastFocusedPage },
+      viewSettings: { lastFocusedIdxs },
       sliders: { pages }
     } = getState()
     const nextPageIdx = Object.keys(pages).reduce((acc, cur) => {
@@ -15,7 +15,9 @@ export function thunkCopyToNextPage(payload) {
     console.log('nexpage', nextPageIdx)
     return Promise.all([
       dispatch(copyToNextPage({ lastFocusedIdxs, nextPageIdx })),
-      dispatch(setLastFocusedPage({lastFocusedPage: nextPageIdx}))
+      dispatch(setLastFocusedIndex({i: 'none'})),
+      dispatch(setLastFocusedPage({lastFocusedPage: nextPageIdx})),
+      dispatch(toggleSettingsMode(false))
     ])
   }
 }

packages/midi-bricks/src/actions/thunks/thunk-load-file.js

@@ -1,29 +1,31 @@
 import { Actions as sliderListActions } from '../slider-list'
 import { Actions as viewSettingsActions } from '../view-settings'
 import { initApp } from '../init'
-import { PAGE_TYPES } from '../../reducers'
+
+import { initId } from '../../reducers/slider-list'
 
 const { loadFile, deleteAll } = sliderListActions
-const { togglePage, updateViewSettings } = viewSettingsActions
+const { updateViewSettings, setLastFocusedPage } = viewSettingsActions
 
 export function thunkLoadFile(content, presetName) {
-
   return async function(dispatch, getState) {
-    const {viewSettings: {lastFocusedPage}} = getState()
     let promArray = []
 
-    //promArray.push(dispatch(deleteAll()))
-    //window.localStorage.clear()
+    promArray.push(dispatch(deleteAll()))
+    window.localStorage.clear()
 
-    // will load content to slider-list-reducer
-    promArray.push(dispatch(loadFile({ presetName, content, lastFocusedPage })))
 
     const {
-      version = '',
       viewSettings = {},
       viewSettings: { availableDrivers } = {},
       sliders: { sliderList, pages } = {}
     } = content
+    promArray.push(
+      dispatch(loadFile({ presetName, content, lastFocusedPage: initId }))
+    )
+
+    promArray.push(dispatch(setLastFocusedPage({ lastFocusedPage: initId })))
+
     const drivers = availableDrivers || {
       inputs: {
         None: {
@@ -44,7 +46,7 @@ export function thunkLoadFile(content, presetName) {
       promArray.push(
         dispatch(
           updateViewSettings({
-            version,
+            // version,
             viewSettings: { ...viewSettings, availableDrivers: drivers },
             pages
           })
@@ -58,21 +60,14 @@ export function thunkLoadFile(content, presetName) {
       promArray.push(
         dispatch(
           updateViewSettings({
-            version,
+            // version,
             viewSettings: { ...viewSettings, availableDrivers: drivers },
             sliderList: sliderList,
             pages
           })
         )
       )
     promArray.push(dispatch(initApp()))
-    // promArray.push(
-    //   dispatch(
-    //     togglePage({
-    //       pageType: PAGE_TYPES.GLOBAL_MODE
-    //     })
-    //   )
-    // )
     return Promise.all(promArray)
   }
 }

packages/midi-bricks/src/components/channel-strip-list/ChannelStripList.jsx

@@ -111,7 +111,6 @@ function ChannelStripList(props) {
                   }
                   : () => {}
               }
-              onBlur={() => actions.setLastFocusedIndex({i: 'none'})}
               key={i}
               style={
                 (isMidiLearnMode || isSettingsMode) &&
@@ -211,6 +210,7 @@ function ChannelStripList(props) {
         <br />
         <Button
           onClick={() =>
+            // TODO: use thunkLoadFile
             props.actions.loadFile({ content: preset, presetName: 'APC-40 Preset' })
           }
         >

packages/midi-bricks/src/components/drawer-list/DrawerList.jsx

@@ -27,7 +27,7 @@ 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 || 'unknown'
+const version = process.env.REACT_APP_VERSION || 'dev'
 
 export default connect(
   mapStateToProps,
@@ -48,7 +48,6 @@ DrawerList.propTypes = {
   saveFile: PropTypes.func,
   sliders: PropTypes.object,
   togglePage: PropTypes.func,
-  version: PropTypes.string,
   viewSettings: PropTypes.object
 }
 
@@ -64,7 +63,6 @@ function DrawerList(props) {
     handleResetSliders: handleResetSlidersTmp,
     viewSettings,
     sliders,
-    version,
     thunkLoadFile
   } = props
   const [open, setOpen] = useState(false)

packages/midi-bricks/src/components/footer/FooterButton.jsx

@@ -55,7 +55,7 @@ export function FooterButton(props) {
 }
 
 function handleClick({ id, actions, lastFocusedPage }) {
-  actions.setMidiPage({ lastFocusedPage, focusedPage: id })
-  actions.setLastFocusedPage({ lastFocusedPage: id })
   actions.setLastFocusedIndex({i: 'none'})
+  actions.setLastFocusedPage({ lastFocusedPage: id })
+  actions.setMidiPage({focusedPage: id })
 }

packages/midi-bricks/src/components/menu-app-bar/MenuAppBar.jsx

@@ -96,7 +96,7 @@ function MenuAppBar(props) {
             isCompactHorz ? (
               <Tooltip disableHoverListener={false} title='Gravity horizontal'>
                 <IconButton
-                  onClick={actions.toggleCompactMode}
+                  onClick={e => actions.toggleCompactMode()}
                   className={classes.menuButton}
                   color='inherit'
                   aria-label='Menu'
@@ -107,7 +107,7 @@ function MenuAppBar(props) {
             ) : (
               <Tooltip disableHoverListener={false} title='Gravity vertical'>
                 <IconButton
-                  onClick={actions.toggleCompactMode}
+                  onClick={e => actions.toggleCompactMode()}
                   className={classes.menuButton}
                   color='inherit'
                   aria-label='Menu'
@@ -124,7 +124,7 @@ function MenuAppBar(props) {
             isAutoArrangeMode ? (
               <Tooltip disableHoverListener={false} title='Automatic Gravity'>
                 <IconButton
-                  onClick={actions.toggleAutoArrangeMode}
+                  onClick={e => actions.toggleAutoArrangeMode()}
                   className={classes.menuButton}
                   color='inherit'
                   aria-label='Menu'
@@ -135,7 +135,7 @@ function MenuAppBar(props) {
             ) : (
               <Tooltip disableHoverListener={false} title='Static Gravity'>
                 <IconButton
-                  onClick={actions.toggleAutoArrangeMode}
+                  onClick={e => actions.toggleAutoArrangeMode()}
                   className={classes.menuButton}
                   color='inherit'
                   aria-label='Menu'
@@ -160,14 +160,14 @@ function MenuAppBar(props) {
               <Button
                 className={classes.resetButton}
                 variant='contained'
-                onClick={actions.resetValues}
+                onClick={e => actions.resetValues()}
               >
                 Reset To Saved Values
               </Button>
               <Button
                 className={classes.resetButton}
                 variant='contained'
-                onClick={actions.triggerAllMidiElements}
+                onClick={e => actions.triggerAllMidiElements()}
               >
                 Trigger All MIDI
               </Button>
@@ -222,7 +222,7 @@ function MenuAppBar(props) {
                     lastFocusedIdxs.length > 1 ? (
                         <button
                           onClick={e => thunkCopyToNextPage()}
-                        >copy to next page</button>
+                        >copy to last page</button>
                       ) : (
                         <div />
                       )}

packages/midi-bricks/src/reducers/index.js

@@ -1,8 +1,7 @@
 import { combineReducers } from 'redux'
 import { generateReducers } from 'redux-generate'
-import { sliders } from './slider-list'
+import { sliders, initId } from './slider-list'
 import { viewSettings } from './view-settings'
-import { getUniqueId } from '../utils/get-unique-id'
 
 export const PAGE_TYPES = {
   HOME_MODE: 'HOME_MODE',
@@ -11,7 +10,6 @@ export const PAGE_TYPES = {
   VIEW_SETTINGS_MODE: 'VIEW_SETTINGS_MODE'
 }
 
-const id = `page-${getUniqueId()}`
 
 const initState = {
   columns: 18,
@@ -62,9 +60,9 @@ const initState = {
 }
 
 const pages = {
-  [id]: {
+  [initId]: {
     sliderList: [],
-    id,
+    initId,
     label: 'Page 1'
   }
 }
@@ -76,7 +74,7 @@ const slidersInitState = {
 
 export const viewSettingsInitState = {
   ...initState,
-  lastFocusedPage: id,
+  lastFocusedPage: initId,
   lastFocusedIdx: '',
   lastFocusedIdxs: [],
   pageTargets: [
@@ -85,8 +83,8 @@ export const viewSettingsInitState = {
         color: '#123456',
         colorFont: '#dddddd'
       },
-      id: id,
-      label: pages[id].label
+      id: initId,
+      label: pages[initId].label
     }
   ]
 }