encoach_frontend/src/pages/(admin)/BatchCreateUser.tsx

import Button from "@/components/Low/Button";
import useUsers from "@/hooks/useUsers";
import { Type as UserType, User } from "@/interfaces/user";
import axios from "axios";
import { uniqBy } from "lodash";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { useFilePicker } from "use-file-picker";
import readXlsxFile from "read-excel-file";
import Modal from "@/components/Modal";
import { BsQuestionCircleFill } from "react-icons/bs";
import { PermissionType } from "@/interfaces/permissions";
const EMAIL_REGEX = new RegExp(
  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/
);

type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">

const USER_TYPE_LABELS: {[key in Type]: string} = {
  student: "Student",
  teacher: "Teacher",
  corporate: "Corporate",
};

const USER_TYPE_PERMISSIONS: {
  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
} = {
  student: {
    perm: "createCodeStudent",
    list: [],
  },
  teacher: {
    perm: "createCodeTeacher",
    list: [],
  },
  corporate: {
    perm: "createCodeCorporate",
    list: ["student", "teacher"],
  },
};

export default function BatchCreateUser({ user }: { user: User }) {
  const [infos, setInfos] = useState<
    { email: string; name: string; passport_id:string, type: Type, demographicInformation: {
      country: string,
      passport_id:string,
      phone: string
    }  }[]
  >([]);
  const [isLoading, setIsLoading] = useState(false);
  const [type, setType] = useState<Type>("student");
  const [showHelp, setShowHelp] = useState(false);

  const { users } = useUsers();

  const { openFilePicker, filesContent, clear } = useFilePicker({
    accept: ".xlsx",
    multiple: false,
    readAs: "ArrayBuffer",
  });


  useEffect(() => {
    if (filesContent.length > 0) {
      const file = filesContent[0];
      readXlsxFile(file.content).then((rows) => {
        try {
          const information = uniqBy(
            rows
              .map((row) => {
                const [
                  firstName,
                  lastName,
                  country,
                  passport_id,
                  email,
                  phone
                ] = row as string[];
                return EMAIL_REGEX.test(email.toString().trim())
                  ? {
                    email: email.toString().trim().toLowerCase(),
                    name: `${firstName ?? ""} ${lastName ?? ""}`.trim().toLowerCase(),
                    type: type,
                    passport_id: passport_id?.toString().trim() || undefined,
                    demographicInformation: {
                      country: country,
                      passport_id: passport_id?.toString().trim() || undefined,  
                      phone,
                    }
                    }
                  : undefined;
              })
              .filter((x) => !!x) as typeof infos,
            (x) => x.email
          );

          if (information.length === 0) {
            toast.error(
              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
            );
            return clear();
          }

          setInfos(information);
        } catch {
          toast.error(
            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!"
          );
          return clear();
        }
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filesContent]);

  const makeUsers = async () => {
    const newUsers = infos.filter(
      (x) => !users.map((u) => u.email).includes(x.email)
    );
    const confirmed = confirm(
        `You are about to add ${newUsers.length}, are you sure you want to continue?`
    )
    if (!confirmed)
      return;

    if (newUsers.length > 0)
      {
        setIsLoading(true);
        Promise.all(newUsers.map((user) => {
          return axios.post("/api/make_user", user)
        })).finally(() => {
          return clear();
        })
      }
    setIsLoading(false);
    setInfos([]);
  };


  return (
    <>
      <Modal
        isOpen={showHelp}
        onClose={() => setShowHelp(false)}
        title="Excel File Format"
      >
        <div className="mt-4 flex flex-col gap-2">
          <span>Please upload an Excel file with the following format:</span>
          <table className="w-full">
            <thead>
              <tr>
                <th className="border border-neutral-200 px-2 py-1">
                  First Name
                </th>
                <th className="border border-neutral-200 px-2 py-1">
                  Last Name
                </th>
                <th className="border border-neutral-200 px-2 py-1">Country</th>
                <th className="border border-neutral-200 px-2 py-1">
                  Passport/National ID
                </th>
                <th className="border border-neutral-200 px-2 py-1">E-mail</th>
                <th className="border border-neutral-200 px-2 py-1">
                  Phone Number
                </th>
              </tr>
            </thead>
          </table>
          <span className="mt-4">
            <b>Notes:</b>
            <ul>
              <li>- All incorrect e-mails will be ignored;</li>
              <li>- All already registered e-mails will be ignored;</li>
              <li>
                - You may have a header row with the format above, however, it
                is not necessary;
              </li>
              <li>
                - All of the e-mails in the file will receive an e-mail to join
                EnCoach with the role selected below.
              </li>
            </ul>
          </span>
        </div>
      </Modal>
      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
        <div className="flex items-end justify-between">
          <label className="text-mti-gray-dim text-base font-normal">
            Choose an Excel file
          </label>
          <div
            className="tooltip cursor-pointer"
            data-tip="Excel File Format"
            onClick={() => setShowHelp(true)}
          >
            <BsQuestionCircleFill />
          </div>
        </div>
        <Button
          onClick={openFilePicker}
          isLoading={isLoading}
          disabled={isLoading}
        >
          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
        </Button>
        <label className="text-mti-gray-dim text-base font-normal">
          Select the type of user they should be
        </label>
        {user && (
          <select
            defaultValue="student"
            onChange={(e) => setType(e.target.value as Type)}
            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
          >
            
            {Object.keys(USER_TYPE_LABELS)
              .map((type) => (
                <option key={type} value={type}>
                  {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
                </option>
              ))}
          </select>
        )}
        <Button
          className="my-auto"
          onClick={makeUsers}
          disabled={
            infos.length === 0
          }
        >
          Create
        </Button>
      </div>
    </>
  );
}