Make BucketContext using aws-sdk

frontend/src/App.tsx

@@ -5,18 +5,44 @@ import {
   RouterProvider,
   Routes
 } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 import { Login } from './routes/Login';
 import { staticRoutes } from './routes';
+import { useOAuth, OAuthPopup } from './services/OAuth2';
 import { BucketsListContext } from './services/BucketListContext';
-import { useOAuth } from './services/OAuth2';
-import { OAuthPopup } from './services/OAuth2';
-import { useState } from 'react';
-import { BucketInfo } from './models/bucket';
+import { useS3Service } from './services/S3APIService';
+import { BucketBrowser } from './routes/BucketBrowser';
+import { ListBucketsCommand, Bucket } from '@aws-sdk/client-s3';
+
 
 function App() {
 
-  const [bucketList, setBucketList] = useState<BucketInfo[]>([]);
+  const [bucketList, setBucketList] = useState<Bucket[]>([]);
   const oAuth = useOAuth();
+  const s3 = useS3Service();
+
+  useEffect(() => {
+    if (!s3.isAuthenticated()) {
+      return;
+    }
+
+    const listBucketCmd = new ListBucketsCommand({});
+    s3.client.send(listBucketCmd)
+      .then(response => {
+        const { Buckets } = response;
+        if (!Buckets) {
+          console.warn("Warning: Expected Bucket[], got  undefined");
+          return;
+        }
+        console.log(Buckets);
+        setBucketList(Buckets);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [s3]);
+
+
 
   if (oAuth.error) {
     return <div>Ops... {oAuth.error.message}</div>;
@@ -44,8 +70,21 @@ function App() {
 
   routes.push({
     path: "/login",
-    element: <Login onClick={oAuth.signinPopup} />
+    element: <Login onClick={oAuth.signinPopup} />,
   });
+
+
+  // Add /{bucket_name} routes dynamically
+  routes = routes.concat(bucketList.reduce((acc: any[], bucket: Bucket) => {
+    if (bucket.Name) {
+      acc.push({
+        path: "/" + bucket.Name,
+        element: <BucketBrowser bucketName={bucket.Name} />
+      });
+    }
+    return acc;
+  }, []));
+
   const router = createBrowserRouter(routes);
 
   return (

frontend/src/services/BucketListContext.tsx

 import { createContext } from "react";
-import { BucketInfo } from "../models/bucket";
+import { Bucket } from "@aws-sdk/client-s3";
 
-export const BucketsListContext = createContext<BucketInfo[]>([]);
+export const BucketsListContext = createContext<Bucket[]>([]);