From 166ca3da843d27b9afc326f8747aa663f01cc096 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <88056492+atridadl@users.noreply.github.com>
Date: Wed, 12 Jul 2023 12:27:39 -0600
Subject: [PATCH] session issues

---
 src/pages/room/[id].tsx | 282 ++++++++++++++++++++--------------------
 1 file changed, 140 insertions(+), 142 deletions(-)
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 2d8794c..0787cbb 100644
--- a/src/pages/room/[id].tsx
+++ b/src/pages/room/[id].tsx
@@ -26,6 +26,7 @@ import { RiVipCrownFill } from "react-icons/ri";
 import { env } from "~/env.mjs";
 import { downloadCSV } from "~/utils/helpers";
 import type { PresenceItem } from "~/utils/types";
+import { Session } from "next-auth";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
@@ -46,7 +47,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   };
 };
 
-const Room: NextPage = () => {
+const Room: NextPage<{ session: Session }> = ({ session }) => {
   return (
     <>
       <Head>
@@ -55,7 +56,7 @@ const Room: NextPage = () => {
         <meta http-equiv="Cache-control" content="no-cache" />
       </Head>
       <div className="flex flex-col items-center justify-center text-center gap-2">
-        <RoomBody />
+        <RoomBody session={session} />
       </div>
     </>
   );
@@ -63,8 +64,7 @@ const Room: NextPage = () => {
 
 export default Room;
 
-const RoomBody: React.FC = () => {
-  const { data: sessionData } = useSession();
+const RoomBody: React.FC<{ session: Session }> = ({ session }) => {
   const { query } = useRouter();
   const roomId = z.string().parse(query.id);
 
@@ -83,7 +83,7 @@ const RoomBody: React.FC = () => {
 
   configureAbly({
     key: env.NEXT_PUBLIC_ABLY_PUBLIC_KEY,
-    clientId: sessionData?.user.id,
+    clientId: session.user.id,
     recover: (_, cb) => {
       cb(true);
     },
@@ -106,10 +106,10 @@ const RoomBody: React.FC = () => {
   const [presenceData] = usePresence<PresenceItem>(
     `${env.NEXT_PUBLIC_APP_ENV}-${roomId}`,
     {
-      name: sessionData?.user.name || "",
-      image: sessionData?.user.image || "",
-      client_id: sessionData?.user.id || "",
-      role: sessionData?.user.role || "USER",
+      name: session.user.name || "",
+      image: session.user.image || "",
+      client_id: session.user.id || "",
+      role: session.user.role || "USER",
     }
   );
 
@@ -126,18 +126,18 @@ const RoomBody: React.FC = () => {
 
   // Init story name
   useEffect(() => {
-    if (sessionData && roomFromDb) {
+    if (session && roomFromDb) {
       setStoryNameText(roomFromDb.storyName || "");
       setRoomScale(roomFromDb.scale || "ERROR");
     }
-  }, [roomFromDb, roomId, sessionData]);
+  }, [roomFromDb, roomId, session]);
 
   // Helper functions
   const getVoteForCurrentUser = () => {
-    if (roomFromDb && sessionData) {
+    if (roomFromDb && session) {
       return (
         votesFromDb &&
-        votesFromDb.find((vote) => vote.userId === sessionData.user.id)
+        votesFromDb.find((vote) => vote.userId === session.user.id)
       );
     } else {
       return null;
@@ -224,7 +224,7 @@ const RoomBody: React.FC = () => {
 
     if (visible) {
       if (!!matchedVote) {
-        return <p>{ matchedVote.value }</p>;
+        return <p>{matchedVote.value}</p>;
       } else {
         return <IoHourglassOutline className="text-xl mx-auto text-red-400" />;
       }
@@ -243,39 +243,39 @@ const RoomBody: React.FC = () => {
   if (roomFromDb === undefined) {
     return (
       <div className="flex flex-col items-center justify-center text-center">
-        <span className="loading loading-dots loading-lg"></span>{ " " }
+        <span className="loading loading-dots loading-lg"></span>{" "}
       </div>
     );
     // Room has been loaded
   } else if (roomFromDb) {
     return (
       <span className="text-center">
-        <div className="text-2xl">{ roomFromDb.roomName }</div>
+        <div className="text-2xl">{roomFromDb.roomName}</div>
         <div className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
           <div>ID:</div>
-          <div>{ roomFromDb.id }</div>
+          <div>{roomFromDb.id}</div>
 
           <button>
-            { copied ? (
+            {copied ? (
               <IoCheckmarkCircleOutline className="mx-1 text-green-400 animate-bounce" />
             ) : (
               <IoCopyOutline
                 className="mx-1 hover:text-primary"
-                onClick={ copyRoomURLHandler }
+                onClick={copyRoomURLHandler}
               ></IoCopyOutline>
-            ) }
+            )}
           </button>
         </div>
 
-        { roomFromDb && (
+        {roomFromDb && (
           <div className="card card-compact bg-neutral shadow-xl mx-auto m-4">
             <div className="card-body">
               <h2 className="card-title mx-auto">
-                Story: { roomFromDb.storyName }
+                Story: {roomFromDb.storyName}
               </h2>
 
               <ul className="p-0 mx-auto flex flex-row flex-wrap justify-center items-center text-ceter gap-4">
-                { presenceData &&
+                {presenceData &&
                   presenceData
                     .filter(
                       (value, index, self) =>
@@ -288,176 +288,174 @@ const RoomBody: React.FC = () => {
                     .map((presenceItem) => {
                       return (
                         <li
-                          key={ presenceItem.clientId }
+                          key={presenceItem.clientId}
                           className="flex flex-row items-center justify-center gap-2"
                         >
                           <div className="w-10 rounded-full avatar mx-auto">
                             <Image
-                              src={ presenceItem.data.image }
-                              alt={ `${presenceItem.data.name}'s Profile Picture` }
-                              height={ 32 }
-                              width={ 32 }
+                              src={presenceItem.data.image}
+                              alt={`${presenceItem.data.name}'s Profile Picture`}
+                              height={32}
+                              width={32}
                             />
                           </div>
 
                           <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.name}{" "}
+                            {presenceItem.data.role === "ADMIN" && (
                               <div
                                 className="tooltip tooltip-primary"
                                 data-tip="Admin"
                               >
                                 <FaShieldAlt className="inline-block text-primary" />
                               </div>
-                            ) }{ " " }
-                            { presenceItem.clientId === roomFromDb.userId && (
+                            )}{" "}
+                            {presenceItem.clientId === roomFromDb.userId && (
                               <div
                                 className="tooltip tooltip-warning"
                                 data-tip="Room Owner"
                               >
                                 <RiVipCrownFill className="inline-block text-yellow-500" />
                               </div>
-                            ) }
-                            { " : " }
+                            )}
+                            {" : "}
                           </p>
 
-                          { roomFromDb &&
+                          {roomFromDb &&
                             votesFromDb &&
                             voteString(
                               roomFromDb.visible,
                               votesFromDb,
                               presenceItem.data
-                            ) }
+                            )}
                         </li>
                       );
-                    }) }
+                    })}
               </ul>
 
               <div className="join md:btn-group-horizontal mx-auto">
-                { roomFromDb.scale.split(",").map((scaleItem, index) => {
+                {roomFromDb.scale.split(",").map((scaleItem, index) => {
                   return (
                     <button
-                      key={ index }
-                      className={ `join-item ${getVoteForCurrentUser()?.value === scaleItem
+                      key={index}
+                      className={`join-item ${
+                        getVoteForCurrentUser()?.value === scaleItem
                           ? "btn btn-active btn-primary"
                           : "btn"
-                        }` }
-                      onClick={ () => setVote(scaleItem) }
+                      }`}
+                      onClick={() => setVote(scaleItem)}
                     >
-                      { scaleItem }
+                      {scaleItem}
                     </button>
                   );
-                }) }
+                })}
               </div>
             </div>
           </div>
-        ) }
+        )}
 
-        { sessionData &&
-          !!roomFromDb &&
-          roomFromDb.userId === sessionData.user.id && (
-            <>
-              <div className="card card-compact bg-neutral shadow-xl mx-auto m-4">
-                <div className="card-body flex flex-col flex-wrap">
-                  <h2 className="card-title mx-auto">Room Settings</h2>
+        {session && !!roomFromDb && roomFromDb.userId === session.user.id && (
+          <>
+            <div className="card card-compact bg-neutral shadow-xl mx-auto m-4">
+              <div className="card-body flex flex-col flex-wrap">
+                <h2 className="card-title mx-auto">Room Settings</h2>
 
-                  <label className="label mx-auto">
-                    { "Vote Scale (Comma Separated):" }{ " " }
-                  </label>
+                <label className="label mx-auto">
+                  {"Vote Scale (Comma Separated):"}{" "}
+                </label>
 
-                  <input
-                    type="text"
-                    placeholder="Scale (Comma Separated)"
-                    className="input input-bordered m-auto"
-                    value={ roomScale }
-                    onChange={ (event) => {
-                      setRoomScale(event.target.value);
-                    } }
-                  />
+                <input
+                  type="text"
+                  placeholder="Scale (Comma Separated)"
+                  className="input input-bordered m-auto"
+                  value={roomScale}
+                  onChange={(event) => {
+                    setRoomScale(event.target.value);
+                  }}
+                />
 
-                  <label className="label mx-auto">{ "Story Name:" } </label>
+                <label className="label mx-auto">{"Story Name:"} </label>
 
-                  <input
-                    type="text"
-                    placeholder="Story Name"
-                    className="input input-bordered m-auto"
-                    value={ storyNameText }
-                    onChange={ (event) => {
-                      setStoryNameText(event.target.value);
-                    } }
-                  />
+                <input
+                  type="text"
+                  placeholder="Story Name"
+                  className="input input-bordered m-auto"
+                  value={storyNameText}
+                  onChange={(event) => {
+                    setStoryNameText(event.target.value);
+                  }}
+                />
 
-                  <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
-                    <div>
-                      <button
-                        onClick={ () => saveRoom(!roomFromDb.visible, false) }
-                        className="btn btn-primary inline-flex"
-                      >
-                        { roomFromDb.visible ? (
-                          <>
-                            <IoEyeOffOutline className="text-xl mr-1" />
-                            Hide
-                          </>
-                        ) : (
-                          <>
-                            <IoEyeOutline className="text-xl mr-1" />
-                            Show
-                          </>
-                        ) }
-                      </button>
-                    </div>
-
-                    <div>
-                      <button
-                        onClick={ () =>
-                          saveRoom(
-                            false,
-                            true,
-                            roomFromDb.storyName === storyNameText ||
-                              votesFromDb?.length === 0
-                              ? false
-                              : true
-                          )
-                        }
-                        className="btn btn-primary inline-flex"
-                        disabled={
-                          [...new Set(roomScale.split(","))].filter(
-                            (item) => item !== ""
-                          ).length <= 1
-                        }
-                      >
-                        { roomFromDb.storyName === storyNameText ||
-                          votesFromDb?.length === 0 ? (
-                          <>
-                            <IoReloadOutline className="text-xl mr-1" /> Reset
-                          </>
-                        ) : (
-                          <>
-                            <IoSaveOutline className="text-xl mr-1" /> Save
-                          </>
-                        ) }
-                      </button>
-                    </div>
-
-                    { votesFromDb &&
-                      (roomFromDb.logs.length > 0 ||
-                        votesFromDb.length > 0) && (
-                        <div>
-                          <button
-                            onClick={ () => downloadLogs() }
-                            className="btn btn-primary inline-flex hover:animate-pulse"
-                          >
-                            <>
-                              <IoDownloadOutline className="text-xl" />
-                            </>
-                          </button>
-                        </div>
-                      ) }
+                <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
+                  <div>
+                    <button
+                      onClick={() => saveRoom(!roomFromDb.visible, false)}
+                      className="btn btn-primary inline-flex"
+                    >
+                      {roomFromDb.visible ? (
+                        <>
+                          <IoEyeOffOutline className="text-xl mr-1" />
+                          Hide
+                        </>
+                      ) : (
+                        <>
+                          <IoEyeOutline className="text-xl mr-1" />
+                          Show
+                        </>
+                      )}
+                    </button>
                   </div>
+
+                  <div>
+                    <button
+                      onClick={() =>
+                        saveRoom(
+                          false,
+                          true,
+                          roomFromDb.storyName === storyNameText ||
+                            votesFromDb?.length === 0
+                            ? false
+                            : true
+                        )
+                      }
+                      className="btn btn-primary inline-flex"
+                      disabled={
+                        [...new Set(roomScale.split(","))].filter(
+                          (item) => item !== ""
+                        ).length <= 1
+                      }
+                    >
+                      {roomFromDb.storyName === storyNameText ||
+                      votesFromDb?.length === 0 ? (
+                        <>
+                          <IoReloadOutline className="text-xl mr-1" /> Reset
+                        </>
+                      ) : (
+                        <>
+                          <IoSaveOutline className="text-xl mr-1" /> Save
+                        </>
+                      )}
+                    </button>
+                  </div>
+
+                  {votesFromDb &&
+                    (roomFromDb.logs.length > 0 || votesFromDb.length > 0) && (
+                      <div>
+                        <button
+                          onClick={() => downloadLogs()}
+                          className="btn btn-primary inline-flex hover:animate-pulse"
+                        >
+                          <>
+                            <IoDownloadOutline className="text-xl" />
+                          </>
+                        </button>
+                      </div>
+                    )}
                 </div>
               </div>
-            </>
-          ) }
+            </div>
+          </>
+        )}
       </span>
     );
     // Room does not exist
