Merge pull request #9 from swat-sccs/dcrepublic-dev

Merge dcrepublic-dev into Main
swat-sccs · Oct 31, 2024 · 1c89028 · 1c89028
2 parents fdefd82 + 9767948
commit 1c89028
Show file tree

Hide file tree

Showing 13 changed files with 10,366 additions and 10,063 deletions.
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,7 @@
+export const dynamic = "force-dynamic"; // defaults to auto
+import NextAuth from "next-auth";
+import { config } from "../../../../lib/auth";
+
+const handler = NextAuth(config);
+
+export { handler as GET, handler as POST };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { Link } from "@nextui-org/link";
 import clsx from "clsx";
 
 import { Providers } from "./providers";
+import { NextAuthProvider } from "../components/providers/NextAuthProvider";
 
 import { siteConfig } from "@/config/site";
 import { fontSans } from "@/config/fonts";
@@ -33,55 +34,57 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html suppressHydrationWarning lang="en">
-      <head />
-      <body
-        className={clsx(
-          "min-h-screen bg-background font-sans antialiased",
-          fontSans.variable
-        )}
-      >
-        <Providers
-          themeProps={{
-            children: children,
-            attribute: "class",
-            defaultTheme: "dark",
-          }}
+    <NextAuthProvider>
+      <html suppressHydrationWarning lang="en">
+        <head />
+        <body
+          className={clsx(
+            "min-h-screen bg-background font-sans antialiased",
+            fontSans.variable
+          )}
         >
-          <div className="relative flex flex-col h-screen">
-            <Navbar />
-            <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
-              {children}
-            </main>
-            <footer className="w-full flex items-center justify-center py-3">
-              <div className="columns-1 container max-w-4xl text-center">
-                <span className="text-xs ">
-                  The Course Planner is a student-run service, and displays
-                  classes from the Tri-College course database. We recommend
-                  confirming your schedule with the official course listings
-                  just in case. If there are any issues, email us.
-                </span>
-                <br />
-
-                <div className=" space-x-5">
-                  <Link
-                    isExternal
-                    href="https://www.sccs.swarthmore.edu/docs/policy"
-                    title="SCCS Usage & Data Policy"
-                  >
-                    <span className=" text-xs underline  ">
-                      Usage & Data Policy
-                    </span>
-                  </Link>
+          <Providers
+            themeProps={{
+              children: children,
+              attribute: "class",
+              defaultTheme: "dark",
+            }}
+          >
+            <div className="relative flex flex-col h-screen">
+              <Navbar />
+              <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
+                {children}
+              </main>
+              <footer className="w-full flex items-center justify-center py-3">
+                <div className="columns-1 container max-w-4xl text-center">
                   <span className="text-xs ">
-                    © 2024 Swarthmore College Computer Society | v2.0.0
+                    The Course Planner is a student-run service, and displays
+                    classes from the Tri-College course database. We recommend
+                    confirming your schedule with the official course listings
+                    just in case. If there are any issues, email us.
                   </span>
+                  <br />
+
+                  <div className=" space-x-5">
+                    <Link
+                      isExternal
+                      href="https://www.sccs.swarthmore.edu/docs/policy"
+                      title="SCCS Usage & Data Policy"
+                    >
+                      <span className=" text-xs underline  ">
+                        Usage & Data Policy
+                      </span>
+                    </Link>
+                    <span className="text-xs ">
+                      © 2024 Swarthmore College Computer Society | v2.0.0
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </footer>
-          </div>
-        </Providers>
-      </body>
-    </html>
+              </footer>
+            </div>
+          </Providers>
+        </body>
+      </html>
+    </NextAuthProvider>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -5,31 +5,35 @@ import { Skeleton } from "@nextui-org/skeleton";
 import Search from "@/components/Search";
 import { FullCourseList } from "@/components/FullCourseList";
 
