From 6ed302dc98b60210a27cadea679b53ee394a6004 Mon Sep 17 00:00:00 2001 From: TimSusa Date: Fri, 31 May 2019 04:38:16 +0200 Subject: [PATCH] fix: Multi-Copy-Workflow hardened --- .../src/actions/thunks/thunk-add-element.js | 30 +++--- .../actions/thunks/thunk-copy-to-next-page.js | 10 +- .../src/actions/thunks/thunk-load-file.js | 31 +++--- .../channel-strip-list/ChannelStripList.jsx | 2 +- .../src/components/drawer-list/DrawerList.jsx | 4 +- .../src/components/footer/FooterButton.jsx | 4 +- .../components/menu-app-bar/MenuAppBar.jsx | 14 +-- packages/midi-bricks/src/reducers/index.js | 14 ++- .../midi-bricks/src/reducers/slider-list.js | 89 +++++++---------- .../midi-bricks/src/reducers/view-settings.js | 99 +++++++++++++------ 10 files changed, 157 insertions(+), 140 deletions(-) diff --git a/packages/midi-bricks/src/actions/thunks/thunk-add-element.js b/packages/midi-bricks/src/actions/thunks/thunk-add-element.js index a25ab76d9..81cd4ccb8 100644 --- a/packages/midi-bricks/src/actions/thunks/thunk-add-element.js +++ b/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 })) ]) } diff --git a/packages/midi-bricks/src/actions/thunks/thunk-copy-to-next-page.js b/packages/midi-bricks/src/actions/thunks/thunk-copy-to-next-page.js index c5a9c681f..a42b9e9b5 100644 --- a/packages/midi-bricks/src/actions/thunks/thunk-copy-to-next-page.js +++ b/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)) ]) } } diff --git a/packages/midi-bricks/src/actions/thunks/thunk-load-file.js b/packages/midi-bricks/src/actions/thunks/thunk-load-file.js index a701ca706..3e8f6c188 100644 --- a/packages/midi-bricks/src/actions/thunks/thunk-load-file.js +++ b/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,7 +60,7 @@ export function thunkLoadFile(content, presetName) { promArray.push( dispatch( updateViewSettings({ - version, + // version, viewSettings: { ...viewSettings, availableDrivers: drivers }, sliderList: sliderList, pages @@ -66,13 +68,6 @@ export function thunkLoadFile(content, presetName) { ) ) promArray.push(dispatch(initApp())) - // promArray.push( - // dispatch( - // togglePage({ - // pageType: PAGE_TYPES.GLOBAL_MODE - // }) - // ) - // ) return Promise.all(promArray) } } diff --git a/packages/midi-bricks/src/components/channel-strip-list/ChannelStripList.jsx b/packages/midi-bricks/src/components/channel-strip-list/ChannelStripList.jsx index 3d0de1997..a363429cc 100644 --- a/packages/midi-bricks/src/components/channel-strip-list/ChannelStripList.jsx +++ b/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) {
@@ -222,7 +222,7 @@ function MenuAppBar(props) { lastFocusedIdxs.length > 1 ? ( + >copy to last page ) : (
)} diff --git a/packages/midi-bricks/src/reducers/index.js b/packages/midi-bricks/src/reducers/index.js index 31cea0f25..7044f40c4 100644 --- a/packages/midi-bricks/src/reducers/index.js +++ b/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 } ] } diff --git a/packages/midi-bricks/src/reducers/slider-list.js b/packages/midi-bricks/src/reducers/slider-list.js index 7f18798fb..d40d60699 100644 --- a/packages/midi-bricks/src/reducers/slider-list.js +++ b/packages/midi-bricks/src/reducers/slider-list.js @@ -7,6 +7,8 @@ import { map, groupBy } from 'lodash' import { getUniqueId } from '../utils/get-unique-id' import { createNextState } from 'redux-starter-kit' +export const initId = `page-${getUniqueId()}` + export const STRIP_TYPE = { BUTTON: 'BUTTON', BUTTON_TOGGLE: 'BUTTON_TOGGLE', @@ -90,21 +92,15 @@ export const sliders = { [ActionTypeSliderList.ADD_PAGE](state, action) { const { lastFocusedPage, id } = action.payload - return createNextState(state, draftState => { + return createNextState(state, (draftState) => { draftState.sliderList = [] draftState.pages[id] = { sliderList: [], id, - label: 'not' + label: `Page ${Object.keys(state.pages).length + 1}` } return draftState }) - // console.log('SAF', nextState) - // return nextState - // if (!Array.isArray(sliderList)) { - // // throw new TypeError('sliderlist comes wihtout array') - // } - //return updatePagesWithSliderlist(state, state.sliderList, id) }, [ActionTypeSliderList.COPY_TO_NEXT_PAGE](state, action) { @@ -113,7 +109,10 @@ export const sliders = { const entries = Object.keys(state.pages).reduce((acc, cur) => { const foundEntries = state.pages[cur].sliderList.map((item) => { if (lastFocusedIdxs.includes(item.i)) { - return item + return { + ...item, + i: getUniqueId() + } } }) if (foundEntries) { @@ -229,13 +228,14 @@ export const sliders = { return updatePagesWithSliderlist(newTmp, sliderList, lastFocusedPage) }, [ActionTypeSliderList.DELETE_ALL](state, action) { - return { - ...state, - sliderList: [], - pages: {}, - presetName: '', - sliderListBackup: state.sliderList - } + return createNextState(state, (draftState) => { + draftState.sliderList = [] + draftState.pages = {} + draftState.pages = initPages([], initId) + draftState.presetName = '' + draftState.sliderListBackup = state.sliderList + return draftState + }) }, [ActionTypeSliderList.HANDLE_SLIDER_CHANGE](state, action) { @@ -542,8 +542,6 @@ export const sliders = { return state }, [ActionTypeSliderList.LOAD_FILE](state, action) { - - // return { // ...state, // ...sliders, @@ -553,23 +551,15 @@ export const sliders = { return createNextState(state, (draftState) => { const { payload: { - lastFocusedPage, - presetName, - content, - content: { sliders } = {} + // lastFocusedPage, + // presetName, + content: { sliders: { sliderList, pages } } = {} } = {} } = action - // draftState = sliders - draftState.sliderList = sliders.sliderList - draftState.pages = { - ...sliders.pages, - [lastFocusedPage]: { - ...state.pages[lastFocusedPage], - sliderList: sliders.sliderList - //...sliders.pages[lastFocusedPage] - } - } + draftState.pages = pages || initPages(sliderList, initId) + //draftState.pages[id].sliderList = sliderList + draftState.sliderList = sliderList return draftState }) @@ -909,33 +899,16 @@ export const sliders = { [ActionTypeSliderList.SET_MIDI_PAGE](state, action) { return createNextState(state, (draftState) => { - const { lastFocusedPage, focusedPage } = action.payload + const { focusedPage } = action.payload const sliderList = focusedPage && state.pages[focusedPage] ? state.pages[focusedPage].sliderList : [] - draftState.sliderList = sliderList - // draftState.pages[lastFocusedPage] = { - // sliderList: state.sliderList, - // id: lastFocusedPage - // } return draftState }) - // return { - // ...state, - // sliderList: nwerLIst, - // sliderListBackup: nwerLIst, - // pages: { - // ...state.pages, - // [lastFocusedPage]: { - // ...state.pages[lastFocusedPage], - // sliderList - // } - // } - // } }, [ActionTypeSliderList.EXTRACT_PAGE](state, action) { @@ -1241,7 +1214,7 @@ function updatePagesWithSliderlist( return createNextState(state, (draftState) => { draftState.sliderList = refreshedSliderList draftState.pages[lastFocusedPage] = { - ...state.pages, + //...state.pages, sliderList: refreshedSliderList, id: lastFocusedPage } @@ -1264,3 +1237,17 @@ function updatePagesWithSliderlist( // } || {} // } } + +function id() { + const val = `page-${getUniqueId()}` + return val +} +function initPages(sliderList = [], id) { + return { + [id]: { + sliderList, + id, + label: 'Page 1' + } + } +} diff --git a/packages/midi-bricks/src/reducers/view-settings.js b/packages/midi-bricks/src/reducers/view-settings.js index 5feb6f3ac..d945b5532 100644 --- a/packages/midi-bricks/src/reducers/view-settings.js +++ b/packages/midi-bricks/src/reducers/view-settings.js @@ -92,7 +92,7 @@ export const viewSettings = { // sliderList, viewSettings, viewSettings: { availableDrivers } = {}, - version + //version } = action.payload const extractedPages = null //extractPages(sliderList) @@ -122,9 +122,9 @@ export const viewSettings = { }) } if (availableDrivers) { - return { ...footerState, availableDrivers, version } + return { ...footerState, availableDrivers } } else { - return { ...footerState, version } + return { ...footerState } } }, @@ -137,15 +137,24 @@ export const viewSettings = { }, [ActionTypeViewSettings.DELETE_FOOTER_PAGES](state, action) { - return Object.assign( - {}, - state, - { - footerPages: [], - pageTargets: [] - }, - viewSettingsInitState - ) + return createNextState(state, draftState => { + draftState.pageTargets = viewSettingsInitState.pageTargets + draftState.footerPages = [] + draftState.lastFocusedFooterButtonIdx = '' + draftState.lastFocusedPage = viewSettingsInitState.lastFocusedPage + draftState.isLayoutMode = viewSettingsInitState.isLayoutMode + return draftState + }) + + // return Object.assign( + // {}, + // state, + // { + // footerPages: [], + // pageTargets: [] + // }, + // viewSettingsInitState + // ) }, // [ActionTypeViewSettings.CHANGE_FOOTER_PAGE](state , action) { @@ -179,8 +188,9 @@ export const viewSettings = { [ActionTypeViewSettings.SET_FOOTER_BUTTON_FOCUS](state, action) { const { i } = action.payload - return Object.assign({}, state, { - lastFocusedFooterButtonIdx: i + return createNextState(state, draftState => { + draftState.lastFocusedFooterButtonIdx = i + return draftState }) }, @@ -231,10 +241,13 @@ export const viewSettings = { }, [ActionTypeViewSettings.TOGGLE_SETTINGS_DIALOG_MODE](state, action) { const { isSettingsDialogMode } = action.payload - - return Object.assign({}, state, { - isSettingsDialogMode + return createNextState(state, draftState => { + draftState.isSettingsDialogMode = isSettingsDialogMode + return draftState }) + // return Object.assign({}, state, { + // isSettingsDialogMode + // }) }, [ActionTypeViewSettings.SET_AVAILABLE_DRIVERS](state, action) { @@ -288,10 +301,15 @@ export const viewSettings = { } } - return { - ...state, - availableDrivers - } + // return { + // ...state, + // availableDrivers + // } + return createNextState(state, draftState => { + draftState.availableDrivers = availableDrivers + return draftState + }) + }, [ActionTypeViewSettings.SET_PAGE_TARGET_SETTINGS](state, action) { @@ -394,21 +412,40 @@ export const viewSettings = { ? windowCoords : state.electronAppSettings.windowCoords } - return { ...state, electronAppSettings } + return createNextState(state, draftState => { + draftState.electronAppSettings = electronAppSettings + return draftState + }) + //return { ...state, electronAppSettings } }, [ActionTypeViewSettings.SET_LAST_FOCUSED_PAGE](state, action) { - const { - payload: { lastFocusedPage } - } = action - return { ...state, lastFocusedPage } + + return createNextState(state, draftState => { + const { + payload: { lastFocusedPage } + } = action + + draftState.lastFocusedPage = lastFocusedPage + return draftState + }) + // return { ...state, lastFocusedPage } + }, [ActionTypeViewSettings.ADD_PAGE_TARGET](state, action) { - const { - payload: { pageTarget } - } = action - let pageTargets = [...(state.pageTargets || []), pageTarget] - return { ...state, pageTargets } + + return createNextState(state, draftState => { + const { + payload: { pageTarget } + } = action + //let pageTargets = [...(state.pageTargets || []), pageTarget] + + draftState.pageTargets = state.pageTargets || [] + draftState.pageTargets.push(pageTarget) + draftState.lastFocusedPage = pageTarget.id + draftState.lastFocusedIdxs = [] + return draftState + }) } }