Fix not loading bucket list when in other path than "/"

frontend/src/App.tsx

@@ -5,23 +5,42 @@ import {
   RouterProvider,
   Routes
 } from 'react-router-dom';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Login } from './routes/Login';
 import { staticRoutes } from './routes';
 import { useOAuth, OAuthPopup } from './services/OAuth2';
 import { BucketListContext } from './services/BucketListContext';
 import { BucketBrowser } from './routes/BucketBrowser';
 import { Bucket } from '@aws-sdk/client-s3';
+import { useS3Service } from './services/S3Service';
 
 function App() {
 
   const [bucketList, setBucketList] = useState<Bucket[]>([]);
   const oAuth = useOAuth();
+  const { isAuthenticated, fetchBucketList } = useS3Service();
+
   const bucketContextValue = {
     bucketList: bucketList,
     setBuckets: setBucketList
   }
 
+  // Fetch bucket lists
+  const fetchBuckets = async () => {
+    try {
+      const buckets = await fetchBucketList();
+      setBucketList(buckets);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    if (isAuthenticated() && bucketList.length === 0) {
+      fetchBuckets();
+    }
+  });
+
   if (oAuth.error) {
     return <div>Ops... {oAuth.error.message}</div>;
   }
@@ -50,7 +69,6 @@ function App() {
     element: <Login onClick={oAuth.signinPopup} />,
   });
 
-
   // Add /{bucket_name} routes dynamically
   routes = routes.concat(bucketList.reduce((acc: any[], bucket: Bucket) => {
     if (bucket.Name) {

frontend/src/routes/Home/index.tsx

 import { Page } from '../../components/Page';
 import { Table, Column } from '../../components/Table';
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BucketListContext } from '../../services/BucketListContext';
 import { Bucket } from '@aws-sdk/client-s3';
-import { useS3Service } from '../../services/S3Service';
 
 export const Home = () => {
   const navigate = useNavigate();
-  const { bucketList, setBuckets } = useContext(BucketListContext);
-  const { isAuthenticated, fetchBucketList } = useS3Service();
+  const { bucketList } = useContext(BucketListContext);
 
   const columns: Column[] = [
     { id: "bucket", name: "Bucket" },
@@ -23,21 +21,6 @@ export const Home = () => {
     ]
   });
 
-  const fetchBuckets = async () => {
-    try {
-      const buckets = await fetchBucketList();
-      setBuckets(buckets);
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
-  useEffect(() => {
-    if (isAuthenticated() && bucketList.length === 0) {
-      fetchBuckets();
-    }
-  });
-
   const onClick = (_: React.MouseEvent<HTMLTableRowElement>, index: number) => {
     const bucketName = bucketList[index].Name;
     navigate("/" + bucketName)