connect/client/src/components/UserCreate.tsx

import {
  Button,
  Form,
  Input,
  Select,
  Upload,
  Image,
  UploadFile,
  GetProp,
  UploadProps,
} from 'antd';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useUserSelector } from '@/store/userStore';
import { UserUpdate } from '@/types/user';
import { UserService } from '@/services/userService';

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;
}

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

  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: UserUpdate) => {
    console.log(values);
    await UserService.createUser(values);
    closeDrawer();
  };

  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: '',
          tenant: '',
          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={[{ required: true, message: t('passwordMessage') }]}
        >
          <Input.Password />
        </Form.Item>

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

        <Form.Item
          label={t('tenant')}
          name="tenant"
          rules={[{ required: true, 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' }}
          >
            <img
              src="/icons/drawer/reg.svg"
              alt="save"
              style={{ height: '18px', width: '18px' }}
            />{' '}
            {t('addAccount')}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}