Merge pull request #34 from atridadl/dev

1.2.7
✨ Shiny new stats on the front page
🚧 Small cleanup of react FC references...

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintpadawan",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Plan. Sprint. Repeat.",
   "private": true,
   "scripts": {

src/components/Footer.tsx

@@ -1,14 +1,14 @@
 import { GiTechnoHeart } from "react-icons/gi";
 import packagejson from "../../package.json";
 
-const Footer: React.FC = () => {
+const Footer = () => {
   return (
     <footer className="footer footer-center h-12 p-2 bg-base-100 text-base-content">
       <div>
         <p>
-          Made with{ " " }
+          Made with{" "}
-          <GiTechnoHeart className="inline-block text-primary text-lg animate-pulse" />{ " " }
+          <GiTechnoHeart className="inline-block text-primary text-lg animate-pulse" />{" "}
-          by{ " " }
+          by{" "}
           <a
             className="link link-primary link-hover"
             href="https://atri.dad"
@@ -16,15 +16,15 @@ const Footer: React.FC = () => {
             target="_blank"
           >
             Atridad Lahiji
-          </a>{ " " }
+          </a>{" "}
-          -{ " " }
+          -{" "}
           <a
             className="link link-primary link-hover"
-            href={ `https://github.com/atridadl/sprintpadawan/releases/tag/${packagejson.version}` }
+            href={`https://github.com/atridadl/sprintpadawan/releases/tag/${packagejson.version}`}
             rel="noreferrer"
             target="_blank"
           >
-            v{ packagejson.version }
+            v{packagejson.version}
           </a>
         </p>
       </div>

src/components/Navbar.tsx

@@ -8,7 +8,7 @@ interface NavbarProps {
   title: string;
 }
 
-const Navbar: React.FC<NavbarProps> = ({ title }) => {
+const Navbar = ({ title }: NavbarProps) => {
   const { data: sessionData, status: sessionStatus } = useSession();
   const router = useRouter();
 

src/components/RoomList.tsx

@@ -7,7 +7,7 @@ import { IoEnterOutline, IoTrashBinOutline } from "react-icons/io5";
 import { env } from "~/env.mjs";
 import { api } from "~/utils/api";
 
-const RoomList: React.FC = () => {
+const RoomList = () => {
   const { data: sessionData } = useSession();
 
   configureAbly({
@@ -50,7 +50,7 @@ const RoomList: React.FC = () => {
 
   return (
     <div className="flex flex-col items-center justify-center gap-8">
-      {/* Modal for Adding Rooms */ }
+      {/* Modal for Adding Rooms */}
       <input type="checkbox" id="new-room-modal" className="modal-toggle" />
       <div className="modal modal-bottom sm:modal-middle">
         <div className="modal-box flex-col flex text-center justify-center items-center">
@@ -72,30 +72,30 @@ const RoomList: React.FC = () => {
               type="text"
               placeholder="Type here"
               className="input input-bordered w-full max-w-xs"
-              onChange={ (event) => {
+              onChange={(event) => {
                 setRoomName(event.target.value);
-              } }
+              }}
             />
           </div>
 
           <div className="modal-action">
-            { roomName.length > 0 && (
+            {roomName.length > 0 && (
               <label
                 htmlFor="new-room-modal"
                 className="btn btn-primary"
-                onClick={ () => createRoomHandler() }
+                onClick={() => createRoomHandler()}
               >
                 Submit
               </label>
-            ) }
+            )}
           </div>
         </div>
       </div>
 
-      { roomsFromDb && roomsFromDb.length > 0 && (
+      {roomsFromDb && roomsFromDb.length > 0 && (
         <div className="overflow-x-auto">
           <table className="table text-center">
-            {/* head */ }
+            {/* head */}
             <thead>
               <tr className="border-white">
                 <th>Room Name</th>
@@ -103,43 +103,43 @@ const RoomList: React.FC = () => {
               </tr>
             </thead>
             <tbody className="">
-              { roomsFromDb?.map((room) => {
+              {roomsFromDb?.map((room) => {
                 return (
-                  <tr key={ room.id } className="hover border-white">
+                  <tr key={room.id} className="hover border-white">
                     <td className="break-all max-w-[200px] md:max-w-[400px]">
-                      { room.roomName }
+                      {room.roomName}
                     </td>
                     <td>
                       <Link
                         className="m-2 no-underline"
-                        href={ `/room/${room.id}` }
+                        href={`/room/${room.id}`}
                       >
                         <IoEnterOutline className="text-xl inline-block hover:text-secondary" />
                       </Link>
 
                       <button
                         className="m-2"
-                        onClick={ () => deleteRoomHandler(room.id) }
+                        onClick={() => deleteRoomHandler(room.id)}
                       >
                         <IoTrashBinOutline className="text-xl inline-block hover:text-error" />
                       </button>
                     </td>
                   </tr>
                 );
-              }) }
+              })}
             </tbody>
           </table>
         </div>
-      ) }
+      )}
       <label htmlFor="new-room-modal" className="btn btn-secondary">
         New Room
       </label>
 
-      { roomsFromDb === undefined && (
+      {roomsFromDb === undefined && (
         <div className="flex items-center justify-center">
           <span className="loading loading-dots loading-lg"></span>
         </div>
-      ) }
+      )}
     </div>
   );
 };

src/components/Stats.tsx

@@ -0,0 +1,83 @@
+import { configureAbly, useChannel } from "@ably-labs/react-hooks";
+import { env } from "~/env.mjs";
+import { api } from "~/utils/api";
+
+const Stats = () => {
+  configureAbly({
+    key: env.NEXT_PUBLIC_ABLY_PUBLIC_KEY,
+    recover: (_, cb) => {
+      cb(true);
+    },
+  });
+
+  const [] = useChannel(
+    `${env.NEXT_PUBLIC_APP_ENV}-stats`,
+    () => void refetchData()
+  );
+
+  const {
+    data: usersCount,
+    isLoading: usersCountLoading,
+    isFetching: usersCountFetching,
+    refetch: refetchUsersCount,
+  } = api.rest.userCount.useQuery();
+  const {
+    data: roomsCount,
+    isLoading: roomsCountLoading,
+    isFetching: roomsCountFetching,
+    refetch: refetchRoomsCount,
+  } = api.rest.roomCount.useQuery();
+  const {
+    data: votesCount,
+    isLoading: votesCountLoading,
+    isFetching: votesCountFetching,
+    refetch: refetchVotesCount,
+  } = api.rest.voteCount.useQuery();
+
+  const refetchData = async () => {
+    await Promise.all([
+      refetchUsersCount(),
+      refetchRoomsCount(),
+      refetchVotesCount(),
+    ]);
+  };
+
+  return (
+    <div className="stats stats-horizontal shadow bg-neutral m-4">
+      <div className="stat">
+        <div className="stat-title">Users</div>
+        <div className="stat-value">
+          {usersCountLoading || usersCountFetching ? (
+            <span className="loading loading-infinity loading-lg"></span>
+          ) : (
+            <>{usersCount ? usersCount : "0"}</>
+          )}
+        </div>
+      </div>
+
+      <div className="stat">
+        <div className="stat-title">Rooms</div>
+        <div className="stat-value">
+          {roomsCountLoading || roomsCountFetching ? (
+            <span className="loading loading-infinity loading-lg"></span>
+          ) : (
+            <>{roomsCount ? roomsCount : "0"}</>
+          )}
+        </div>
+      </div>
+
+      <div className="stat">
+        <div className="stat-title">Votes</div>
+        <div className="stat-value">
+          {votesCountLoading || votesCountFetching ? (
+            <span className="loading loading-infinity loading-lg"></span>
+          ) : (
+            <>{votesCount ? votesCount : "0"}</>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stats;

src/pages/admin/index.tsx

@@ -8,6 +8,7 @@ import { SiGithub, SiGoogle } from "react-icons/si";
 import { GiStarFormation } from "react-icons/gi";
 import { api } from "~/utils/api";
 import { getServerAuthSession } from "../../server/auth";
+import Stats from "~/components/Stats";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
@@ -55,31 +56,13 @@ const Admin: NextPage = () => {
 
 export default Admin;
 
-const AdminBody: React.FC = () => {
+const AdminBody = () => {
-  const {
-    data: usersCount,
-    isLoading: usersCountLoading,
-    isFetching: usersCountFetching,
-    refetch: refetchUsersCount,
-  } = api.rest.userCount.useQuery();
   const {
     data: users,
     isLoading: usersLoading,
     isFetching: usersFetching,
     refetch: refetchUsers,
   } = api.user.getAll.useQuery();
-  const {
-    data: roomsCount,
-    isLoading: roomsCountLoading,
-    isFetching: roomsCountFetching,
-    refetch: refetchRoomsCount,
-  } = api.rest.roomCount.useQuery();
-  const {
-    data: votesCount,
-    isLoading: votesCountLoading,
-    isFetching: votesCountFetching,
-    refetch: refetchVotesCount,
-  } = api.rest.voteCount.useQuery();
 
   const getProviders = (user: {
     createdAt: Date;
@@ -153,57 +136,16 @@ const AdminBody: React.FC = () => {
   };
 
   const refetchData = async () => {
-    await Promise.all([
+    await Promise.all([refetchUsers()]);
-      refetchUsers(),
-      refetchUsersCount(),
-      refetchRoomsCount(),
-      refetchVotesCount(),
-    ]);
   };
 
   return (
     <>
       <h1 className="text-4xl font-bold">Admin Panel</h1>
 
-      <div className="stats stats-horizontal shadow bg-neutral m-4">
+      <Stats />
-        <div className="stat">
-          <div className="stat-title">Users</div>
-          <div className="stat-value">
-            {usersCountLoading || usersCountFetching ? (
-              <span className="loading loading-dots loading-lg"></span>
-            ) : (
-              <>{usersCount ? usersCount : "0"}</>
-            )}
-          </div>
-        </div>
 
-        <div className="stat">
+      {usersFetching ? (
-          <div className="stat-title">Rooms</div>
-          <div className="stat-value">
-            {roomsCountLoading || roomsCountFetching ? (
-              <span className="loading loading-dots loading-lg"></span>
-            ) : (
-              <>{roomsCount ? roomsCount : "0"}</>
-            )}
-          </div>
-        </div>
-
-        <div className="stat">
-          <div className="stat-title">Votes</div>
-          <div className="stat-value">
-            {votesCountLoading || votesCountFetching ? (
-              <span className="loading loading-dots loading-lg"></span>
-            ) : (
-              <>{votesCount ? votesCount : "0"}</>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {usersCountFetching ||
-      usersFetching ||
-      roomsCountFetching ||
-      votesCountFetching ? (
         <span className="loading loading-dots loading-lg"></span>
       ) : (
         <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">

src/pages/dashboard/index.tsx

@@ -45,7 +45,7 @@ const Home: NextPage = () => {
 
 export default Home;
 
-const HomePageBody: React.FC = () => {
+const HomePageBody = () => {
   const { data: sessionData } = useSession();
   const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>("");
   const [tabIndex, setTabIndex] = useState<number>();

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { type NextPage } from "next";
 import Head from "next/head";
+import Stats from "~/components/Stats";
 
 const Home: NextPage = () => {
   return (
@@ -17,7 +18,7 @@ const Home: NextPage = () => {
 
 export default Home;
 
-const HomePageBody: React.FC = () => {
+const HomePageBody = () => {
   return (
     <>
       <h1 className="text-3xl sm:text-6xl font-bold">
@@ -54,6 +55,13 @@ const HomePageBody: React.FC = () => {
           </ul>
         </div>
       </div>
+
+      <div className="card card-compact bg-secondary text-black font-bold text-left">
+        <div className="card-body">
+          <h2 className="card-title">Stats:</h2>
+          <Stats />
+        </div>
+      </div>
     </>
   );
 };

src/pages/profile/index.tsx

@@ -48,7 +48,7 @@ const Profile: NextPage = () => {
 
 export default Profile;
 
-const ProfileBody: React.FC = () => {
+const ProfileBody = () => {
   const { data: sessionData } = useSession();
   const [nameText, setNameText] = useState<string>("");
   const router = useRouter();

src/pages/room/[id].tsx

@@ -65,7 +65,7 @@ const Room: NextPage = () => {
 
 export default Room;
 
-const RoomBody: React.FC = ({}) => {
+const RoomBody = ({}) => {
   const { data: sessionData } = useSession();
   const { query } = useRouter();
   const roomId = z.string().parse(query.id);

src/server/api/routers/room.ts

@@ -33,6 +33,12 @@ export const roomRouter = createTRPCRouter({
             EventTypes.ROOM_LIST_UPDATE,
             JSON.stringify(room)
           );
+
+          await publishToChannel(
+            `stats`,
+            EventTypes.STATS_UPDATE,
+            JSON.stringify(room)
+          );
         }
         // happy path
         return !!room;
@@ -224,6 +230,12 @@ export const roomRouter = createTRPCRouter({
           EventTypes.ROOM_UPDATE,
           JSON.stringify(deletedRoom)
         );
+
+        await publishToChannel(
+          `stats`,
+          EventTypes.STATS_UPDATE,
+          JSON.stringify(deletedRoom)
+        );
       }
 
       return !!deletedRoom;

src/server/api/routers/user.ts

@@ -3,6 +3,7 @@ import { Resend } from "resend";
 import { z } from "zod";
 import { Goodbye } from "~/components/templates/Goodbye";
 import { env } from "~/env.mjs";
+import { publishToChannel } from "~/server/ably";
 import {
   adminProcedure,
   createTRPCRouter,
@@ -10,6 +11,7 @@ import {
 } from "~/server/api/trpc";
 
 import { fetchCache, invalidateCache, setCache } from "~/server/redis";
+import { EventTypes } from "~/utils/types";
 
 const resend = new Resend(process.env.RESEND_API_KEY);
 
@@ -118,6 +120,12 @@ export const userRouter = createTRPCRouter({
 
         await invalidateCache(`kv_usercount_admin`);
         await invalidateCache(`kv_userlist_admin`);
+
+        await publishToChannel(
+          `stats`,
+          EventTypes.STATS_UPDATE,
+          JSON.stringify(user)
+        );
       }
 
       return !!user;

src/server/api/routers/vote.ts

@@ -93,6 +93,12 @@ export const voteRouter = createTRPCRouter({
           EventTypes.VOTE_UPDATE,
           input.value
         );
+
+        await publishToChannel(
+          `stats`,
+          EventTypes.STATS_UPDATE,
+          JSON.stringify(vote)
+        );
       }
 
       return !!vote;

src/server/auth.ts

@@ -12,6 +12,8 @@ import { env } from "~/env.mjs";
 import { prisma } from "~/server/db";
 import { Welcome } from "../components/templates/Welcome";
 import { invalidateCache } from "./redis";
+import { publishToChannel } from "./ably";
+import { EventTypes } from "~/utils/types";
 
 const resend = new Resend(process.env.RESEND_API_KEY);
 
@@ -65,6 +67,12 @@ export const authOptions: NextAuthOptions = {
         });
         await invalidateCache(`kv_userlist_admin`);
         await invalidateCache(`kv_usercount_admin`);
+
+        await publishToChannel(
+          `stats`,
+          EventTypes.STATS_UPDATE,
+          JSON.stringify(user)
+        );
       }
     },
     async signIn({}) {

src/utils/types.ts

@@ -4,6 +4,7 @@ export const EventTypes = {
   ROOM_LIST_UPDATE: "room.list.update",
   ROOM_UPDATE: "room.update",
   VOTE_UPDATE: "vote.update",
+  STATS_UPDATE: "stats.update",
 } as const;
 export type EventType = BetterEnum<typeof EventTypes>;