wip

.nvmrc

@@ -0,0 +1 @@
+v20.8.0

app/src/components/Pad.tsx

@@ -5,18 +5,19 @@ import { ColorOff, randomRGB, rgbToHex } from 'Utils/color'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-type Props = { x: number, y: number }
+type Props = { x: number; y: number }
 
 const Pad = ({ x, y }: Props) => {
   const button = parseInt(`${y}${x}`)
 
   const dispatch = useDispatch()
   const [isMouseOver, setMouseOver] = useState(false)
-  const { isPressed, color } = useSelector((state: any) => state.pad.buttons[button])
+  const { isPressed, color } = useSelector(
+    (state: any) => state.pad.buttons[button]
+  )
 
   useEffect(() => {
-    console.log("MOUNTED => ", button)
-    return () => console.log("DISMOUNTED!!!!")
+    // return () => console.log("DISMOUNTED!!!!")
   }, [])
 
   useEffect(
@@ -25,13 +26,13 @@ const Pad = ({ x, y }: Props) => {
   )
 
   useEffect(() => {
-    console.log('INVOKE PRESSED =>', button, 'STATE: ', isPressed)
+    // console.log('INVOKE PRESSED =>', button, 'STATE: ', isPressed)
     if (isPressed) {
-      dispatch(changeColor(button, randomRGB()))
+      // dispatch(changeColor(button, randomRGB()))
       return
     }
     if (!isPressed) {
-      setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
+      // setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
     }
   }, [isPressed])
 

app/src/components/Slider.tsx

@@ -0,0 +1,17 @@
+import { changeColor } from 'Redux/components/pad/padActions'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+type Props = { buttonMap: number[] }
+
+const Slider = ({ buttonMap }: Props) => {
+  const dispatch = useDispatch()
+
+  buttonMap.map((button) => {
+    dispatch(changeColor(button, [0, 200, 0]))
+  })
+
+  return <></>
+}
+
+export default Slider

app/src/hooks/usePadPressed.tsx

@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux'
+
+const usePadPressed = (button: string) => {
+  const { isPressed } = useSelector((state: any) => state.pad.buttons[button])
+}
+
+export default usePadPressed

app/src/pages/launchpad/launchpad.tsx

@@ -1,9 +1,9 @@
 import { Grid } from '@material-ui/core'
 import Pad from 'Components/Pad'
+import Slider from 'Components/Slider'
 import Test from 'Components/Test'
 import { CHANNELS } from 'Constants/ipc'
-import React from 'react'
-
+import React, { createContext } from 'react'
 
 const createGrid = () => {
   const rows = []
@@ -19,14 +19,20 @@ const createGrid = () => {
   return rows
 }
 
-type Props = any
+const SliderButtonMapping = {
+  buttons: [11, 21, 31, 41, 51, 61, 71, 81]
+}
+
+const GridContext = createContext('Components')
 
-const Launchpad = (props: Props) => {
+type Props = { component: any }
+const Launchpad = ({ component }: Props) => {
   // @ts-ignore
   window.api.send(CHANNELS.LP.CLEAR)
 
   return (
     <>
+      <Slider buttonMap={SliderButtonMapping.buttons}/>
       {createGrid().map((row) => (
         <Grid container>
           {row.map((pad) => (

app/src/redux/store/store.ts

@@ -20,7 +20,7 @@ export const store = configureStore({
       serializableCheck: false,
     }),
     routerMiddleware,
-    logger,
+    // logger,
   ],
 })