Add BucketsLists context

Move APIService fetch bucket list global shared context

frontend/src/App.tsx

-import { routes } from './routes';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-
+import { useState, useEffect } from 'react';
+import { BucketInfo } from './models/bucket';
+import { routes } from './routes';
+import APIService from './services/APIService';
+import { BucketsListContext } from './services/BucketListContext';
 
 function App() {
+
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [bucketList, setBucketLists] = useState<BucketInfo[]>([]);
+
+  useEffect(() => {
+    setIsAuthenticated(APIService.isAuthenticated());
+    APIService
+      .get("buckets")
+      .then(data => {
+        const buckets: BucketInfo[] = data["buckets"];
+        console.log(`Fetched ${buckets.length} buckets`);
+        setBucketLists(buckets);
+      });
+  }, [isAuthenticated]);
+
+
   const router = createBrowserRouter(routes.map(route => {
     return {
       path: route.path,
       element: route.element
     }
-  }));
+  }))
 
   return (
     <div className="flex mb-4">
-      <RouterProvider router={router} />
+      <BucketsListContext.Provider value={bucketList}>
+        <RouterProvider router={router} />
+      </BucketsListContext.Provider>
     </div>
   )
 }

frontend/src/routes/Buckets/index.tsx

-import { useState } from 'react';
+import { useContext } from 'react';
 import { Page } from '../../components/Page';
-import APIService from "../../services/APIService";
 import { getHumanSize } from '../../commons/utils';
 import { BucketInfo } from '../../models/bucket';
+import { BucketsListContext } from '../../services/BucketListContext';
 
 const BucketView = (bucketInfo: BucketInfo) => {
   const creationDate = new Date(bucketInfo.creation_date);
@@ -18,25 +18,16 @@ const BucketView = (bucketInfo: BucketInfo) => {
 }
 
 export const Buckets = () => {
-  const [isFirstRender, setIsFirstRender] = useState(true);
-  const [buckestList, setBucketLists] = useState<BucketInfo[]>([]);
-
-  if (isFirstRender) {
-    setIsFirstRender(false);
-    APIService.get("buckets")
-      .then(data => {
-        setBucketLists(data["buckets"]);
-      });
-  }
+  const bucketList = useContext(BucketsListContext);
 
   return (
     <Page title='Buckets'>
-      {buckestList ? buckestList.map(bucketInfo =>
+      {bucketList.map(bucketInfo =>
         <BucketView
           key={bucketInfo.name + bucketInfo.creation_date}
           {...bucketInfo}
         />
-      ) : null}
+      )}
     </Page>
   )
 }
\ No newline at end of file

frontend/src/routes/Home/index.tsx

 import { Page } from '../../components/Page';
 import { Table } from '../../components/Table';
-import './index.css';
-import { useState } from 'react';
+import { useContext } from 'react';
 import { BucketInfo } from '../../models/bucket';
-import APIService from '../../services/APIService';
 import { getHumanSize, parseReadWriteAccess } from '../../commons/utils';
-
+import { BucketsListContext } from '../../services/BucketListContext';
+import './index.css';
 
 export const Home = () => {
 
-  const [isFirstRender, setIsFirstRender] = useState(true);
-  const [bucketList, setBucketLists] = useState<BucketInfo[][]>([]);
+  const onClick = (element: React.MouseEvent<HTMLTableRowElement>, index: number) => {
+    const bucketName = element.currentTarget.firstChild?.textContent;
+    console.log(bucketName);
+  }
 
   const columns = ["Bucket", "Objects", "Size", "Access"];
 
-  if (isFirstRender) {
-    setIsFirstRender(false);
-    APIService.get("buckets")
-      .then(data => {
-        setBucketLists(data["buckets"].map((bucket: BucketInfo) => {
-          return [
-            bucket.name,
-            bucket.objects,
-            getHumanSize(bucket.size),
-            parseReadWriteAccess(bucket.rw_access)
-          ]
-        }));
-      });
-  }
+  const bucketList = useContext(BucketsListContext).map((bucket: BucketInfo) => {
+    return [
+      bucket.name,
+      bucket.objects,
+      getHumanSize(bucket.size),
+      parseReadWriteAccess(bucket.rw_access)
+    ]
+  });
 
   return (
     <Page title="Home">
       <div className="Home">
         <div className="flex place-content-center">
-        <Table className="table-auto w-2/3" columns={columns} data={bucketList} />
+          <Table
+            className="table-auto w-2/3"
+            columns={columns}
+            data={bucketList}
+            onClick={onClick}
+          />
         </div>
       </div>
     </Page>

frontend/src/services/BucketListContext.tsx

+import { createContext } from "react";
+import { BucketInfo } from "../models/bucket";
+
+export const BucketsListContext = createContext<BucketInfo[]>([]);