Merge pull request #8 from atridadl/dev

1.1.0
✨ The main page is now a client rendered home-page
✨ The room join/create flows have been moved to /dashboard, which is accessible from any other page via the nav (if signed in)
✨ The signin button is now in the nav

CHANGELOG.md

@@ -1,23 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-## 1.0.0 - Proactively streamline market-driven customer service (2023-05-10)
-
-🎉🎉🎉
-✨ You can now create and join rooms to vote on scrum stories with your team!
-✨ Signin works with Github or Google OAuth
-✨ Rooms allow for custom scales
-✨ Room owners can reset votes, change the topic being votes on, and even download a CSV with stats on how votes went
-
-## 1.0.1 - Completely orchestrate principle-centered initiatives (2023-05-14)
-
-🚧 Changed VERCEL_ENV to APP_ENV
-🚧 Added indicators for the environment in development and local
-🚧 Fully automated the process for developing locally with railway
-🚧 Package updates
-
-## 1.0.2 - Quickly engage end-to-end niches (2023-05-20)
-
-🚧 Moved to fms-ts for emails
-🚧 Package updates

package.json

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

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{" "}

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)]">

src/components/Navbar.tsx

@@ -1,17 +1,35 @@
-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 { 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 +37,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}
+          <span className="hidden md:inline-flex">
-          {env.NEXT_PUBLIC_APP_ENV === "development" && " >> DEV"}
+            {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">

src/pages/admin/index.tsx

@@ -13,11 +13,11 @@ import type { Role } from "~/utils/types";
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
 
-  // Redirect to home if not logged in
+  // Redirect to login if not signed in
   if (!session) {
     return {
       redirect: {
-        destination: "/",
+        destination: `/api/auth/signin?callbackUrl=${ctx.resolvedUrl}`,
         permanent: false,
       },
     };

src/pages/dashboard/index.tsx

@@ -0,0 +1,102 @@
+import type { GetServerSideProps, NextPage } from "next";
+import Head from "next/head";
+import { 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 />}
+    </>
+  );
+};

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();
+  return (
-  const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>("");
+    <>
-  const [tabIndex, setTabIndex] = useState<number>(0);
+      <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") {
+      <h2 className="my-4 text-3xl">
-    return (
+        A{" "}
-      <>
+        <span className="bg-gradient-to-br from-pink-600 to-pink-400 bg-clip-text text-transparent box-decoration-clone">
-        <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
+          scrum poker{" "}
-          Hi, {sessionData.user.name}!{" "}
+        </span>{" "}
-          {sessionData.user.role === "ADMIN" && (
+        tool that helps{" "}
-            <FaShieldAlt className="inline-block text-primary" />
+        <span className="bg-gradient-to-br from-purple-600 to-purple-400 bg-clip-text text-transparent box-decoration-clone">
-          )}
+          agile teams{" "}
-        </h1>
+        </span>{" "}
-        <div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
+        plan their sprints in{" "}
-          <a
+        <span className="bg-gradient-to-br from-cyan-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
-            className={
+          real-time
-              tabIndex === 0
+        </span>
-                ? "tab no-underline tab-active"
+        .
-                : "tab no-underline"
+      </h2>
-            }
+    </>
-            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>
-        )}
-      </>
-    );
-  }
 };

src/pages/profile/index.tsx

@@ -14,7 +14,7 @@ import { FaGithub, FaGoogle } from "react-icons/fa";
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
 
-  // Redirect to home if not logged in
+  // Redirect to login if not signed in
   if (!session) {
     return {
       redirect: {

src/pages/room/[id].tsx

@@ -33,7 +33,7 @@ import { downloadCSV } from "~/utils/helpers";
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
 
-  // Redirect to home if not logged in
+  // Redirect to login if not signed in
   if (!session) {
     return {
       redirect: {