chore: move AddWhereCondModal to legacy

src/components/recorder/AddWhereCondModal.tsx

@@ -1,152 +0,0 @@
-import { Dropdown as MuiDropdown } from "../ui/DropdownMui";
-import {
-  Button,
-  MenuItem,
-  Typography
-} from "@mui/material";
-import React, { useRef } from "react";
-import { GenericModal } from "../ui/GenericModal";
-import { WhereWhatPair } from "maxun-core";
-import { SelectChangeEvent } from "@mui/material/Select/Select";
-import { DisplayConditionSettings } from "../../../legacy/src/DisplayWhereConditionSettings";
-import { useSocketStore } from "../../context/socket";
-
-interface AddWhereCondModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  pair: WhereWhatPair;
-  index: number;
-}
-
-export const AddWhereCondModal = ({ isOpen, onClose, pair, index }: AddWhereCondModalProps) => {
-  const [whereProp, setWhereProp] = React.useState<string>('');
-  const [additionalSettings, setAdditionalSettings] = React.useState<string>('');
-  const [newValue, setNewValue] = React.useState<any>('');
-  const [checked, setChecked] = React.useState<boolean[]>(new Array(Object.keys(pair.where).length).fill(false));
-
-  const keyValueFormRef = useRef<{ getObject: () => object }>(null);
-
-  const { socket } = useSocketStore();
-
-  const handlePropSelect = (event: SelectChangeEvent<string>) => {
-    setWhereProp(event.target.value);
-    switch (event.target.value) {
-      case 'url': setNewValue(''); break;
-      case 'selectors': setNewValue(['']); break;
-      case 'default': return;
-    }
-  }
-
-  const handleSubmit = () => {
-    switch (whereProp) {
-      case 'url':
-        if (additionalSettings === 'string') {
-          pair.where.url = newValue;
-        } else {
-          pair.where.url = { $regex: newValue };
-        }
-        break;
-      case 'selectors':
-        pair.where.selectors = newValue;
-        break;
-      case 'cookies':
-        pair.where.cookies = keyValueFormRef.current?.getObject() as Record<string, string>
-        break;
-      case 'before':
-        pair.where.$before = newValue;
-        break;
-      case 'after':
-        pair.where.$after = newValue;
-        break;
-      case 'boolean':
-        const booleanArr = [];
-        const deleteKeys: string[] = [];
-        for (let i = 0; i < checked.length; i++) {
-          if (checked[i]) {
-            if (Object.keys(pair.where)[i]) {
-              //@ts-ignore
-              if (pair.where[Object.keys(pair.where)[i]]) {
-                booleanArr.push({
-                  //@ts-ignore
-                  [Object.keys(pair.where)[i]]: pair.where[Object.keys(pair.where)[i]]
-                });
-              }
-              deleteKeys.push(Object.keys(pair.where)[i]);
-            }
-          }
-        }
-        // @ts-ignore
-        deleteKeys.forEach((key: string) => delete pair.where[key]);
-        //@ts-ignore
-        pair.where[`$${additionalSettings}`] = booleanArr;
-        break;
-      default:
-        return;
-    }
-    onClose();
-    setWhereProp('');
-    setAdditionalSettings('');
-    setNewValue('');
-    socket?.emit('updatePair', { index: index - 1, pair: pair });
-  }
-
-  return (
-    <GenericModal isOpen={isOpen} onClose={() => {
-      setWhereProp('');
-      setAdditionalSettings('');
-      setNewValue('');
-      onClose();
-    }} modalStyle={modalStyle}>
-      <div>
-        <Typography sx={{ margin: '20px 0px' }}>Add where condition:</Typography>
-        <div style={{ margin: '8px' }}>
-          <MuiDropdown
-            id="whereProp"
-            label="Condition"
-            value={whereProp}
-            handleSelect={handlePropSelect}>
-            <MenuItem value="url">url</MenuItem>
-            <MenuItem value="selectors">selectors</MenuItem>
-            <MenuItem value="cookies">cookies</MenuItem>
-            <MenuItem value="before">before</MenuItem>
-            <MenuItem value="after">after</MenuItem>
-            <MenuItem value="boolean">boolean logic</MenuItem>
-          </MuiDropdown>
-        </div>
-        {whereProp ?
-          <div style={{ margin: '8px' }}>
-            <DisplayConditionSettings
-              whereProp={whereProp} additionalSettings={additionalSettings} setAdditionalSettings={setAdditionalSettings}
-              newValue={newValue} setNewValue={setNewValue} checked={checked} setChecked={setChecked}
-              keyValueFormRef={keyValueFormRef} whereKeys={Object.keys(pair.where)}
-            />
-            <Button
-              onClick={handleSubmit}
-              variant="outlined"
-              sx={{
-                display: "table-cell",
-                float: "right",
-                marginRight: "15px",
-                marginTop: "20px",
-              }}
-            >
-              {"Add Condition"}
-            </Button>
-          </div>
-          : null}
-      </div>
-    </GenericModal>
-  )
-}
-
-export const modalStyle = {
-  top: '45%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '30%',
-  backgroundColor: 'background.paper',
-  p: 4,
-  height: 'fit-content',
-  display: 'block',
-  padding: '20px',
-};