From 99d5c7ed613cfe1472390568f2cd7b9b9acb4d63 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Wed, 6 Sep 2023 12:53:48 -0600
Subject: [PATCH 1/5] More cache fixes

---
 src/app/_components/RoomList.tsx |  9 ++++++---
 src/app/_components/VoteUI.tsx   | 10 +++++++---
 src/app/dashboard/page.tsx       |  5 ++++-
 src/app/room/[id]/page.tsx       | 17 ++++-------------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/app/_components/RoomList.tsx b/src/app/_components/RoomList.tsx
index 4ec4506..e7fcb75 100644
--- a/src/app/_components/RoomList.tsx
+++ b/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()
   );
 
diff --git a/src/app/_components/VoteUI.tsx b/src/app/_components/VoteUI.tsx
index 544edd2..31b8259 100644
--- a/src/app/_components/VoteUI.tsx
+++ b/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">
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 97c7a66..aa1256c 100644
--- a/src/app/dashboard/page.tsx
+++ b/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>
   );
 }
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 01ed746..e2f8328 100644
--- a/src/app/room/[id]/page.tsx
+++ b/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>
   );
 }

From dc9cc66a564396a8a5869ba4a90e2dbba9482191 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Wed, 6 Sep 2023 12:57:13 -0600
Subject: [PATCH 2/5] Suspenseful!

