Kutt/client/components/Settings/SettingsBan.tsx

import React, { FC, useState } from "react";
import { Flex } from "reflexbox/styled-components";
import { useFormState } from "react-use-form-state";
import axios from "axios";

import { getAxiosConfig } from "../../utils";
import TextInput from "../TextInput";
import Checkbox from "../Checkbox";
import { API } from '../../consts';
import Button from "../Button";
import Text from "../Text";
import { useMessage } from "../../hooks";

interface BanForm {
  id: string;
  user: boolean;
  domain: boolean;
  host: boolean;
}

const SettingsBan: FC = () => {
  const [submitting, setSubmitting] = useState(false);
  const [message, setMessage] = useMessage(3000);
  const [formState, { checkbox, text }] = useFormState<BanForm>();

  const onSubmit = async e => {
    e.preventDefault();
    setSubmitting(true);
    setMessage()
    try {
      const { data } = await axios.post(API.BAN_LINK, formState.values, getAxiosConfig());
      setMessage(data.message, "green");
      formState.clear();
    } catch (err) {
      setMessage(err?.response?.data?.error || "Couldn't ban the link.");
    }
    setSubmitting(false);
  };

  return (
    <Flex flexDirection="column">
      <Text as="h2" fontWeight={700} mb={4}>Ban link</Text>
      <Flex as="form" flexDirection="column" onSubmit={onSubmit} alignItems="flex-start">
        <Flex mb={24} alignItems="center">
          <TextInput
            {...text("id")}
            placeholder="Link ID (e.g. K7b2A)"
            height={44}
            fontSize={[16, 18]}
            placeholderSize={[14, 15]}
            mr={3}
            pl={24}
            pr={24}
            width={[1, 3 / 5]}
          />
          <Button
            type="submit"
            icon={submitting ? "loader" : "lock"}
            disabled={submitting}
          >
            {submitting ? "Banning..." : "Ban"}
          </Button>
        </Flex>
        <Checkbox
          {...checkbox("user")}
          label="Ban User (and all of their links)"
          mb={12}
        />
        <Checkbox {...checkbox("domain")} label="Ban Domain" mb={12} />
        <Checkbox {...checkbox("host")} label="Ban Host/IP" />
        <Text color={message.color} mt={3}>{message.text}</Text>
      </Flex>
    </Flex>
  );
};

export default SettingsBan;