wip

app/localization/i18n.config.js → app/localization/i18n.config.ts

@@ -28,12 +28,13 @@ i18n
     supportedLngs: whitelist.langs
   });
 
-window.api.i18nextElectronBackend.onLanguageChange((args) => {
-  i18n.changeLanguage(args.lng, (error, _t) => {
+window.api.i18nextElectronBackend.onLanguageChange((args: any) => {
+  i18n.changeLanguage(args.lng, (error: any, _t: any) => {
     if (error) {
       console.error(error);
     }
   });
 });
 
-module.exports = i18n;
+// module.exports = i18n;
+export default i18n

app/src/components/Pad.tsx

@@ -1,17 +1,23 @@
-// @ts-nocheck
-import { Paper, styled } from '@material-ui/core'
+import { Paper, rgbToHex, styled } from '@material-ui/core'
+import { CHANNELS } from 'Constants/ipc'
+import { changeColor, setPressed } from 'Redux/components/pad/padActions'
+import { ColorOff, randomRGB } from 'Utils/color'
 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'
-import { CHANNELS } from '../constants/ipc'
 
-const Pad = ({ x, y }) => {
+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) => state.pad.buttons[button])
+  const { isPressed, color } = useSelector((state: any) => state.pad.buttons[button])
+
+  useEffect(() => {
+    console.log("MOUNTED => ", button)
+    return () => console.log("DISMOUNTED!!!!")
+  }, [])
 
   useEffect(
     () => window.api.send(CHANNELS.LP.PAD_COLOR, { button, color }),
@@ -21,8 +27,8 @@ const Pad = ({ x, y }) => {
   useEffect(() => {
     console.log('INVOKE PRESSED =>', button, 'STATE: ', isPressed)
     if (isPressed) dispatch(changeColor(button, randomRGB()))
-    if (!isPressed)
-      dispatch(changeColor(button, ColorOff))
+    // if (!isPressed)
+    //   dispatch(changeColor(button, ColorOff))
       // setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
   }, [isPressed])
 

app/src/components/Receiver.tsx

@@ -1,9 +1,7 @@
-import { useDispatch } from 'react-redux'
-import { randomRGB } from '../utils/color'
-import { changeColor, setPressed } from '../redux/components/pad/padActions'
+import { BUTTON_DOWN } from 'Constants/events'
+import { setPressed } from 'Redux/components/pad/padActions'
 import React, { useEffect } from 'react'
-import { CHANNELS } from '../constants/ipc'
-import { BUTTON_DOWN } from '../constants/events'
+import { useDispatch } from 'react-redux'
 
 const Receiver = () => {
   const dispatch = useDispatch()

app/src/components/Test.tsx

@@ -1,9 +1,8 @@
-// @ts-nocheck
 import React from "react"
 import { useSelector } from "react-redux"
 
 const TestComponent = () => {
-  const buttons = useSelector((state) => state.pad.buttons)
+  const buttons = useSelector((state: any) => state.pad.buttons)
 
   return (
     <>

app/src/components/subitem/subitem.jsx → app/src/components/subitem/subitem.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
+type Props = { id: any }
+
 class SubItem extends React.Component {
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
   }
 
@@ -14,7 +16,7 @@ class SubItem extends React.Component {
     // of id "alert" is selected
     window.api.contextMenu.onReceive(
       'softAlert',
-      function (args) {
+      function (args: any) {
         console.log(
           `This alert was brought to you by secure-electron-context-menu by ${args.attributes.name}`
         )

app/src/constants/routes.json → app/src/constants/routes.ts

@@ -1,4 +1,6 @@
-{
+const ROUTES = {
   "HOME": "/",
   "LAUNCHPAD": "/launchpad"
 }
+
+export default ROUTES

app/src/core/nav.tsx

@@ -7,7 +7,7 @@ import {
 } from 'secure-electron-license-keys'
 
 class Nav extends React.Component {
-  constructor(props) {
+  constructor(props: any) {
     super(props)
 
     this.state = {
@@ -36,7 +36,7 @@ class Nav extends React.Component {
     // validated by the main process
     const _ = this
 
-    window.api.licenseKeys.onReceive(validateLicenseResponse, function (data) {
+    window.api.licenseKeys.onReceive(validateLicenseResponse, function (data: any) {
       // If the license key/data is valid
       if (data.success) {
         // Here you would compare data.appVersion to
@@ -59,13 +59,13 @@ class Nav extends React.Component {
     })
   }
 
-  toggleMenu(_event) {
+  toggleMenu(_event: any) {
     this.setState({
       mobileMenuActive: !this.state.mobileMenuActive,
     })
   }
 
-  toggleLicenseModal(_event) {
+  toggleLicenseModal(_event: any) {
     const previous = this.state.licenseModalActive
 
     // Only send license request if the modal
@@ -82,7 +82,7 @@ class Nav extends React.Component {
   // Using a custom method to navigate because we
   // need to close the mobile menu if we navigate to
   // another page
-  navigate(url) {
+  navigate(url: any) {
     this.setState(
       {
         mobileMenuActive: false,
@@ -198,17 +198,17 @@ class Nav extends React.Component {
               Home
             </a>
 
-            <a
+            {/* <a
               className="navbar-item"
               onClick={() => this.navigate(ROUTES.ABOUT)}>
               About
-            </a>
+            </a> */}
 
             <div className="navbar-item has-dropdown is-hoverable">
               <a className="navbar-link">Sample pages</a>
 
               <div className="navbar-dropdown">
-                <a
+                {/* <a
                   className="navbar-item"
                   onClick={() => this.navigate(ROUTES.MOTD)}>
                   Using the Electron store
@@ -232,7 +232,7 @@ class Nav extends React.Component {
                   className="navbar-item"
                   onClick={() => this.navigate(ROUTES.IMAGE)}>
                   Sample image loaded
-                </a>
+                </a> */}
               </div>
             </div>
           </div>
@@ -254,7 +254,7 @@ class Nav extends React.Component {
   }
 }
 
-function WithNavigate(props) {
+function WithNavigate(props: any) {
   const navigate = useNavigate()
   return <Nav {...props} navigate={navigate} />
 }

app/src/index.tsx

@@ -1,12 +1,11 @@
-// @ts-nocheck
 import React, { Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import i18n from 'I18n/i18n.config'
 import { I18nextProvider } from 'react-i18next'
 import Root from 'Core/root'
 import { store, history } from 'Redux/store/store'
 import 'bulma/css/bulma.css'
-import Receiver from './components/Receiver'
+import Receiver from 'Components/Receiver'
 
 const container = document.getElementById('target')
 const root = createRoot(container)

app/src/pages/contextmenu/contextmenu.jsx → app/src/pages/contextmenu/contextmenu.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import SubItem from 'Components/subitem/subitem'
 
 class ContextMenu extends React.Component {
-  constructor(props) {
+  constructor(props: any) {
     super(props)
 
     this.state = {

app/src/pages/home/home.tsx

@@ -1,7 +1,5 @@
-import { Link } from 'react-router-dom'
 import React from 'react'
-import { Button } from '@material-ui/core'
-import Test from '../../components/Test'
+import { Link } from 'react-router-dom'
 
 const Home = () => {
   return (

app/src/pages/launchpad/launchpad.tsx

@@ -1,12 +1,9 @@
-// @ts-nocheck
 import { Grid } from '@material-ui/core'
-import { changeColor, setPressed } from 'Redux/components/pad/padSlice'
+import Pad from 'Components/Pad'
+import Test from 'Components/Test'
+import { CHANNELS } from 'Constants/ipc'
 import React from 'react'
-import { useDispatch } from 'react-redux'
-import Pad from '../../components/Pad'
-import Test from '../../components/Test'
-import { CHANNELS } from '../../constants/ipc'
-import { randomRGB } from '../../utils/color'
+
 
 const createGrid = () => {
   const rows = []
@@ -22,7 +19,9 @@ const createGrid = () => {
   return rows
 }
 
-const Launchpad = (props) => {
+type Props = any
+
+const Launchpad = (props: Props) => {
   // @ts-ignore
   window.api.send(CHANNELS.LP.CLEAR)
 

app/src/redux/components/pad/padReducer.ts

@@ -1,7 +1,6 @@
-// @ts-nocheck
 import { createSlice } from '@reduxjs/toolkit'
-import { getAllButtons } from '../../../utils'
-import { ColorOff } from '../../../utils/color'
+import { ColorOff } from 'Utils/color'
+import { getAllButtons } from 'Utils/index'
 import { NAME } from './padTypes'
 
 const padReducer = createSlice({
@@ -17,11 +16,11 @@ const padReducer = createSlice({
     isPressed: false,
   },
   reducers: {
-    changeColor(state, action) {
+    changeColor(state: any, action) {
       const { button, color } = action.payload
       state.buttons[button].color = color
     },
-    setPressed(state, action) {
+    setPressed(state: any, action) {
       const { button, pressed } = action.payload
       state.buttons[button].isPressed = pressed
       console.log(state, action)

app/src/redux/store/store.ts

@@ -3,7 +3,7 @@ import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
 import { createHashHistory } from 'history'
 import { createReduxHistoryContext } from 'redux-first-history'
 import logger from 'redux-logger'
-import padReducer from '../components/pad/padReducer'
+import padReducer from 'Redux/components/pad/padReducer'
 
 const { routerMiddleware, createReduxHistory, routerReducer } =
   createReduxHistoryContext({

app/src/types/index.d.ts

@@ -0,0 +1,10 @@
+export {}
+
+declare global {
+  interface Window {
+    api: {
+      send: (channel: string, data: any) => void
+      [key: string]: any
+    }
+  }
+}

app/src/types/secure-electron-license-keys.d.ts

@@ -0,0 +1,4 @@
+declare module 'secure-electron-license-keys' {
+  export const validateLicenseRequest = 'ValidateLicense-Request'
+  export const validateLicenseResponse = 'ValidateLicense-Response'
+}

package.json

@@ -86,6 +86,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@doyensec/electronegativity": "^1.9.1",
     "@google-cloud/translate": "^7.0.0",
+    "@types/loadable__component": "^5.13.5",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/redux-logger": "^3.0.10",

playground.ts

@@ -1,6 +1,6 @@
 import { randomRGB } from './app/src/utils/color';
-// @ts-nocheck
 import { getAllButtons } from './app/src/utils/index';
+
 const buttons = getAllButtons()
 
 const data = getAllButtons()

tsconfig.json

@@ -22,7 +22,16 @@
         /* Module Resolution Options */
         "moduleResolution": "node",
         "forceConsistentCasingInFileNames": true,
-        "esModuleInterop": true
+        "esModuleInterop": true,
+        "paths": {
+          "Core/*": ["./app/src/core/*"],
+          "Redux/*": ["./app/src/redux/*"],
+          "I18n/*": ["./app/localization/*"],
+          "Components/*": ["./app/src/components/*"],
+          "Constants/*": ["./app/src/constants/*"],
+          "Pages/*": ["./app/src/pages/*"],
+          "Utils/*": ["./app/src/utils/*"]
+        }
     },
     "include": [
         "app/src"