add keyboards shortcuts

Rowadz · Oct 3, 2023 · c1cb806 · c1cb806
1 parent c655979
commit c1cb806
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,14 @@
-import React from 'react'
+import { useEffect } from 'react'
 // import 'rsuite/dist/styles/rsuite-dark.css'
 import './App.css'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { DndProvider } from 'react-dnd'
 import { Header, Content, Footer, Generate, FlowGenerate } from './components'
-import { HashRouter as Router, Route, Routes } from 'react-router-dom'
+import { Route, Routes, useNavigate } from 'react-router-dom'
 import { ErrorBoundary } from './ErrorBoundary'
 import { FLAGS } from 'flags'
+import { useDispatch } from 'react-redux'
+import { toggleBuilderAction } from 'redux/actions'
 
 console.log(
   `%c
@@ -29,46 +31,55 @@ console.log(
 )
 
 function App() {
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
+  useEffect(() => {
+    const handleKeydown = ({ key }: KeyboardEvent) => {
+      if (key === 'b' || key === 'B') {
+        dispatch(toggleBuilderAction())
+      } else if (key === 'g' || key === 'G') {
+        navigate('/generate')
+      }
+    }
+    document.addEventListener('keydown', handleKeydown)
+    return () => document.removeEventListener('keydown', handleKeydown)
+  })
+
   return (
     <ErrorBoundary>
-      <Router>
-        <DndProvider
-          backend={HTML5Backend}
-          options={{ enableMouseEvents: true }}
-        >
-          <Header />
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <main>
-                  <Content />
-                  <Footer />
-                </main>
-              }
-            />
+      <DndProvider backend={HTML5Backend} options={{ enableMouseEvents: true }}>
+        <Header />
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <>
+                <Content />
+                <Footer />
+              </>
+            }
+          />
+          <Route
+            path="/generate"
+            element={
+              <>
+                <Generate />
+                <Footer />
+              </>
+            }
+          />
+          {FLAGS.FLOW_GENERATE && (
             <Route
-              path="/generate"
+              path="/flow-generate"
               element={
                 <>
-                  <Generate />
-                  <Footer />
+                  <FlowGenerate />
                 </>
               }
             />
-            {FLAGS.FLOW_GENERATE && (
-              <Route
-                path="/flow-generate"
-                element={
-                  <>
-                    <FlowGenerate />
-                  </>
-                }
-              />
-            )}
-          </Routes>
-        </DndProvider>
-      </Router>
+          )}
+        </Routes>
+      </DndProvider>
     </ErrorBoundary>
   )
 }

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -28,7 +28,7 @@ const HeaderComp = () => {
   }
 
   const toggleShow = () => {
-    dispatch(toggleBuilderAction(!isOpen))
+    dispatch(toggleBuilderAction())
   }
 
   return (

diff --git a/src/components/generate/components/Controller/components/ModelsComponents/ModelHeader.tsx b/src/components/generate/components/Controller/components/ModelsComponents/ModelHeader.tsx
@@ -1,7 +1,7 @@
 import React, { memo } from 'react'
 import { useDrop } from 'react-dnd'
 import { v4 } from 'uuid'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { justAddProp, toggleBuilderAction } from 'redux/actions'
 import { SiGraphql } from 'react-icons/si'
 import {
@@ -16,7 +16,7 @@ import {
   Button,
 } from 'rsuite'
 import type { ModelHeaderProps } from './types'
-import type { FakerPolluxReduxStoreState, ReduxState } from 'components/shared'
+import type { FakerPolluxReduxStoreState } from 'components/shared'
 import { generateAPI } from '../../util'
 
 export const ModelHeader = ({
@@ -33,12 +33,9 @@ export const ModelHeader = ({
   disableModalControllers,
 }: ModelHeaderProps) => {
   const dispatch = useDispatch()
-  const isOpen: boolean = useSelector(
-    (state: ReduxState) => state.builder.isOpen
-  )
 
   const toggle = () => {
-    dispatch(toggleBuilderAction(!isOpen))
+    dispatch(toggleBuilderAction())
   }
 
   const [{ canDrop, hovered }, drop] = useDrop({

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import Pollux from './App'
+import { HashRouter as Router } from 'react-router-dom'
 // import * as serviceWorker from './serviceWorker'
 import { Provider } from 'react-redux'
 import store from './redux/store'
@@ -13,7 +14,9 @@ if (module.hot) {
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
-      <Pollux />
+      <Router>
+        <Pollux />
+      </Router>
     </Provider>
   </React.StrictMode>,
   document.getElementById('root')

diff --git a/src/redux/actions.js b/src/redux/actions.js
@@ -150,11 +150,6 @@ export const setLocaleAction = (locale) => ({
   payload: locale,
 })
 
-/**
- *
- * @param {boolean} flag
- */
-export const toggleBuilderAction = (flag) => ({
+export const toggleBuilderAction = () => ({
   type: TOGGLE_BUILDER,
-  payload: flag,
 })
diff --git a/src/redux/reducers/builder.reducer.js b/src/redux/reducers/builder.reducer.js
@@ -4,7 +4,7 @@ import { TOGGLE_BUILDER } from '../actionTypes'
 export default function (state, { type, payload }) {
   switch (type) {
     case TOGGLE_BUILDER: {
-      return { isOpen: payload }
+      return { isOpen: !state.isOpen }
     }
     default: {
       return { isOpen: !!state?.isOpen }