Hotfix... ready for PRIME TIME!

src/components/Navbar.tsx

@@ -21,7 +21,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
       );
     } else if (sessionStatus === "unauthenticated") {
       return (
-        <button className="btn btn-secondary" onClick={ () => void signIn() }>
+        <button className="btn btn-secondary" onClick={() => void signIn()}>
           Sign In
         </button>
       );
@@ -40,40 +40,40 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
             className="md:mr-2"
             src="/logo.webp"
             alt="Nav Logo"
-            width={ 32 }
-            height={ 32 }
+            width={32}
+            height={32}
             priority
           />
           <span className="hidden md:inline-flex">
-            { title }
-            { env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging" }
+            {title}
+            {env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging"}
           </span>
         </Link>
       </div>
 
-      { sessionStatus === "loading" ? (
+      {sessionStatus === "loading" ? (
         <div className="flex items-center justify-center">
           <span className="loading loading-dots loading-lg"></span>
         </div>
       ) : (
         navigationMenu()
-      ) }
+      )}
 
-      { sessionData?.user.image && (
+      {sessionData?.user.image && (
         <div className="flex-none gap-2">
           <div className="dropdown dropdown-end">
-            <label tabIndex={ 0 } className="btn btn-ghost btn-circle avatar">
+            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
               <div className="w-10 rounded-full">
                 <Image
-                  src={ sessionData.user.image }
+                  src={sessionData.user.image}
                   alt="Profile picture."
-                  height={ 32 }
-                  width={ 32 }
+                  height={32}
+                  width={32}
                 />
               </div>
             </label>
             <ul
-              tabIndex={ 0 }
+              tabIndex={0}
               className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box z-50"
             >
               <li>
@@ -85,7 +85,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
                   Profile
                 </Link>
               </li>
-              { sessionData.user.role === "ADMIN" && (
+              {sessionData.user.role === "ADMIN" && (
                 <li>
                   <Link
                     about="Admin Page"
@@ -95,16 +95,17 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
                     Admin
                   </Link>
                 </li>
-              ) }
-              <li>
-                <a onClick={ () => void signOut({ callbackUrl: "/" }) }>
+              )}
+              <button
+                className="btn btn-secondary btn-sm text-center whitespace-nowrap"
+                onClick={() => void signOut({ callbackUrl: "/" })}
+              >
                 Sign Out
-                </a>
-              </li>
+              </button>
             </ul>
           </div>
         </div>
-      ) }
+      )}
     </nav>
   );
 };

src/server/ably.ts

@@ -2,16 +2,12 @@ import Ably from "ably";
 import { env } from "~/env.mjs";
 import type { EventType } from "../utils/types";
 
-const ablyRest = new Ably.Rest(env.ABLY_PRIVATE_KEY);
-
-export const publishToChannel = (
+export const publishToChannel = async (
   channel: string,
   event: EventType,
   message: string
 ) => {
-  try {
-    ablyRest.channels.get(`${env.APP_ENV}-${channel}`).publish(event, message);
-  } catch (error) {
-    console.log(`❌❌❌ Failed to send message!`);
-  }
+  const ably = new Ably.Rest.Promise(env.ABLY_PRIVATE_KEY);
+  const ablyChannel = ably.channels.get(`${env.APP_ENV}-${channel}`);
+  await ablyChannel.publish(event, message, { quickAck: true });
 };

src/server/api/routers/room.ts

@@ -27,7 +27,7 @@ export const roomRouter = createTRPCRouter({
           await invalidateCache(`kv_roomcount_admin`);
           await invalidateCache(`kv_roomlist_${ctx.session.user.id}`);
 
-          publishToChannel(
+          await publishToChannel(
             `${ctx.session.user.id}`,
             "ROOM_LIST_UPDATE",
             "CREATE"
@@ -201,7 +201,7 @@ export const roomRouter = createTRPCRouter({
       });
 
       if (newRoom) {
-        publishToChannel(`${newRoom.id}`, "ROOM_UPDATE", "UPDATE");
+        await publishToChannel(`${newRoom.id}`, "ROOM_UPDATE", "UPDATE");
       }
 
       return !!newRoom;
@@ -222,13 +222,13 @@ export const roomRouter = createTRPCRouter({
         await invalidateCache(`kv_votecount_admin`);
         await invalidateCache(`kv_roomlist_${ctx.session.user.id}`);
 
-        publishToChannel(
+        await publishToChannel(
           `${ctx.session.user.id}`,
           "ROOM_LIST_UPDATE",
           "DELETE"
         );
 
-        publishToChannel(`${deletedRoom.id}`, "ROOM_UPDATE", "DELETE");
+        await publishToChannel(`${deletedRoom.id}`, "ROOM_UPDATE", "DELETE");
       }
 
       return !!deletedRoom;

src/server/api/routers/vote.ts

@@ -100,7 +100,7 @@ export const voteRouter = createTRPCRouter({
         await invalidateCache(`kv_votecount_admin`);
         await invalidateCache(`kv_votes_${input.roomId}`);
 
-        publishToChannel(`${vote.roomId}`, "VOTE_UPDATE", "UPDATE");
+        await publishToChannel(`${vote.roomId}`, "VOTE_UPDATE", "UPDATE");
       }
 
       return !!vote;

src/server/api/trpc.ts

@@ -118,7 +118,7 @@ const enforceRouteProtection = t.middleware(async ({ ctx, next }) => {
   const { success } = await rateLimit.limit(
     `${env.APP_ENV}_${ctx.session.user.id}`
   );
-  console.log(success);
+
   if (!success) throw new TRPCError({ code: "TOO_MANY_REQUESTS" });
 
   return next({