From a3823b2205ce7497fe9fd82622c19ce34e944693 Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Fri, 20 Oct 2023 11:44:39 +0200
Subject: [PATCH] chore: fix types

---
 src/component/1d/tool/XLabelPointer.tsx       | 20 ++---
 src/component/header/Header.tsx               |  1 +
 .../SummaryPanel/SetShiftTolerancesModal.tsx  | 75 +++++++++----------
 3 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/src/component/1d/tool/XLabelPointer.tsx b/src/component/1d/tool/XLabelPointer.tsx
index 1725f7ce27..548a970838 100644
--- a/src/component/1d/tool/XLabelPointer.tsx
+++ b/src/component/1d/tool/XLabelPointer.tsx
@@ -1,12 +1,12 @@
 import { Spectrum1D } from 'nmr-load-save';
-import { useCallback, useMemo, CSSProperties } from 'react';
+import { useCallback, CSSProperties } from 'react';
 
 import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
 import { useMouseTracker } from '../../EventsTrackers/MouseTracker';
 import { useChartData } from '../../context/ChartContext';
 import { useScaleChecked } from '../../context/ScaleContext';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
+import useSpectrum from '../../hooks/useSpectrum';
 
 const style: CSSProperties = {
   cursor: 'crosshair',
@@ -20,31 +20,25 @@ const style: CSSProperties = {
 };
 
 function XLabelPointer() {
-  const { height, width, margin, data } = useChartData();
-  const activeSpectrum = useActiveSpectrum();
+  const { height, width, margin } = useChartData();
+  const activeSpectrum = useSpectrum(null);
   const { scaleX } = useScaleChecked();
 
   const position = useMouseTracker();
   const brushState = useBrushTracker();
-  const activeSpectrumData = useMemo(() => {
-    const spectrumData = activeSpectrum
-      ? data.find((d) => d.id === activeSpectrum.id)
-      : null;
-    return spectrumData;
-  }, [activeSpectrum, data]);
 
   const format = useFormatNumberByNucleus(
-    (activeSpectrumData as Spectrum1D)?.info.nucleus,
+    (activeSpectrum as Spectrum1D)?.info.nucleus,
   );
 
   const getXValue = useCallback(
     (xVal) => {
-      if (activeSpectrumData) {
+      if (activeSpectrum) {
         const xInvert = scaleX().invert(xVal);
         return format(xInvert);
       }
     },
-    [activeSpectrumData, format, scaleX],
+    [activeSpectrum, format, scaleX],
   );
 
   if (
diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx
index 61785453cc..b81768de73 100644
--- a/src/component/header/Header.tsx
+++ b/src/component/header/Header.tsx
@@ -124,6 +124,7 @@ function HeaderInner(props: HeaderInnerProps) {
       case options.zonePicking.id:
         return <Zones2DOptionPanel />;
       default:
+        return null;
         break;
     }
   }, [selectedOptionPanel]);
diff --git a/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx b/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
index 33c5866b81..9c84d75052 100644
--- a/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
+++ b/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import CloseButton from '../../elements/CloseButton';
 
@@ -99,45 +99,20 @@ export default function SetShiftToleranceModal({
     }
   }, [previousTolerance]);
 
-  const onSaveHandler = useCallback(() => {
+  function onSaveHandler() {
     onSave?.(tolerance);
     onClose?.();
-  }, [onClose, onSave, tolerance]);
-
-  const onChangeHandler = useCallback(
-    (e, atomType: string) => {
-      const value: string = e.target.value;
-      if (value.trim().length > 0) {
-        setTolerance({ ...tolerance, [atomType]: Number(value) });
-        setIsValid({ ...isValid, [atomType]: true });
-      } else {
-        setIsValid({ ...isValid, [atomType]: false });
-      }
-    },
-    [isValid, tolerance],
-  );
+  }
 
-  const rows = useMemo(() => {
-    return tolerance
-      ? Object.keys(tolerance).map((atomType) => {
-          return (
-            <tr key={`tolerance_${atomType}`}>
-              <td>{atomType}</td>
-              <td>
-                <input
-                  type="number"
-                  onChange={(e) => onChangeHandler(e, atomType)}
-                  defaultValue={tolerance[atomType]}
-                  style={
-                    !isValid[atomType] ? { backgroundColor: 'orange' } : {}
-                  }
-                />
-              </td>
-            </tr>
-          );
-        })
-      : undefined;
-  }, [isValid, onChangeHandler, tolerance]);
+  function onChangeHandler(e, atomType: string) {
+    const value: string = e.target.value;
+    if (value.trim().length > 0) {
+      setTolerance({ ...tolerance, [atomType]: Number(value) });
+      setIsValid({ ...isValid, [atomType]: true });
+    } else {
+      setIsValid({ ...isValid, [atomType]: false });
+    }
+  }
 
   return (
     <div css={modalContainer}>
@@ -153,7 +128,13 @@ export default function SetShiftToleranceModal({
             <th>Value</th>
           </tr>
         </thead>
-        <tbody>{rows}</tbody>
+        <tbody>
+          <Rows
+            onChange={onChangeHandler}
+            isValid={isValid}
+            tolerance={tolerance}
+          />
+        </tbody>
       </table>
       <button
         type="button"
@@ -165,3 +146,21 @@ export default function SetShiftToleranceModal({
     </div>
   );
 }
+
+function Rows({ tolerance, onChange, isValid }) {
+  return Object.keys(tolerance).map((atomType) => {
+    return (
+      <tr key={`tolerance_${atomType}`}>
+        <td>{atomType}</td>
+        <td>
+          <input
+            type="number"
+            onChange={(e) => onChange(e, atomType)}
+            defaultValue={tolerance[atomType]}
+            style={!isValid[atomType] ? { backgroundColor: 'orange' } : {}}
+          />
+        </td>
+      </tr>
+    );
+  });
+}