Merge 259fa9546d into 00ba6d7df1

* Fix indefinite loading spinner when navigating to same page

* Add middleware to handle navigation depending on authentication

.vscode/settings.json

@@ -3,5 +3,8 @@
         "backend"
     ],
     "python.testing.unittestEnabled": false,
-    "python.testing.pytestEnabled": true
-}
+    "python.testing.pytestEnabled": true,
+    "eslint.workingDirectories": [
+        "./compass",
+    ]
+}

compass/.eslintrc.json

@@ -1,3 +1,5 @@
 {
-    "extends": "next/core-web-vitals"
+    "extends": [
+        "next"
+    ]
 }

compass/app/home/layout.tsx

@@ -15,7 +15,6 @@ export default function RootLayout({
     const [isSidebarOpen, setIsSidebarOpen] = useState(true);
     const [user, setUser] = useState<User>();
     const router = useRouter();
-    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         async function getUser() {
@@ -36,7 +35,6 @@ export default function RootLayout({
             );
 
             setUser(await userData.json());
-            setLoading(false);
         }
 
         getUser();
@@ -52,7 +50,6 @@ export default function RootLayout({
                         setIsSidebarOpen={setIsSidebarOpen}
                         isSidebarOpen={isSidebarOpen}
                         isAdmin={user.role === Role.ADMIN}
-                        loading={loading}
                     />
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${

compass/components/Sidebar/Sidebar.tsx

@@ -9,7 +9,6 @@ import {
     LockClosedIcon,
 } from "@heroicons/react/24/solid";
 import { SidebarItem } from "./SidebarItem";
-import styles from "./LoadingIcon.module.css";
 import { UserProfile } from "../resource/UserProfile";
 import LoadingIcon from "./LoadingIcon";
 
@@ -19,7 +18,6 @@ interface SidebarProps {
     name: string;
     email: string;
     isAdmin: boolean;
-    loading: boolean;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -28,7 +26,6 @@ const Sidebar: React.FC<SidebarProps> = ({
     name,
     email,
     isAdmin: admin,
-    loading,
 }) => {
     const [isLoading, setIsLoading] = useState(false);
     return (

compass/components/Sidebar/SidebarItem.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 interface SidebarItemProps {
     icon: React.ReactElement;
@@ -15,9 +16,13 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
     redirect,
     onClick,
 }) => {
+    const pathname = usePathname();
+
     return (
         <Link
-            onClick={() => onClick(true)}
+            onClick={() =>
+                pathname.startsWith(redirect) ? onClick(false) : onClick(true)
+            }
             href={redirect}
             className={
                 active

compass/components/Table/ServiceTable.tsx

@@ -78,12 +78,12 @@ export default function ServiceTable({ data, setData }: ServiceTableProps) {
             ),
             cell: (info) => (
                 // TODO: Setup different tag handler for requirements
-                <TagsInput
+                (<TagsInput
                     presetValue={
                         info.getValue()[0] !== "" ? info.getValue() : ["N/A"]
                     }
                     {...requirementProps}
-                />
+                />)
             ),
         }),
 

compass/components/resource/SearchResult.tsx

@@ -23,8 +23,8 @@ export const SearchResult: React.FC<SearchResultProps> = ({
         type === "resource"
             ? BookmarkIcon
             : type === "service"
-            ? ClipboardIcon
-            : QuestionMarkCircleIcon; // Unknown type
+              ? ClipboardIcon
+              : QuestionMarkCircleIcon; // Unknown type
 
     return (
         <div className="flex justify-between items-center w-full p-2 rounded-md hover:bg-purple-100 cursor-pointer group">

compass/components/resource/sample_results.json

@@ -1,32 +1,32 @@
 [
-	{
-		"type": "resource",
-		"name": "example name",
-		"description": "example description"
-	},
-	{
-		"type": "service",
-		"name": "example name",
-		"description": "example description"
-	},
-	{
-		"type": "resource",
-		"name": "National Domestic Violence Hotline",
-		"description": "24/7 confidential support for victims of domestic violence"
-	},
-	{
-		"type": "resource",
-		"name": "Legal Aid Society",
-		"description": "Free legal assistance for low-income individuals"
-	},
-	{
-		"type": "service",
-		"name": "Crisis Hotline",
-		"description": "24/7 support for individuals in crisis"
-	},
-	{
-		"type": "unknown",
-		"name": "unknown thing with a really long name",
-		"description": "and let's also type out a really long description to see how it handles overflow and all that anyways"
-	}
+    {
+        "type": "resource",
+        "name": "example name",
+        "description": "example description"
+    },
+    {
+        "type": "service",
+        "name": "example name",
+        "description": "example description"
+    },
+    {
+        "type": "resource",
+        "name": "National Domestic Violence Hotline",
+        "description": "24/7 confidential support for victims of domestic violence"
+    },
+    {
+        "type": "resource",
+        "name": "Legal Aid Society",
+        "description": "Free legal assistance for low-income individuals"
+    },
+    {
+        "type": "service",
+        "name": "Crisis Hotline",
+        "description": "24/7 support for individuals in crisis"
+    },
+    {
+        "type": "unknown",
+        "name": "unknown thing with a really long name",
+        "description": "and let's also type out a really long description to see how it handles overflow and all that anyways"
+    }
 ]

compass/next.config.js

@@ -1,10 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     images: {
-        domains: ["notioly.com"],
-    },
-    experimental: {
-        serverActions: true,
+        remotePatterns: [
+            {
+                hostname: "notioly.com",
+            },
+        ],
     },
 };
 

compass/package.json

@@ -10,28 +10,32 @@
         "prettier": "npx prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
     },
     "dependencies": {
-        "@heroicons/react": "^2.1.1",
-        "@supabase/ssr": "^0.3.0",
+        "@heroicons/react": "^2.2.0",
+        "@supabase/ssr": "^0.5.2",
         "@supabase/supabase-js": "^2.42.3",
         "@tanstack/match-sorter-utils": "^8.15.1",
         "@tanstack/react-table": "^8.15.0",
         "bufferutil": "^4.0.8",
-        "next": "13.5.6",
-        "react": "^18",
-        "react-dom": "^18",
+        "next": "14.2.18",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
         "utf-8-validate": "^6.0.3",
         "ws": "^8.16.0"
     },
     "devDependencies": {
         "@types/node": "^20",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
+        "@types/react": "18.3.12",
+        "@types/react-dom": "18.3.1",
         "autoprefixer": "^10",
         "eslint": "^8",
-        "eslint-config-next": "13.5.6",
+        "eslint-config-next": "14.2.18",
         "lint-staged": "^15.2.2",
         "postcss": "^8",
         "tailwindcss": "^3",
         "typescript": "^5"
+    },
+    "overrides": {
+        "@types/react": "18.3.12",
+        "@types/react-dom": "18.3.1"
     }
 }

compass/utils/supabase/middleware.ts

@@ -1,5 +1,7 @@
 import { createServerClient, type CookieOptions } from "@supabase/ssr";
-import { NextResponse, type NextRequest } from "next/server";
+import { User } from "@supabase/supabase-js";
+import { NextRequest, NextResponse } from "next/server";
+import { Role } from "../models/User";
 
 export async function updateSession(request: NextRequest) {
     let response = NextResponse.next({
@@ -54,7 +56,50 @@ export async function updateSession(request: NextRequest) {
         }
     );
 
-    await supabase.auth.getUser();
+    const { data, error } = await supabase.auth.getUser();
+
+    const authenticatedRoutes = ["/admin", "/resource", "/home", "/service"];
+    const pathname = request.nextUrl.pathname;
+
+    for (const route of authenticatedRoutes) {
+        if (error && pathname.startsWith(route)) {
+            console.log("redirected");
+            return NextResponse.redirect(
+                new URL(
+                    "/auth/login",
+                    request.nextUrl.protocol + "//" + request.nextUrl.host
+                )
+            );
+        }
+    }
+
+    if (pathname.startsWith("/admin") && data.user) {
+        // After the previous checks we can assume the user is not empty
+        const userData = await fetch(
+            `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}`
+        );
+
+        const user: User = await userData.json();
+
+        if (user.role !== Role.ADMIN) {
+            console.log("redirected as not admin");
+            return NextResponse.redirect(
+                new URL(
+                    "/home",
+                    request.nextUrl.protocol + "//" + request.nextUrl.host
+                )
+            );
+        }
+    }
+
+    if (data.user && pathname.startsWith("/auth/login")) {
+        return NextResponse.redirect(
+            new URL(
+                "/home",
+                request.nextUrl.protocol + "//" + request.nextUrl.host
+            )
+        );
+    }
 
     return response;
 }