chore: move LeftSidePanelContent to legacy

legacy/src/LeftSidePanel.tsx

@@ -4,7 +4,7 @@ import { getActiveWorkflow, getParamsOfActiveWorkflow } from "../../src/api/work
 import { useSocketStore } from '../../src/context/socket';
 import { WhereWhatPair, WorkflowFile } from "maxun-core";
 import { emptyWorkflow } from "../../src/shared/constants";
-import { LeftSidePanelContent } from "../../src/components/recorder/LeftSidePanelContent";
+import { LeftSidePanelContent } from "./LeftSidePanelContent";
 import { useGlobalInfoStore } from "../../src/context/globalInfo";
 import { TabContext, TabPanel } from "@mui/lab";
 import { LeftSidePanelSettings } from "../../src/components/recorder/LeftSidePanelSettings";

legacy/src/LeftSidePanelContent.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Pair } from "../../src/components/recorder/Pair";
+import { WhereWhatPair, WorkflowFile } from "maxun-core";
+import { useSocketStore } from "../../src/context/socket";
+import { Socket } from "socket.io-client";
+import { AddButton } from "../../src/components/ui/buttons/AddButton";
+import { AddPair } from "../../src/api/workflow";
+import { GenericModal } from "../../src/components/ui/GenericModal";
+import { PairEditForm } from "../../src/components/recorder/PairEditForm";
+import { Tooltip } from "@mui/material";
+
+interface LeftSidePanelContentProps {
+  workflow: WorkflowFile;
+  updateWorkflow: (workflow: WorkflowFile) => void;
+  recordingName: string;
+  handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
+}
+
+export const LeftSidePanelContent = ({ workflow, updateWorkflow, recordingName, handleSelectPairForEdit }: LeftSidePanelContentProps) => {
+  const [activeId, setActiveId] = React.useState<number>(0);
+  const [breakpoints, setBreakpoints] = React.useState<boolean[]>([]);
+  const [showEditModal, setShowEditModal] = useState(false);
+
+  const { socket } = useSocketStore();
+
+  const activePairIdHandler = useCallback((data: string, socket: Socket) => {
+    setActiveId(parseInt(data) + 1);
+    // -1 is specially emitted when the interpretation finishes
+    if (parseInt(data) === -1) {
+      return;
+    }
+    socket.emit('activeIndex', data);
+  }, [activeId])
+
+  const addPair = (pair: WhereWhatPair, index: number) => {
+    AddPair((index - 1), pair).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+    setShowEditModal(false);
+  };
+
+  useEffect(() => {
+    socket?.on("activePairId", (data) => activePairIdHandler(data, socket));
+    return () => {
+      socket?.off("activePairId", (data) => activePairIdHandler(data, socket));
+    }
+  }, [socket, setActiveId]);
+
+
+  const handleBreakpointClick = (id: number) => {
+    setBreakpoints(oldBreakpoints => {
+      const newArray = [...oldBreakpoints, ...Array(workflow.workflow.length - oldBreakpoints.length).fill(false)];
+      newArray[id] = !newArray[id];
+      socket?.emit("breakpoints", newArray);
+      return newArray;
+    });
+  };
+
+  const handleAddPair = () => {
+    setShowEditModal(true);
+  };
+
+  return (
+    <div>
+      <Tooltip title='Add pair' placement='left' arrow>
+        <div style={{ float: 'right' }}>
+          <AddButton
+            handleClick={handleAddPair}
+            title=''
+            hoverEffect={false}
+            style={{ color: 'white', background: '#1976d2' }}
+          />
+        </div>
+      </Tooltip>
+      <GenericModal
+        isOpen={showEditModal}
+        onClose={() => setShowEditModal(false)}
+      >
+        <PairEditForm
+          onSubmitOfPair={addPair}
+          numberOfPairs={workflow.workflow.length}
+        />
+      </GenericModal>
+      <div>
+        {
+          workflow.workflow.map((pair, i, workflow,) =>
+            <Pair
+              handleBreakpoint={() => handleBreakpointClick(i)}
+              isActive={activeId === i + 1}
+              key={workflow.length - i}
+              index={workflow.length - i}
+              pair={pair}
+              updateWorkflow={updateWorkflow}
+              numberOfPairs={workflow.length}
+              handleSelectPairForEdit={handleSelectPairForEdit}
+            />)
+        }
+      </div>
+    </div>
+  );
+};