refactor: change the code for better readability

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -9,6 +9,107 @@ type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
 type Norm = { id?: string | number; norm?: 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 (buttonType)  {
+      case "pause":
+        await pauseExperiment();
+        break;
+      case "play":
+        await playExperiment();
+        break;
+      case "nextPhase":
+        await nextPhase();
+        break;
+      case "resetPhase":
+        await resetPhase();
+        break;
+      case "resetExperiment":
+        await resetExperiment();
+        break;
+      default:
+    }
+  } catch (err) {
+    console.error(err);
+  } finally {
+    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);
@@ -16,8 +117,7 @@ const MonitoringPage: React.FC = () => {
   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);
@@ -32,35 +132,7 @@ const MonitoringPage: React.FC = () => {
   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) => {
-    try {
-      setLoading(true);
-      switch (button)  {
-        case "pause":
-          await pauseExperiment();
-          break;
-        case "play":
-          await playExperiment();
-          break;
-        case "nextPhase":
-          await nextPhase();
-          break;
-        case "resetPhase":
-          await resetPhase();
-          break;
-        case "resetExperiment":
-          await resetExperiment();
-          break;
-        default:
-      }
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  }
   return (
     <div className={styles.dashboardContainer}>
       {/* HEADER */}
@@ -77,57 +149,8 @@ const MonitoringPage: React.FC = () => {
           </div>
         </div>
 
-        <div className={styles.experimentControls}>
+        {/*Experiment Controls*/}
-          <h3>Experiment Controls</h3>
+        {experimentControls()}
-          <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>
 
         <div className={styles.connectionStatus}>
           {RobotConnected()}