-export default async function Page(
-  props: {
-    searchParams?: Promise<{
-      query?: string;
-      page?: string;
-    }>;
-  }
-) {
+export default async function Page(props: {
+  searchParams?: Promise<{
+    query?: string;
+    page?: string;
+  }>;
+}) {
   const searchParams = await props.searchParams;
   const query = searchParams?.query || "";
   var homePageProps: any = {};
 
   homePageProps["fullCourseList"] = (
-    <Suspense fallback={<Skeleton className="rounded-lg w-7/12" />}>
+    <Suspense
+      fallback={
+        <Skeleton className="rounded-lg w-8/12 h-full align-top justify-start" />
+      }
+    >
       <FullCourseList query={query} />
     </Suspense>
   );
 
   return <Home {...homePageProps} />; // return with no events
 }
+
 async function Home(props: any) {
   return (
     <>
-      <div className=" h-[550px] grid grid-cols-1 gap-4 -mt-10">
+      <div className="grid grid-cols-1 h-[630px] p-4 -mt-10">
         <Search />
+        <div className="mt-10"></div>
         {props.fullCourseList}
       </div>
     </>

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -1,5 +1,8 @@
 "use client";
 //Just for pathname highlighting though, could always go back if it becomes too slow
+import React, { useContext } from "react";
+import { signIn, signOut, useSession } from "next-auth/react";
+
 import {
   Navbar as NextUINavbar,
   NavbarContent,
@@ -9,6 +12,15 @@ import {
   NavbarItem,
   NavbarMenuItem,
 } from "@nextui-org/navbar";
+import { Button, ButtonGroup } from "@nextui-org/button";
+
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownSection,
+  DropdownItem,
+} from "@nextui-org/dropdown";
 import { Kbd } from "@nextui-org/kbd";
 import { Link } from "@nextui-org/link";
 import { Input } from "@nextui-org/input";
@@ -24,32 +36,77 @@ import { ThemeSwitch } from "@/components/theme-switch";
 import { SearchIcon } from "@/components/icons";
 import { title } from "@/components/primitives";
 
-export const Navbar = () => {
+import HomeIcon from "@mui/icons-material/Home";
+import SendIcon from "@mui/icons-material/Send";
+const pages = {
+  Home: { link: "/", image: <HomeIcon /> },
+  Submit: { link: "/submit", image: <SendIcon /> },
+};
+
+export const Navbar = (props: any) => {
   const pathname = usePathname();
-  const searchInput = (
-    <Input
-      aria-label="Search"
-      classNames={{
-        inputWrapper: "bg-default-100",
-        input: "text-sm",
-      }}
-      endContent={
-        <Kbd className="hidden lg:inline-block" keys={["command"]}>
-          k
-        </Kbd>
-      }
-      labelPlacement="outside"
-      placeholder="Search..."
-      startContent={
-        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+  const { data: session, status } = useSession();
+
+  let authenticated;
+  let loginLink;
+  let adminDashLink;
+  let nameButton;
+
+  if (props.hasOwnProperty("login")) {
+    loginLink = null;
+    nameButton = null;
+  } else {
+    if (status === "authenticated") {
+      authenticated = true;
+      loginLink = <div role="button" onClick={() => signOut()}>Log out</div>;
+      // @ts-ignore
+      if (session.user?.role === "admin") {
+        adminDashLink = (
+          <NavbarContent key="admin">
+            <Link href="/admin">
+              <div>Admin</div>
+            </Link>
+          </NavbarContent>
+        );
       }
-      type="search"
-    />
+      nameButton = session.user?.name;
+    } else {
+      authenticated = false;
+      loginLink = <></>;
+      nameButton = (
+        <div>
+          Log In <InputIcon />
+        </div>
+      );
+    }
+  }
+
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
+    null
+  );
+  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
+    null
   );
 
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
   return (
-    <>
-      <NextUINavbar className="mt-10" maxWidth="xl" position="sticky">
+    <div className="bg-background_navbar">
+      <NextUINavbar className="mt-2 bg-inherit" maxWidth="xl" position="sticky">
         <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
           <NavbarBrand as="li" className="gap-3 max-w-fit">
             <NextLink
@@ -70,19 +127,17 @@ export const Navbar = () => {
           <Spacer x={24} />
           <ul className="hidden lg:flex gap-4 justify-start ml-2">
             {siteConfig.navItems.map((item) => (
-              <>
-                <Link
-                  key={item.href}
-                  className={buttonStyles({
-                    color: "primary",
-                    radius: "full",
-                    variant: pathname == item.href ? "shadow" : "ghost",
-                  })}
-                  href={item.href}
-                >
-                  {item.label}
-                </Link>
-              </>
+              <Link
+                key={item.href}
+                className={buttonStyles({
+                  color: "primary",
+                  radius: "full",
+                  variant: pathname == item.href ? "shadow" : "ghost",
+                })}
+                href={item.href}
+              >
+                {item.label}
+              </Link>
             ))}
           </ul>
         </NavbarContent>
@@ -94,17 +149,38 @@ export const Navbar = () => {
           <NavbarItem className="hidden sm:flex gap-2">
             <ThemeSwitch />
           </NavbarItem>
+
           <NavbarItem>
-            <Link
-              className={buttonStyles({
-                color: "primary",
-                radius: "full",
-                variant: "ghost",
-              })}
-              href=""
-            >
-              Sign In <InputIcon />
-            </Link>
+            <Dropdown>
+              <DropdownTrigger>
+                <Link
+                  className={buttonStyles({
+                    color: "primary",
+                    radius: "full",
+                    variant: "ghost",
+                  })}
+                  onClick={
+                    authenticated
+                      ? () => {}
+                      : () => signIn("keycloak", { callbackUrl: "/" })
+                  }
+                >
+                  {nameButton}
+                </Link>
+              </DropdownTrigger>
+
+              {authenticated ? (
+                <DropdownMenu aria-label="Static Actions">
+                  <DropdownItem key="myCourses">My Courses</DropdownItem>
+                  <DropdownItem key="loginLink">{loginLink}</DropdownItem>
+                  <DropdownItem key="adminDashLink">
+                    {adminDashLink}
+                  </DropdownItem>
+                </DropdownMenu>
+              ) : (
+                <></>
+              )}
+            </Dropdown>
           </NavbarItem>
         </NavbarContent>
 
@@ -115,7 +191,6 @@ export const Navbar = () => {
 
         {/* Mobile?*/}
         <NavbarMenu>
-          {searchInput}
           <div className="mx-4 mt-2 flex flex-col gap-2">
             {siteConfig.navMenuItems.map((item, index) => (
               <NavbarMenuItem key={`${item}-${index}`}>
@@ -137,7 +212,6 @@ export const Navbar = () => {
           </div>
         </NavbarMenu>
       </NextUINavbar>
-      <Divider className="my-4" />
-    </>
+    </div>
   );
 };
diff --git a/components/primitives.ts b/components/primitives.ts
@@ -10,7 +10,7 @@ export const title = tv({
       cyan: "from-[#00b7fa] to-[#01cfea]",
       green: "from-[#6FEE8D] to-[#17c964]",
       pink: "from-[#FF72E1] to-[#F54C7A]",
-      logo: "from-[#333C44] to-[#9FADBC]",
+      logo: "from-[#F46523] to-[#9FADBC]",
       foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]",
     },
     size: {