From 766a8ff1dbba53536ef46d88a838452d469ecb5d Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <88056492+atridadl@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:37:10 -0600
Subject: [PATCH] Quick style updates and dashboard tab selection memory

---
 README.md                     |  3 ++-
 next.config.mjs               | 10 ----------
 package.json                  |  2 +-
 src/components/RoomList.tsx   |  8 ++++----
 src/pages/_app.tsx            |  6 +++++-
 src/pages/admin/index.tsx     | 16 ++++++++--------
 src/pages/dashboard/index.tsx | 19 +++++++++++++++----
 src/pages/profile/index.tsx   |  2 +-
 src/pages/room/[id].tsx       |  2 +-
 9 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index e3aa4c0..6563460 100644
--- a/README.md
+++ b/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
diff --git a/next.config.mjs b/next.config.mjs
index c2560d7..6b2de71 100644
--- a/next.config.mjs
+++ b/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",
diff --git a/package.json b/package.json
index a81db32..f979ddc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sprintpadawan",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Plan. Sprint. Repeat.",
   "private": true,
   "scripts": {
diff --git a/src/components/RoomList.tsx b/src/components/RoomList.tsx
index 823b183..6856ef5 100644
--- a/src/components/RoomList.tsx
+++ b/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>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index c9c08c6..c50632f 100644
--- a/src/pages/_app.tsx
+++ b/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>
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 446a0f7..2635ee3 100644
--- a/src/pages/admin/index.tsx
+++ b/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>
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index abce60d..823607f 100644
--- a/src/pages/dashboard/index.tsx
+++ b/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>
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 5d5e90f..efd3249 100644
--- a/src/pages/profile/index.tsx
+++ b/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">
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 0edbd92..43ca4ce 100644
--- a/src/pages/room/[id].tsx
+++ b/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