Merge pull request #22 from Robert-M-Lucas/dev-SCRUM-64

Dev scrum 64

.run/Emulator Deploy.run.xml

@@ -0,0 +1,19 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Emulator Deploy" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="firebase emulators:start --project=budget-19" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
+    <option name="SCRIPT_PATH" value="" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="/usr/bin/zsh" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="false" />
+    <option name="EXECUTE_SCRIPT_FILE" value="false" />
+    <envs>
+      <env name="FIREBASE_AUTH_EMULATOR_HOST" value="127.0.0.1" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>

.run/Emulator Run Dev.run.xml

@@ -0,0 +1,7 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Emulator Run Dev" type="CompoundRunConfigurationType">
+    <toRun name="dev" type="js.build_tools.npm" />
+    <toRun name="Emulator Deploy" type="ShConfigurationType" />
+    <method v="2" />
+  </configuration>
+</component>

firebase.json

@@ -20,6 +20,12 @@
     "ui": {
       "enabled": true
     },
-    "singleProjectMode": true
+    "singleProjectMode": true,
+    "auth": {
+      "port": 9099
+    },
+    "firestore": {
+      "port": 8080
+    }
   }
 }

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@types/papaparse": "^5.3.14",
     "bootstrap": "^5.3.3",
-    "firebase": "^10.6.0",
+    "firebase": "^10.11.0",
     "papaparse": "^5.4.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
@@ -23,6 +23,7 @@
     "sass": "^1.72.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
 import "../assets/css/Header.css"
