UpdateUserForm.jsx

import React from 'react';
import { Button, Stack } from 'react-bootstrap';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import Form from '../../../shared_components/forms/Form';
import FormControl from '../../../shared_components/forms/FormControl';
import useUpdateUser from '../../../../hooks/mutations/users/useUpdateUser';
import Spinner from '../../../shared_components/utilities/Spinner';
import { useAuth } from '../../../../contexts/auth/AuthProvider';
import useRoles from '../../../../hooks/queries/admin/roles/useRoles';
import FormSelect from '../../../shared_components/forms/controls/FormSelect';
import Option from '../../../shared_components/utilities/Option';
import useLocales from '../../../../hooks/queries/locales/useLocales';
import useUpdateUserForm from '../../../../hooks/forms/users/user/useUpdateUserForm';
import PermissionChecker from '../../../../helpers/PermissionChecker';

export default function UpdateUserForm({ user }) {
  const currentUser = useAuth();
  const localesAPI = useLocales();
  const updateUserAPI = useUpdateUser(user?.id);
  const { t } = useTranslation();

  const { methods, fields, reset } = useUpdateUserForm({
    defaultValues: {
      name: user?.name,
      email: user?.email,
      language: user?.language,
      role_id: user?.role?.id,
    },
  });

  const canUpdateRole = PermissionChecker.hasManageUsers(currentUser);
  const rolesAPI = useRoles({ enabled: canUpdateRole });

  return (
    <Form methods={methods} onSubmit={updateUserAPI.mutate}>
      <FormControl field={fields.name} type="text" />
      <FormControl field={fields.email} type="email" readOnly />
      <FormSelect field={fields.language} variant="dropdown">
        {
          Object.keys(localesAPI.data || {}).map((code) => <Option key={code} value={code}>{localesAPI.data[code]}</Option>)
        }
      </FormSelect>
      {(canUpdateRole && rolesAPI.data) && (
        <FormSelect field={fields.role_id} variant="dropdown">
          {
            rolesAPI.data.map((role) => <Option key={role.id} value={role.id}>{role.name}</Option>)
          }
        </FormSelect>
      )}
      <Stack direction="horizontal" gap={2} className="float-end">
        <Button variant="neutral" onClick={reset}> { t('cancel') } </Button>
        <Button variant="brand" type="submit" disabled={updateUserAPI.isLoading}>
          { t('update') }
          {updateUserAPI.isLoading && <Spinner className="me-2" />}
        </Button>
      </Stack>
    </Form>
  );
}

UpdateUserForm.propTypes = {
  user: PropTypes.shape({
    id: PropTypes.string.isRequired,
    avatar: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    provider: PropTypes.string.isRequired,
    role: PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      color: PropTypes.string.isRequired,
    }).isRequired,
    language: PropTypes.string.isRequired,
  }).isRequired,
};