From ebd62d84a248b7766cd0d64e479712b660ca7ea2 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <88056492+atridadl@users.noreply.github.com>
Date: Wed, 31 May 2023 21:49:25 -0600
Subject: [PATCH] UX updates... the main page is now fully static :)

---
 src/components/Footer.tsx     |   2 +-
 src/components/Loading.tsx    |   2 +-
 src/components/Navbar.tsx     |  36 ++++++++--
 src/pages/dashboard/index.tsx | 102 +++++++++++++++++++++++++++
 src/pages/index.tsx           | 129 +++++++---------------------------
 5 files changed, 159 insertions(+), 112 deletions(-)
 create mode 100644 src/pages/dashboard/index.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5a8e30b..da01f72 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import packagejson from "../../package.json";
 
 const Footer: React.FC = () => {
   return (
-    <footer className="footer footer-center h-[48px] p-2 bg-base-100 text-base-content">
+    <footer className="footer footer-center h-12 p-2 bg-base-100 text-base-content">
       <div>
         <p>
           Made with{" "}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index b540647..2a8706f 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,7 +1,7 @@
 const Loading: React.FC = () => {
   return (
     <div
-      className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] m-4"
+      className="inline-block h-12 w-12 rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
       role="status"
     >
       <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e36eefb..87a14ac 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,17 +1,36 @@
-import { useSession, signOut } from "next-auth/react";
+import { useSession, signOut, signIn } from "next-auth/react";
 import Link from "next/link";
 import Image from "next/image";
 import { env } from "~/env.mjs";
+import Loading from "./Loading";
+import { useRouter } from "next/router";
 
 interface NavbarProps {
   title: string;
 }
 
 const Navbar: React.FC<NavbarProps> = ({ title }) => {
-  const { data: sessionData } = useSession();
+  const { data: sessionData, status: sessionStatus } = useSession();
+  const router = useRouter();
+
+  const navigationMenu = () => {
+    if (sessionStatus === "authenticated" && router.pathname !== "/dashboard") {
+      return (
+        <Link className="btn btn-secondary btn-outline mx-2" href="/dashboard">
+          Dashboard
+        </Link>
+      );
+    } else if (sessionStatus === "unauthenticated") {
+      return (
+        <button className="btn btn-secondary" onClick={() => void signIn()}>
+          Sign In
+        </button>
+      );
+    }
+  };
 
   return (
-    <nav className="navbar bg-base-100">
+    <nav className="navbar bg-base-100 h-12">
       <div className="flex-1">
         <Link
           about="Back to home."
@@ -19,17 +38,22 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
           className="btn btn-ghost normal-case text-xl"
         >
           <Image
-            className="mr-2"
+            className="md:mr-2"
             src="/logo.webp"
             alt="Nav Logo"
             width={32}
             height={32}
             priority
           />
-          {title}
-          {env.NEXT_PUBLIC_APP_ENV === "development" && " >> DEV"}
+          <span className="hidden md:inline-flex">
+            {title}
+            {env.NEXT_PUBLIC_APP_ENV === "development" && " >> DEV"}
+          </span>
         </Link>
       </div>
+
+      {navigationMenu()}
+
       {sessionData?.user.image && (
         <div className="flex-none gap-2">
           <div className="dropdown dropdown-end">
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
new file mode 100644
index 0000000..e8d511a
--- /dev/null
+++ b/src/pages/dashboard/index.tsx
@@ -0,0 +1,102 @@
+import { GetServerSideProps, type NextPage } from "next";
+import Head from "next/head";
+import { signIn, useSession } from "next-auth/react";
+
+import RoomList from "~/components/RoomList";
+
+import { useState } from "react";
+import Link from "next/link";
+import { FaShieldAlt } from "react-icons/fa";
+import { getServerAuthSession } from "~/server/auth";
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+
+  // Redirect to login if not signed in
+  if (!session) {
+    return {
+      redirect: {
+        destination: `/api/auth/signin?callbackUrl=${ctx.resolvedUrl}`,
+        permanent: false,
+      },
+    };
+  }
+
+  // Return session if logged in
+  return {
+    props: { session },
+  };
+};
+
+const Home: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Sprint Padawan</title>
+        <meta name="description" content="Plan. Sprint. Repeat." />
+      </Head>
+      <div className="prose flex flex-col text-center items-center justify-center px-4 py-16">
+        <HomePageBody />
+      </div>
+    </>
+  );
+};
+
+export default Home;
+
+const HomePageBody: React.FC = () => {
+  const { data: sessionData } = useSession();
+  const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>("");
+  const [tabIndex, setTabIndex] = useState<number>(0);
+
+  return (
+    <>
+      <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
+        Hi, {sessionData?.user.name}!{" "}
+        {sessionData?.user.role === "ADMIN" && (
+          <FaShieldAlt className="inline-block text-primary" />
+        )}
+      </h1>
+      <div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
+        <a
+          className={
+            tabIndex === 0 ? "tab no-underline tab-active" : "tab no-underline"
+          }
+          onClick={() => setTabIndex(0)}
+        >
+          Join a Room
+        </a>
+        <a
+          className={
+            tabIndex === 1 ? "tab no-underline tab-active" : "tab no-underline"
+          }
+          onClick={() => setTabIndex(1)}
+        >
+          Room List
+        </a>
+      </div>
+
+      {tabIndex === 0 && (
+        <>
+          <input
+            type="text"
+            placeholder="Enter Room ID"
+            className="input input-bordered input-primary mb-4"
+            onChange={(event) => {
+              console.log(event.target.value);
+              setJoinRoomTextBox(event.target.value);
+            }}
+          />
+          <Link
+            href={joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"}
+            className="btn btn-secondary"
+          >
+            Join Room
+          </Link>
+        </>
+      )}
+
+      {tabIndex === 1 && <RoomList />}
+    </>
+  );
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f39ce03..ad8f85e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,13 +1,5 @@
 import { type NextPage } from "next";
 import Head from "next/head";
-import { signIn, useSession } from "next-auth/react";
-
-import RoomList from "~/components/RoomList";
-
-import { useState } from "react";
-import Link from "next/link";
-import Loading from "~/components/Loading";
-import { FaShieldAlt } from "react-icons/fa";
 
 const Home: NextPage = () => {
   return (
@@ -26,101 +18,30 @@ const Home: NextPage = () => {
 export default Home;
 
 const HomePageBody: React.FC = () => {
-  const { data: sessionData, status: sessionStatus } = useSession();
-  const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>("");
-  const [tabIndex, setTabIndex] = useState<number>(0);
+  return (
+    <>
+      <h1 className="text-6xl">
+        Sprint{" "}
+        <span className="bg-gradient-to-br from-pink-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
+          Padawan
+        </span>
+      </h1>
 
-  if (sessionStatus === "authenticated") {
-    return (
-      <>
-        <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
-          Hi, {sessionData.user.name}!{" "}
-          {sessionData.user.role === "ADMIN" && (
-            <FaShieldAlt className="inline-block text-primary" />
-          )}
-        </h1>
-        <div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
-          <a
-            className={
-              tabIndex === 0
-                ? "tab no-underline tab-active"
-                : "tab no-underline"
-            }
-            onClick={() => setTabIndex(0)}
-          >
-            Join a Room
-          </a>
-          <a
-            className={
-              tabIndex === 1
-                ? "tab no-underline tab-active"
-                : "tab no-underline"
-            }
-            onClick={() => setTabIndex(1)}
-          >
-            Room List
-          </a>
-        </div>
-
-        {tabIndex === 0 && (
-          <>
-            <input
-              type="text"
-              placeholder="Enter Room ID"
-              className="input input-bordered input-primary mb-4"
-              onChange={(event) => {
-                console.log(event.target.value);
-                setJoinRoomTextBox(event.target.value);
-              }}
-            />
-            <Link
-              href={
-                joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"
-              }
-              className="btn btn-secondary"
-            >
-              Join Room
-            </Link>
-          </>
-        )}
-
-        {tabIndex === 1 && <RoomList />}
-      </>
-    );
-  } else {
-    return (
-      <>
-        <h1 className="text-6xl">
-          Sprint{" "}
-          <span className="bg-gradient-to-br from-pink-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
-            Padawan
-          </span>
-        </h1>
-
-        <h2 className="my-4 text-3xl">
-          A{" "}
-          <span className="bg-gradient-to-br from-pink-600 to-pink-400 bg-clip-text text-transparent box-decoration-clone">
-            scrum poker{" "}
-          </span>{" "}
-          tool that helps{" "}
-          <span className="bg-gradient-to-br from-purple-600 to-purple-400 bg-clip-text text-transparent box-decoration-clone">
-            agile teams{" "}
-          </span>{" "}
-          plan their sprints in{" "}
-          <span className="bg-gradient-to-br from-cyan-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
-            real-time
-          </span>
-          .
-        </h2>
-
-        {sessionStatus === "loading" ? (
-          <Loading />
-        ) : (
-          <button className="btn btn-secondary" onClick={() => void signIn()}>
-            Sign In
-          </button>
-        )}
-      </>
-    );
-  }
+      <h2 className="my-4 text-3xl">
+        A{" "}
+        <span className="bg-gradient-to-br from-pink-600 to-pink-400 bg-clip-text text-transparent box-decoration-clone">
+          scrum poker{" "}
+        </span>{" "}
+        tool that helps{" "}
+        <span className="bg-gradient-to-br from-purple-600 to-purple-400 bg-clip-text text-transparent box-decoration-clone">
+          agile teams{" "}
+        </span>{" "}
+        plan their sprints in{" "}
+        <span className="bg-gradient-to-br from-cyan-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
+          real-time
+        </span>
+        .
+      </h2>
+    </>
+  );
 };