feat(background): transferred background assets to S3 bucket and inte…

…grated with frontend. Added Redux for state management between VideoBackground and BackgroundSelect. Implemented skeleton and NProgress loaders. Added Error Boundary and toast notifications for errors. Ensured background changes only when the next background is ready. Set up initial background. Optimized BackgroundSelect content to load only when opened.

frontend/package.json

@@ -15,14 +15,16 @@
     "@heroicons/react": "^2.1.5",
     "@material-tailwind/react": "2.1.8",
     "@mui/icons-material": "^6.1.7",
+    "@reduxjs/toolkit": "^2.3.0",
     "axios": "^1.7.7",
     "dotenv": "^16.4.5",
+    "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.28.0",
-    "react-toastify": "^10.0.5",
+    "react-toastify": "^10.0.6",
     "react-youtube": "^10.1.0",
     "redux": "^5.0.1",
     "toast": "^0.5.4"

frontend/src/App.jsx

@@ -3,22 +3,45 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import HomePage from "./pages/HomePage";
 import Dashboard from "./pages/Dashboard";
 import ProtectedRoute from "./components/ProtectedRoute";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import ErrorBoundary from "./components/ErrorBoundary.jsx";
 
 function App() {
+
+  // Disable the spinner
+  NProgress.configure({ showSpinner: false });
+
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route
-          path="/dashboard"
-          element={
-            <ProtectedRoute>
-              <Dashboard />
-            </ProtectedRoute>
-          }
-        />
-      </Routes>
-    </Router>
+    <ErrorBoundary>
+      <ToastContainer
+        position="top-right" // Position of the toast
+        autoClose={5000} // Auto-dismiss duration in ms
+        hideProgressBar={false}
+        newestOnTop={true}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
+      <Router>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute>
+                <Dashboard />
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+      </Router>
+    </ErrorBoundary>
   );
 }
 

frontend/src/components/BackgroundSelector.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Button,
   Popover,
@@ -7,10 +8,85 @@ import {
 } from '@material-tailwind/react';
 import { EyeIcon as EyeIconSolid } from '@heroicons/react/24/solid';
 import { EyeIcon as EyeIconOutline } from '@heroicons/react/24/outline';
+import { toast } from 'react-toastify';
+import { setBackgrounds, selectBackground } from '../redux/backgroundSlice';
+import { useAuth0 } from '@auth0/auth0-react';
+import SkeletonLoader from './skeletons/SkeletonLoader';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+const BackgroundSelector = () => {
+  const { user, getAccessTokenSilently } = useAuth0();
+  const userId = user?.sub;
+  const dispatch = useDispatch();
+  const { backgrounds, selectedBackground } = useSelector((state) => state.background);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchBackgrounds = async () => {
+      if (!userId) return;
+
+      setIsLoading(true);
+      try {
+        const token = await getAccessTokenSilently();
+        const response = await fetch(`${API_BASE_URL}/backgrounds/${userId}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch backgrounds');
+        }
+
+        const data = await response.json();
+        dispatch(setBackgrounds(data)); // Replace existing state
+      } catch (error) {
+        console.error('Error fetching backgrounds:', error);
+        toast.error('Error loading backgrounds');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (isPopoverOpen && backgrounds.length === 0) {
+      fetchBackgrounds();
+    }
+  }, [dispatch, userId, getAccessTokenSilently, isPopoverOpen]);
+
+  const handleBackgroundSelect = async (background) => {
+    dispatch(selectBackground(background));
+    /*try {
+      const token = await getAccessTokenSilently();
+      const url = `${API_BASE_URL}/backgrounds/${userId}/select`;
+      console.log(url);
+      const response = await fetch(url, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ selectedBackground: background }),
+      });
+
+      if (!response.ok) throw new Error('Failed to update background');
+      toast.success(`Background changed to "${background.name}"`);
+    } catch (error) {
+      console.error('Error updating background:', error);
+      toast.error('Failed to change background');
+    }*/
+  };
 
-const BackgroundSelector = ({ backgrounds, handleBackgroundSelect }) => {
   return (
-    <Popover placement="top" offset={{ mainAxis: 10 }}>
+    <Popover
+      placement="top"
+      offset={{ mainAxis: 10 }}
+      open={isPopoverOpen}
+      handler={setIsPopoverOpen}
+      inert={isPopoverOpen}
+    >
       <PopoverHandler>
         <Button
           variant="text"
@@ -21,31 +97,29 @@ const BackgroundSelector = ({ backgrounds, handleBackgroundSelect }) => {
           <span className="text-white text-sm mt-2">Visuals</span>
         </Button>
       </PopoverHandler>
-      <PopoverContent className="w-72 h-96 overflow-y-auto p-4 bg-gray-700 text-white z-50">
-        <div className="grid grid-cols-1 gap-4">
-          {backgrounds.map((background, index) => (
-            <div
-              key={index}
-              className="relative cursor-pointer rounded-md overflow-hidden border"
-              style={{
-                height: '100px',
-                transition: 'transform 0.3s, border-color 0.3s',
-              }}
-              onClick={() => handleBackgroundSelect(background)}
-              onMouseEnter={(e) => (e.currentTarget.style.borderColor = '#fff')}
-              onMouseLeave={(e) =>
-                (e.currentTarget.style.borderColor = 'transparent')
-              }
-            >
-              <img
-                src={background.thumbnailSrc} // Use JPG image for preview
-                alt={background.name}
-                className="absolute inset-0 w-full h-full object-cover"
-              />
+      {isPopoverOpen && (
+        <PopoverContent className="w-72 h-96 overflow-y-auto p-4 bg-gray-700 text-white z-50">
+          {isLoading ? <SkeletonLoader rows={5} /> : (
+            <div className="grid grid-cols-1 gap-4">
+              {backgrounds.map((background) => (
+                <div
+                  key={background.name}
+                  className={`relative cursor-pointer rounded-md overflow-hidden border ${selectedBackground?.name === background.name ? 'border-blue-500' : ''
+                    }`}
+                  onClick={() => handleBackgroundSelect(background)}
+                >
+                  <img
+                    src={background.thumbnailSrc}
+                    alt={background.name}
+                    className="w-full h-24 object-cover"
+                  />
+                  <div className="absolute inset-0 bg-black opacity-0 hover:opacity-30 transition-opacity" />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-      </PopoverContent>
+          )}
+        </PopoverContent>
+      )}
     </Popover>
   );
 };