added custom hook for cadence gauge

modox94 · Jun 22, 2023 · e77bc73 · e77bc73
1 parent d3e45cd
commit e77bc73
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 28 deletions.
diff --git a/renderer/src/components/CadenceGauge/CadenceGauge.jsx b/renderer/src/components/CadenceGauge/CadenceGauge.jsx
@@ -1,14 +1,11 @@
 import { Icon } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import clsx from "clsx";
-import { get, round } from "lodash";
+import { round } from "lodash";
 import PropTypes from "prop-types";
-import React, { useEffect, useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { updateRunningStatus } from "../../actions/environmentActions";
-import { useGetCadenceQuery } from "../../api/ipc";
+import React, { useMemo } from "react";
 import { RUNNINIG_STATUS } from "../../constants/reduxConst";
-import { getRunningStatus } from "../../selectors/environmentSelectors";
+import { useCadenceState } from "../../utils/commonUtils";
 import SectorOfRound from "../Scales/SectorOfRound";
 import styles from "./CadenceGauge.module.css";
 
@@ -17,14 +14,11 @@ const MAX_VALUE = 120;
 
 const CadenceGauge = props => {
   const { className, targetRpm } = props;
-  const dispatch = useDispatch();
-  const runningStatus = useSelector(getRunningStatus);
-  const cadenceObject = useGetCadenceQuery();
-  const currentCadence = get(cadenceObject, ["data", "result"], 0);
-  const lastTimecode = get(cadenceObject, ["data", "lastTimecode"]);
+  const [currentCadence, , runningStatus] = useCadenceState();
+
   const value = useMemo(
-    () => (runningStatus === PAUSE ? 0 : round(currentCadence / MAX_VALUE, 2)),
-    [currentCadence, runningStatus],
+    () => round(currentCadence / MAX_VALUE, 2),
+    [currentCadence],
   );
   const leftEdge = useMemo(
     () => round((targetRpm - 10) / MAX_VALUE, 2),
@@ -35,10 +29,6 @@ const CadenceGauge = props => {
     [targetRpm],
   );
 
-  useEffect(() => {
-    dispatch(updateRunningStatus(lastTimecode));
-  }, [dispatch, lastTimecode]);
-
   return (
     <div className={clsx(className, styles.container)}>
       <div className={styles.digitalValue}>

diff --git a/renderer/src/components/Footer/Footer.jsx b/renderer/src/components/Footer/Footer.jsx
@@ -5,20 +5,17 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useMatch } from "react-router-dom";
-import {
-  useGetCadenceQuery,
-  useGetPotentiometerQuery,
-  useGetSettingsQuery,
-} from "../../api/ipc";
+import { useGetPotentiometerQuery, useGetSettingsQuery } from "../../api/ipc";
 import { DASH, SPACE } from "../../constants/commonConst";
 import { PAGES, PAGES_PATHS, SUB_PATHS } from "../../constants/pathConst";
-import { FILE_CONST } from "../../constants/reduxConst";
+import { FILE_CONST, RUNNINIG_STATUS } from "../../constants/reduxConst";
 import {
   TRANSLATION_KEYS,
   TRANSLATION_ROOT_KEYS,
 } from "../../constants/translationConst";
 import { getFooterStatus } from "../../selectors/environmentSelectors";
 import { hideFooter, showFooter } from "../../slices/environmentSlice";
+import { useCadenceState } from "../../utils/commonUtils";
 import { getTranslationPath } from "../../utils/translationUtils";
 import DialogCustom from "../DialogCustom/DialogCustom";
 import {
@@ -34,6 +31,8 @@ import {
 } from "../Icons";
 import styles from "./Footer.module.css";
 
+const { PAUSE } = RUNNINIG_STATUS;
+
 const containerStyle = { top: "unset" };
 
 const { MAIN, MANUAL_MODE, SETTINGS, SELECT_PROGRAM, PROGRAM_EDITOR } = PAGES;
@@ -106,10 +105,8 @@ const Footer = props => {
       skip: Boolean(!devStatus),
       pollingInterval: 500,
     }) || {};
+  const [currentCadence, , runningStatus] = useCadenceState();
   const potentiometerValue = round(potentiometerValueRaw);
-  const cadenceObject = useGetCadenceQuery();
-  const currentCadence = get(cadenceObject, ["data", "result"], 0);
-  // const lastTimecode = get(cadenceObject, ["data", "lastTimecode"]);
 
   const filenameMatchPE_EDIT = useMatch(
     `${PAGES_PATHS[PROGRAM_EDITOR]}/${SUB_PATHS[PROGRAM_EDITOR].EDIT}/:${SUB_PATHS.FILENAME}`,
@@ -528,7 +525,9 @@ const Footer = props => {
               text={String(potentiometerValue)}
             />
             <Button
-              icon={IconNames.DASHBOARD}
+              icon={
+                runningStatus === PAUSE ? IconNames.PAUSE : IconNames.DASHBOARD
+              }
               text={String(round(currentCadence))}
             />
           </>

diff --git a/renderer/src/utils/commonUtils.js b/renderer/src/utils/commonUtils.js
@@ -1,5 +1,12 @@
-import { isPlainObject } from "lodash";
+import { get, isPlainObject } from "lodash";
 import { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updateRunningStatus } from "../actions/environmentActions";
+import { useGetCadenceQuery } from "../api/ipc";
+import { RUNNINIG_STATUS } from "../constants/reduxConst";
+import { getRunningStatus } from "../selectors/environmentSelectors";
+
+const { PAUSE } = RUNNINIG_STATUS;
 
 export const consoleError = (error, dataObject = {}) => {
   console.error(error);
@@ -30,3 +37,21 @@ export const usePrevious = value => {
   // Return previous value (happens before update in useEffect above)
   return ref.current;
 };
+
+export const useCadenceState = () => {
+  const dispatch = useDispatch();
+  const runningStatus = useSelector(getRunningStatus);
+  const cadenceObject = useGetCadenceQuery();
+  const currentCadence = get(cadenceObject, ["data", "result"], 0);
+  const lastTimecode = get(cadenceObject, ["data", "lastTimecode"]);
+
+  useEffect(() => {
+    dispatch(updateRunningStatus(lastTimecode));
+  }, [dispatch, lastTimecode]);
+
+  return [
+    runningStatus === PAUSE ? 0 : currentCadence,
+    lastTimecode,
+    runningStatus,
+  ];
+};