parcer/legacy/src/PairEditForm.tsx

import { Button, TextField, Typography } from "@mui/material";
import React, { FC } from "react";
import { Preprocessor, WhereWhatPair } from "maxun-core";

interface PairProps {
  index: string;
  id?: string;
  where: string | null;
  what: string | null;
}

interface PairEditFormProps {
  onSubmitOfPair: (value: WhereWhatPair, index: number) => void;
  numberOfPairs: number;
  index?: string;
  where?: string;
  what?: string;
  id?: string;
}

export const PairEditForm: FC<PairEditFormProps> = (
  {
    onSubmitOfPair,
    numberOfPairs,
    index,
    where,
    what,
    id,
  }) => {
  const [pairProps, setPairProps] = React.useState<PairProps>({
    where: where || null,
    what: what || null,
    index: index || "1",
    id: id || '',
  });
  const [errors, setErrors] = React.useState<PairProps>({
    where: null,
    what: null,
    index: '',
  });

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { id, value } = event.target;
    if (id === 'index') {
      if (parseInt(value, 10) < 1) {
        setErrors({ ...errors, index: 'Index must be greater than 0' });
        return;
      } else {
        setErrors({ ...errors, index: '' });
      }
    }
    setPairProps({ ...pairProps, [id]: value });
  };

  const validateAndSubmit = (event: React.SyntheticEvent) => {
    event.preventDefault();
    let whereFromPair, whatFromPair;
    // validate where
    whereFromPair = {
      where: pairProps.where && pairProps.where !== '{"url":"","selectors":[""] }'
        ? JSON.parse(pairProps.where)
        : {},
      what: [],
    };
    const validationError = Preprocessor.validateWorkflow({ workflow: [whereFromPair] });
    setErrors({ ...errors, where: null });
    if (validationError) {
      setErrors({ ...errors, where: validationError.message });
      return;
    }
    // validate what
    whatFromPair = {
      where: {},
      what: pairProps.what && pairProps.what !== '[{"action":"","args":[""] }]'
        ? JSON.parse(pairProps.what) : [],
    };
    const validationErrorWhat = Preprocessor.validateWorkflow({ workflow: [whatFromPair] });
    setErrors({ ...errors, "what": null });
    if (validationErrorWhat) {
      setErrors({ ...errors, what: validationErrorWhat.message });
      return;
    }
    //validate index
    const index = parseInt(pairProps?.index, 10);
    if (index > (numberOfPairs + 1)) {
      if (numberOfPairs === 0) {
        setErrors(prevState => ({
          ...prevState,
          index: 'Index of the first pair must be 1'
        }));
        return;
      } else {
        setErrors(prevState => ({
          ...prevState,
          index: `Index must be in the range 1-${numberOfPairs + 1}`
        }));
        return;
      }
    } else {
      setErrors({ ...errors, index: '' });
    }
    // submit the pair
    onSubmitOfPair(pairProps.id
      ? {
        id: pairProps.id,
        where: whereFromPair?.where || {},
        what: whatFromPair?.what || [],
      }
      : {
        where: whereFromPair?.where || {},
        what: whatFromPair?.what || [],
      }
      , index);
  };

  return (
    <form
      onSubmit={validateAndSubmit}
      style={{
        display: "grid",
        padding: "0px 30px 0px 30px",
        marginTop: "36px",
      }}
    >
      <Typography sx={{ marginBottom: '30px' }} variant='h5'>Raw pair edit form:</Typography>
      <TextField sx={{
        display: "block",
        marginBottom: "20px"
      }} id="index" label="Index" type="number"
        InputProps={{ inputProps: { min: 1 } }}
        InputLabelProps={{
          shrink: true,
        }} defaultValue={pairProps.index}
        onChange={handleInputChange}
        error={!!errors.index} helperText={errors.index}
        required
      />
      <TextField sx={{
        marginBottom: "20px"
      }} id="id" label="Id" type="string"
        defaultValue={pairProps.id}
        onChange={handleInputChange}
      />
      <TextField multiline sx={{ marginBottom: "20px" }}
        id="where" label="Where" variant="outlined" onChange={handleInputChange}
        defaultValue={where || '{"url":"","selectors":[""]}'}
        error={!!errors.where} helperText={errors.where} />
      <TextField multiline sx={{ marginBottom: "20px" }}
        id="what" label="What" variant="outlined" onChange={handleInputChange}
        defaultValue={what || '[{"action":"","args":[""]}]'}
        error={!!errors.what} helperText={errors.what} />
      <Button
        type="submit"
        variant="contained"
        sx={{ padding: "8px 20px", }}
      >
        Save
      </Button>
    </form>
  );
};