Refactor

package.json

@@ -12,14 +12,15 @@
     "@rcpch/digital-growth-charts-react-component-library": "6.1.13",
     "axios": "^0.21.1",
     "moment": "^2.29.1",
+    "nvm": "^0.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^4.0.3",
-    "semantic-ui-react": "^2.0.0",
+    "semantic-ui-react": "^2.1.4",
     "styled-components": "^5.2.3"
   },
   "devDependencies": {
-    "@craco/craco": "^6.4.3",
+    "@craco/craco": "^6.4.5",
     "@semantic-ui-react/craco-less": "^1.2.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",

src/App.js

@@ -1,14 +1,250 @@
+// React
+import { useState, useMemo } from "react";
+
+// Themes
+import RCPCHTheme1 from "./components/chartThemes/rcpchTheme1";
+import RCPCHTheme2 from "./components/chartThemes/rcpchTheme2";
+import RCPCHTheme3 from "./components/chartThemes/rcpchTheme3";
+import RCPCHThemeMonochrome from "./components/chartThemes/rcpchThemeMonochrome";
+import RCPCHThemeTraditionalBoy from "./components/chartThemes/RCPCHThemeTraditionalBoy";
+import RCPCHThemeTraditionalGirl from "./components/chartThemes/RCPCHThemeTraditionalGirl";
+
+// Config
+import { themeOptions, panesBlueprint } from "./assets/config.js";
+
+// Semantic UI React
+import createSemanticPanes from "./functions/semantic-ui-functions/createSemanticPanes.js";
+import createFormPanes from "./components/SemanticGrid/subcomponents/createFormPanes.jsx";
+
+// Components
+import ErrorModal from "./components/ErrorModal.jsx";
+import SemanticGrid from "./components/SemanticGrid/SemanticGrid.jsx";
+
+// Custom hooks
+import useErrorHandling from "./hooks/useErrorHandling.jsx";
+import useSelectedTheme from "./hooks/useSelectedTheme.jsx";
+import useCheckForData from "./hooks/useCheckForData.jsx";
+import useGlobalState from "./hooks/useGlobalState";
+import useRcpchApi from "./hooks/useRcpchApi";
+
+// Functions
+import ChangeTheme from "./functions/MeasurementSegment/handleChangeTheme";
+import "./index.css";
 import "./App.css";
+import handleResetCurrent from "./functions/handleResetCurrent.js";
+import handleUndoLast from "./functions/handleUndoLast.js";
+import InitalErrorModalState from "./functions/InitialErrorModalState.js";
 
-// RCPCH Components
-import "./components/MeasurementForm";
-import Home from "./pages/Home";
+const defaultTheme = RCPCHThemeMonochrome;
 
 function App() {
+  // State functions
+  const [chartStyle, setChartStyle] = useState(defaultTheme.chart);
+  const [axisStyle, setAxisStyle] = useState(defaultTheme.axes);
+  const [centileStyle, setCentileStyle] = useState(defaultTheme.centiles);
+  const [sdsStyle, setSDSStyle] = useState(defaultTheme.sds);
+  const [centile, setCentile] = useState(true);
+  const [measurementStyle, setMeasurementStyle] = useState(
+    defaultTheme.measurements
+  );
+  const [theme, setTheme] = useState({
+    value: "tanner4",
+    text: "Monochrome",
+  });
+  const [flip, setFlip] = useState(false); // flag to determine if results or chart showing
+  const [errorModal, setErrorModal] = useState(InitalErrorModalState());
+  const { globalState, makeGlobalStateUpdater } = useGlobalState();
+  const [clinician, setClinician] = useState(true);
+
+  // Other constants
+  const {
+    mode,
+    modeActiveIndex,
+    reference,
+    measurementMethod,
+    measurementMethodActiveIndex,
+    sex,
+    disabled,
+    errors,
+    resetCurrent,
+    undoLast,
+  } = globalState;
+
+  const {
+    fetchResult,
+    removeLastActiveItem,
+    clearBothActiveArrays,
+    clearApiErrors,
+    measurements,
+    results,
+    apiErrors,
+    isLoading,
+  } = useRcpchApi(measurementMethod, reference, mode);
+
+  const updateGlobalState = useMemo(
+    () => makeGlobalStateUpdater(results),
+    [results, makeGlobalStateUpdater]
+  );
+
+  // Hooks
+  // Error handling Custom Hook
+  useErrorHandling(
+    apiErrors,
+    errors,
+    setErrorModal,
+    clearApiErrors,
+    updateGlobalState,
+    InitalErrorModalState
+  );
+
+  // Theme select Custom Hook
+  useSelectedTheme(
+    theme,
+    sex,
+    setCentileStyle,
+    setChartStyle,
+    setMeasurementStyle,
+    setAxisStyle
+  );
+
+  // Check for input data Custom Hook
+  useCheckForData(results, reference, measurementMethod, updateGlobalState);
+
+  // If resetCurrent is flagged to true, then this function fires
+  handleResetCurrent(
+    resetCurrent,
+    setErrorModal,
+    clearBothActiveArrays,
+    updateGlobalState,
+    InitalErrorModalState
+  );
+
+  // If undoLast is flagged to true, then this function fires
+  handleUndoLast(
+    undoLast,
+    setErrorModal,
+    removeLastActiveItem,
+    updateGlobalState,
+    InitalErrorModalState
+  );
+
+  // React state functions
+  const handleTabChange = (e, { activeIndex }) => {
+    updateGlobalState("measurementMethodActiveIndex", activeIndex);
+  };
+
+  const handleModeChange = (e, { activeIndex }) => {
+    updateGlobalState("modeActiveIndex", activeIndex);
+  };
+
+  const fictionalFormDataSubmit = (formData) => {
+    // convert percentage back to a decimal for the API
+    formData.noise_range = formData.noise_range / 100;
+    fetchResult(formData);
+  };
+
+  const utilitiesFormDataSubmit = (formData) => {
+    // delegate function from midparental height calculation
+    fetchResult(formData);
+    if (isLoading) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const handleChangeTheme = (e, { value }) => {
+    ChangeTheme(
+      value,
+      sex,
+      RCPCHTheme1,
+      RCPCHTheme2,
+      RCPCHTheme3,
+      RCPCHThemeMonochrome,
+      RCPCHThemeTraditionalBoy,
+      RCPCHThemeTraditionalGirl,
+      setChartStyle,
+      setCentileStyle,
+      setSDSStyle,
+      setMeasurementStyle,
+      setAxisStyle,
+      setTheme
+    );
+  };
+
+  const handleFlipResults = () => {
+    setFlip(!flip);
+  };
+
+  const handleCentileSDS = () => {
+    setCentile(!centile);
+  };
+
+  // Other stuff (Semantic UI gubbins)
+  const panes = createSemanticPanes(
+    panesBlueprint,
+    centile,
+    disabled,
+    results,
+    reference,
+    sex,
+    isLoading,
+    chartStyle,
+    axisStyle,
+    defaultTheme,
+    centileStyle,
+    sdsStyle,
+    measurementStyle,
+    clinician
+  );
+
+  const FormPanes = createFormPanes(
+    isLoading,
+    measurements,
+    reference,
+    measurementMethod,
+    setErrorModal,
+    InitalErrorModalState,
+    fetchResult,
+    globalState,
+    updateGlobalState,
+    utilitiesFormDataSubmit,
+    centileStyle,
+    fictionalFormDataSubmit,
+  );
+
+  // Core return
   return (
-    <div className="App">
-      <Home />
-    </div>
+    <>
+      <SemanticGrid
+        mode={mode}
+        flip={flip}
+        FormPanes={FormPanes}
+        handleModeChange={handleModeChange}
+        modeActiveIndex={modeActiveIndex}
+        results={results}
+        reference={reference}
+        clinician={clinician}
+        setClinician={setClinician}
+        themeOptions={themeOptions}
+        handleChangeTheme={handleChangeTheme}
+        theme={theme}
+        handleCentileSDS={handleCentileSDS}
+        centile={centile}
+        globalState={globalState}
+        handleFlipResults={handleFlipResults}
+        panes={panes}
+        measurementMethodActiveIndex={measurementMethodActiveIndex}
+        handleTabChange={handleTabChange}
+      />
+      <ErrorModal
+        title={errorModal.title}
+        body={errorModal.body}
+        visible={errorModal.visible}
+        handleClose={errorModal.handleClose}
+        handleCancel={errorModal.handleCancel}
+      />
+    </>
   );
 }
 

src/assets/config.js

@@ -0,0 +1,30 @@
+export const panesBlueprint = [
+    {
+      menuItem: "Height",
+      measurementName: "height",
+      key: "Height",
+    },
+    {
+      menuItem: "Weight",
+      measurementName: "weight",
+      key: "Weight",
+    },
+    {
+      menuItem: "BMI",
+      measurementName: "bmi",
+      key: "BMI",
+    },
+    {
+      menuItem: "Head Circumference",
+      measurementName: "ofc",
+      key: "Head Circumference",
+    },
+  ];
+
+  export const themeOptions = [
+    { key: "monochrome", value: "monochrome", text: "Monochrome" },
+    { key: "trad", value: "trad", text: "Traditional" },
+    { key: "tanner1", value: "tanner1", text: "Tanner 1" },
+    { key: "tanner2", value: "tanner2", text: "Tanner 2" },
+    { key: "tanner3", value: "tanner3", text: "Tanner 3" },
+  ];

src/components/ErrorModal.jsx

@@ -0,0 +1,25 @@
+import { Button, Modal } from "semantic-ui-react";
+
+const ErrorModal = ({
+  title,
+  body,
+  handleClose,
+  visible,
+  handleCancel,
+}) => {
+  const showCancel = handleCancel ? true : false;
+  return (
+    <Modal title={title} open={visible} size="small" closeOnEscape={true}>
+      <Modal.Header>{title}</Modal.Header>
+      <Modal.Content>{body}</Modal.Content>
+      <Modal.Actions>
+        <Button negative onClick={handleClose}>
+          OK
+        </Button>
+        {showCancel && <Button onClick={handleCancel}>Cancel</Button>}
+      </Modal.Actions>
+    </Modal>
+  );
+};
+
+export default ErrorModal

src/components/MeasurementForm.js

@@ -20,12 +20,15 @@ import ErrorText from "./subcomponents/ErrorText";
 import BoneAgeTypeSelect from "./subcomponents/BoneAge";
 import { formatDate, parseDate } from "../functions/dateHelpers";
 import UtilitiesForm from "./subcomponents/UtilitiesForm";
+import handleResults from "../functions/handleResults";
+
 
 const ROBERT_WADLOW = 272; // interesting fact - Robert Wadlow (22/2/1918 – 15/7/1940) was the world's tallest man
 const JON_BROWER_MINNOCH = 635; // interesting fact -  Jon Brower Minnoch (Born USA) was the world's heaviest man
 const KHALID_BIN_MOHSEN_SHAARI = 204; // Khalid bin Mohsen Shaari (2/8/1991) from Saudi Arabia had the highest recorded BMI
 
 const MeasurementForm = (props) => {
+
   const [birth_date, setBirth_date] = useState(formatDate(new Date()));
   const [observation_date, setObservation_date] = useState(
     formatDate(new Date())
@@ -219,7 +222,7 @@ const MeasurementForm = (props) => {
     };
 
     const formData = Object.assign(measurementFormData, boneageData, eventText);
-    props.handleMeasurementResult(formData);
+    handleResults(formData, props.isLoading, props.measurements, props.reference, props.measurementMethod, props.setErrorModal, props.InitalErrorModalState, props.fetchResult);
   };
 
   const handleChangeMeasurementMethod = (newMeasurementMethod) => {