From 7e9f3aeb4d24f7f1c271b896964631116bafe5f3 Mon Sep 17 00:00:00 2001 From: Jacopo Gasparetto <jacopo.gasparetto@cnaf.infn.it> Date: Fri, 7 Apr 2023 12:06:31 +0200 Subject: [PATCH] Add BucketsLists context Move APIService fetch bucket list global shared context --- frontend/src/App.tsx | 29 ++++++++++++-- frontend/src/routes/Buckets/index.tsx | 19 +++------- frontend/src/routes/Home/index.tsx | 42 ++++++++++----------- frontend/src/services/BucketListContext.tsx | 4 ++ 4 files changed, 55 insertions(+), 39 deletions(-) create mode 100644 frontend/src/services/BucketListContext.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e0f45c1..4cd8e40 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,18 +1,39 @@ -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> ) } diff --git a/frontend/src/routes/Buckets/index.tsx b/frontend/src/routes/Buckets/index.tsx index 6b60f7d..71aee77 100644 --- a/frontend/src/routes/Buckets/index.tsx +++ b/frontend/src/routes/Buckets/index.tsx @@ -1,8 +1,8 @@ -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 diff --git a/frontend/src/routes/Home/index.tsx b/frontend/src/routes/Home/index.tsx index a001a0c..f563dc5 100644 --- a/frontend/src/routes/Home/index.tsx +++ b/frontend/src/routes/Home/index.tsx @@ -1,39 +1,39 @@ 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> diff --git a/frontend/src/services/BucketListContext.tsx b/frontend/src/services/BucketListContext.tsx new file mode 100644 index 0000000..28f1726 --- /dev/null +++ b/frontend/src/services/BucketListContext.tsx @@ -0,0 +1,4 @@ +import { createContext } from "react"; +import { BucketInfo } from "../models/bucket"; + +export const BucketsListContext = createContext<BucketInfo[]>([]); -- GitLab