feat: Establish configurable matrix

.eslintcache

@@ -1 +1 @@
-[{"/Users/timsusa/data/development/cliptor/src/index.js":"1","/Users/timsusa/data/development/cliptor/src/providers/ReduxWrappedMuiApp.jsx":"2","/Users/timsusa/data/development/cliptor/src/global-state/configure-app-store.js":"3","/Users/timsusa/data/development/cliptor/src/providers/MuiWrappedApp.jsx":"4","/Users/timsusa/data/development/cliptor/src/global-state/index.js":"5","/Users/timsusa/data/development/cliptor/src/themes/dark-theme.js":"6","/Users/timsusa/data/development/cliptor/src/themes/light-theme.js":"7","/Users/timsusa/data/development/cliptor/src/App.jsx":"8","/Users/timsusa/data/development/cliptor/src/global-state/reducers/view-settings.js":"9"},{"size":418,"mtime":1609160286330,"results":"10","hashOfConfig":"11"},{"size":1152,"mtime":1609342179095,"results":"12","hashOfConfig":"11"},{"size":265,"mtime":1609342354248,"results":"13","hashOfConfig":"11"},{"size":932,"mtime":1609259297389,"results":"14","hashOfConfig":"11"},{"size":1324,"mtime":1609342464930,"results":"15","hashOfConfig":"11"},{"size":1462,"mtime":1609160286333,"results":"16","hashOfConfig":"11"},{"size":1063,"mtime":1609160286333,"results":"17","hashOfConfig":"11"},{"size":1147,"mtime":1609342095500,"results":"18","hashOfConfig":"11"},{"size":212,"mtime":1609342435086,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"13jy2pn",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/timsusa/data/development/cliptor/src/index.js",[],[],"/Users/timsusa/data/development/cliptor/src/providers/ReduxWrappedMuiApp.jsx",[],"/Users/timsusa/data/development/cliptor/src/global-state/configure-app-store.js",[],"/Users/timsusa/data/development/cliptor/src/providers/MuiWrappedApp.jsx",[],"/Users/timsusa/data/development/cliptor/src/global-state/index.js",[],"/Users/timsusa/data/development/cliptor/src/themes/dark-theme.js",[],"/Users/timsusa/data/development/cliptor/src/themes/light-theme.js",[],"/Users/timsusa/data/development/cliptor/src/App.jsx",[],"/Users/timsusa/data/development/cliptor/src/global-state/reducers/view-settings.js",[]]
+[{"/Users/timsusa/data/development/cliptor/src/index.js":"1","/Users/timsusa/data/development/cliptor/src/providers/ReduxWrappedMuiApp.jsx":"2","/Users/timsusa/data/development/cliptor/src/global-state/configure-app-store.js":"3","/Users/timsusa/data/development/cliptor/src/providers/MuiWrappedApp.jsx":"4","/Users/timsusa/data/development/cliptor/src/global-state/index.js":"5","/Users/timsusa/data/development/cliptor/src/themes/dark-theme.js":"6","/Users/timsusa/data/development/cliptor/src/themes/light-theme.js":"7","/Users/timsusa/data/development/cliptor/src/App.jsx":"8","/Users/timsusa/data/development/cliptor/src/global-state/reducers/view-settings.js":"9","/Users/timsusa/data/development/cliptor/src/global-state/reducers/track.js":"10","/Users/timsusa/data/development/cliptor/src/global-state/reducers/content.js":"11","/Users/timsusa/data/development/cliptor/src/Clip.jsx":"12"},{"size":418,"mtime":1609160286330,"results":"13","hashOfConfig":"14"},{"size":1152,"mtime":1609342179095,"results":"15","hashOfConfig":"14"},{"size":265,"mtime":1609342354248,"results":"16","hashOfConfig":"14"},{"size":932,"mtime":1609259297389,"results":"17","hashOfConfig":"14"},{"size":1896,"mtime":1609350243939,"results":"18","hashOfConfig":"14"},{"size":1462,"mtime":1609160286333,"results":"19","hashOfConfig":"14"},{"size":1063,"mtime":1609160286333,"results":"20","hashOfConfig":"14"},{"size":2195,"mtime":1609352929444,"results":"21","hashOfConfig":"14"},{"size":212,"mtime":1609342435086,"results":"22","hashOfConfig":"14"},{"size":178,"mtime":1609347929919,"results":"23","hashOfConfig":"14"},{"size":572,"mtime":1609351721823,"results":"24","hashOfConfig":"14"},{"size":457,"mtime":1609353004052,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"13jy2pn",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/timsusa/data/development/cliptor/src/index.js",[],[],"/Users/timsusa/data/development/cliptor/src/providers/ReduxWrappedMuiApp.jsx",[],"/Users/timsusa/data/development/cliptor/src/global-state/configure-app-store.js",[],"/Users/timsusa/data/development/cliptor/src/providers/MuiWrappedApp.jsx",[],"/Users/timsusa/data/development/cliptor/src/global-state/index.js",[],"/Users/timsusa/data/development/cliptor/src/themes/dark-theme.js",[],"/Users/timsusa/data/development/cliptor/src/themes/light-theme.js",[],"/Users/timsusa/data/development/cliptor/src/App.jsx",[],"/Users/timsusa/data/development/cliptor/src/global-state/reducers/view-settings.js",[],"/Users/timsusa/data/development/cliptor/src/global-state/reducers/track.js",[],"/Users/timsusa/data/development/cliptor/src/global-state/reducers/content.js",[],"/Users/timsusa/data/development/cliptor/src/Clip.jsx",[]]

package.json

@@ -69,6 +69,7 @@
     "keycode": "2.2.0",
     "localforage": "1.9.0",
     "lodash": "4.17.20",
+    "uuid": "^8.3.1",
     "react": "17.0.1",
     "react-color": "2.18.1",
     "react-dom": "17.0.1",

src/App.jsx

@@ -1,14 +1,41 @@
+import { Clip } from './Clip'
 import React from 'react'
 import { useTheme } from '@material-ui/styles'
 import { makeStyles } from '@material-ui/styles'
+import { useSelector, useDispatch } from 'react-redux'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import Button from '@material-ui/core/Button'
+import { actionsContent } from './global-state'
 
 export function App() {
+  const { addTrack, addClipToTrack } = actionsContent
   const theme = useTheme()
+  const dispatch = useDispatch()
   const classes = makeStyles(styles.bind(this, theme))()
-
+  const tracks = useSelector((state) => state.content.tracks || [])
   return (
     <div className={classes.root}>
-      <div className={classes.appBar}>TIm</div>
+      {tracks.map((track) => {
+        return (
+          <div key={track.id} style={{ display: 'inline-block' }}>
+            <List>
+              <Button
+                variant='contained'
+                onClick={() => dispatch(addClipToTrack({ id: track.id }))}
+              >
+                Add Clip ToTrack
+              </Button>
+              {(track.data || []).map(({ id, src }) => (
+                <ListItem key={id}>
+                  <Clip src={src} parentId={track.id} id={id} />
+                </ListItem>
+              ))}
+            </List>
+          </div>
+        )
+      })}
+      <Button onClick={() => dispatch(addTrack())}>Add Track</Button>
     </div>
   )
 }

src/Clip.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Button from '@material-ui/core/Button'
+import Typography from '@material-ui/core/Typography'
+import { PropTypes } from 'prop-types'
+
+export function Clip(props) {
+  const { src, id } = props
+  return (
+    <React.Fragment>
+      <Typography>{id}</Typography>
+      <Button variant='outlined'>{'Play' + src || 'None'}</Button>
+    </React.Fragment>
+  )
+}
+
+Clip.propTypes = {
+  src: PropTypes.string,
+  id: PropTypes.string
+}

src/global-state/index.js

@@ -1,8 +1,37 @@
 import { combineReducers } from 'redux'
 import { createSlice } from '@reduxjs/toolkit'
 import { viewSettings } from './reducers/view-settings'
+import { track } from './reducers/track'
+import { content } from './reducers/content'
 
 //
+// track
+//
+//
+const { reducer: reducerTrack, actions: actionsTracksOne } = createSlice({
+  name: 'track',
+  initialState: {
+    track: []
+  },
+  reducers: track
+})
+
+export const actionsTrack = actionsTracksOne
+
+//
+// content
+//
+//
+const { reducer: reducerContent, actions: actionsContents } = createSlice({
+  name: 'content',
+  initialState: {
+    tracks: []
+  },
+  reducers: content
+})
+
+export const actionsContent = actionsContents
+
 // ViewSettings
 //
 export const PAGE_TYPES = {
@@ -57,5 +86,7 @@ export const actionsViewSettings = actionsViewSettingss
 export const reducerViewSettings = reducerViewSettingss
 
 export const reducer = combineReducers({
+  track: reducerTrack,
+  content: reducerContent,
   viewSettings: reducerViewSettings
 })

src/global-state/reducers/content.js

@@ -0,0 +1,29 @@
+import { v4 as uuidv4 } from 'uuid'
+
+export const content = {
+  addTrack(state) {
+    const track = {
+      id: `track-${uuidv4()}`,
+      data: [
+        {
+          id: `clip-${uuidv4()}`,
+          src: './bd.wav'
+        }
+      ]
+    }
+    state.tracks.push(track)
+  },
+  addClipToTrack(state, { payload: { id } }) {
+    const idx = state.tracks.findIndex((item) => item.id === id)
+    state.tracks[idx] = {
+      id,
+      data: [
+        ...state.tracks[idx].data,
+        {
+          id: `clip-${uuidv4()}`,
+          src: './bd.wav'
+        }
+      ]
+    }
+  }
+}

src/global-state/reducers/track.js

@@ -0,0 +1,12 @@
+import { v4 as uuidv4 } from 'uuid'
+
+export const clip = {
+  id: uuidv4(),
+  src: './bd.wav'
+}
+
+export const track = {
+  addClipToTrack(state) {
+    state.track.push(clip)
+  }
+}

yarn.lock

@@ -13636,7 +13636,7 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0:
+uuid@^8.3.0, uuid@^8.3.1:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==