Custom hooks for clicked value implementing

src/components/KeyItem/index.tsx

@@ -9,6 +9,7 @@ import {
     capsClickHandler,
     shiftClickHandler
 } from "store/reducers"
+import { useKeyClickedMethod } from "hooks";
 
 interface IKeyClickedSelector {
     keyClicked: {
@@ -18,23 +19,15 @@ interface IKeyClickedSelector {
 }
 
 export const KeyItem = ({ id, size, name, subName, c, img, hasImage }: IKeyItemType) => {
-    const dispatch = useDispatch()
     const { capsClicked, shiftClicked } = useSelector((state: IKeyClickedSelector) => state.keyClicked)
 
     const addValue = () => {
-        if (validValues.includes(name))
-            return dispatch(addClickedKeyValue({ name, capsClicked, shiftClicked }))
-        if (name === "backspace")
-            return dispatch(deleteValue())
-        if (id === "caps-lock")
-            return dispatch(capsClickHandler())
-        if (id === "shift1" || id === "shift2")
-            return dispatch(shiftClickHandler())
+        useKeyClickedMethod({ id, subName, name, capsClicked, shiftClicked })
     }
 
     const isUpperCasedValue = capsClicked && validValues.includes(name)
 
-    const isActive = (!(!subName) && shiftClicked)
+    const isActive = !(!subName) && shiftClicked
 
     const currentScript = hasImage && img
         ? <Icon name={img} />

src/hooks/index.ts

@@ -0,0 +1 @@
+export { useKeyClickedMethod } from "./useKeyClickedMethod";

src/hooks/useKeyClickedMethod/index.ts

@@ -0,0 +1,26 @@
+import { validValues } from "constants/index"
+import { useDispatch } from "react-redux"
+import { addClickedKeyValue, capsClickHandler, deleteValue, shiftClickHandler } from "store/reducers"
+
+interface IKeyClickedHook {
+    subName?: string | null;
+    name: string;
+    capsClicked: boolean;
+    shiftClicked: boolean;
+    id: string
+}
+
+export const useKeyClickedMethod = ({ id, subName, name, capsClicked, shiftClicked }: IKeyClickedHook) => {
+    const dispatch = useDispatch();
+
+    if (validValues.includes(name))
+        return dispatch(addClickedKeyValue({ subName, name, capsClicked, shiftClicked }))
+    if (id === "delete")
+        return dispatch(deleteValue())
+    if (id === "caps-lock")
+        return dispatch(capsClickHandler())
+    if (id === "shift1" || id === "shift2")
+        return dispatch(shiftClickHandler())
+
+
+}

src/store/reducers/keyClicked/index.ts

@@ -12,6 +12,9 @@ const KeyClickedSlice = createSlice({
         },
         shiftClickHandler: (state) => {
             state.shiftClicked = !state.shiftClicked
+            // if (!state.shiftClicked) {
+            //     state.capsClicked = true
+            // } else
             state.capsClicked = !state.capsClicked
         }
     }

src/store/reducers/keyboard/index.ts

@@ -13,11 +13,20 @@ const KeyboardSlice = createSlice({
             state.allKeyValues = [...rowKeys];
         },
         addClickedKeyValue: (state: any, action: AddClickedKeyValueAction) => {
-            const { name, capsClicked, shiftClicked } = action.payload;
+            const { subName, name, capsClicked, shiftClicked } = action.payload;
+            const hasSubName = !(!subName);
+
             if ((capsClicked || shiftClicked) && letters.includes(name)) {
                 const upperName = name.toUpperCase()
                 state.typedValue = [...state.typedValue, upperName]
-            } else
+            }
+            else if (shiftClicked && hasSubName)
+                state.typedValue.push(name)
+
+            else if (hasSubName)
+                state.typedValue = [...state.typedValue, subName]
+
+            else
                 state.typedValue = [...state.typedValue, name]
         },
         deleteValue: (state) => {

src/store/reducers/store-types/index.ts

@@ -4,5 +4,6 @@ export interface AddClickedKeyValueAction {
         name: string;
         capsClicked?: boolean;
         shiftClicked?: boolean;
+        subName?: string | null;
     };
 }

tsconfig.json

@@ -26,6 +26,9 @@
       "types/*": [
         "types/*"
       ],
+      "hooks/*": [
+        "hooks/*"
+      ],
     },
     "target": "ESNext",
     "useDefineForClassFields": true,

vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
       store: "/src/store",
       utils: "/src/utils",
       types: "/src/types",
+      hooks: "/src/hooks",
     }
   },
 })