Field names final changes for issue 49

.github/workflows/frontend.yml

@@ -2,6 +2,11 @@ name: Frontend Deployment
 
 on:
   push:
+    # Triggers only when code is pushed to the development branch
+    # that modifies files in the Frontend or docs/legal directories
+    branches:
+      - development
+
     paths:
       - 'Frontend/**'
       - 'docs/legal/**'
@@ -30,8 +35,7 @@ jobs:
     # Compress the build folder
     - name: Archive build folder
       run: |
-        cd Frontend
-        ls -la
+        cd Frontend/speedcart-react
         tar -czf build.tar.gz build/
 
     - name: Install SSH Key and Configure Access
@@ -43,12 +47,14 @@ jobs:
     # Transfer the build to the server
     - name: Upload build to server
       run: |
-        scp -i ~/.ssh/id_rsa build.tar.gz ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.WORK_DIR }}/Frontend
+        cd Frontend/speedcart-react
+        scp -i ~/.ssh/id_rsa build.tar.gz ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.WORK_DIR }}/Frontend/speedcart-react
 
     # Deploy on the server
     - name: Deploy build on server
       run: |
         ssh -i ~/.ssh/id_rsa ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} << 'EOF'
-        cd ${{ secrets.WORK_DIR }}/Frontend
+        cd ${{ secrets.WORK_DIR }}/Frontend/speedcart-react
         tar -xzf build.tar.gz
-        rm -f build.tar.gz
+        rm -f build.tar.gz
+        EOF

Frontend/shared/src/hooks/AuthContext/AuthContext.tsx

@@ -11,6 +11,7 @@ const AuthContext = createContext<AuthContextType | null>(null);
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [userPictureLink, setUserPictureLink] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);  // State for tracking loading of other context states (necessary for page loads)
 
   useEffect(() => {
     const token = localStorage.getItem("speedcart_auth_exists");
@@ -20,6 +21,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     } else {
       setIsAuthenticated(false);
     }
+    setLoading(false);  // Set loading to false after the status is determined
   }, []);
 
   const login = (token: string) => {
@@ -96,7 +98,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       });
   };
 
-  return <AuthContext.Provider value={{ isAuthenticated, userPictureLink, login, logout }}>{children}</AuthContext.Provider>;
+  return <AuthContext.Provider value={{ isAuthenticated, loading, userPictureLink, login, logout }}>{children}</AuthContext.Provider>;
 };
 
 // Create a custom hook to use the AuthContext

Frontend/shared/src/hooks/AuthContext/AuthContextType.ts

