refactor: use a custom hook to consume the global state (#15)

* refactor: use local state for Transform component

* refactor: use a custom hook to consume global state

Author: jamesgeorge007

.github/workflows/nodejs.yml .github/workflows/ci.yml

@@ -1,31 +1,28 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
-  build:
-
+  job:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [10.x, 12.x]
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: yarn
-    - run: yarn run build
-    - run: yarn test
-    - run: yarn run format
-    - run: yarn run test:e2e
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn
+      - run: yarn format:check
+      - run: yarn run test

cypress/fixtures/example.json

@@ -7,7 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "css-to-react-native": "^3.0.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "4.14.1",
     "postcss": "^7.0.26",
     "postcss-js": "^2.0.3",
     "react": "^16.12.0",
@@ -27,13 +27,13 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "yarn test:unit && yarn test:e2e",
     "cy:run": "cypress run",
+    "test:unit": "react-scripts test",
     "test:e2e": "start-server-and-test :3000 cy:run",
     "eject": "react-scripts eject",
-    "format": "prettier --write tests/**/*.js src/**/*.{js,css,scss} *.md",
-    "predeploy": "npm run build",
-    "deploy": "surge --project ./build --domain https://csstox.surge.sh"
+    "format:check": "prettier --check tests/**/*.js src/**/*.{js,css,scss} *.md",
+    "format": "prettier --write tests/**/*.js src/**/*.{js,css,scss} *.md"
   },
   "eslintConfig": {
     "extends": "react-app"

cypress/integration/behavior.spec.js

@@ -1,54 +1,21 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 
 import "./assets/css/global.css";
 
+import AppContext from "./AppContext";
 import Header from "./components/header/Header";
-import Transform from "./components/transform/Transform";
 import Title from "./components/title/Title";
-import { toJSS, toRN } from "./helpers/transform";
-
-const initialInputCss = `font-size: 18px;\nline-height: 24px;\ncolor: red;`;
-
-export const Context = React.createContext(null);
+import Transform from "./components/transform/Transform";
 
 function App() {
-  const [outputType, setOutputType] = useState("React Native");
-  const [inputCss, setInputCss] = useState(initialInputCss);
-  const [outputCss, setOutputCss] = useState("");
-
-  useEffect(() => {
-    if (inputCss === "") {
-      setInputCss(initialInputCss);
-    }
-
-    switch (outputType) {
-      case "JSS":
-        setOutputCss(toJSS(inputCss));
-        break;
-      case "React Native":
-        setOutputCss(toRN(inputCss));
-        break;
-      default:
-        setOutputCss("Unknown output type");
-    }
-  }, [inputCss, outputType, setOutputCss]);
-
   return (
-    <Context.Provider
-      value={{
-        outputType,
-        inputCss,
-        outputCss,
-        outputTypeChanged: setOutputType,
-        inputCssChanged: setInputCss,
-      }}
-    >
+    <AppContext>
       <div className="wrapper">
         <Header />
         <Title />
         <Transform />
       </div>
-    </Context.Provider>
+    </AppContext>
   );
 }
 

package.json

@@ -0,0 +1,16 @@
+import React, { createContext, useContext, useState } from "react";
+
+export const Context = createContext();
+
+export const useOutputType = () => useContext(Context);
+
+const AppContext = ({ children }) => {
+  const [outputType, setOutputType] = useState("React Native");
+  return (
+    <Context.Provider value={{ outputType, setOutputType }}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export default AppContext;

src/App.js

@@ -17,11 +17,3 @@
   overflow: scroll;
   tab-size: 4;
 }
-
-.code--input {
-  background: #ecf2f5;
-}
-
-.code--output {
-  background: #e0ebf5;
-}

src/AppContext.js

@@ -1,19 +1,21 @@
-import React, { useContext } from "react";
+import React from "react";
+
+// Custom hook to consume the global state
+import { useOutputType } from "../../AppContext";
 
 import "./header.scss";
-import SelectBox from "../select-box/SelectBox";
-import { Context } from "../../App";
+import Select from "./select/Select";
 
 const Header = () => {
-  const { outputType } = useContext(Context);
+  const { outputType } = useOutputType();
 
   return (
     <header>
       <div className="header-wrapper">
         <div>
           <h1>
             CSS to &nbsp;
-            <SelectBox />
+            <Select />
           </h1>
           <br />
         </div>

src/components/code-editor/code-editor.scss src/assets/css/editor.scss

@@ -1,13 +1,13 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 
-import { Context } from "../../App";
+import { Context } from "../../AppContext";
 import Header from "./Header";
 
 test("should show the message with proper output type", () => {
-  const contextValue = { outputType: "JSS" };
+  const value = { outputType: "JSS" };
   render(
-    <Context.Provider value={contextValue}>
+    <Context.Provider value={value}>
       <Header />
     </Context.Provider>
   );

src/components/code-editor/CodeEditor.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+// Custom hook to consume the global state
+import { useOutputType } from "../../../AppContext";
+
+import "./select.scss";
+
+const SelectBox = () => {
+  const { setOutputType } = useOutputType();
+
+  return (
+    <select
+      className="select"
+      data-testid="select"
+      onChange={({ target }) => setOutputType(target.value)}
+    >
+      <option value="React Native">React Native</option>
+      <option value="JSS">JSS</option>
+    </select>
+  );
+};
+
+export default SelectBox;

src/components/code-editor/code-editor.test.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Context } from "../../../AppContext";
+import Select from "./Select";
+
+test("should invoke the callback when value changes", async () => {
+  const setOutputType = jest.fn();
+  const value = { setOutputType };
+
+  render(
+    <Context.Provider value={value}>
+      <Select />
+    </Context.Provider>
+  );
+
+  await userEvent.selectOptions(screen.getByTestId("select"), ["JSS"]);
+
+  expect(setOutputType).toHaveBeenLastCalledWith("JSS");
+});