marginTop: spacing()

in public/src/components/channelManagement/tickerEditor.tsx [25:88]
54 lines of code
6 McCabe index (conditional complexity)

      marginTop: spacing(3),
    },
  },
}));

interface FormData {
  countLabel: string;
  goalCopy: string;
  currencySymbol: string;
}

const DEFAULT_TICKER_SETTINGS: TickerSettings = {
  copy: {
    countLabel: 'Contributions',
    goalCopy: 'goal',
  },
  currencySymbol: '$',
  name: TickerName.US,
};

interface TickerEditorProps {
  isDisabled: boolean;
  tickerSettings?: TickerSettings;
  updateTickerSettings: (updatedTickerSettings?: TickerSettings) => void;
  onValidationChange: (isValid: boolean) => void;
}

const TickerEditor: React.FC<TickerEditorProps> = ({
  isDisabled,
  tickerSettings,
  updateTickerSettings,
  onValidationChange,
}: TickerEditorProps) => {
  const classes = useStyles();

  const defaultValues: FormData = {
    countLabel: tickerSettings?.copy.countLabel || '',
    goalCopy: tickerSettings?.copy.goalCopy || '',
    currencySymbol: tickerSettings?.currencySymbol || '',
  };

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

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues.countLabel, defaultValues.goalCopy, defaultValues.currencySymbol]);

  useEffect(() => {
    const isValid = Object.keys(errors).length === 0;
    onValidationChange(isValid);
  }, [errors.countLabel, errors.goalCopy, errors.currencySymbol]);

  const onCheckboxChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const isChecked = event.target.checked;
    updateTickerSettings(isChecked ? DEFAULT_TICKER_SETTINGS : undefined);
  };

  const onNameChanged = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const selectedName = event.target.value as TickerName;
    tickerSettings &&
      updateTickerSettings({