From 1d7a213d7f46180db9feccd2b3521c4294a158f7 Mon Sep 17 00:00:00 2001
From: Christoffer Engman <chren8@vgregion.se>
Date: Sat, 7 Oct 2023 07:28:58 +0200
Subject: [PATCH] wip

---
 app/src/components/Pad.tsx              | 18 +++++++++++-----
 app/src/components/Receiver.tsx         | 13 +++++++++---
 app/src/constants/events.ts             |  2 ++
 app/src/core/{nav.jsx => nav.tsx}       |  0
 app/src/core/root.jsx                   | 25 ----------------------
 app/src/core/root.tsx                   | 28 +++++++++++++++++++++++++
 app/src/core/{routes.jsx => routes.tsx} |  0
 7 files changed, 53 insertions(+), 33 deletions(-)
 create mode 100644 app/src/constants/events.ts
 rename app/src/core/{nav.jsx => nav.tsx} (100%)
 delete mode 100644 app/src/core/root.jsx
 create mode 100644 app/src/core/root.tsx
 rename app/src/core/{routes.jsx => routes.tsx} (100%)

diff --git a/app/src/components/Pad.tsx b/app/src/components/Pad.tsx
index 1c61f36..15b7798 100644
--- a/app/src/components/Pad.tsx
+++ b/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>
diff --git a/app/src/components/Receiver.tsx b/app/src/components/Receiver.tsx
index 7f45d9f..254253d 100644
--- a/app/src/components/Receiver.tsx
+++ b/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
diff --git a/app/src/constants/events.ts b/app/src/constants/events.ts
new file mode 100644
index 0000000..87b3a38
--- /dev/null
+++ b/app/src/constants/events.ts
@@ -0,0 +1,2 @@
+export const BUTTON_DOWN = 'BUTTON_DOWN'
+export const BUTTON_UP = 'BUTTON_UP'
\ No newline at end of file
diff --git a/app/src/core/nav.jsx b/app/src/core/nav.tsx
similarity index 100%
rename from app/src/core/nav.jsx
rename to app/src/core/nav.tsx
diff --git a/app/src/core/root.jsx b/app/src/core/root.jsx
deleted file mode 100644
index 6aa8e4d..0000000
--- a/app/src/core/root.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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'
-
-class Root extends React.Component {
-  render() {
-    const { store, history } = this.props
-
-    return (
-      <React.Fragment>
-        <Provider store={store}>
-          <HistoryRouter history={history}>
-            <Nav history={history}></Nav>
-            <AppRoutes></AppRoutes>
-          </HistoryRouter>
-        </Provider>
-      </React.Fragment>
-    )
-  }
-}
-
-export default Root
diff --git a/app/src/core/root.tsx b/app/src/core/root.tsx
new file mode 100644
index 0000000..a4ed7cd
--- /dev/null
+++ b/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
diff --git a/app/src/core/routes.jsx b/app/src/core/routes.tsx
similarity index 100%
rename from app/src/core/routes.jsx
rename to app/src/core/routes.tsx