---
 src/app/_components/RoomList.tsx | 4 ++++
 src/app/_components/VoteUI.tsx   | 5 ++++-
 src/app/dashboard/page.tsx       | 6 ++----
 src/app/room/[id]/page.tsx       | 6 ++----
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/_components/RoomList.tsx b/src/app/_components/RoomList.tsx
index e7fcb75..35ec0e4 100644
--- a/src/app/_components/RoomList.tsx
+++ b/src/app/_components/RoomList.tsx
@@ -9,6 +9,10 @@ import { trpc } from "../_trpc/client";
 import Loading from "./Loading";
 import { useUser } from "@clerk/nextjs";
 
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+export const fetchCache = "force-no-store";
+
 const RoomList = () => {
   const { isSignedIn, user } = useUser();
 
diff --git a/src/app/_components/VoteUI.tsx b/src/app/_components/VoteUI.tsx
index 31b8259..4c394f0 100644
--- a/src/app/_components/VoteUI.tsx
+++ b/src/app/_components/VoteUI.tsx
@@ -25,9 +25,12 @@ 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 { User } from "@clerk/nextjs/dist/types/server";
 import { useUser } from "@clerk/nextjs";
 
+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;
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index aa1256c..a69f82a 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -4,12 +4,10 @@ import { GiStarFormation } from "react-icons/gi";
 import { isAdmin, isVIP } from "@/utils/helpers";
 import { currentUser } from "@clerk/nextjs";
 import { Suspense } from "react";
+import Loading from "../_components/Loading";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
-export const dynamic = "force-dynamic";
-export const revalidate = 0;
-export const fetchCache = "force-no-store";
 
 export default async function Dashboard() {
   const user = await currentUser();
@@ -26,7 +24,7 @@ export default async function Dashboard() {
         )}
       </h1>
 
-      <Suspense>
+      <Suspense fallback={<Loading />}>
         <RoomList />
       </Suspense>
     </div>
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index e2f8328..872346c 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -1,16 +1,14 @@
+import Loading from "@/app/_components/Loading";
 import VoteUI from "@/app/_components/VoteUI";
 import { Suspense } from "react";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
-export const dynamic = "force-dynamic";
-export const revalidate = 0;
-export const fetchCache = "force-no-store";
 
 export default async function Room() {
   return (
     <div className="flex flex-col items-center justify-center text-center gap-2">
-      <Suspense>
+      <Suspense fallback={<Loading />}>
         <VoteUI />
       </Suspense>
     </div>

From b4ba10fd779538761b12fa564f9516db3dced1a9 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Wed, 6 Sep 2023 12:58:08 -0600
Subject: [PATCH 3/5] Lint

---
 src/app/_components/RoomList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/_components/RoomList.tsx b/src/app/_components/RoomList.tsx
index 35ec0e4..6eab59b 100644
--- a/src/app/_components/RoomList.tsx
+++ b/src/app/_components/RoomList.tsx
@@ -14,7 +14,7 @@ export const revalidate = 0;
 export const fetchCache = "force-no-store";
 
 const RoomList = () => {
-  const { isSignedIn, user } = useUser();
+  const { user } = useUser();
 
   configureAbly({
     key: env.NEXT_PUBLIC_ABLY_PUBLIC_KEY,

From f7b35f1de6e59beddfccd6d707f0021b465f2854 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Wed, 6 Sep 2023 13:00:01 -0600
Subject: [PATCH 4/5] PLS

---
 src/app/_components/VoteUI.tsx | 2 +-
 src/app/room/[id]/page.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/_components/VoteUI.tsx b/src/app/_components/VoteUI.tsx
index 4c394f0..7faa269 100644
--- a/src/app/_components/VoteUI.tsx
+++ b/src/app/_components/VoteUI.tsx
@@ -34,7 +34,7 @@ export const fetchCache = "force-no-store";
 const VoteUI = () => {
   const params = useParams();
   const roomId = params?.id as string;
-  const { isSignedIn, user } = useUser();
+  const { user } = useUser();
 
   const [storyNameText, setStoryNameText] = useState<string>("");
   const [roomScale, setRoomScale] = useState<string>("");
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 872346c..6e5bcf3 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -5,7 +5,7 @@ import { Suspense } from "react";
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
 
-export default async function Room() {
+export default function Room() {
   return (
     <div className="flex flex-col items-center justify-center text-center gap-2">
       <Suspense fallback={<Loading />}>

From 6e4af484aed01db5c69c73a6c481cc7d2e2d9982 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Wed, 6 Sep 2023 13:00:00 -0600
Subject: [PATCH 5/5] PLS!

---
 .../_components/{Loading.tsx => LoadingIndicator.tsx}    | 6 ++----
 src/app/_components/RoomList.tsx                         | 4 ++--
 src/app/_components/VoteUI.tsx                           | 4 ++--
 src/app/dashboard/page.tsx                               | 9 ++++-----
 src/app/room/[id]/loading.tsx                            | 6 ++++++
 src/app/room/[id]/page.tsx                               | 9 ++++-----
 6 files changed, 20 insertions(+), 18 deletions(-)
 rename src/app/_components/{Loading.tsx => LoadingIndicator.tsx} (69%)
 create mode 100644 src/app/room/[id]/loading.tsx

diff --git a/src/app/_components/Loading.tsx b/src/app/_components/LoadingIndicator.tsx
similarity index 69%
rename from src/app/_components/Loading.tsx
rename to src/app/_components/LoadingIndicator.tsx
index 3851c89..7b9b00e 100644
--- a/src/app/_components/Loading.tsx
+++ b/src/app/_components/LoadingIndicator.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-const Loading = () => {
+const LoadingIndicator = () => {
   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;
diff --git a/src/app/_components/RoomList.tsx b/src/app/_components/RoomList.tsx
index 6eab59b..15356da 100644
--- a/src/app/_components/RoomList.tsx
+++ b/src/app/_components/RoomList.tsx
@@ -6,7 +6,7 @@ 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";
@@ -137,7 +137,7 @@ const RoomList = () => {
         New Room
       </label>
 
-      {roomsFromDb === undefined && <Loading />}
+      {roomsFromDb === undefined && <LoadingIndicator />}
     </div>
   );
 };
diff --git a/src/app/_components/VoteUI.tsx b/src/app/_components/VoteUI.tsx
index 7faa269..d0ed858 100644
--- a/src/app/_components/VoteUI.tsx
+++ b/src/app/_components/VoteUI.tsx
@@ -24,7 +24,7 @@ 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 { useUser } from "@clerk/nextjs";
 
 export const dynamic = "force-dynamic";
@@ -211,7 +211,7 @@ const VoteUI = () => {
 
   // Room is loading
   if (roomFromDb === undefined) {
-    return <Loading />;
+    return <LoadingIndicator />;
     // Room has been loaded
   } else if (roomFromDb) {
     return (
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index a69f82a..2aabd19 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -3,11 +3,12 @@ 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";
-import Loading from "../_components/Loading";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+export const fetchCache = "force-no-store";
 
 export default async function Dashboard() {
   const user = await currentUser();
@@ -24,9 +25,7 @@ export default async function Dashboard() {
         )}
       </h1>
 
-      <Suspense fallback={<Loading />}>
-        <RoomList />
-      </Suspense>
+      <RoomList />
     </div>
   );
 }
diff --git a/src/app/room/[id]/loading.tsx b/src/app/room/[id]/loading.tsx
new file mode 100644
index 0000000..b61d5d9
--- /dev/null
+++ b/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 />;
+}
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 6e5bcf3..fb3416c 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -1,16 +1,15 @@
-import Loading from "@/app/_components/Loading";
 import VoteUI from "@/app/_components/VoteUI";
-import { Suspense } from "react";
 
 export const runtime = "edge";
 export const preferredRegion = ["pdx1"];
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+export const fetchCache = "force-no-store";
 
 export default function Room() {
   return (
     <div className="flex flex-col items-center justify-center text-center gap-2">
-      <Suspense fallback={<Loading />}>
-        <VoteUI />
-      </Suspense>
+      <VoteUI />
     </div>
   );
 }