wip

app/src/components/Pad.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { Paper, styled } from '@material-ui/core'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { ColorOff, randomRGB, rgbToHex } from '../utils/color'
 import { changeColor, setPressed } from '../redux/components/pad/padActions'
@@ -10,6 +10,7 @@ const Pad = ({ x, y }) => {
   const button = parseInt(`${y}${x}`)
 
   const dispatch = useDispatch()
+  const [isMouseOver, setMouseOver] = useState(false)
   const { isPressed, color } = useSelector((state) => state.pad.buttons[button])
 
   useEffect(
@@ -19,19 +20,26 @@ const Pad = ({ x, y }) => {
 
   useEffect(() => {
     console.log('INVOKE PRESSED =>', button, 'STATE: ', isPressed)
+    if (isPressed) dispatch(changeColor(button, randomRGB()))
+    if (!isPressed)
+      dispatch(changeColor(button, ColorOff))
+      // setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
   }, [isPressed])
 
   const onClick = () => {
     dispatch(changeColor(button, ColorOff))
   }
 
-  const onMouseOver = () => {
-    dispatch(changeColor(button, randomRGB()))
+  const onMouseEnter = () => {
+    if (isMouseOver) return
+    setMouseOver(true)
     dispatch(setPressed(button, true))
   }
 
   const onMouseLeave = () => {
-    useDispatch(setPressed(button, false))
+    if (!isMouseOver) return
+    setMouseOver(false)
+    dispatch(setPressed(button, false))
   }
 
   const Item = styled(Paper)(() => ({
@@ -46,7 +54,7 @@ const Pad = ({ x, y }) => {
   return (
     <Item
       onClick={onClick}
-      onMouseOver={onMouseOver}
+      onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}>
       {button}
     </Item>

app/src/components/Receiver.tsx

@@ -1,16 +1,23 @@
 import { useDispatch } from 'react-redux'
 import { randomRGB } from '../utils/color'
 import { changeColor, setPressed } from '../redux/components/pad/padActions'
+import React, { useEffect } from 'react'
+import { CHANNELS } from '../constants/ipc'
+import { BUTTON_DOWN } from '../constants/events'
 
 const Receiver = () => {
   const dispatch = useDispatch()
 
-  console.log('DSDSDS')
+  useEffect(() => console.log('Receiver listening!'), [])
+
   // @ts-ignore
   window.api.receive(CHANNELS.LP.PAD, ({ event, button }) => {
-    dispatch(setPressed(button, event === 'BUTTON_DOWN' ?? false))
-    dispatch(changeColor(button, randomRGB()))
+    dispatch(setPressed(button.nr, event === BUTTON_DOWN ?? false))
   })
+
+  return (
+    <></>
+  )
 }
 
 export default Receiver

app/src/constants/events.ts

@@ -0,0 +1,2 @@
+export const BUTTON_DOWN = 'BUTTON_DOWN'
+export const BUTTON_UP = 'BUTTON_UP'

app/src/core/root.tsx

@@ -0,0 +1,28 @@
+import AppRoutes from 'Core/routes'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { HistoryRouter } from 'redux-first-history/rr6'
+import Nav from './nav'
+import './root.css'
+import Receiver from '../components/Receiver'
+
+type Props = {
+  store: any
+  history: any
+}
+
+const Root = ({ store, history }: Props) => {
+  return (
+    <React.Fragment>
+      <Provider store={store}>
+        <HistoryRouter history={history}>
+          <Receiver />
+          <Nav history={history}></Nav>
+          <AppRoutes></AppRoutes>
+        </HistoryRouter>
+      </Provider>
+    </React.Fragment>
+  )
+}
+
+export default Root