Smooth redirection moharana (#48)

* Fix indefinite loading spinner when navigating to same page

* Add middleware to handle navigation depending on authentication

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/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/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;
 }