Shared .env removal and optimizations (#91)

.github/workflows/frontend.yml

@@ -29,8 +29,11 @@ jobs:
 
     - name: Install dependencies
       run: cd Frontend && npm install --force # This should install all dependencies, regardless of the workspace
+
+    - name: Write shared .env file
+      run: echo "${{ github.ref == 'refs/heads/deployment' && secrets.SHARED_PROD_ENV_FILE || secrets.SHARED_DEV_ENV_FILE }}" > Frontend/shared/.env
 
-    - name: Write .env file
+    - name: Write Frontend .env file
       run: echo "${{ github.ref == 'refs/heads/deployment' && secrets.FRONTEND_PROD_ENV_FILE || secrets.FRONTEND_DEV_ENV_FILE }}" > Frontend/speedcart-react/.env
 
     - name: Build front end

Frontend/package.json

@@ -1,5 +1,6 @@
 {
   "name": "my-monorepo",
+  "type": "module",
   "private": true,
   "workspaces": [
     "shared",
@@ -35,6 +36,7 @@
     "process": "^0.11.10",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^6.0.0",
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.5.3",
     "react-native": "0.74.5",

Frontend/shared/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
-src/constants/config.json
+src/constants/config.json
+.env

Frontend/shared/generate-config.js

@@ -6,11 +6,15 @@ const dotenv = require('dotenv');
 dotenv.config();
 
 const config = {
-  API_DOMAIN: process.env.API_DOMAIN,
-  API_PORT: process.env.API_PORT,
-  TESTING_MODE: process.env.TESTING_MODE,
+  API_DOMAIN: process.env.API_DOMAIN || 'localhost',
+  API_PORT: process.env.API_PORT || '',  // ensure it always exists
+  TESTING_MODE: process.env.TESTING_MODE || 'false',
 };
 
 // Write the config to a file in the shared directory
-fs.writeFileSync(path.resolve(__dirname, './src/constants/config.json'), JSON.stringify(config, null, 2));
+fs.writeFileSync(
+  path.resolve(__dirname, './src/constants/config.json'),
+  JSON.stringify(config, null, 2)
+);
+
 console.log('Config file generated successfully.');

Frontend/shared/src/constants/BaseUrl.ts

@@ -2,10 +2,13 @@
 import config from './config.json';
 
 const API_DOMAIN = config.API_DOMAIN;
+const API_PORT = config.API_PORT;
 
 // Protocol depends on if we're using dev or production
 const API_PROTOCOL = API_DOMAIN === 'localhost' ? 'http' : 'https';
 
 // This can be reused for all backend interactions
-export const BASE_URL: string = `${API_PROTOCOL}://${API_DOMAIN}`;
+export const BASE_URL: string = API_PORT
+    ? `${API_PROTOCOL}://${API_DOMAIN}:${API_PORT}`
+    : `${API_PROTOCOL}://${API_DOMAIN}`;
 export const TESTING_MODE: boolean = config.TESTING_MODE === 'true';

Frontend/speedcart-react/package.json

@@ -26,6 +26,7 @@
     ]
   },
   "dependencies": {
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

Frontend/speedcart-react/src/App.tsx

@@ -1,22 +1,35 @@
 // App.js
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import PageLayout from '@components/PageLayout';
 import Navigation from '@components/Navigation';
 import Footer from '@components/Footer';
 import Modal from '@components/Modal';
 import SitePolicies from '@components/SitePolicies';
 
 import { AppRoute } from '@constants/routes';
 
-import Home from '@pages/Home';
-import ShoppingListShare from '@pages/ShoppingListShare';
-import Login from '@pages/Login';
-import Dashboard from '@pages/Dashboard';
-import NewShoppingListWithProvider from '@pages/NewShoppingListWithProvider';
-import ShoppingListDetailWithProvider from '@pages/ShoppingListDetailWithProvider';
+const Home = React.lazy(() => import('@pages/Home'));
+const ShoppingListShare = React.lazy(() => import('@pages/ShoppingListShare'));
+const Login = React.lazy(() => import('@pages/Login'));
+const Dashboard = React.lazy(() => import('@pages/Dashboard'));
+const NewShoppingListWithProvider = React.lazy(() => import('@pages/NewShoppingListWithProvider'));
+const ShoppingListDetailWithProvider = React.lazy(() => import('@pages/ShoppingListDetailWithProvider'));
 
 import './App.css';
 
+function ErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+}
+
 function App() {
   const [showSitePolicies, setShowSitePolicies] = useState(true);
 
@@ -38,14 +51,18 @@ function App() {
           <Modal isOpen={showSitePolicies} isCloseable={false} >
             <SitePolicies onAccept={handleSitePoliciesAccept} />
           </Modal>
-          <Routes>
-            <Route path={AppRoute.HOME} element={<Home id="HomePage"/>} />
-            <Route path={AppRoute.DASHBOARD} element={<Dashboard/>} />
-            <Route path={AppRoute.NEW_SHOPPING_LIST} element={<NewShoppingListWithProvider/>} />
-            <Route path={AppRoute.LOGIN} element={<Login />} />
-            <Route path={`${AppRoute.SHOPPING_LIST_DETAIL}/:id`} element={<ShoppingListDetailWithProvider />} />
-            <Route path={`${AppRoute.SHOPPING_LIST_SHARE}/:token`} element={<ShoppingListShare />} />
-          </Routes>
+          <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { /* reset state if needed */ }}>
+            <React.Suspense fallback={<PageLayout>Loading...</PageLayout>}>
+              <Routes>
+                <Route path={AppRoute.HOME} element={<Home id="HomePage"/>} />
+                <Route path={AppRoute.DASHBOARD} element={<Dashboard/>} />
+                <Route path={AppRoute.NEW_SHOPPING_LIST} element={<NewShoppingListWithProvider/>} />
+                <Route path={AppRoute.LOGIN} element={<Login />} />
+                <Route path={`${AppRoute.SHOPPING_LIST_DETAIL}/:id`} element={<ShoppingListDetailWithProvider />} />
+                <Route path={`${AppRoute.SHOPPING_LIST_SHARE}/:token`} element={<ShoppingListShare />} />
+              </Routes>
+            </React.Suspense>
+          </ErrorBoundary>
           <Footer id="policyFooter" />
         </Router>
     );

Frontend/speedcart-react/src/customHooks/ShoppingListContext/ShoppingListContext.tsx

@@ -6,6 +6,13 @@ import { AuthContextType, createGroceryItem, createShoppingList, deleteGroceryIt
 
 const ShoppingListContext = createContext(null);
 
+// Defined here so it doesn't get recreated on every render
+function partition<T>(arr: T[], predicate: (val: T) => boolean): [T[], T[]] {
+    const pass: T[] = [], fail: T[] = [];
+    for (const el of arr) (predicate(el) ? pass : fail).push(el);
+    return [pass, fail];
+}
+
 // This component handles all state-related work for any pages
 // that deal with saving shopping lists
 export const ShoppingListProvider = ({ children }) => {
@@ -18,6 +25,7 @@ export const ShoppingListProvider = ({ children }) => {
   const [deletedItems, setDeletedItems] = useState([]); // Any items deleted in the front end should obviously be removed from the database on the back end
   const [newItems, setNewItems] = useState([]); // Any new items added in the front end should be added to the database on the back end
   const [crudMode, setCrudMode] = useState<CrudMode>(CrudMode.READ);
+  const [error, setError] = useState<string>(''); // Stores any kind of error that occurred with the most recent batch of remote requests
   // These state variables are necessary if the user changes from editing mode to view mode
   const [originalShoppingList, setOriginalShoppingList] = useState(null);
   const [originalGroceryItems, setOriginalGroceryItems] = useState([]);
@@ -126,36 +134,42 @@ export const ShoppingListProvider = ({ children }) => {
       currentListID = listID;
     }
 
-    if (existingItems.length > 0) {
-      // Update each existing grocery item
-      const itemPromises = existingItems.map(item => callBackendAPI(updateGroceryItem, {
-        item: item
-      }));
+    // Pool all item-related promises into one array without evaluating them yet (i.e. lazy evaluation)
+    const allItemPromises: (() => Promise<Response>)[] = [];
 
-      await Promise.all(itemPromises);
+    // Collect all lazy API calls
+    for (const item of existingItems) {
+      allItemPromises.push(() => callBackendAPI(updateGroceryItem, { item }));
     }
 
-    if (deletedItems.length > 0) {
-      // Remove each grocery item that the user wants to delete
-      const itemDeletePromises = deletedItems.map(item => callBackendAPI(deleteGroceryItem, {
-        item: item
-      }));
+    for (const item of deletedItems) {
+      allItemPromises.push(() => callBackendAPI(deleteGroceryItem, { item }));
+    }
 
-      await Promise.all(itemDeletePromises);
+    for (const item of newItems) {
+      allItemPromises.push(() =>
+        callBackendAPI(createGroceryItem, {
+          item: {
+            ...item,
+            shopping_list_id: currentListID
+          }
+        })
+      );
     }
 
-    if (newItems.length > 0) {
-      // Add each new item the user wants to add
-      const itemCreationPromises = newItems.map(item => callBackendAPI(createGroceryItem, {
-         item: {
-          ...item,
-          shopping_list_id: currentListID
-         }
-      }));
+    // Start all the calls at once, lazily
+    const settled = await Promise.allSettled(allItemPromises);
+
+    const [fulfilled, rejected] = partition(settled, r => r.status === "fulfilled");
 
-      await Promise.all(itemCreationPromises);
+    if (rejected.length > 0) {
+      console.error("Some operations failed:", rejected);
+      setError("Some items failed to save. Please try again.");
+      return;
     }
-
+
+    console.log("All operations succeeded!");
+    setError(''); // Clear any previous error
   };
 
   return (