encoach_ui_odoo19/src/pages/permissions/[id].tsx

/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import React, { useEffect, useState } from "react";
import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { Permission, PermissionType } from "@/interfaces/permissions";
import { getPermissionDoc } from "@/utils/permissions.be";
import { User } from "@/interfaces/user";
import { LayoutContext } from "@/components/High/Layout";
import { getUsers } from "@/utils/users.be";
import { BsTrash } from "react-icons/bs";
import Select from "@/components/Low/Select";
import Button from "@/components/Low/Button";
import axios from "axios";
import { toast, ToastContainer } from "react-toastify";
import { Type as UserType } from "@/interfaces/user";
import { getGroups } from "@/utils/groups.be";
import { requestUser } from "@/utils/api";
import { redirect } from "@/utils";
import { G } from "@react-pdf/renderer";
interface BasicUser {
  id: string;
  name: string;
  type: UserType;
}

interface PermissionWithBasicUsers {
  id: string;
  type: PermissionType;
  users: BasicUser[];
}

export const getServerSideProps = withIronSessionSsr(
  async ({ req, res, params }) => {
    const user = await requestUser(req, res);
    if (!user) return redirect("/login");

    if (shouldRedirectHome(user)) return redirect("/");

    if (!params?.id) return redirect("/permissions");

    // Fetch data from external API
    const [permission, users, groups] = await Promise.all([
      getPermissionDoc(params.id as string),
      getUsers({}, 0, {}, { _id: 0, id: 1, name: 1, type: 1 }),
      getGroups(),
    ]);

    const userGroups = groups.filter((x) => x.admin === user.id);
    const userGroupsParticipants = userGroups.flatMap((x) => x.participants);
    const filteredGroups =
      user.type === "corporate"
        ? userGroups
        : user.type === "mastercorporate"
        ? groups.filter((x) => userGroupsParticipants.includes(x.admin))
        : groups;
    const filteredGroupsParticipants = filteredGroups.flatMap(
      (g) => g.participants
    );
    const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
      ? users.filter((u) => filteredGroupsParticipants.includes(u.id))
      : users;

    // const res = await fetch("api/permissions");
    // const permissions: Permission[] = await res.json();
    // Pass data to the page via props
    const usersData: BasicUser[] = permission.users.reduce(
      (acc: BasicUser[], userId: any) => {
        const user = filteredUsers.find((u) => u.id === userId) as BasicUser;
        if (!!user) acc.push(user);
        return acc;
      },
      []
    );

    return {
      props: {
        // permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
        permission: {
          ...permission,
          id: params.id,
          users: usersData,
        },
        user,
        users: filteredUsers,
      },
    };
  },
  sessionOptions
);

interface Props {
  permission: PermissionWithBasicUsers;
  user: User;
  users: BasicUser[];
}

export default function Page(props: Props) {
  const { permission, user, users } = props;

  const [selectedUsers, setSelectedUsers] = useState<string[]>(() =>
    permission.users.map((u) => u.id)
  );

  const onChange = (value: any) => {
    setSelectedUsers((prev) => {
      if (value?.value) {
        return [...prev, value?.value];
      }
      return prev;
    });
  };
  const removeUser = (id: string) => {
    setSelectedUsers((prev) => prev.filter((u) => u !== id));
  };

  const update = async () => {
    try {
      await axios.patch(`/api/permissions/${permission.id}`, {
        users: selectedUsers,
      });
      toast.success("Permission updated");
    } catch (err) {
      toast.error("Failed to update permission");
    }
  };

  const { setClassName } = React.useContext(LayoutContext);

  useEffect(() => {
    setClassName("gap-6");
    return () => setClassName("");
  }, [setClassName]);

  return (
    <>
      <Head>
        <title>EnCoach</title>
        <meta
          name="description"
          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ToastContainer />
      <>
        <div className="flex flex-col gap-6 w-full h-[88vh] overflow-y-scroll scrollbar-hide rounded-xl">
          <h1 className="text-2xl font-semibold">
            Permission: {permission.type as string}
          </h1>
          <div className="flex gap-3">
            <Select
              value={null}
              options={users.reduce<{ label: string; value: string }[]>(
                (acc, u) => {
                  if (!selectedUsers.includes(u.id))
                    acc.push({ label: `${u?.type}-${u?.name}`, value: u.id });
                  return acc;
                },
                []
              )}
              onChange={onChange}
            />
            <Button onClick={update}>Update</Button>
          </div>
          <div className="flex flex-row justify-between">
            <div className="flex flex-col gap-3">
              <h2>Blacklisted Users</h2>
              <div className="flex gap-3 flex-wrap">
                {selectedUsers.map((userId) => {
                  const user = users.find((u) => u.id === userId);
                  return (
                    <div
                      className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
                      key={userId}
                    >
                      <span className="text-base first-letter:uppercase">
                        {user?.type}-{user?.name}
                      </span>
                      <BsTrash
                        style={{ cursor: "pointer" }}
                        onClick={() => removeUser(userId)}
                        size={20}
                      />
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="flex flex-col gap-3">
              <h2>Whitelisted Users</h2>
              <div className="flex flex-col gap-3 flex-wrap">
                {users.map((user) => {
                  if (!selectedUsers.includes(user.id))
                    return (
                      <div
                        className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
                        key={user.id}
                      >
                        <span className="text-base first-letter:uppercase">
                          {user?.type}-{user?.name}
                        </span>
                      </div>
                    );
                  return null;
                })}
              </div>
            </div>
          </div>
        </div>
      </>
    </>
  );
}