Added new permission system

2024-07-24 18:52:02 +01:00
parent daa27e41b3
commit 19d16c9cef
14 changed files with 1071 additions and 263 deletions
--- a/src/pages/permissions/[id].tsx
+++ b/src/pages/permissions/[id].tsx
@@ -0,0 +1,190 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import { 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 Layout 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";
+
+interface BasicUser {
+  id: string;
+  name: string;
+}
+
+interface PermissionWithBasicUsers {
+  id: string;
+  type: PermissionType;
+  users: BasicUser[];
+}
+
+export const getServerSideProps = withIronSessionSsr(async (context) => {
+  const { req, params } = context;
+  const user = req.session.user;
+
+  if (!user || !user.isVerified) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  if (shouldRedirectHome(user)) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  if (!params?.id) {
+    return {
+      redirect: {
+        destination: "/permissions",
+        permanent: false,
+      },
+    };
+  }
+
+  // Fetch data from external API
+  const permission: Permission = await getPermissionDoc(params.id as string);
+
+  const allUserData: User[] = await getUsers();
+  const users = allUserData.map((u) => ({
+    id: u.id,
+    name: u.name,
+  })) as BasicUser[];
+
+  // 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) => {
+      const user = users.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: req.session.user,
+      users,
+    },
+  };
+}, sessionOptions);
+
+interface Props {
+  permission: PermissionWithBasicUsers;
+  user: User;
+  users: BasicUser[];
+}
+
+export default function Page(props: Props) {
+  console.log("Props", props);
+
+  const { permission, user, users } = props;
+
+  const [selectedUsers, setSelectedUsers] = useState<string[]>(() =>
+    permission.users.map((u) => u.id)
+  );
+
+  const onChange = (value: any) => {
+    console.log("value", value);
+    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 () => {
+    console.log("update", selectedUsers);
+    try {
+      await axios.patch(`/api/permissions/${permission.id}`, {
+        users: selectedUsers,
+      });
+      toast.success("Permission updated");
+    } catch (err) {
+      toast.error("Failed to update permission");
+    }
+  };
+
+  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 />
+      <Layout user={user} className="gap-6">
+        <h1 className="text-2xl font-semibold">
+          Permission: {permission.type as string}
+        </h1>
+        <div className="flex gap-3">
+          <Select
+            value={null}
+            options={users
+              .filter((u) => !selectedUsers.includes(u.id))
+              .map((u) => ({
+                label: u.name,
+                value: u.id,
+              }))}
+            onChange={onChange}
+          />
+          <Button onClick={update}>Update</Button>
+        </div>
+        <div className="flex flex-col gap-3">
+          <h2>Blacklisted Users</h2>
+          <div className="flex gap-3 flex-wrap">
+            {selectedUsers.map((userId) => {
+              const name = users.find((u) => u.id === userId)?.name;
+              return (
+                <div
+                  className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
+                  key={userId}
+                >
+                  <span className="text-base">{name}</span>
+                  <BsTrash
+                    style={{ cursor: "pointer" }}
+                    onClick={() => removeUser(userId)}
+                    size={20}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+}