display list of ressources

CESI-GRP-4 · Apr 25, 2024 · 13100be · 13100be
1 parent 6121858
commit 13100be
Showing 1 changed file with 46 additions and 43 deletions.
diff --git a/frontend/src/app/(connected)/(front-office)/category/[id]/page.tsx b/frontend/src/app/(connected)/(front-office)/category/[id]/page.tsx
@@ -4,53 +4,56 @@ import { Icon } from '@iconify/react';
 import { Category } from "@/types/category";
 import { useState, useEffect } from "react";
 import axios from 'axios';
+import { useUser } from "@/providers/userProvider";
+import ListOfRessourcesAccordion from "@/components/front-office/ressource-management/listOfRessourcesAccordion";
+import PageSummary from "@/components/pageSummary";
 
 const { Paragraph } = Typography;
 
-export default function CategoryPage({ params }: { params: {id: string} }) {
-    const [resources, setResources] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
+export default function CategoryPage({ params }: { params: { id: string } }) {
+       const [category, setCategory] = useState<Category>();
+       const [resources, setResources] = useState<any[]>([]);
+       const [isLoading, setIsLoading] = useState<boolean>(false);
+       const {user} = useUser();
 
-    useEffect(()=>{
-        fetchResources();
-    }, [])
+       useEffect(() => {
+              fetchResources();
+       }, [])
 
-    const fetchResources = async () => {
-        try {
-            setIsLoading(true);
-            const response = await axios({
-                method: 'GET',
-                baseURL: process.env.NEXT_PUBLIC_BACKEND_API_URL,
-                url: `/category/${params.id}`,
-                responseType: 'json',
-                timeout: 10000,
-                withCredentials: true,
-            });
-            setResources(response.data.category.ressources);
-        } catch (error) {
-            console.error("Error fetching resources:", error);
-        } finally {
-            setIsLoading(false);
-        }
-    };
+       const fetchResources = async () => {
+              try {
+                     setIsLoading(true);
+                     const response = await axios({
+                            method: 'GET',
+                            baseURL: process.env.NEXT_PUBLIC_BACKEND_API_URL,
+                            url: `/category/${params.id}`,
+                            responseType: 'json',
+                            timeout: 10000,
+                            withCredentials: true,
+                     });
+                     console.log(response.data.category.ressources);
+                     setResources(response.data.category.ressources);
+                     setCategory(response.data.category);
+              } catch (error) {
+                     console.error("Error fetching resources:", error);
+              } finally {
+                     setIsLoading(false);
+              }
+       };
 
-    return (
-        <>
-
-            {resources.length > 0 && (
-                <div>
-                    {/* <h3>Ressources liées à {category.title} :</h3> */}
-                    {isLoading ? (
-                        <p>Loading...</p>
-                    ) : (
-                        <ul>
-                            {resources.map((resource, index) => (
-                                <li key={index}>{resource.label}</li> 
-                            ))}
-                        </ul>
-                    )}
-                </div>
-            )}
-        </>
-    );
+       return (
+              <div className="flex flex-col gap-5">
+                     <PageSummary title={category?.title || "Page de la catégorie"} description={category?.description} />
+                     {resources.length > 0 && (
+                            <div>
+                                   {/* <h3>Ressources liées à {category.title} :</h3> */}
+                                   {isLoading ? (
+                                          <p>Loading...</p>
+                                   ) : (
+                                          <ListOfRessourcesAccordion ressources={resources} refreshRessources={fetchResources} />
+                                   )}
+                            </div>
+                     )}
+              </div>
+       );
 }