Merge pull request #160 from simplitrac/fix-merge-conflict

Fix merge conflict

Dockerfile

@@ -20,6 +20,8 @@ RUN rm -rf docs node_modules src
 
 WORKDIR /app
 
+RUN rm -rf public
+
 # Stage 2: Set up the Express server
 FROM node:18 AS server
 

client/src/components/CategoryModal.jsx

@@ -61,7 +61,11 @@ const CategoryModal = () => {
                     setTimeout(() => firstInputRef.current?.focus(), 0);
                 }}
             >
-            <h2 id="source-type-dialog-label">Account Created Successfully! Please Select Your Standard Expense Categories: </h2>  <header></header>
+            <h1 id="source-type-dialog-label" align="center">Account Created Successfully!</h1>
+                <br />
+                <h2> Please Select Your Standard Expense Categories: </h2>
+                <br />
+
 
                 <ul
                     className="source-type-modal__list"

client/src/components/ConfirmationModal.jsx

@@ -34,7 +34,7 @@ const ConfirmationModal = () => {
             // .filter(entry => entry[1] !== null && entry[1] !== undefined)
             .map((entry, index) => (
                 <li key={index} className="source-type-modal__list-item">
-                    <label>
+                    <label al>
                         {entry}
                     </label>
                 </li>
@@ -53,22 +53,23 @@ const ConfirmationModal = () => {
                 onAfterOpen={() => {
                     setTimeout(() => firstInputRef.current?.focus(), 0);
                 }}
+                align="center"
             >
                 <ul
                     className="source-type-modal__list"
                     role="group"
                     aria-labelledby="source-type-dialog-label"
+                    align="center"
                 >
                     {displayConfirmation(serverResponse)}
                 </ul>
-                <div className="source-type-modal__controls">
+                <div className="source-type-modal__controls" style={{display: 'flex', justifyContent: 'center'}}>
                     <Button
                         value="Okay"
                         className="source-type-modal__control-btn source-type-modal__control-btn--apply"
                         onClick={handleOnClick}
                         style={{
                             background: "#52524a",
-                            marginRight: "16px",
                             padding: "12px 20px",
                         }}
                     >Okay

client/src/components/EditTransactionsPage.jsx

@@ -1,19 +1,30 @@
-import React, { useContext, useState, useEffect } from 'react';
-import { AppContext } from "../context/AppContext.jsx";
-import { useForm, Controller } from 'react-hook-form';
+import React, {useContext, useState, useEffect} from 'react';
+import {AppContext} from "../context/AppContext.jsx";
+import {useForm, Controller} from 'react-hook-form';
 import Transaction from "../models/Transaction.js";
 import User from "../models/User.js";
 import BackButton from "./BackButton.jsx";
 import '../App.css';
-import { Button } from "@chakra-ui/react";
+import {Button} from "@chakra-ui/react";
 import EditTransactionsJoyride from './EditTransactionJoyride.jsx';
 import HamburgerMenuEdit from "./HamburgerMenuEdit.jsx";
+<<<<<<< HEAD
+import {Spinner} from "react-bootstrap";
+=======
 import HamburgerMenu from './HamburgerMenu.jsx';
 import { Spinner } from "react-bootstrap";
+>>>>>>> bfe7ccff7d6479095698cec9640f24be6bd0a674
 import HomeButton from './HomeButton.jsx';
 
 const EditTransactionsPage = () => {
-    const { user, setUser, setScreen, setServerResponse, runEditTransactionsTour, setRunEditTransactionsTour } = useContext(AppContext);
+    const {
+        user,
+        setUser,
+        setScreen,
+        setServerResponse,
+        runEditTransactionsTour,
+        setRunEditTransactionsTour
+    } = useContext(AppContext);
     const [transactions, setTransactions] = useState([]);
     const [categories, setCategories] = useState([]);
     const [deletedTransactions, setDeletedTransactions] = useState([]);
@@ -28,7 +39,13 @@ const EditTransactionsPage = () => {
         }
     }, [user])
 
-    const { control, handleSubmit, watch } = useForm(
+    useEffect(() => {
+        transactions.forEach(transaction => {
+            setValue()
+        })
+    }, [transactions])
+
+    const {control, handleSubmit, watch, setValue} = useForm(
         // {
         //     defaultValues: {
         //         vendor: 'Select Vendor',
@@ -52,7 +69,7 @@ const EditTransactionsPage = () => {
             const updatedTransaction = new Transaction(transaction);
             updatedTransaction.vendor = data[`vendor-${index}`];
             updatedTransaction.amount = parseFloat(data[`amount-${index}`]);
-            updatedTransaction.category = { name: data[`category-${index}`] };
+            updatedTransaction.category = {name: data[`category-${index}`]};
             updatedTransaction.createdAt = data[`date-${index}`];
             return updatedTransaction;
         });
@@ -97,6 +114,32 @@ const EditTransactionsPage = () => {
 
     return (
         <>
+<<<<<<< HEAD
+            <HamburgerMenuEdit/>
+            <EditTransactionsJoyride/>
+            <Spinner/>
+            <HomeButton onClick={() => setScreen('home')}/>
+            <div style={{marginTop: '3rem'}}>
+                <form onSubmit={handleSubmit(onSubmit)} data-tour="edit-transactions-form">
+                    <div className="edit-buttons">
+                        <div className="edit-left-button">
+                            <Button type="button" className="custom-button"
+                                    style={{backgroundColor: '#415a77', width: "80px", padding: "12px 20px"}}
+                                    onClick={handleCancel} data-tour="cancel-button">Cancel</Button>
+                            <Button type="button" className="custom-button"
+                                    style={{backgroundColor: '#415a77', width: "80px", padding: "12px 20px"}}
+                                    onClick={handleCancel}>Back</Button>
+                        </div>
+                        <div className="edit-right-button">
+                            <Button type="submit" className="custom-button"
+                                    style={{backgroundColor: '#415a77', width: "130px", padding: "12px 20px"}}
+                                    data-tour="save-changes">Save Changes</Button>
+                            <Button type="button" className="custom-button"
+                                    style={{backgroundColor: '#415a77', width: "130px", padding: "12px 20px"}}
+                                    onClick={startTour}>Start Tour</Button>
+
+                        </div>
+=======
         <HamburgerMenu/>
         <EditTransactionsJoyride />
         <Spinner />
@@ -111,53 +154,55 @@ const EditTransactionsPage = () => {
                     <div className="edit-right-button">
                         <Button type="submit" className="custom-button" style={{backgroundColor: '#415a77',width:"130px", padding: "12px 20px"}} data-tour="save-changes">Save Changes</Button>
                         <Button type="button" className="custom-button" style={{backgroundColor: '#415a77',width:"130px", padding: "12px 20px"}} onClick={startTour}>Start Tour</Button>
+>>>>>>> bfe7ccff7d6479095698cec9640f24be6bd0a674
                     </div>
-                </div>
-                <h1 style={{textAlign: 'center', margin: '0px 0 30px 0'}}><b>Edit Transactions</b></h1>
-
-                <table className="edit-table" style={{width: '100%', borderCollapse: 'collapse'}} data-tour="transaction-list">
-                    <thead>
+                    <h1 style={{textAlign: 'center', margin: '0px 0 30px 0'}}><b>Edit Transactions</b></h1>
+
+                    <table className="edit-table" style={{width: '100%', borderCollapse: 'collapse'}}
+                           data-tour="transaction-list">
+                        <thead>
                         <tr>
                             <th>Date</th>
                             <th>Vendor</th>
                             <th>Amount</th>
                             <th>Category</th>
                             <th></th>
                         </tr>
-                    </thead>
-                    <tbody>
+                        </thead>
+                        <tbody>
                         {transactions.map((transaction, index) => (
                             <tr key={transaction.transactionId}>
                                 <td>
                                     <Controller
                                         name={`date-${index}`}
                                         control={control}
                                         defaultValue={transaction.createdAt}
-                                        render={({ field }) => <input type="date" {...field} data-tour="date-field" />}
+                                        render={({field}) => <input type="date" {...field} data-tour="date-field"/>}
                                     />
                                 </td>
                                 <td>
                                     <Controller
                                         name={`vendor-${index}`}
                                         control={control}
                                         defaultValue={transaction.vendor}
-                                        render={({ field }) => <input type="text" {...field} data-tour="vendor-field" />}
+                                        render={({field}) => <input type="text" {...field} data-tour="vendor-field"/>}
                                     />
                                 </td>
                                 <td>
                                     <Controller
                                         name={`amount-${index}`}
                                         control={control}
                                         defaultValue={transaction.amount}
-                                        render={({ field }) => <input type="number" step="0.01" {...field} data-tour="amount-field" />}
+                                        render={({field}) => <input type="number" step="0.01" {...field}
+                                                                    data-tour="amount-field"/>}
                                     />
                                 </td>
                                 <td>
                                     <Controller
                                         name={`category-${index}`}
                                         control={control}
                                         defaultValue={transaction.category_name || "Select Category"}
-                                        render={({ field }) => (
+                                        render={({field}) => (
                                             <select {...field} data-tour="category-field">
                                                 {categories.map(category => (
                                                     <option key={category} value={category}>
@@ -180,11 +225,11 @@ const EditTransactionsPage = () => {
                                 </td>
                             </tr>
                         ))}
-                    </tbody>
-                </table>
-            </form>
+                        </tbody>
+                    </table>
+                </form>
             </div>
-        </>    
+        </>
     );
 };
 

client/src/components/ExpensesTable.jsx

@@ -45,7 +45,6 @@ const ExpensesForm = () => {
             const listOfValues = formData.returnNonEmptyValues();
 
             listOfValues.forEach(([key, value]) => {
-                setValue(key, value);
                 if(key.toLowerCase().includes("category")) {
                     const valueFromOCR = createOption(value)
                     setCategories(categories => [...categories, valueFromOCR])
@@ -54,6 +53,10 @@ const ExpensesForm = () => {
                     const valueFromOCR = createOption(value)
                     setVendors(vendors => [...vendors, valueFromOCR])
                     setValue('vendor', valueFromOCR);
+                } else if (key.toLowerCase().includes("date")){
+                    setValue("date", value)
+                } else {
+                    setValue(key, value);
                 }
             });
             setFormData(null);

client/src/components/HamburgerMenu.jsx

@@ -54,6 +54,7 @@ const HamburgerMenu = () => {
             // const result = await userToDelete.deleteUser(user.user_id)
             await userToDelete.deleteUser(user.user_id)
             localStorage.removeItem('user')
+            localStorage.clear()
 
             // setServerResponse(result)
             resetAppState()

client/src/components/OCRModal.jsx

@@ -7,7 +7,7 @@ import FormData from "../models/FormData.js"
 const OCRModal = () => {
     Modal.setAppElement("#root");
     const firstInputRef = useRef();
-    const {ocrData, user, setFormData, ocrModalOpen, setOcrModalOpen} = useContext(AppContext);
+    const {ocrData, user, setUser, setScreen, setFormData, ocrModalOpen, setOcrModalOpen, setServerResponse} = useContext(AppContext);
 
     const toggleModalOpenState = (state) => {
         setOcrModalOpen(!state);
@@ -29,14 +29,26 @@ const OCRModal = () => {
                 setFormData(getFormData())
                 break;
             case "submit":
-
                 if(ocrData.isNotComplete()){
                     alert("Data not complete. Switching to edit mode");
                     setFormData(getFormData())
                     break;
                 }
                 if (!ocrData.error) {
-                    submitTransaction(ocrData);
+                    let result;
+                    submitTransaction(ocrData)
+                        .then(response => {
+                            if(response) {
+                                setUser(response)
+                                localStorage.setItem('user', JSON.stringify(response))
+                                setServerResponse("New Transaction Added!")
+                            }
+                        });
+                    if(result) {
+                        setUser(result)
+                        localStorage.setItem('user', result)
+                        setServerResponse("New Transaction Added!")
+                    }
                 } else {
                     // Handle error case, maybe close the modal and ask user to try again
                     alert(ocrData.message);
@@ -45,7 +57,6 @@ const OCRModal = () => {
             case "tryAgain":
                 // Add this case to handle "try again" for error scenarios
                 setScreen("camera");
-
                 break;
         }
         toggleModalOpenState(ocrModalOpen);

client/src/models/Transaction.js

@@ -19,8 +19,8 @@ class Transaction {
         } else {
             this.transactionId = data.transaction_id || this.#generateUUID();
             this.createdAt = data.created_at || null;
-            this.amount = (data instanceof Object ? data?.value : data.amount) || null;
-            this.vendor = (data instanceof Object ? data?.value : data.vendor) || null;
+            this.amount = data.amount || null;
+            this.vendor = data.vendor || null;
             this.category_id = data.category_id || null;
             this.category_name = data.category_name || null;
             this.pictureId = data.pictureId || null;
@@ -39,7 +39,7 @@ class Transaction {
     }
 
     isNotComplete(){
-        return this.vendor === null || this.amount === null || this.createdAt === null || this.category_id === null || this.category_name === null
+        return this.vendor === null || this.amount === null || this.createdAt === null || this.category_name === null
     }
 
     serialize() {

docker-compose.yml

@@ -9,6 +9,6 @@ services:
 
   backend-server:
     build:
-      context: ../../SimpliTrac/functions
+      context: ../SimpliTrac/functions
     ports:
       - "5001:5001"