Quick style updates and dashboard tab selection memory

README.md

@@ -5,7 +5,8 @@ A scrum poker tool that helps agile teams plan their sprints in real-time.
 ## Stack
 
 - Front-end framework: Nextjs
-- Rendering method: SSR
+- Front-end library: Preact
+- Rendering method: SSR SPA
 - Hosting: Railway
 - Real-time pub/sub: Ably
 - ORM: Prisma

next.config.mjs

@@ -1,22 +1,12 @@
 // @ts-check
 import withPWA from "next-pwa";
 
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
- * This is especially useful for Docker builds.
- */
 !process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));
 
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
 
-  /**
-   * If you have the "experimental: { appDir: true }" setting enabled, then you
-   * must comment the below `i18n` config out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
   i18n: {
     locales: ["en"],
     defaultLocale: "en",

package.json

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

src/components/RoomList.tsx

@@ -95,10 +95,10 @@ const RoomList: React.FC = () => {
 
       {roomsFromDb && roomsFromDb.length > 0 && (
         <div className="overflow-x-auto">
-          <table className="w-full text-center break-all">
+          <table className="table text-center">
             {/* head */}
             <thead>
-              <tr>
+              <tr className="border-white">
                 <th>Room Name</th>
                 <th>Actions</th>
               </tr>
@@ -106,7 +106,7 @@ const RoomList: React.FC = () => {
             <tbody className="">
               {roomsFromDb?.map((room) => {
                 return (
-                  <tr key={room.id}>
+                  <tr key={room.id} className="hover">
                     <td className="break-all max-w-[200px] md:max-w-[400px]">
                       {room.roomName}
                     </td>
@@ -138,7 +138,7 @@ const RoomList: React.FC = () => {
 
       {roomsFromDb === undefined && (
         <div className="flex items-center justify-center">
-          <Loading />
+          <span className="loading loading-spinner loading-lg"></span>
         </div>
       )}
     </div>

src/pages/_app.tsx

@@ -43,7 +43,11 @@ const MyApp: AppType<{ session: Session | null }> = ({
       <div className="block h-[100%]">
         <Navbar title="Sprint Padawan" />
         <div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]">
-          {pageLoading ? <Loading /> : <Component {...pageProps} />}
+          {pageLoading ? (
+            <span className="loading loading-spinner loading-lg"></span>
+          ) : (
+            <Component {...pageProps} />
+          )}
         </div>
         <Footer />
       </div>

src/pages/admin/index.tsx

@@ -130,7 +130,7 @@ const AdminBody: React.FC = () => {
           <div className="stat-title">Users</div>
           <div className="stat-value">
             {usersCountLoading || usersCountFetching ? (
-              <Loading />
+              <span className="loading loading-spinner loading-lg"></span>
             ) : (
               <>{usersCount ? usersCount : "0"}</>
             )}
@@ -141,7 +141,7 @@ const AdminBody: React.FC = () => {
           <div className="stat-title">Rooms</div>
           <div className="stat-value">
             {roomsCountLoading || roomsCountFetching ? (
-              <Loading />
+              <span className="loading loading-spinner loading-lg"></span>
             ) : (
               <>{roomsCount ? roomsCount : "0"}</>
             )}
@@ -152,7 +152,7 @@ const AdminBody: React.FC = () => {
           <div className="stat-title">Votes</div>
           <div className="stat-value">
             {votesCountLoading || votesCountFetching ? (
-              <Loading />
+              <span className="loading loading-spinner loading-lg"></span>
             ) : (
               <>{votesCount ? votesCount : "0"}</>
             )}
@@ -176,13 +176,13 @@ const AdminBody: React.FC = () => {
           <h2 className="card-title">Users:</h2>
 
           {usersLoading || usersFetching ? (
-            <Loading />
+            <span className="loading loading-spinner loading-lg"></span>
           ) : (
-            <div className="overflow-x-scroll w-[calc(80vw-4rem)]">
-              <table className="w-full text-center">
+            <div className="overflow-x-scroll">
+              <table className="table text-center">
                 {/* head */}
                 <thead>
-                  <tr>
+                  <tr className="border-white">
                     <th>ID</th>
                     <th>Name</th>
                     <th>Created At</th>
@@ -197,7 +197,7 @@ const AdminBody: React.FC = () => {
                     )
                     .map((user) => {
                       return (
-                        <tr key={user.id}>
+                        <tr key={user.id} className="hover">
                           <td className="max-w-[100px] break-words">
                             {user.id}
                           </td>

src/pages/dashboard/index.tsx

@@ -4,7 +4,7 @@ import { useSession } from "next-auth/react";
 
 import RoomList from "~/components/RoomList";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { FaShieldAlt } from "react-icons/fa";
 import { getServerAuthSession } from "~/server/auth";
@@ -47,7 +47,12 @@ export default Home;
 const HomePageBody: React.FC = () => {
   const { data: sessionData } = useSession();
   const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>("");
-  const [tabIndex, setTabIndex] = useState<number>(0);
+  const [tabIndex, setTabIndex] = useState<number>();
+
+  useEffect(() => {
+    const tabIndexLocal = localStorage.getItem(`dashboardTabIndex`);
+    setTabIndex(tabIndexLocal !== null ? Number(tabIndexLocal) : 0);
+  }, [tabIndex, sessionData]);
 
   return (
     <>
@@ -62,7 +67,10 @@ const HomePageBody: React.FC = () => {
           className={
             tabIndex === 0 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={() => setTabIndex(0)}
+          onClick={() => {
+            setTabIndex(0);
+            localStorage.setItem("dashboardTabIndex", "0");
+          }}
         >
           Join a Room
         </a>
@@ -70,7 +78,10 @@ const HomePageBody: React.FC = () => {
           className={
             tabIndex === 1 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={() => setTabIndex(1)}
+          onClick={() => {
+            setTabIndex(1);
+            localStorage.setItem("dashboardTabIndex", "1");
+          }}
         >
           Room List
         </a>

src/pages/profile/index.tsx

@@ -128,7 +128,7 @@ const ProfileBody: React.FC = () => {
 
             {providersLoading ? (
               <div className="mx-auto">
-                <Loading />
+                <span className="loading loading-spinner loading-lg"></span>
               </div>
             ) : (
               <div className="mx-auto">

src/pages/room/[id].tsx

@@ -260,7 +260,7 @@ const RoomBody: React.FC = () => {
   if (roomFromDb === undefined) {
     return (
       <div className="flex flex-col items-center justify-center text-center">
-        <Loading />
+        <span className="loading loading-spinner loading-lg"></span>
       </div>
     );
     // Room has been loaded