@@ -1,6 +1,7 @@
 // Create an interface for AuthContext
 export interface AuthContextType {
     isAuthenticated: boolean;
+    loading: boolean;
     userPictureLink: string | null;
     login: (token: string) => void;
     logout: () => void;

Frontend/speedcart-react/src/App.tsx

@@ -12,8 +12,8 @@ import Home from '@pages/Home';
 import ShoppingListShare from '@pages/ShoppingListShare';
 import Login from '@pages/Login';
 import Dashboard from '@pages/Dashboard';
-import NewShoppingList from '@pages/NewShoppingList';
-import ShoppingListDetail from '@pages/ShoppingListDetail';
+import NewShoppingListWithProvider from '@pages/NewShoppingListWithProvider';
+import ShoppingListDetailWithProvider from '@pages/ShoppingListDetailWithProvider';
 
 import './App.css';
 
@@ -41,9 +41,9 @@ function App() {
           <Routes>
             <Route path={AppRoute.HOME} element={<Home id="HomePage"/>} />
             <Route path={AppRoute.DASHBOARD} element={<Dashboard/>} />
-            <Route path={AppRoute.NEW_SHOPPING_LIST} element={<NewShoppingList/>} />
+            <Route path={AppRoute.NEW_SHOPPING_LIST} element={<NewShoppingListWithProvider/>} />
             <Route path={AppRoute.LOGIN} element={<Login />} />
-            <Route path={`${AppRoute.SHOPPING_LIST_DETAIL}/:id`} element={<ShoppingListDetail />} />
+            <Route path={`${AppRoute.SHOPPING_LIST_DETAIL}/:id`} element={<ShoppingListDetailWithProvider />} />
             <Route path={`${AppRoute.SHOPPING_LIST_SHARE}/:token`} element={<ShoppingListShare />} />
           </Routes>
           <Footer id="policyFooter" />

Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.module.css

@@ -1,9 +1,11 @@
 .labelContainer {
     display: flex;
-    align-items: center;
+    align-items: center; /* Vertically center the checkbox and label */
+    justify-content: center; /* Horizontally center the checkbox and label */
     position: relative;
     cursor: pointer;
     user-select: none;
+    text-align: center; /* Ensures text is also centered if used */
 }
 
 .input {
@@ -21,6 +23,9 @@
     background-color: #eee;
     border-radius: 4px;
     margin-right: 8px;
+    display: flex; /* Use flex to center the checkmark visually */
+    align-items: center; /* Vertical center */
+    justify-content: center; /* Horizontal center */
 }
 
 .labelContainer:hover .checkmark {

Frontend/speedcart-react/src/components/CustomCheckbox/CustomCheckbox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './CustomCheckbox.module.css';
 
-const CustomCheckbox = ({ name = '', className = '', checked = false, onChange = null, disabled = false, children}) => {
+const CustomCheckbox = ({ name = '', className = '', checked = false, onChange = null, disabled = false, children = null}) => {
     return (
         <label className={`${styles.labelContainer} ${className} ${disabled ? styles.disabled : ''}`}>
             <input

Frontend/speedcart-react/src/components/ShoppingListItem/ShoppingListItem.module.css

@@ -1,9 +1,19 @@
-
-/* ShoppingListItem.module.css */
 .listItem {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
+  display: table-row; /* Ensure the row aligns with the table structure */
+}
+
+.listItem > * {
+  display: table-cell;
+  text-align: center;
+}
+
+.itemName {
+  /*width: 100%;  /*Ensure text input takes the full width of its cell */
+  min-width: 90%;
+}
+
+.isFoodCheckbox {
+  text-align: center;
 }
 
 .trashBin {
@@ -13,8 +23,11 @@
   border-radius: 8px;
   padding: 8px;
   cursor: pointer;
+  text-align: center;
 }
 
-.isFoodCheckbox {
-  margin: 0;
-}
+.checkboxWrapper {
+  display: table-cell;
+  vertical-align: middle; /* Ensures the checkbox is vertically aligned */
+  text-align: center; /* Centers the checkbox horizontally */
+}

Frontend/speedcart-react/src/components/ShoppingListItem/ShoppingListItem.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
-import styles from "./ShoppingListItem.module.css";
+
+import IntegerQuantityValue from '@components/IntegerQuantityValue';
+import CustomCheckbox from '@components/CustomCheckbox';
+import { CrudMode } from '@constants/crudmodes';
+
+import styles from './ShoppingListItem.module.css';
 import inputStyles from '@modularStyles/inputs.module.css';
-import IntegerQuantityValue from "@components/IntegerQuantityValue";
+import { useShoppingListContext } from '@customHooks/ShoppingListContext';
 
-function ShoppingListItem({ item, index, onItemChange, onRemoveItem, isEditing }) {
+function ShoppingListItem({ item, index, onItemChange, onRemoveItem, isEditing, crudMode = CrudMode.READ, className = '' }) {
+  const { handleRestoreItem } = useShoppingListContext();
+
   const handleInputChange = (key, value) => {
     onItemChange(index, { ...item, [key]: value });
   };
@@ -13,34 +20,53 @@ function ShoppingListItem({ item, index, onItemChange, onRemoveItem, isEditing }
   };
 
   return (
-    <>
-      {isEditing ? (
-        <li className={styles.listItem}>
-          <input
+    <li className={`${styles.listItem} ${className}`}>
+      {isEditing ?
+        <>
+          <div>
+            <input
             type="text"
             value={item.name}
             className={`${inputStyles.input} ${styles.itemName}`}
             onChange={(e) => handleInputChange('name', e.target.value)}
             placeholder="Enter item name"
             required
-          />
+            />
+          </div>
           <IntegerQuantityValue value={item.quantity} onChange={handleQuantityChange} />
-          <input
-            type="checkbox"
-            checked={item.is_food}
-            className={styles.isFoodCheckbox}
-            onChange={(e) => handleInputChange('is_food', e.target.checked)}
-          />
-          <button type="button" className={styles.trashBin} onClick={() => onRemoveItem(index)}>
-            🗑️
-          </button>
-        </li>) :
-        (<li>
+          <div className={styles.checkboxWrapper}>
+            <CustomCheckbox
+              checked={item.is_food}
+              className={styles.isFoodCheckbox}
+              onChange={(e) => handleInputChange('is_food', e.target.checked)}
+            />
+          </div>
+          <div>
+            {(crudMode === CrudMode.UPDATE || crudMode === CrudMode.CREATE) &&
+              <button
+                type="button"
+                className={styles.trashBin}
+                onClick={() => onRemoveItem(index)}
+              >
+                🗑️
+              </button>
+            }
+            {crudMode === CrudMode.DELETE &&
+              <button onClick={() => handleRestoreItem(index)}>Restore</button>
+            }
+          </div>
+        </>
+        : 
+        (<>
           {/* View-only elements */}
-          <>{item.name}, Quantity: {item.quantity}, Is Food? {item.is_food ? "Yes" : "No"}</>
+            <>
+              <div>{item.name}</div>
+              <div>{item.quantity}</div>
+              <div>{item.is_food ? "Yes" : "No"}</div>
+            </>
           {/* Other elements for viewing */}
-        </li>)}
-    </>
+        </>)}
+    </li>
   );
 }
 

Frontend/speedcart-react/src/components/ShoppingListSection/ShoppingListSection.module.css

@@ -0,0 +1,41 @@
+.centerText {
+    text-align: center;
+}
+
+.shoppingListItems {
+    display: table;
+    border-collapse: collapse; /* Optional: Collapse borders for a cleaner look */
+    width: 80%;
+}
+
+/* Adjust layout for larger screens */
+@media (min-width: 7px) {
+    .shoppingListItems {
+        width: 65%; /* Reduce table width for larger screens */
+    }
+}
+
+.fieldHeader {
+    display: table-header-group;
+    padding: 8px;
+    margin-bottom: 8px;
+}
+
+.fieldHeader > div {
+    display: table-cell;
+    text-align: center;
+}
+.columnHeader {
+    text-align: center;
+    font-weight: bold;
+}
+.row {
+    display: table-row;
+    white-space: nowrap;
+}
+
+.row > * {
+    display: table-cell;
+    padding: 0px;
+    box-sizing: border-box;
+}

Frontend/speedcart-react/src/components/ShoppingListSection/ShoppingListSection.tsx

@@ -0,0 +1,37 @@
+// ShoppingListSection.js
+import React from 'react';
+import ShoppingListItem from '@components/ShoppingListItem';
+import { CrudMode } from '@constants/crudmodes';
+
+import styles from './ShoppingListSection.module.css';
+
+const ShoppingListSection = ({ title, items, onItemChange, onRemoveItem, isEditing, titleClassName = '', crudMode = CrudMode.READ }) => {
+
+  return (
+    <section>
+      <h3 className={titleClassName}>{title}</h3>
+      <div className={styles.shoppingListItems}>
+        <div className={styles.fieldHeader}>
+          <div className={`${styles.columnHeader}`}>Item name</div>
+          <div className={`${styles.columnHeader}`}>Quantity</div>
+          <div className={`${styles.columnHeader}`}>Food Item</div>
+          {isEditing && <div className={`${styles.columnHeader}`}>Delete Item</div>}
+        </div>
+        {items.map((item, index) => (
+          <ShoppingListItem
+            index={index}
+            key={item.id || item.item_id}
+            item={item}
+            onItemChange={onItemChange}
+            onRemoveItem={onRemoveItem}
+            isEditing={isEditing}
+            className={styles.row}
+            crudMode={crudMode}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default ShoppingListSection;

Frontend/speedcart-react/src/components/ShoppingListSection/index.ts

@@ -0,0 +1 @@
+export { default } from './ShoppingListSection';

Frontend/speedcart-react/src/constants/crudmodes.ts

@@ -0,0 +1,7 @@
+// This can be used for indicating the type of CRUD operation
+export enum CrudMode {
+    CREATE = 'create',
+    READ = 'read',
+    UPDATE = 'update',
+    DELETE = 'delete',
+};

Frontend/speedcart-react/src/constants/enums.ts

@@ -1,7 +1,7 @@
 // This can be used for indicating the status of a network request
 export enum RequestStatus {
     IDLE = 'idle',
-    LOADING ='loading',
+    LOADING = 'loading',
     SUCCESS = 'success',
     ERROR = 'error',
 };