Merge branch 'dev'

src/app/_components/LoadingIndicator.tsx

@@ -1,6 +1,4 @@
-"use client";
+const LoadingIndicator = () => {
-
-const Loading = () => {
   return (
     <div className="flex items-center justify-center">
       <span className="loading loading-dots loading-lg"></span>
@@ -8,4 +6,4 @@ const Loading = () => {
   );
 };
 
-export default Loading;
+export default LoadingIndicator;

src/app/_components/RoomList.tsx

@@ -6,19 +6,26 @@ import { useState } from "react";
 import { IoEnterOutline, IoTrashBinOutline } from "react-icons/io5";
 import { env } from "@/env.mjs";
 import { trpc } from "../_trpc/client";
-import Loading from "./Loading";
+import LoadingIndicator from "./LoadingIndicator";
+import { useUser } from "@clerk/nextjs";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+export const fetchCache = "force-no-store";
+
+const RoomList = () => {
+  const { 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()
   );
 
@@ -130,7 +137,7 @@ const RoomList = ({ userId }: { userId: string }) => {
         New Room
       </label>
 
-      {roomsFromDb === undefined && <Loading />}
+      {roomsFromDb === undefined && <LoadingIndicator />}
     </div>
   );
 };

src/app/_components/VoteUI.tsx

@@ -24,12 +24,17 @@ import { env } from "@/env.mjs";
 import { isAdmin, isVIP, jsonToCsv } from "@/utils/helpers";
 import type { PresenceItem } from "@/utils/types";
 import { trpc } from "@/app/_trpc/client";
-import Loading from "@/app/_components/Loading";
+import LoadingIndicator from "@/app/_components/LoadingIndicator";
-import { User } from "@clerk/nextjs/dist/types/server";
+import { useUser } from "@clerk/nextjs";
 
-const VoteUI = ({ user }: { user: Partial<User> }) => {
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+export const fetchCache = "force-no-store";
+
+const VoteUI = () => {
   const params = useParams();
   const roomId = params?.id as string;
+  const { user } = useUser();
 
   const [storyNameText, setStoryNameText] = useState<string>("");
   const [roomScale, setRoomScale] = useState<string>("");
@@ -99,7 +104,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;
     }
@@ -204,7 +211,7 @@ const VoteUI = ({ user }: { user: Partial<User> }) => {
 
   // Room is loading
   if (roomFromDb === undefined) {
-    return <Loading />;
+    return <LoadingIndicator />;
     // Room has been loaded
   } else if (roomFromDb) {
     return (
@@ -322,7 +329,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

@@ -25,7 +25,7 @@ export default async function Dashboard() {
         )}
       </h1>
 
-      {user && <RoomList userId={user?.id} />}
+      <RoomList />
     </div>
   );
 }

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

@@ -0,0 +1,6 @@
+import LoadingIndicator from "@/app/_components/LoadingIndicator";
+
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return <LoadingIndicator />;
+}

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

@@ -1,5 +1,3 @@
-import { currentUser } from "@clerk/nextjs";
-import Loading from "@/app/_components/Loading";
 import VoteUI from "@/app/_components/VoteUI";
 
 export const runtime = "edge";
@@ -8,20 +6,10 @@ export const dynamic = "force-dynamic";
 export const revalidate = 0;
 export const fetchCache = "force-no-store";
 
-export default async function Room() {
+export default 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 />}
+      <VoteUI />
     </div>
   );
 }