ristoo/privatedocs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance login redirection and add loading state to tables

Browse Source
This commit is contained in:
Orace.A 2025-03-28 12:32:42 +01:00
parent 02cd9f91a4
commit db20a23f6a
10 changed files with 71 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/(auth)/login/page.tsx
View File

@ -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>
)

1
src/app/admin/admins/page.tsx
View File

@ -298,6 +298,7 @@ export default function Admins() {
columns={columns}
data={users || []}
pageSize={5}
isDataLoading={isLoading}
header={(table) => {
const selectedIds = table
.getRowModel()

1
src/app/admin/home/page.tsx
View File

@ -187,6 +187,7 @@ export default function HomePage () {
<Table
columns={columns}
isDataLoading={isLoading}
data={companies || []}
pageSize={5}
/>

17
src/app/admin/layout.tsx
View File

@ -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 (

1
src/app/admin/organizations/page.tsx
View File

@ -309,6 +309,7 @@ export default function Organizations() {
columns={columns}
data={companies || []}
pageSize={5}
isDataLoading={isLoading}
header={(table) => {
const selectedIds = table
.getRowModel()

11
src/components/admin/adminHeader.tsx
View File

@ -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>

5
src/components/form/form.tsx
View File

@ -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>

25
src/components/table/table.tsx
View File

@ -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>

11
src/lib/function.ts Normal file
View File

@ -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
}`,
});
};

3
src/types/index.ts
View File

@ -23,7 +23,8 @@ export interface FormProps {
submit: (param: any) => unknown,
className?: string,
child: ReactNode,
schema: ZodSchema
schema: ZodSchema,
formClassName?: string
}
export interface StatsType {