refactor: change the code for better readability

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -9,35 +9,17 @@ type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
 type Norm = { id?: string | number; norm?: string };
 
 
-const MonitoringPage: React.FC = () => {
-  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
-  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
-  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
-  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
-
-  // Can be used to block actions until feedback from CB.
-  const [loading, setLoading] = React.useState(false);
-  const [isPlaying, setIsPlaying] = React.useState(false);
-
-  const phaseIds = getPhaseIds();
-  const [phaseIndex, _] = React.useState(0);
-
-  if (phaseIds.length === 0) {
-    return <p className={styles.empty}>No program loaded.</p>;
-  }
-
-  const phaseId = phaseIds[phaseIndex];
-
-  const goals = getGoalsInPhase(phaseId) as Goal[];
-  const triggers = getTriggersInPhase(phaseId) as Trigger[];
-  const norms = getNormsInPhase(phaseId) as Norm[];
-
-  // Handle logic of 'next' button.
-
-  const handleButton = async (button: string, _context?: string, _endpoint?: string) => {
+/**
+ * Helper function for handling the experiment controls buttons.
+ * @param buttonType - Type of button that was pressed.
+ * @param setLoading - Reference to the function that sets the current loading value.
+ * @param _context - (Optional) context parameter that could get used in an API call.
+ * @param _endpoint - (Optional) context parameter that could get used in an API call.
+ */
+const handleButton = async (buttonType: string, setLoading: React.Dispatch<React.SetStateAction<boolean>>, _context?: string, _endpoint?: string,) => {
   try {
     setLoading(true);
-      switch (button)  {
+    switch (buttonType)  {
       case "pause":
         await pauseExperiment();
         break;
@@ -61,6 +43,96 @@ const MonitoringPage: React.FC = () => {
     setLoading(false);
   }
 }
+
+/**
+ * Defines the pages experiment controls section
+ * @returns an JSX React element
+ */
+const experimentControls = () => {
+  // Define use states for playing and loading
+  const [loading, setLoading] = React.useState(false);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+
+  return ( 
+    <div className={styles.experimentControls}>
+          <h3>Experiment Controls</h3>
+          <div className={styles.controlsButtons}>
+            {/*Pause button*/}
+            <button 
+            className={`${!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(false);
+              handleButton("pause", setLoading);}
+            }
+            disabled={loading}
+            >❚❚</button>
+
+            {/*Play button*/}
+            <button 
+            className={`${isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(true);
+              handleButton("play", setLoading);}
+            }
+            disabled={loading}
+            >▶</button>
+
+            {/*Next button*/}
+            <button
+              className={styles.next}
+              onClick={() => handleButton("nextPhase", setLoading)}
+              disabled={loading}
+            >
+              ⏭
+            </button>
+
+            {/*Restart Phase button*/}
+            <button 
+              className={styles.restartPhase}
+              onClick={() => handleButton("resetPhase", setLoading)}
+              disabled={loading}
+            >
+              ↩
+            </button>
+
+            {/*Restart Experiment button*/}
+            <button 
+              className={styles.restartExperiment}
+              onClick={() => handleButton("resetExperiment", setLoading)}
+              disabled={loading}
+              >
+                ⟲
+              </button>
+          </div>  
+        </div>
+  )
+}
+
+
+
+const MonitoringPage: React.FC = () => {
+  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
+  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
+  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
+  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
+
+  // Can be used to block actions until feedback from CB.
+  
+
+  const phaseIds = getPhaseIds();
+  const [phaseIndex, _] = React.useState(0);
+
+  if (phaseIds.length === 0) {
+    return <p className={styles.empty}>No program loaded.</p>;
+  }
+
+  const phaseId = phaseIds[phaseIndex];
+
+  const goals = getGoalsInPhase(phaseId) as Goal[];
+  const triggers = getTriggersInPhase(phaseId) as Trigger[];
+  const norms = getNormsInPhase(phaseId) as Norm[];
+
+ 
   return (
     <div className={styles.dashboardContainer}>
       {/* HEADER */}
@@ -77,57 +149,8 @@ const MonitoringPage: React.FC = () => {
           </div>
         </div>
 
-        <div className={styles.experimentControls}>
-          <h3>Experiment Controls</h3>
-          <div className={styles.controlsButtons}>
-            {/*Pause button*/}
-            <button 
-            className={`${!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
-            onClick={() => {
-              setIsPlaying(false);
-              handleButton("pause");}
-            }
-            disabled={loading}
-            >❚❚</button>
-
-            {/*Play button*/}
-            <button 
-            className={`${isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
-            onClick={() => {
-              setIsPlaying(true);
-              handleButton("play");}
-            }
-            disabled={loading}
-            >▶</button>
-
-            {/*Next button*/}
-            <button
-              className={styles.next}
-              onClick={() => handleButton("nextPhase")}
-              disabled={loading}
-            >
-              ⏭
-            </button>
-
-            {/*Restart Phase button*/}
-            <button 
-              className={styles.restartPhase}
-              onClick={() => handleButton("resetPhase")}
-              disabled={loading}
-            >
-              ↩
-            </button>
-
-            {/*Restart Experiment button*/}
-            <button 
-              className={styles.restartExperiment}
-              onClick={() => handleButton("resetExperiment")}
-              disabled={loading}
-              >
-                ⟲
-              </button>
-          </div>  
-        </div>
+        {/*Experiment Controls*/}
+        {experimentControls()}
 
         <div className={styles.connectionStatus}>
           {RobotConnected()}