From f1806ef4a2244ef1755cb4b67c5eba18d4b2444f Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Sat, 29 Jul 2023 13:05:17 -0600
Subject: [PATCH 1/4] Matt's the only one to ask for one of these so here we
 go... why not?

---
 prisma/schema.prisma    | 1 +
 src/pages/room/[id].tsx | 9 +++++++++
 src/utils/types.ts      | 1 +
 3 files changed, 11 insertions(+)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index a53c78c..bd8df38 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,6 +1,7 @@
 enum RoleValue {
     USER
     ADMIN
+    MATT
 }
 
 generator client {
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 98bd56a..68652a1 100644
--- a/src/pages/room/[id].tsx
+++ b/src/pages/room/[id].tsx
@@ -15,6 +15,7 @@ import {
   IoReloadOutline,
   IoSaveOutline,
 } from "react-icons/io5";
+import { GiStarFormation } from "react-icons/gi";
 import { z } from "zod";
 import { api } from "~/utils/api";
 import { getServerAuthSession } from "../../server/auth";
@@ -310,6 +311,14 @@ const RoomBody: React.FC = ({}) => {
                                 <FaShieldAlt className="inline-block text-primary" />
                               </div>
                             )}{" "}
+                            {presenceItem.data.role === "MATT" && (
+                              <div
+                                className="tooltip tooltip-secondary"
+                                data-tip="Matt"
+                              >
+                                <GiStarFormation className="inline-block text-secondary" />
+                              </div>
+                            )}{" "}
                             {presenceItem.clientId === roomFromDb.userId && (
                               <div
                                 className="tooltip tooltip-warning"
diff --git a/src/utils/types.ts b/src/utils/types.ts
index f1f37f8..f2a5477 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -10,6 +10,7 @@ export type EventType = BetterEnum<typeof EventTypes>;
 const RoleValues = {
   ADMIN: "ADMIN",
   USER: "USER",
+  MATT: "MATT",
 } as const;
 export type Role = BetterEnum<typeof RoleValues>;
 

From c402732f0a227fa6c66e8cc8a098bb557013cf7a Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Sat, 29 Jul 2023 13:18:14 -0600
Subject: [PATCH 2/4] SLIGHT change to the role...

---
 prisma/schema.prisma           |  2 +-
 src/pages/admin/index.tsx      | 90 ++++++++++++++++++++--------------
 src/pages/dashboard/index.tsx  | 30 +++++++-----
 src/pages/room/[id].tsx        |  4 +-
 src/server/api/routers/user.ts |  6 ++-
 src/utils/types.ts             |  2 +-
 6 files changed, 80 insertions(+), 54 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index bd8df38..41ff26a 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,7 +1,7 @@
 enum RoleValue {
     USER
     ADMIN
-    MATT
+    VIP
 }
 
 generator client {
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index d66a1cd..0a081d0 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -5,6 +5,7 @@ import { AiOutlineClear } from "react-icons/ai";
 import { FaShieldAlt } from "react-icons/fa";
 import { IoTrashBinOutline } from "react-icons/io5";
 import { SiGithub, SiGoogle } from "react-icons/si";
+import { GiStarFormation } from "react-icons/gi";
 import { api } from "~/utils/api";
 import type { Role } from "~/utils/types";
 import { getServerAuthSession } from "../../server/auth";
@@ -158,70 +159,70 @@ const AdminBody: React.FC = () => {
         <div className="stat">
           <div className="stat-title">Users</div>
           <div className="stat-value">
-            { usersCountLoading || usersCountFetching ? (
+            {usersCountLoading || usersCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{ usersCount ? usersCount : "0" }</>
-            ) }
+              <>{usersCount ? usersCount : "0"}</>
+            )}
           </div>
         </div>
 
         <div className="stat">
           <div className="stat-title">Rooms</div>
           <div className="stat-value">
-            { roomsCountLoading || roomsCountFetching ? (
+            {roomsCountLoading || roomsCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{ roomsCount ? roomsCount : "0" }</>
-            ) }
+              <>{roomsCount ? roomsCount : "0"}</>
+            )}
           </div>
         </div>
 
         <div className="stat">
           <div className="stat-title">Votes</div>
           <div className="stat-value">
-            { votesCountLoading || votesCountFetching ? (
+            {votesCountLoading || votesCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{ votesCount ? votesCount : "0" }</>
-            ) }
+              <>{votesCount ? votesCount : "0"}</>
+            )}
           </div>
         </div>
       </div>
 
-      { usersCountFetching ||
-        usersFetching ||
-        roomsCountFetching ||
-        votesCountFetching ? (
+      {usersCountFetching ||
+      usersFetching ||
+      roomsCountFetching ||
+      votesCountFetching ? (
         <span className="loading loading-dots loading-lg"></span>
       ) : (
         <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
           <button
             className="btn btn-primary m-2"
-            onClick={ () => void clearSessionsHandler() }
+            onClick={() => void clearSessionsHandler()}
           >
             Delete All Sessions
           </button>
 
           <button
             className="btn btn-primary"
-            onClick={ () => void refetchData() }
+            onClick={() => void refetchData()}
           >
             Re-fetch
           </button>
         </div>
-      ) }
+      )}
 
       <div className="card max-w-[80vw] bg-neutral shadow-xl m-4">
         <div className="card-body">
           <h2 className="card-title">Users:</h2>
 
-          { usersLoading || usersFetching ? (
+          {usersLoading || usersFetching ? (
             <span className="loading loading-dots loading-lg"></span>
           ) : (
             <div className="overflow-x-scroll">
               <table className="table text-center">
-                {/* head */ }
+                {/* head */}
                 <thead>
                   <tr className="border-white">
                     <th>ID</th>
@@ -233,55 +234,72 @@ const AdminBody: React.FC = () => {
                   </tr>
                 </thead>
                 <tbody className="">
-                  { users
+                  {users
                     ?.sort((user1, user2) =>
                       user2.createdAt > user1.createdAt ? 1 : -1
                     )
                     .map((user) => {
                       return (
-                        <tr key={ user.id } className="hover">
+                        <tr key={user.id} className="hover">
                           <td className="max-w-[100px] break-words">
-                            { user.id }
+                            {user.id}
                           </td>
 
                           <td className="max-w-[100px] break-normal">
-                            { user.name }
+                            {user.name}
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            { user.createdAt.toLocaleDateString() }
+                            {user.createdAt.toLocaleDateString()}
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            { user.sessions.length }
+                            {user.sessions.length}
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            { getProviders(user).includes("google") && (
+                            {getProviders(user).includes("google") && (
                               <SiGoogle className="text-xl m-1 inline-block hover:text-secondary" />
-                            ) }
-                            { getProviders(user).includes("github") && (
+                            )}
+                            {getProviders(user).includes("github") && (
                               <SiGithub className="text-xl m-1 inline-block hover:text-secondary" />
-                            ) }
+                            )}
                           </td>
                           <td>
                             <button className="m-2">
-                              { user.role === "ADMIN" ? (
+                              {user.role === "ADMIN" ? (
                                 <FaShieldAlt
                                   className="text-xl inline-block text-primary"
-                                  onClick={ () =>
+                                  onClick={() =>
                                     void setUserRoleHandler(user.id, "USER")
                                   }
                                 />
                               ) : (
                                 <FaShieldAlt
                                   className="text-xl inline-block"
-                                  onClick={ () =>
+                                  onClick={() =>
                                     void setUserRoleHandler(user.id, "ADMIN")
                                   }
                                 />
-                              ) }
+                              )}
+                            </button>
+                            <button className="m-2">
+                              {user.role === "VIP" ? (
+                                <GiStarFormation
+                                  className="text-xl inline-block text-secondary"
+                                  onClick={() =>
+                                    void setUserRoleHandler(user.id, "USER")
+                                  }
+                                />
+                              ) : (
+                                <GiStarFormation
+                                  className="text-xl inline-block"
+                                  onClick={() =>
+                                    void setUserRoleHandler(user.id, "VIP")
+                                  }
+                                />
+                              )}
                             </button>
                             <button
                               className="m-2"
-                              onClick={ () =>
+                              onClick={() =>
                                 void clearSessionsByUserHandler(user.id)
                               }
                             >
@@ -289,18 +307,18 @@ const AdminBody: React.FC = () => {
                             </button>
                             <button
                               className="m-2"
-                              onClick={ () => void deleteUserHandler(user.id) }
+                              onClick={() => void deleteUserHandler(user.id)}
                             >
                               <IoTrashBinOutline className="text-xl inline-block hover:text-error" />
                             </button>
                           </td>
                         </tr>
                       );
-                    }) }
+                    })}
                 </tbody>
               </table>
             </div>
-          ) }
+          )}
         </div>
       </div>
     </>
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 6ad31f0..7ed5495 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -8,6 +8,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { FaShieldAlt } from "react-icons/fa";
 import { getServerAuthSession } from "~/server/auth";
+import { GiStarFormation } from "react-icons/gi";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
@@ -57,20 +58,23 @@ const HomePageBody: React.FC = () => {
   return (
     <>
       <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto">
-        Hi, { sessionData?.user.name }!{ " " }
-        { sessionData?.user.role === "ADMIN" && (
+        Hi, {sessionData?.user.name}!{" "}
+        {sessionData?.user.role === "ADMIN" && (
           <FaShieldAlt className="inline-block text-primary" />
-        ) }
+        )}
+        {sessionData?.user.role === "VIP" && (
+          <GiStarFormation className="inline-block text-secondary" />
+        )}
       </h1>
       <div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
         <a
           className={
             tabIndex === 0 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={ () => {
+          onClick={() => {
             setTabIndex(0);
             localStorage.setItem("dashboardTabIndex", "0");
-          } }
+          }}
         >
           Join a Room
         </a>
@@ -78,36 +82,36 @@ const HomePageBody: React.FC = () => {
           className={
             tabIndex === 1 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={ () => {
+          onClick={() => {
             setTabIndex(1);
             localStorage.setItem("dashboardTabIndex", "1");
-          } }
+          }}
         >
           Room List
         </a>
       </div>
 
-      { tabIndex === 0 && (
+      {tabIndex === 0 && (
         <>
           <input
             type="text"
             placeholder="Enter Room ID"
             className="input input-bordered input-primary mb-4"
-            onChange={ (event) => {
+            onChange={(event) => {
               console.log(event.target.value);
               setJoinRoomTextBox(event.target.value);
-            } }
+            }}
           />
           <Link
-            href={ joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/" }
+            href={joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"}
             className="btn btn-secondary"
           >
             Join Room
           </Link>
         </>
-      ) }
+      )}
 
-      { tabIndex === 1 && <RoomList /> }
+      {tabIndex === 1 && <RoomList />}
     </>
   );
 };
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 68652a1..29c15d0 100644
--- a/src/pages/room/[id].tsx
+++ b/src/pages/room/[id].tsx
@@ -311,10 +311,10 @@ const RoomBody: React.FC = ({}) => {
                                 <FaShieldAlt className="inline-block text-primary" />
                               </div>
                             )}{" "}
-                            {presenceItem.data.role === "MATT" && (
+                            {presenceItem.data.role === "VIP" && (
                               <div
                                 className="tooltip tooltip-secondary"
-                                data-tip="Matt"
+                                data-tip="VIP"
                               >
                                 <GiStarFormation className="inline-block text-secondary" />
                               </div>
diff --git a/src/server/api/routers/user.ts b/src/server/api/routers/user.ts
index d7eff4f..f5995cf 100644
--- a/src/server/api/routers/user.ts
+++ b/src/server/api/routers/user.ts
@@ -153,7 +153,11 @@ export const userRouter = createTRPCRouter({
     .input(
       z.object({
         userId: z.string(),
-        role: z.union([z.literal("ADMIN"), z.literal("USER")]),
+        role: z.union([
+          z.literal("ADMIN"),
+          z.literal("USER"),
+          z.literal("VIP"),
+        ]),
       })
     )
     .mutation(async ({ ctx, input }) => {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index f2a5477..cf71bb6 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -10,7 +10,7 @@ export type EventType = BetterEnum<typeof EventTypes>;
 const RoleValues = {
   ADMIN: "ADMIN",
   USER: "USER",
-  MATT: "MATT",
+  VIP: "VIP",
 } as const;
 export type Role = BetterEnum<typeof RoleValues>;
 

From 95c9314d03ed84e93c6774daa08eaeef6c82a265 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Sat, 29 Jul 2023 21:38:59 -0600
Subject: [PATCH 3/4] Role overhaul

---
 prisma/schema.prisma           | 10 ++---
 src/pages/admin/index.tsx      | 42 +++++++++---------
 src/pages/dashboard/index.tsx  |  4 +-
 src/pages/profile/index.tsx    | 80 ++++++++++++++++++----------------
 src/pages/room/[id].tsx        |  7 +--
 src/server/api/routers/user.ts | 41 ++++++++++++-----
 src/server/auth.ts             | 16 ++++---
 src/utils/types.ts             | 10 +----
 8 files changed, 114 insertions(+), 96 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 41ff26a..edcd219 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,9 +1,3 @@
-enum RoleValue {
-    USER
-    ADMIN
-    VIP
-}
-
 generator client {
     provider = "prisma-client-js"
 }
@@ -47,7 +41,6 @@ model Session {
 
 model User {
     id            String    @id @default(cuid())
-    role          RoleValue @default(USER)
     createdAt     DateTime  @default(now())
     name          String?
     email         String?   @unique
@@ -58,6 +51,9 @@ model User {
     rooms         Room[]
     votes         Vote[]
     logs          Log[]
+    isAdmin       Boolean @default(false)
+    isVIP       Boolean @default(false)
+
 }
 
 model VerificationToken {
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 0a081d0..9d9a86f 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -7,7 +7,6 @@ import { IoTrashBinOutline } from "react-icons/io5";
 import { SiGithub, SiGoogle } from "react-icons/si";
 import { GiStarFormation } from "react-icons/gi";
 import { api } from "~/utils/api";
-import type { Role } from "~/utils/types";
 import { getServerAuthSession } from "../../server/auth";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
@@ -23,7 +22,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     };
   }
 
-  if (session.user.role !== "ADMIN") {
+  if (!session.user.isAdmin) {
     ctx.res.statusCode = 403;
     return {
       redirect: {
@@ -91,7 +90,8 @@ const AdminBody: React.FC = () => {
       id: string;
     }[];
     id: string;
-    role: Role;
+    isAdmin: boolean;
+    isVIP: boolean;
     name: string | null;
     email: string | null;
   }) => {
@@ -120,7 +120,13 @@ const AdminBody: React.FC = () => {
     },
   });
 
-  const setRoleMutation = api.user.setRole.useMutation({
+  const setAdminMutation = api.user.setAdmin.useMutation({
+    onSuccess: async () => {
+      await refetchData();
+    },
+  });
+
+  const setVIPMutation = api.user.setVIP.useMutation({
     onSuccess: async () => {
       await refetchData();
     },
@@ -138,8 +144,12 @@ const AdminBody: React.FC = () => {
     await clearSessionsMutation.mutateAsync();
   };
 
-  const setUserRoleHandler = async (userId: string, role: Role) => {
-    await setRoleMutation.mutateAsync({ userId, role });
+  const setAdmin = async (userId: string, value: boolean) => {
+    await setAdminMutation.mutateAsync({ userId, value });
+  };
+
+  const setVIP = async (userId: string, value: boolean) => {
+    await setVIPMutation.mutateAsync({ userId, value });
   };
 
   const refetchData = async () => {
@@ -264,36 +274,28 @@ const AdminBody: React.FC = () => {
                           </td>
                           <td>
                             <button className="m-2">
-                              {user.role === "ADMIN" ? (
+                              {user.isAdmin ? (
                                 <FaShieldAlt
                                   className="text-xl inline-block text-primary"
-                                  onClick={() =>
-                                    void setUserRoleHandler(user.id, "USER")
-                                  }
+                                  onClick={() => void setAdmin(user.id, false)}
                                 />
                               ) : (
                                 <FaShieldAlt
                                   className="text-xl inline-block"
-                                  onClick={() =>
-                                    void setUserRoleHandler(user.id, "ADMIN")
-                                  }
+                                  onClick={() => void setAdmin(user.id, true)}
                                 />
                               )}
                             </button>
                             <button className="m-2">
-                              {user.role === "VIP" ? (
+                              {user.isVIP ? (
                                 <GiStarFormation
                                   className="text-xl inline-block text-secondary"
-                                  onClick={() =>
-                                    void setUserRoleHandler(user.id, "USER")
-                                  }
+                                  onClick={() => void setVIP(user.id, false)}
                                 />
                               ) : (
                                 <GiStarFormation
                                   className="text-xl inline-block"
-                                  onClick={() =>
-                                    void setUserRoleHandler(user.id, "VIP")
-                                  }
+                                  onClick={() => void setVIP(user.id, true)}
                                 />
                               )}
                             </button>
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 7ed5495..7e20c68 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -59,10 +59,10 @@ const HomePageBody: React.FC = () => {
     <>
       <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto">
         Hi, {sessionData?.user.name}!{" "}
-        {sessionData?.user.role === "ADMIN" && (
+        {sessionData?.user.isAdmin && (
           <FaShieldAlt className="inline-block text-primary" />
         )}
-        {sessionData?.user.role === "VIP" && (
+        {sessionData?.user.isVIP && (
           <GiStarFormation className="inline-block text-secondary" />
         )}
       </h1>
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index e7196e9..27b53ac 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -9,6 +9,7 @@ import { FaShieldAlt } from "react-icons/fa";
 import { SiGithub, SiGoogle } from "react-icons/si";
 import { api } from "~/utils/api";
 import { getServerAuthSession } from "../../server/auth";
+import { GiStarFormation } from "react-icons/gi";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
@@ -103,7 +104,7 @@ const ProfileBody: React.FC = () => {
               <label
                 htmlFor="delete-user-modal"
                 className="btn btn-error"
-                onClick={ () => void deleteCurrentUser() }
+                onClick={() => void deleteCurrentUser()}
               >
                 I am sure!
               </label>
@@ -114,79 +115,82 @@ const ProfileBody: React.FC = () => {
         <div className="card w-90 bg-neutral shadow-xl">
           <div className="card-body">
             <h2 className="card-title">Profile:</h2>
-            { sessionData.user.image && (
-              <div className="indicator mx-auto m-4">
-                { sessionData.user.role === "ADMIN" && (
-                  <span className="indicator-item indicator-bottom badge badge-primary">
-                    <div className="tooltip tooltip-primary" data-tip="Admin">
-                      <FaShieldAlt className="text-xl" />
-                    </div>
-                  </span>
-                ) }
+            {sessionData.user.image && (
+              <Image
+                className="mx-auto"
+                src={sessionData.user.image}
+                alt="Profile picture."
+                height={100}
+                width={100}
+                priority
+              />
+            )}
 
-                <Image
-                  className="mx-auto"
-                  src={ sessionData.user.image }
-                  alt="Profile picture."
-                  height={ 100 }
-                  width={ 100 }
-                  priority
-                />
-              </div>
-            ) }
+            <div className="flex flex-row flex-wrap items-center text-center justify-center gap-4">
+              {sessionData.user.isAdmin && (
+                <div className="tooltip tooltip-primary" data-tip="Admin">
+                  <FaShieldAlt className="text-xl text-primary" />
+                </div>
+              )}
+              {sessionData.user.isVIP && (
+                <div className="tooltip tooltip-secondary" data-tip="VIP">
+                  <GiStarFormation className="inline-block text-xl text-secondary" />
+                </div>
+              )}
+            </div>
 
-            { providersLoading ? (
+            {providersLoading ? (
               <div className="mx-auto">
-                <span className="loading loading-dots loading-lg"></span>{ " " }
+                <span className="loading loading-dots loading-lg"></span>{" "}
               </div>
             ) : (
               <div className="mx-auto">
                 <button
-                  className={ `btn btn-square btn-outline mx-2` }
-                  disabled={ providers?.includes("github") }
-                  onClick={ () => void signIn("github") }
+                  className={`btn btn-square btn-outline mx-2`}
+                  disabled={providers?.includes("github")}
+                  onClick={() => void signIn("github")}
                 >
                   <SiGithub />
                 </button>
 
                 <button
-                  className={ `btn btn-square btn-outline mx-2` }
-                  disabled={ providers?.includes("google") }
-                  onClick={ () => void signIn("google") }
+                  className={`btn btn-square btn-outline mx-2`}
+                  disabled={providers?.includes("google")}
+                  onClick={() => void signIn("google")}
                 >
                   <SiGoogle />
                 </button>
               </div>
-            ) }
+            )}
 
-            { sessionData.user.name && (
+            {sessionData.user.name && (
               <input
                 type="text"
                 placeholder="Name"
                 className="input input-bordered"
-                value={ nameText }
-                onChange={ (event) => setNameText(event.target.value) }
+                value={nameText}
+                onChange={(event) => setNameText(event.target.value)}
               />
-            ) }
+            )}
 
-            { sessionData.user.email && (
+            {sessionData.user.email && (
               <input
                 type="text"
                 placeholder="Email"
                 className="input input-bordered"
-                value={ sessionData.user.email }
+                value={sessionData.user.email}
                 disabled
               />
-            ) }
+            )}
 
             <button
-              onClick={ () => void saveUser() }
+              onClick={() => void saveUser()}
               className="btn btn-secondary"
             >
               Save Account
             </button>
 
-            {/* <button className="btn btn-error">Delete Account</button> */ }
+            {/* <button className="btn btn-error">Delete Account</button> */}
 
             <label htmlFor="delete-user-modal" className="btn btn-error">
               Delete Account
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 29c15d0..d91a065 100644
--- a/src/pages/room/[id].tsx
+++ b/src/pages/room/[id].tsx
@@ -110,7 +110,8 @@ const RoomBody: React.FC = ({}) => {
       name: sessionData?.user.name || "",
       image: sessionData?.user.image || "",
       client_id: sessionData?.user.id || "",
-      role: sessionData?.user.role || "USER",
+      isAdmin: sessionData?.user.isAdmin || false,
+      isVIP: sessionData?.user.isVIP || false,
     }
   );
 
@@ -303,7 +304,7 @@ const RoomBody: React.FC = ({}) => {
 
                           <p className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
                             {presenceItem.data.name}{" "}
-                            {presenceItem.data.role === "ADMIN" && (
+                            {presenceItem.data.isAdmin && (
                               <div
                                 className="tooltip tooltip-primary"
                                 data-tip="Admin"
@@ -311,7 +312,7 @@ const RoomBody: React.FC = ({}) => {
                                 <FaShieldAlt className="inline-block text-primary" />
                               </div>
                             )}{" "}
-                            {presenceItem.data.role === "VIP" && (
+                            {presenceItem.data.isVIP && (
                               <div
                                 className="tooltip tooltip-secondary"
                                 data-tip="VIP"
diff --git a/src/server/api/routers/user.ts b/src/server/api/routers/user.ts
index f5995cf..0d92fe9 100644
--- a/src/server/api/routers/user.ts
+++ b/src/server/api/routers/user.ts
@@ -4,7 +4,6 @@ import { z } from "zod";
 import { Goodbye } from "~/components/templates/Goodbye";
 import { env } from "~/env.mjs";
 import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
-import type { Role } from "~/utils/types";
 
 import { fetchCache, invalidateCache, setCache } from "~/server/redis";
 
@@ -54,7 +53,8 @@ export const userRouter = createTRPCRouter({
         }[];
         id: string;
         createdAt: Date;
-        role: Role;
+        isAdmin: boolean;
+        isVIP: boolean;
         name: string | null;
         email: string | null;
       }[]
@@ -72,7 +72,8 @@ export const userRouter = createTRPCRouter({
         select: {
           id: true,
           name: true,
-          role: true,
+          isAdmin: true,
+          isVIP: true,
           createdAt: true,
           email: true,
           sessions: {
@@ -103,7 +104,7 @@ export const userRouter = createTRPCRouter({
     )
     .mutation(async ({ ctx, input }) => {
       let user: User;
-      if (input?.userId && ctx.session.user.role === "ADMIN") {
+      if (input?.userId && ctx.session.user.isAdmin) {
         user = await ctx.prisma.user.delete({
           where: {
             id: input.userId,
@@ -149,15 +150,11 @@ export const userRouter = createTRPCRouter({
 
       return !!user;
     }),
-  setRole: protectedProcedure
+  setAdmin: protectedProcedure
     .input(
       z.object({
         userId: z.string(),
-        role: z.union([
-          z.literal("ADMIN"),
-          z.literal("USER"),
-          z.literal("VIP"),
-        ]),
+        value: z.boolean(),
       })
     )
     .mutation(async ({ ctx, input }) => {
@@ -166,7 +163,29 @@ export const userRouter = createTRPCRouter({
           id: input.userId,
         },
         data: {
-          role: input.role,
+          isAdmin: input.value,
+        },
+      });
+
+      await invalidateCache(`kv_userlist_admin`);
+
+      return !!user;
+    }),
+
+  setVIP: protectedProcedure
+    .input(
+      z.object({
+        userId: z.string(),
+        value: z.boolean(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const user = await ctx.prisma.user.update({
+        where: {
+          id: input.userId,
+        },
+        data: {
+          isVIP: input.value,
         },
       });
 
diff --git a/src/server/auth.ts b/src/server/auth.ts
index c61543c..8c304d4 100644
--- a/src/server/auth.ts
+++ b/src/server/auth.ts
@@ -1,16 +1,15 @@
 import { PrismaAdapter } from "@auth/prisma-adapter";
 import { type GetServerSidePropsContext } from "next";
 import {
-    getServerSession,
-    type DefaultSession,
-    type NextAuthOptions,
+  getServerSession,
+  type DefaultSession,
+  type NextAuthOptions,
 } from "next-auth";
 import GithubProvider from "next-auth/providers/github";
 import GoogleProvider from "next-auth/providers/google";
 import { Resend } from "resend";
 import { env } from "~/env.mjs";
 import { prisma } from "~/server/db";
-import type { Role } from "~/utils/types";
 import { Welcome } from "../components/templates/Welcome";
 import { invalidateCache } from "./redis";
 
@@ -26,12 +25,14 @@ declare module "next-auth" {
   interface Session extends DefaultSession {
     user: {
       id: string;
-      role: Role;
+      isAdmin: boolean;
+      isVIP: boolean;
     } & DefaultSession["user"];
   }
 
   interface User {
-    role: Role;
+    isAdmin: boolean;
+    isVIP: boolean;
   }
 }
 
@@ -45,7 +46,8 @@ export const authOptions: NextAuthOptions = {
     session({ session, user }) {
       if (session.user) {
         session.user.id = user.id;
-        session.user.role = user.role;
+        session.user.isAdmin = user.isAdmin;
+        session.user.isVIP = user.isVIP;
       }
       return session;
     },
diff --git a/src/utils/types.ts b/src/utils/types.ts
index cf71bb6..53579c5 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -7,16 +7,10 @@ const EventTypes = {
 } as const;
 export type EventType = BetterEnum<typeof EventTypes>;
 
-const RoleValues = {
-  ADMIN: "ADMIN",
-  USER: "USER",
-  VIP: "VIP",
-} as const;
-export type Role = BetterEnum<typeof RoleValues>;
-
 export interface PresenceItem {
   name: string;
   image: string;
   client_id: string;
-  role: Role;
+  isAdmin: boolean;
+  isVIP: boolean;
 }

From 8e2df843dde6b18aba35e3c41a2c5d5653e36b22 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Sat, 29 Jul 2023 21:46:08 -0600
Subject: [PATCH 4/4] Oops

---
 src/components/Navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9c06a7d..ddfe9d3 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -85,7 +85,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
                   Profile
                 </Link>
               </li>
-              {sessionData.user.role === "ADMIN" && (
+              {sessionData.user.isAdmin && (
                 <li>
                   <Link
                     about="Admin Page"