connect/client/src/components/UserCreate.tsx

import {
  Button,
  Form,
  Input,
  Select,
  Upload,
  Image,
  UploadFile,
  GetProp,
  UploadProps,
  message,
  Spin,
} from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useUserSelector } from "@/store/userStore";
import { UserCreate as NewUserCreate } from "@/types/user";
import { UserService } from "@/services/userService";
import { LoadingOutlined } from "@ant-design/icons";

const { Option } = Select;

type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];

const getBase64 = (file: FileType): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

interface UserCreateProps {
  closeDrawer: () => void;
  getUsers: () => Promise<void>;
}

export default function UserCreate({ closeDrawer, getUsers }: UserCreateProps) {
  const user = useUserSelector();
  const { t } = useTranslation();
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [loading, setLoading] = useState(false);

  const [fileList, setFileList] = useState<UploadFile[]>([]);

  const handlePreview = async (file: UploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj as FileType);
    }

    setPreviewImage(file.url || (file.preview as string));
    setPreviewOpen(true);
  };

  const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) =>
    setFileList(newFileList);

  const onFinish = async (values: NewUserCreate) => {
    setLoading(true);
    await UserService.createUser(values);
    await getUsers();
    closeDrawer();
    setLoading(false);
    message.info(t("createdAccountMessage"), 4);
  };

  const customUploadButton = (
    <div>
      <div
        style={{
          height: "102px",
          width: "102px",
          backgroundColor: "#E2E2E2",
          borderRadius: "50%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginBottom: 8,
          marginTop: 30,
          cursor: "pointer",
        }}
      >
        <img
          src="./icons/drawer/add_photo_alternate.svg"
          alt="add_photo_alternate"
          style={{ height: "18px", width: "18px" }}
        />
      </div>

      <span style={{ fontSize: "14px", color: "#8c8c8c" }}>
        {t("selectPhoto")}
      </span>
    </div>
  );

  const photoToUpload = (
    <div style={{ height: "102px" }}>
      <Upload
        listType="picture-circle"
        fileList={fileList}
        onPreview={handlePreview}
        onChange={handleChange}
        beforeUpload={() => false}
      >
        {fileList.length > 0 ? null : customUploadButton}
      </Upload>
      {previewImage && (
        <Image
          wrapperStyle={{ display: "none" }}
          preview={{
            visible: previewOpen,
            onVisibleChange: (visible) => setPreviewOpen(visible),
            afterOpenChange: (visible) => !visible && setPreviewImage(""),
          }}
          src={previewImage}
        />
      )}
    </div>
  );

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginBottom: "36px",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          {photoToUpload}
        </div>
      </div>
      <Form
        name="user-edit-form"
        layout="vertical"
        onFinish={onFinish}
        initialValues={{
          name: "",
          login: "",
          password: "",
          email: "",
          bindTenantId: "",
          role: "",
          status: "",
        }}
        style={{ flex: 1, display: "flex", flexDirection: "column" }}
      >
        <Form.Item
          label={t("name")}
          name="name"
          rules={[{ required: true, message: t("nameMessage") }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label={t("login")}
          name="login"
          rules={[{ required: true, message: t("loginMessage") }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label={t("password")}
          name="password"
          rules={[{ message: t("passwordMessage") }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label={t("email")}
          name="email"
          rules={[
            { message: t("emailMessage") },
            { type: "email", message: t("emailErrorMessage") },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label={t("tenant")}
          name="bindTenantId"
          rules={[{ message: t("tenantMessage") }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label={t("role")}
          name="role"
          rules={[{ required: true, message: t("roleMessage") }]}
        >
          <Select placeholder={t("roleMessage")}>
            {user && user.role === "OWNER" ? (
              <Option value="ADMIN">{t("ADMIN")}</Option>
            ) : undefined}
            <Option value="EDITOR">{t("EDITOR")}</Option>
            <Option value="VIEWER">{t("VIEWER")}</Option>
          </Select>
        </Form.Item>

        <Form.Item
          label={t("status")}
          name="status"
          rules={[{ required: true, message: t("statusMessage") }]}
        >
          <Select placeholder={t("statusMessage")}>
            <Option value="ACTIVE">{t("ACTIVE")}</Option>
            <Option value="DISABLED">{t("DISABLED")}</Option>
            <Option value="BLOCKED">{t("BLOCKED")}</Option>
            <Option value="DELETED">{t("DELETED")}</Option>
          </Select>
        </Form.Item>

        <div style={{ flexGrow: 1 }} />

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            block
            style={{ color: "#000" }}
          >
            {loading ? (
              <>
                <Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{" "}
                {t("saving")}
              </>
            ) : (
              <>
                <img
                  src="/icons/drawer/reg.svg"
                  alt="save"
                  style={{ height: "18px", width: "18px" }}
                />{" "}
                {t("addAccount")}
              </>
            )}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}