UserModal.tsx

import React, { useEffect } from 'react';
import { TrashIcon } from '@heroicons/react/outline';
import { useForm } from 'react-hook-form';
import { Modal } from 'src/components';
import { Input } from 'src/components/Form';
import { useUsers } from 'src/services/users';
import { CurrentUserState } from 'src/services/users/redux';
import { appAccessList } from './consts';
import { UserModalProps } from './types';

export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
  const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();

  const { control, reset, handleSubmit } = useForm<CurrentUserState>({
    defaultValues: {
      name: null,
      email: null,
      id: null,
      status: null,
    },
  });

  useEffect(() => {
    if (userId) {
      loadUser(userId);
    }

    reset({ name: null, email: null, id: null, status: null });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [userId]);

  useEffect(() => {
    if (user) {
      reset(user);
    }

    return () => {
      reset({ name: null, email: null, id: null, status: null });
    };
  }, [user, reset]);

  const handleSave = async () => {
    try {
      if (userId) {
        await handleSubmit((data) => editUserById(data))();
      } else {
        await handleSubmit((data) => createNewUser(data))();
        reset({ name: null, email: null, id: null, status: null });
      }

      onClose();
    } catch (e: any) {
      // Continue
    }
  };

  const handleKeyPress = (e: any) => {
    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
      handleSave();
    }
  };

  const handleClose = () => {
    onClose();
  };

  const handleDelete = () => {
    if (userId) {
      deleteUserById(userId);
    }
    handleClose();
  };

  return (
    <Modal
      onClose={handleClose}
      open={open}
      onSave={handleSave}
      isLoading={userModalLoading}
      leftActions={
        userId && (
          <button
            onClick={handleDelete}
            type="button"
            className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
          >
            <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
            Delete
          </button>
        )
      }
      useCancelButton
    >
      <div className="bg-white px-4">
        <div className="space-y-4 divide-y divide-gray-200">
          <div>
            <div>
              <h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
            </div>

            <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
              <div className="sm:col-span-3">
                <Input control={control} name="name" label="Name" onKeyPress={handleKeyPress} />
              </div>

              <div className="sm:col-span-3">
                <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
              </div>

              <div className="sm:col-span-3">
                {/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                  Status
                </label>
                <div className="mt-1">
                  <select
                    id="status"
                    name="status"
                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  >
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Banned</option>
                  </select>
                </div>
              </div>

              <div className="sm:col-span-3">
                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                  Role
                </label>
                <div className="mt-1">
                  <select
                    id="status"
                    name="status"
                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  >
                    <option>User</option>
                    <option>Admin</option>
                    <option>Super Admin</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div className="mt-4">
              <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
            </div>

            <div>
              <div className="flow-root mt-6">
                <ul className="-my-5 divide-y divide-gray-200 ">
                  {appAccessList.map((app: any) => {
                    return (
                      <li className="py-4" key={app.name}>
                        <div className="flex items-center space-x-4">
                          <div className="flex-shrink-0 flex-1 flex items-center">
                            <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
                            <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
                          </div>
                          <div>
                            <select
                              id={app.name}
                              name={app.name}
                              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                            >
                              <option>User</option>
                              <option>Admin</option>
                              <option>Super Admin</option>
                            </select>
                          </div>
                        </div>
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};