From db20a23f6a90fc584c5839db07d3a9dffd4afe83 Mon Sep 17 00:00:00 2001
From: "Orace.A" <orace@intside.com>
Date: Fri, 28 Mar 2025 12:32:42 +0100
Subject: [PATCH] feat: enhance login redirection and add loading state to
 tables

---
 src/app/(auth)/login/page.tsx        | 13 +++++++++----
 src/app/admin/admins/page.tsx        |  1 +
 src/app/admin/home/page.tsx          |  1 +
 src/app/admin/layout.tsx             | 17 ++++++++++++++++-
 src/app/admin/organizations/page.tsx |  1 +
 src/components/admin/adminHeader.tsx | 11 ++++++-----
 src/components/form/form.tsx         |  5 +++--
 src/components/table/table.tsx       | 25 +++++++++++++++++++++----
 src/lib/function.ts                  | 11 +++++++++++
 src/types/index.ts                   |  3 ++-
 10 files changed, 71 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/function.ts

diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index dc7659f..d7e2105 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -4,10 +4,11 @@ import Form from "#/components/form/form"
 import { loginSchema } from "#/schema"
 import { useMutation } from "@tanstack/react-query"
 import { signIn } from "next-auth/react"
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function LoginPage() {
     const router = useRouter()
+    const params = useSearchParams().get("redirect_to");
 
     const mutation = useMutation({
         mutationKey: ['login'],
@@ -26,7 +27,11 @@ export default function LoginPage() {
                     console.error(errorMessage)
                     throw new Error(result.error)
                 } else {
-                    router.push('/admin/home')
+                    if (params) {
+                        router.push(params);
+                      } else {
+                        router.push('/admin/home')
+                      }
                 }
                 return result
             } catch (error: any) {
@@ -47,7 +52,7 @@ export default function LoginPage() {
         <div>
             <Form
                 title="Connexion"
-                className="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
+                formClassName="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
                 fields={[
                     {
                         label: "Email",
@@ -65,7 +70,7 @@ export default function LoginPage() {
                 ]}
                 submit={mutation.mutate} 
                 schema={loginSchema}
-                child={<button type="submit" className="btn-auth">Connexion</button>}
+                child={<button type="submit" className="btn-auth mt-4">Connexion</button>}
              />
         </div>
     )
diff --git a/src/app/admin/admins/page.tsx b/src/app/admin/admins/page.tsx
index 05df663..88219a5 100644
--- a/src/app/admin/admins/page.tsx
+++ b/src/app/admin/admins/page.tsx
@@ -298,6 +298,7 @@ export default function Admins() {
       columns={columns}
       data={users || []}
       pageSize={5}
+      isDataLoading={isLoading}
       header={(table) => {
         const selectedIds = table
           .getRowModel()
diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx
index bc69bc2..879891a 100644
--- a/src/app/admin/home/page.tsx
+++ b/src/app/admin/home/page.tsx
@@ -187,6 +187,7 @@ export default function HomePage () {
 
       <Table 
         columns={columns} 
+        isDataLoading={isLoading}
         data={companies || []} 
         pageSize={5}
       />
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 16e68aa..c3ffd4f 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,9 +1,24 @@
-import { ReactNode } from "react";
+"use client"
+
+import { ReactNode, useEffect } from "react";
 import "../../assets/css/admin.css"
 import Sidebar from "../../components/admin/sidebar";
 import Header from "../../components/admin/adminHeader";
+import { signOutFunc } from "#/lib/function";
+import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
 
 export default function Dashboard({ children }: { children: ReactNode }) {
+  const { status, data } = useSession();
+  const path = usePathname();
+
+  useEffect(() => {
+    if (status !== "loading") {
+      if (status === "unauthenticated" || (data && !data.user.access_token)) {
+        signOutFunc();
+      }
+    }
+  }, [data, status, path]);
 
   return (
 
diff --git a/src/app/admin/organizations/page.tsx b/src/app/admin/organizations/page.tsx
index 01b4ee7..8da469e 100644
--- a/src/app/admin/organizations/page.tsx
+++ b/src/app/admin/organizations/page.tsx
@@ -309,6 +309,7 @@ export default function Organizations() {
       columns={columns}
       data={companies || []}
       pageSize={5}
+      isDataLoading={isLoading}
       header={(table) => {
         const selectedIds = table
           .getRowModel()
diff --git a/src/components/admin/adminHeader.tsx b/src/components/admin/adminHeader.tsx
index 2e31708..bc6093f 100644
--- a/src/components/admin/adminHeader.tsx
+++ b/src/components/admin/adminHeader.tsx
@@ -1,17 +1,18 @@
 "use client"
 import Image from "next/image";
 import { icons } from "#/assets/icons"
-
 import * as React from "react";
 import { DropdownMenu } from "radix-ui";
 import Link from "next/link";
 import Theme from "./theme";
+import { signOutFunc } from "#/lib/function";
 
 import ProfilePicture from "../../assets/icons/profile.svg"
 
 export default function AdminHeader() {
   const [open, setOpen] = React.useState(false);
 
+
   return (
     <>
       <nav className="header r-flex-between px-[44px] py-[20px] ">
@@ -35,15 +36,15 @@ export default function AdminHeader() {
               </DropdownMenu.Trigger>
 
               <DropdownMenu.Portal>
-                <DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary" sideOffset={0} side="bottom" align="end" >
-                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
+                <DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary p-2" sideOffset={0} side="bottom" align="end" >
+                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
                     <Link href="#" className="d-flex items-start ">
                       <Image src={icons.userIcon} alt="Profil" />
                       Profil
                     </Link>
                   </DropdownMenu.Item>
-                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
-                    <Link href="#" className="d-flex items-start r-danger ">
+                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
+                    <Link href="#" onClick={() => signOutFunc()} className="d-flex items-start r-danger ">
                       <Image src={icons.logoutRed} alt="Deconnexion" />
                       Déconnexion
                     </Link>
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index 67552a2..054c3c7 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -10,7 +10,8 @@ export default function Form({
     className,
     child,
     title,
-    schema
+    schema,
+    formClassName
 } : FormProps) {
     const [errors, setErrors] = useState<Record<string, string>>({});
 
@@ -42,7 +43,7 @@ export default function Form({
     }
 
     return (
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className={formClassName}>
             <div className="flex justify-center text-black">
                 <p className="text-3xl font-bold">{title}</p>
             </div>
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 70a6973..9a291a5 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -9,7 +9,7 @@ import {
     getFilteredRowModel,
     Table as TableType,
   } from "@tanstack/react-table"
-import { cloneElement, isValidElement, ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { clsx, type ClassValue } from "clsx"
 import Image from "next/image";
 import { icons } from "#/assets/icons";
@@ -18,14 +18,16 @@ import { icons } from "#/assets/icons";
     columns: ColumnDef<TData, TValue>[]
     data: TData[],
     pageSize?: number,
-    header?: ReactNode | ((table: TableType<TData>) => ReactNode)
+    header?: ReactNode | ((table: TableType<TData>) => ReactNode),
+    isDataLoading?: boolean
   }
 
 export default function Table<TData, TValue>({
     columns,
     data,
     pageSize = 10,
-    header
+    header,
+    isDataLoading = true
   }: DataTableProps<TData, TValue>) {
     const [rowSelection, setRowSelection] = useState({})
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -101,6 +103,12 @@ export default function Table<TData, TValue>({
                     <thead className="h-10">
                         {table.getHeaderGroups().map((headerGroup) => (
                             <tr key={headerGroup.id} className="rounded-lg">
+                                {header
+                                ?
+                                <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
+                                    
+                                </th>
+                                :
                                 <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
                                     <input 
                                         ref={headerCheckboxRef}
@@ -109,6 +117,7 @@ export default function Table<TData, TValue>({
                                         type="checkbox" name="" id="" 
                                     />
                                 </th>
+                                }
                                 {headerGroup.headers.map((header) => {
                                     return(
                                         <th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
@@ -141,9 +150,17 @@ export default function Table<TData, TValue>({
                                 </tr>
                             ))
                         )
+                        : isDataLoading ?
+                        (
+                            <tr>
+                                <td colSpan={columns.length} className="h-20 text-center">
+                                    Chargement...
+                                </td>
+                            </tr>
+                        ) 
                         : (
                             <tr>
-                                <td colSpan={columns.length}>
+                                <td colSpan={columns.length} className="h-20 text-center">
                                     Aucun résultats
                                 </td>
                             </tr>
diff --git a/src/lib/function.ts b/src/lib/function.ts
new file mode 100644
index 0000000..44c6d61
--- /dev/null
+++ b/src/lib/function.ts
@@ -0,0 +1,11 @@
+import { signOut } from "next-auth/react";
+
+export const signOutFunc = () => {
+    signOut({
+      callbackUrl: `/login?redirect_to=${
+        window.location.pathname === "/logout"
+          ? "/home"
+          : window.location.pathname
+      }`,
+    });
+  };
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index a5c93f7..ee09145 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -23,7 +23,8 @@ export interface FormProps {
     submit: (param: any) => unknown,
     className?: string,
     child: ReactNode,
-    schema: ZodSchema
+    schema: ZodSchema,
+    formClassName?: string
 }
 
 export interface StatsType {