Move keyboard navigation to HOC

Author: cxspxr

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
         "import/no-extraneous-dependencies": "off",
         "@typescript-eslint/no-empty-interface": "warn",
         "react/require-default-props": "off",
+        "import/no-named-as-default": "off",
       },
       settings: {
         "import/resolver": {

src/components/ColorSettingsLevel/ColorSettingsLevel.tsx

@@ -6,6 +6,8 @@ import Typist from "react-typist";
 import styles from "../Levels.module.scss";
 import { RGBColor } from "../../contexts/SettingsContext";
 import "../TypistCursor.scss";
+// eslint-disable-next-line import/no-cycle
+import WithKeyboardNavigation from "../../hocs/WithKeyboardNavigation/WithKeyboardNavigation";
 import useGlobalColors from "../../hooks/useGlobalColors/useGlobalColors";
 // eslint-disable-next-line import/no-cycle
 import useNavigation from "../../hooks/useNavigation/useNavigation";
@@ -26,7 +28,11 @@ export type ColorSettingsLevelProps = {
  * @param changeColor - function to change a lense color
  * @param hint - to be provided for a user
  */
-const ColorSettingsLevel: React.FC<ColorSettingsLevelProps> = ({ color, changeColor, hint }) => {
+export const ColorSettingsLevel: React.FC<ColorSettingsLevelProps> = ({
+  color,
+  changeColor,
+  hint,
+}) => {
   const [, , , , , currentLevelCounter] = useNavigation();
   const [
     [, setGlobalBackground, resetGlobalBackground],
@@ -69,4 +75,4 @@ const ColorSettingsLevel: React.FC<ColorSettingsLevelProps> = ({ color, changeCo
   );
 };
 
-export default ColorSettingsLevel;
+export default WithKeyboardNavigation(ColorSettingsLevel);

src/components/ColorSettingsLevel/__tests__/ColorSettingsLevel.test.tsx

@@ -3,7 +3,7 @@ import { ReactWrapper, mount } from "enzyme";
 import { render, waitFor } from "@testing-library/react";
 import Typist from "react-typist";
 import { CirclePicker } from "react-color";
-import ColorSettingsLevel, { ColorSettingsLevelProps } from "../ColorSettingsLevel";
+import { ColorSettingsLevel, ColorSettingsLevelProps } from "../ColorSettingsLevel";
 import useNavigation from "../../../hooks/useNavigation/useNavigation";
 import useGlobalColors from "../../../hooks/useGlobalColors/useGlobalColors";
 
@@ -35,7 +35,7 @@ describe("ColorSettingsLevel component", () => {
     });
 
     it("uses navigation", () => {
-      expect(useNavigation).toBeCalledTimes(1);
+      expect(useNavigation).toBeCalled();
     });
 
     it("uses global colors helpers", () => {

src/components/IntroLevel/IntroLevel.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import Typist from "react-typist";
 import { Box } from "@material-ui/core";
+// eslint-disable-next-line import/no-cycle
+import WithKeyboardNavigation from "../../hocs/WithKeyboardNavigation/WithKeyboardNavigation";
 import styles from "../Levels.module.scss";
 import { RGBColor } from "../../contexts/SettingsContext";
 import "../TypistCursor.scss";
@@ -19,7 +21,7 @@ export type IntroLevelProps = {
  * Navigation intro level component
  * @param hint - intro hint to be shown to a user
  */
-const IntroLevel: React.FC<IntroLevelProps> = ({ hint }) => {
+export const IntroLevel: React.FC<IntroLevelProps> = ({ hint }) => {
   const [, , , , , currentLevelCounter] = useNavigation();
 
   const { color, bgColor } = usePalette();
@@ -64,4 +66,4 @@ const IntroLevel: React.FC<IntroLevelProps> = ({ hint }) => {
   );
 };
 
-export default IntroLevel;
+export default WithKeyboardNavigation(IntroLevel);

src/components/IntroLevel/__tests__/IntroLevel.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { shallow, ShallowWrapper } from "enzyme";
 import Typist from "react-typist";
 import { render, waitFor } from "@testing-library/react";
-import IntroLevel, { IntroLevelProps } from "../IntroLevel";
+import { IntroLevel, IntroLevelProps } from "../IntroLevel";
 import useNavigation from "../../../hooks/useNavigation/useNavigation";
 import usePalette from "../../../hooks/usePalette/usePalette";
 

src/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { BottomNavigation, BottomNavigationAction } from "@material-ui/core";
 import { ArrowBack, ArrowForward, Cached, Settings } from "@material-ui/icons";
 import styles from "./Navigation.module.scss";
@@ -20,29 +20,6 @@ export type NavigationProps = {
 const Navigation: React.FC<NavigationProps> = ({ bgColor, color }) => {
   const [, nextLevel, previousLevel, resetLevels, goToSettings] = useNavigation();
 
-  useEffect(() => {
-    const enableNavigation = ({ keyCode }: KeyboardEvent) => {
-      switch (keyCode) {
-        case 13:
-        case 39:
-          return nextLevel();
-        case 37:
-          return previousLevel();
-        case 8:
-          return resetLevels();
-        default:
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          return () => {};
-      }
-    };
-
-    document.addEventListener("keydown", enableNavigation, false);
-
-    return () => {
-      document.removeEventListener("keydown", enableNavigation, false);
-    };
-  }, [nextLevel, previousLevel, resetLevels]);
-
   return (
     <BottomNavigation className={styles.navigation} style={{ backgroundColor: bgColor }} showLabels>
       <BottomNavigationAction

src/components/Navigation/__tests__/Navigation.test.tsx

@@ -18,7 +18,6 @@ describe("Navigation component", () => {
     let wrapper: ReactWrapper;
 
     beforeEach(() => {
-      jest.spyOn(React, "useEffect");
       // eslint-disable-next-line react/jsx-props-no-spreading
       wrapper = mount(<Navigation {...defaultProps} />);
     });
@@ -31,10 +30,6 @@ describe("Navigation component", () => {
       expect(useNavigation).toBeCalledTimes(1);
     });
 
-    it("uses side effects", () => {
-      expect(React.useEffect).toBeCalled();
-    });
-
     it("renders material bottom navigation component", () => {
       expect(wrapper.find(BottomNavigation).length).toEqual(1);
     });

src/hocs/WithKeyboardNavigation/WithKeyboardNavigation.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+// eslint-disable-next-line import/no-cycle
+import useNavigation from "../../hooks/useNavigation/useNavigation";
+
+/**
+ * Keyboard navigation HOC
+ * @param WrappedComponent - component to be enhanced with keyboard navigation
+ * @constructor
+ */
+const WithKeyboardNavigation = (
+  WrappedComponent: React.ComponentType<any>,
+): React.ComponentType<any> => (props) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [, nextLevel, previousLevel, resetLevels] = useNavigation();
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const enableNavigation = ({ keyCode }: KeyboardEvent) => {
+      switch (keyCode) {
+        case 13:
+        case 39:
+          return nextLevel();
+        case 37:
+          return previousLevel();
+        case 8:
+          return resetLevels();
+        default:
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          return () => {};
+      }
+    };
+
+    document.addEventListener("keydown", enableNavigation, false);
+
+    return () => {
+      document.removeEventListener("keydown", enableNavigation, false);
+    };
+  }, [nextLevel, previousLevel, resetLevels]);
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <WrappedComponent {...props} />;
+};
+
+export default WithKeyboardNavigation;

src/hocs/WithKeyboardNavigation/__tests__/WithKeyboardNavigation.test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { mount } from "enzyme";
+import WithKeyboardNavigation from "../WithKeyboardNavigation";
+import useNavigation from "../../../hooks/useNavigation/useNavigation";
+
+jest.mock("../../../hooks/useNavigation/useNavigation");
+
+describe("WithKeyboardNavigation HOC", () => {
+  describe("user behavior", () => {
+    let getByText;
+
+    it("renders wrapped component inner content", () => {
+      const FakeComponent: React.FC = () => <div>fake component</div>;
+      const KeyboardNavigationEnhancedComponent: React.ComponentType = WithKeyboardNavigation(
+        FakeComponent,
+      );
+
+      const wrapper = render(<KeyboardNavigationEnhancedComponent />);
+
+      getByText = wrapper.getByText;
+
+      expect(getByText(/fake component/)).toBeInTheDocument();
+    });
+  });
+
+  describe("implementation", () => {
+    it("uses navigation hook", () => {
+      const FakeComponent: React.FC = () => null;
+      const WrappedComponent: React.ComponentType = WithKeyboardNavigation(FakeComponent);
+
+      mount(<WrappedComponent />);
+
+      expect(useNavigation).toBeCalled();
+    });
+
+    it("passes all props to wrapped component", () => {
+      const FakeComponent: React.FC<{ a: boolean; b: string }> = ({ a, b }) => {
+        expect(a).toEqual(true);
+        expect(b).toEqual("fake");
+
+        return null;
+      };
+
+      const WrappedComponent: React.ComponentType<any> = WithKeyboardNavigation(FakeComponent);
+
+      mount(<WrappedComponent a b="fake" />);
+    });
+  });
+});

src/hocs/WithKeyboardNavigation/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "WithKeyboardNavigation.tsx"
+}