+import {Link} from "react-router-dom";
 
 interface Props {
     user?: string
@@ -18,15 +19,17 @@ export function Header({user} : Props) {
                     </a>
 
                 {/*Pages*/}
-                <ul className="header-nav">
+        <ul className="header-nav">
 
-                    {/*Links to dashboard with tiles*/}
-                    <li><a href="/dash" className="header-item">Dashboard</a></li>
+            {/*Links to dashboard with tiles*/}
+            <li><Link to="/dash" className="header-item">Dashboard</Link></li>
 
-                    {/*Links to transactions page with table of expenses*/}
-                    <li><a href="/transactions" className="header-item">Transactions</a></li>
+            {/*Links to transactions page with table of expenses*/}
+            <li><Link to="/transactions" className="header-item">Transactions</Link></li>
 
-                    <li>{user}</li>
-                </ul>
+            <li><Link to="/test" className="header-item">Firestore Test</Link></li>
+
+            <li>{user}</li>
+        </ul>
     </header>;
 }

src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './utils/firebase.ts'
+import './utils/firestore.ts'
 import {RouterProvider} from "react-router-dom";
 import {router} from "./router.tsx";
 

src/pages/test firestore/TestFirestore.tsx

@@ -0,0 +1,110 @@
+import {FullscreenCenter} from "../../components/FullscreenCenter.tsx";
+import {auth} from "../../utils/firebase.ts";
+import {useState} from "react";
+import {
+    deleteTransaction,
+    getTransactionsFilterOrderBy,
+    overwriteTransaction,
+    Transaction,
+    writeNewTransaction
+} from "../../utils/firestore.ts";
+import {faker, fakerEN_GB} from "@faker-js/faker";
+import {getCurrentBalance} from "../../utils/transaction_utils.ts";
+import {signInWithGoogle} from "../../utils/authentication.ts";
+import {Header} from "../../components/Header.tsx";
+import { orderBy } from "firebase/firestore";
+
+function writeSampleData() {
+    if (auth.currentUser === null) {
+        console.log("No User");
+        return;
+    }
+
+    console.log("Adding sample data");
+    const t = new Transaction(
+        fakerEN_GB.location.streetAddress() + ", " + fakerEN_GB.location.city() + ", " + fakerEN_GB.location.zipCode(),
+        parseFloat(faker.finance.amount({min: -1000, max: 1000})),
+        faker.word.noun(),
+        faker.finance.currency().code,
+        faker.date.past().valueOf(),
+        faker.lorem.sentence(),
+        faker.internet.emoji(),
+        faker.word.noun(),
+        faker.lorem.sentence(),
+        auth.currentUser.uid
+    );
+
+    writeNewTransaction(auth.currentUser, t).then((t) => {console.log("Added sample data:"); console.log(t);})
+}
+
+
+export  function TestFirestorePage() {
+    const [authResolved, setAuthResolved] = useState(false);
+    const [transactions, setTransactions] = useState<Transaction[]>([]);
+    const [balance, setBalance] = useState(0);
+    const [update ,setUpdate] = useState(0);
+
+    if (!authResolved) {
+        auth.authStateReady().then(() => setAuthResolved(true));
+        return <>
+            <FullscreenCenter>
+                <div className="text-center">
+                    <h1>Waiting for Auth</h1>
+                </div>
+            </FullscreenCenter>
+        </>;
+    }
+
+    if (auth.currentUser === null) {
+        return <>
+                <Header/>
+                <FullscreenCenter>
+                    <div className="text-center">
+                        <h1>Not Logged In</h1>
+                        <button type="button" className="login-with-google-btn" onClick={signInWithGoogle}>
+                            Sign in with Google
+                        </button>
+                    </div>
+                </FullscreenCenter>
+        </>;
+    }
+
+    getTransactionsFilterOrderBy(auth.currentUser, orderBy("dateTime", "desc")).then((t) => setTransactions(t));
+    getCurrentBalance(auth.currentUser).then((b) => setBalance(b));
+
+    return (
+        <>
+            <Header/>
+            <div className="text-center">
+                <h1>Logged In - {auth.currentUser.uid} - {auth.currentUser.displayName}</h1>
+                <button type="button" className="login-with-google-btn" onClick={signInWithGoogle}>
+                    Sign in with Google
+                </button>
+            </div>
+            <button onClick={() => {
+                writeSampleData();
+                setUpdate(update + 1);
+            }}>Add Sample Transaction
+            </button>
+            <p>
+                Balance: {balance}
+            </p>
+            <p>
+                Transactions: <br/>
+            </p>
+            {
+                transactions.map((t) => <div className="mb-4" key={t.forceGetDocName()}>
+                    <p className="m-0">{new Date(t.dateTime).toISOString()}</p>
+                    <textarea readOnly={true} style={{width: "100%", height: "320px"}} value={JSON.stringify(t, null, 4)}/>
+                    <button onClick={() => {deleteTransaction(t.forceGetDocName()).then(() => setUpdate(update + 1))}}>Delete</button>
+                    <button onClick={() => {
+                        if (auth.currentUser != null) {
+                            t.dateTime = new Date(Date.now()).valueOf();
+                            overwriteTransaction(auth.currentUser, t.forceGetDocName(), t).then(() => setUpdate(update + 1));
+                        }
+                    }}>Set Time To Now</button>
+                </div>
+            )}
+        </>
+    )
+}

src/router.tsx

@@ -6,6 +6,7 @@ import {SampleSidebar} from "./pages/samples/sidebar/SampleSidebar.tsx";
 import {SampleSidebarHeader} from "./pages/samples/sidebar_header/SampleSidebarHeader.tsx";
 import {SampleModal} from "./pages/samples/modal/SampleModal.tsx";
 import GraphDashboard from "./pages/Graphs/Graphs.tsx";
+import {TestFirestorePage} from "./pages/test firestore/TestFirestore.tsx";
 
 // ? Routing - see https://reactrouter.com/en/main
 
@@ -143,4 +144,8 @@ export const router = createBrowserRouter([
         path: "/sample_modal",
         element: <SampleModal/>,
     },
+    {
+        path: "/test",
+        element: <TestFirestorePage/>,
+    },
 ]);

src/utils/firebase.ts

@@ -1,7 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
-import { getAuth } from "firebase/auth";
+import {connectAuthEmulator, getAuth } from "firebase/auth";
+import {connectFirestoreEmulator, getFirestore } from "firebase/firestore";
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -16,5 +16,12 @@ const firebaseConfig = {
 
 // Initialize Firebase
 export const app = initializeApp(firebaseConfig);
-export const analytics = getAnalytics(app);
-export const auth = getAuth(app); // Initialize Firebase Authentication
+// export const analytics = getAnalytics(app);
+export const auth = getAuth(app); // Initialize Firebase Authentication
+export const db = getFirestore(app);
+
+if (import.meta.env.DEV) {
+    connectAuthEmulator(auth, "http://localhost:9099");
+    connectFirestoreEmulator(db, "localhost", 8080);
+}
+