function CampaignsEditor()

in public/src/components/channelManagement/campaigns/CampaignsEditor.tsx [119:262]
129 lines of code
7 McCabe index (conditional complexity)

function CampaignsEditor({ campaign, updateCampaign }: CampaignsEditorProps): React.ReactElement {
  const classes = useStyles();

  const [testData, setTestData] = useState<Test[]>([]);
  const [editMode, setEditMode] = useState(false);
  const [showArchivedTests, setShowArchivedTests] = useState(false);

  const { name, nickname, description, notes, isActive } = campaign;

  const doDataFetch = (name: string) => {
    fetchCampaignTests(name).then(tests => {
      // sort by test priority; each channel sets its own priority list
      const sortedTests = tests.sort((a: Test, b: Test) => {
        if (a.priority != null && b.priority != null) {
          return a.priority - b.priority;
        }
        return 0;
      });
      setTestData(sortedTests);
    });
  };

  const defaultValues = {
    description: description ?? '',
    notes: notes ?? [],
    isActive: isActive ?? true,
  };

  useEffect(() => {
    doDataFetch(name);
  }, [name]);

  const updatePage = () => doDataFetch(name);

  const { register, handleSubmit, errors, trigger, control } = useForm<FormData>({
    mode: 'onChange',
    defaultValues,
  });

  useEffect(() => {
    trigger();
  }, []);

  const filterTests = (channel: string) => {
    if (showArchivedTests) {
      return testData.filter(test => test.channel === channel);
    } else {
      const filteredTests = testData.filter(test => test.channel === channel);
      return filteredTests.filter(test => test.status !== 'Archived');
    }
  };

  const onSubmit = ({ description, notes, isActive }: FormData): void => {
    updateCampaign({ ...campaign, description, notes, isActive });
  };

  return (
    <div className={classes.testEditorContainer}>
      <StickyTopBar
        name={name}
        nickname={nickname}
        tests={testData}
        showArchivedTests={showArchivedTests}
        setShowArchivedTests={setShowArchivedTests}
        updatePage={updatePage}
      />
      <div className={classes.scrollableContainer}>
        {name !== unassignedCampaign.name && (
          <div className={classes.formContainer}>
            <div className={classes.notesContainer}>
              <div className={classes.notesHeaderLine}>
                <Typography className={classes.notesHeader}>
                  Campaign metadata and notes:
                </Typography>
                <Button variant="contained" onClick={() => setEditMode(!editMode)}>
                  <Typography>{editMode ? 'Save' : 'Edit'}</Typography>
                </Button>
              </div>

              <TextField
                inputRef={register()}
                error={errors.description !== undefined}
                helperText={errors.description ? errors.description.message : ''}
                onBlur={handleSubmit(onSubmit)}
                name="description"
                label="Description"
                margin="normal"
                variant="outlined"
                disabled={!editMode}
                fullWidth
              />

              <Controller
                name="isActive"
                control={control}
                render={data => (
                  <FormControlLabel
                    control={
                      <Switch
                        inputRef={register()}
                        name="isActive"
                        onChange={e => {
                          data.onChange(e.target.checked);
                          handleSubmit(onSubmit)();
                        }}
                        checked={data.value}
                        disabled={!editMode}
                      />
                    }
                    label={'Include this campaign in Channel Test campaign selectors'}
                  />
                )}
              />

              <Controller
                name="notes"
                control={control}
                render={data => {
                  return (
                    <RichTextEditor
                      error={errors.notes !== undefined}
                      copyData={data.value}
                      updateCopy={pars => {
                        data.onChange(pars);
                        handleSubmit(onSubmit)();
                      }}
                      name="notes"
                      label="Notes and links"
                      disabled={!editMode}
                      rteMenuConstraints={{
                        noCurrencyTemplate: true,
                        noCountryNameTemplate: true,
                        noArticleCountTemplate: true,
                        noPriceTemplates: true,
                        noDateTemplate: true,
                        noDayTemplate: true,
                      }}
                    />
                  );
                }}
              />
            </div>
          </div>
        )}