More cache fixes

src/app/_components/RoomList.tsx

@@ -7,18 +7,21 @@ import { IoEnterOutline, IoTrashBinOutline } from "react-icons/io5";
 import { env } from "@/env.mjs";
 import { trpc } from "../_trpc/client";
 import Loading from "./Loading";
+import { useUser } from "@clerk/nextjs";
+
+const RoomList = () => {
+  const { isSignedIn, user } = useUser();
 
-const RoomList = ({ userId }: { userId: string }) => {
   configureAbly({
     key: env.NEXT_PUBLIC_ABLY_PUBLIC_KEY,
-    clientId: userId,
+    clientId: user?.id,
     recover: (_, cb) => {
       cb(true);
     },
   });
 
   useChannel(
-    `${env.NEXT_PUBLIC_APP_ENV}-${userId}`,
+    `${env.NEXT_PUBLIC_APP_ENV}-${user?.id}`,
     () => void refetchRoomsFromDb()
   );
 

src/app/_components/VoteUI.tsx

@@ -26,10 +26,12 @@ import type { PresenceItem } from "@/utils/types";
 import { trpc } from "@/app/_trpc/client";
 import Loading from "@/app/_components/Loading";
 import { User } from "@clerk/nextjs/dist/types/server";
+import { useUser } from "@clerk/nextjs";
 
-const VoteUI = ({ user }: { user: Partial<User> }) => {
+const VoteUI = () => {
   const params = useParams();
   const roomId = params?.id as string;
+  const { isSignedIn, user } = useUser();
 
   const [storyNameText, setStoryNameText] = useState<string>("");
   const [roomScale, setRoomScale] = useState<string>("");
@@ -99,7 +101,9 @@ const VoteUI = ({ user }: { user: Partial<User> }) => {
   // Helper functions
   const getVoteForCurrentUser = () => {
     if (roomFromDb) {
-      return votesFromDb && votesFromDb.find((vote) => vote.userId === user.id);
+      return (
+        votesFromDb && votesFromDb.find((vote) => vote.userId === user?.id)
+      );
     } else {
       return null;
     }
@@ -322,7 +326,7 @@ const VoteUI = ({ user }: { user: Partial<User> }) => {
         )}
 
         {!!roomFromDb &&
-          (roomFromDb.userId === user.id || isAdmin(user?.publicMetadata)) && (
+          (roomFromDb.userId === user?.id || isAdmin(user?.publicMetadata)) && (
             <>
               <div className="card card-compact bg-base-100 shadow-xl mx-auto m-4">
                 <div className="card-body flex flex-col flex-wrap">

src/app/dashboard/page.tsx

@@ -3,6 +3,7 @@ import { FaShieldAlt } from "react-icons/fa";
 import { GiStarFormation } from "react-icons/gi";
 import { isAdmin, isVIP } from "@/utils/helpers";
 import { currentUser } from "@clerk/nextjs";
+import { Suspense } from "react";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
@@ -25,7 +26,9 @@ export default async function Dashboard() {
         )}
       </h1>
 
-      {user && <RoomList userId={user?.id} />}
+      <Suspense>
+        <RoomList />
+      </Suspense>
     </div>
   );
 }

src/app/room/[id]/page.tsx

@@ -1,6 +1,5 @@
-import { currentUser } from "@clerk/nextjs";
-import Loading from "@/app/_components/Loading";
 import VoteUI from "@/app/_components/VoteUI";
+import { Suspense } from "react";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
@@ -9,19 +8,11 @@ export const revalidate = 0;
 export const fetchCache = "force-no-store";
 
 export default async function Room() {
-  const user = await currentUser();
-
-  const shapedUser = {
-    id: user?.id,
-    firstName: user?.firstName,
-    lastName: user?.lastName,
-    imageUrl: user?.imageUrl,
-    publicMetadata: user?.publicMetadata,
-  };
-
   return (
     <div className="flex flex-col items-center justify-center text-center gap-2">
-      {user ? <VoteUI user={shapedUser} /> : <Loading />}
+      <Suspense>
+        <VoteUI />
+      </Suspense>
     </div>
   );
 }