+ {email ? email : 'Utilisateur'}
diff --git a/app/front/src/routes/__root.tsx b/app/front/src/routes/__root.tsx
index 745c97c..a5370b1 100644
--- a/app/front/src/routes/__root.tsx
+++ b/app/front/src/routes/__root.tsx
@@ -1,6 +1,6 @@
-import { AuthState } from "@/hooks/hooksTypes";
-import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import { AuthState } from '@/hooks/hooksTypes';
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/router-devtools';
interface RouterAuthContext {
auth: AuthState;
@@ -10,7 +10,7 @@ export const Route = createRootRouteWithContext
()({
component: () => (
<>
-
+
),
});
diff --git a/app/front/src/routes/_auth.tsx b/app/front/src/routes/_auth.tsx
index 87f5e99..d4c6d69 100644
--- a/app/front/src/routes/_auth.tsx
+++ b/app/front/src/routes/_auth.tsx
@@ -1,5 +1,5 @@
-import { SiteHeader } from '@/components/header'
-import { createFileRoute, redirect } from '@tanstack/react-router'
+import { SiteHeader } from '@/components/header';
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
export const Route = createFileRoute('/_auth')({
beforeLoad: ({ context, location }) => {
@@ -9,9 +9,16 @@ export const Route = createFileRoute('/_auth')({
search: {
redirect: location.href,
},
- })
+ });
}
},
- component: SiteHeader,
-})
+ component: () => {
+ return (
+ <>
+
+
+
+ );
+ },
+});
diff --git a/app/front/src/routes/_auth/drive/$folderPath.tsx b/app/front/src/routes/_auth/drive/$folderPath.tsx
index bb08a49..473b252 100644
--- a/app/front/src/routes/_auth/drive/$folderPath.tsx
+++ b/app/front/src/routes/_auth/drive/$folderPath.tsx
@@ -1,9 +1,58 @@
-import { createFileRoute } from '@tanstack/react-router'
+import Table from '@/components/Table';
+import { Folder } from '@/types';
+import { createFileRoute } from '@tanstack/react-router';
+import { useNavigate } from '@tanstack/react-router';
-export const Route = createFileRoute('/_auth/drive/$folderPath')({
- component: RouteComponent,
-})
+function DriveComponent() {
+ const { folders } = Route.useLoaderData() as { folders: Folder[] };
+ const { folderPath } = Route.useParams();
+ const navigate = useNavigate();
+
+ const filteredFolders = folders.filter((folder: Folder) => {
+ if (!folderPath) {
+ return folder.depth === 0;
+ }
+ const parentFolder = folders.find((f: Folder) => f.name === folderPath);
+ return parentFolder && folder.parent_id === parentFolder.id;
+ });
+
+ const handleFolderClick = (folder: Folder) => {
+ navigate({ to: `/auth/drive/${folder.name}` });
+ };
-function RouteComponent() {
- return Hello "/_auth/drive/$folderPath"!
+ return ;
}
+
+export const Route = createFileRoute('/_auth/drive/$folderPath')({
+ loader: async ({ context }) => {
+ try {
+ const response = await fetch('http://localhost:8082/api/folders', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${context.auth.accessToken}`,
+ },
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch folders');
+ }
+
+ const folders = await response.json();
+ return { folders };
+ } catch (error) {
+ console.error('Error loading folders:', error);
+ return { folders: [] };
+ }
+ },
+
+ component: DriveComponent,
+
+ parseParams: (params) => {
+ return {
+ folderPath: params.folderPath
+ ? decodeURIComponent(params.folderPath)
+ : '',
+ };
+ },
+});
diff --git a/app/front/src/routes/_auth/drive/index.tsx b/app/front/src/routes/_auth/drive/index.tsx
index 1624666..17e725e 100644
--- a/app/front/src/routes/_auth/drive/index.tsx
+++ b/app/front/src/routes/_auth/drive/index.tsx
@@ -1,6 +1,86 @@
-import Drive from '@/pages/drive'
-import { createFileRoute } from '@tanstack/react-router'
+import Table from '@/components/Table';
+import { Folder } from '@/types';
+import { createFileRoute } from '@tanstack/react-router';
+import { useNavigate } from '@tanstack/react-router';
+
+const DriveComponent = () => {
+ const { folders } = Route.useLoaderData();
+ const { folderPath } = Route.useParams() as { folderPath: string };
+ const navigate = useNavigate();
+
+ const currentPath = folderPath ? `/${folderPath}` : '/';
+
+ const handleFolderClick = (folder: Folder) => {
+ const newPath = folder.path === '/' ? '' : folder.path;
+ navigate({ to: `/drive${newPath}` });
+ };
+
+ const filteredFolders = folders.filter((folder: Folder) => {
+ if (!folderPath) {
+ return folder.depth === 0;
+ }
+
+ return (
+ folder.path.startsWith(currentPath) &&
+ folder.path !== currentPath &&
+ !folder.path.slice(currentPath.length + 1).includes('/')
+ );
+ });
+
+ return (
+
+
+ navigate({ to: '/drive' })}
+ className='cursor-pointer hover:text-blue-500'
+ >
+ Root
+
+ {folderPath &&
+ folderPath
+ .split('/')
+ .filter(Boolean)
+ .map((segment, index, array) => (
+
+ {' / '}
+ {
+ const pathTo = array.slice(0, index + 1).join('/');
+ navigate({ to: `/drive/${pathTo}` });
+ }}
+ >
+ {segment}
+
+
+ ))}
+
+
+