From 1c2ecc3de5223dfc9b544b0b02cb2d085e72dfc1 Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Mon, 22 Jul 2024 23:04:24 +0800
Subject: [PATCH 01/13] added some gmap api thing?

---
 .env                        |  1 +
 package-lock.json           | 22 +++++++++++++++++++++-
 package.json                |  1 +
 src/components/NavBar.tsx   | 11 ++++++++++-
 src/functions/getCusLoc.tsx | 24 ++++++++++++++++++++++++
 5 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 .env
 create mode 100644 src/functions/getCusLoc.tsx

diff --git a/.env b/.env
new file mode 100644
index 0000000..db64467
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+GOOGLE_MAPS_API_KEY=AIzaSyDCs25ivx55QjPoixKSzGreSw-feBeJVms
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ff6936c..cf01723 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@anatoliygatt/heart-switch": "^1.0.13",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@vis.gl/react-google-maps": "^1.1.0",
         "bootstrap": "^5.3.3",
         "firebase": "^10.12.2",
         "react": "^18.2.0",
@@ -2255,6 +2256,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/google.maps": {
+      "version": "3.55.11",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.11.tgz",
+      "integrity": "sha512-F3VuPtjKj4UGuyym75pqmgPBOHbT/i7I6/D+4DdtSzbeu2aWZG1ENwpbZOd46uO+PSAz9flJEhxxi+b4MVb4gQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.12.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
@@ -2518,6 +2525,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@vis.gl/react-google-maps": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vis.gl/react-google-maps/-/react-google-maps-1.1.0.tgz",
+      "integrity": "sha512-MxDIhCfPRzTQY1c6sS0GFg8Ukl40o13fkIKEaCN0cR1BIrV4LPo+EuCov9WElbe0bOo8MApx5qAbqBKOmLQyKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/google.maps": "^3.54.10",
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.0.tgz",
@@ -3304,7 +3325,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
diff --git a/package.json b/package.json
index 87283d9..8d74193 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@anatoliygatt/heart-switch": "^1.0.13",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@vis.gl/react-google-maps": "^1.1.0",
     "bootstrap": "^5.3.3",
     "firebase": "^10.12.2",
     "react": "^18.2.0",
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 0e584da..a14e8dc 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { auth } from "../config/firebase";
 import { Button, Container, Nav, Navbar } from "react-bootstrap";
 import { useAuth } from "../context/Auth";
+import { getCusLoc } from "../functions/getCusLoc";
 
 export function NavBar() {
   let navigate = useNavigate();
@@ -34,7 +35,15 @@ export function NavBar() {
           <>
             <Nav className="me-auto">
               {isConsumer ? (
-                <Nav.Link href="#favorites">Favorites</Nav.Link>
+                [
+                  <Nav.Link href="#favorites">Favorites</Nav.Link>,
+                  <Navbar.Text
+                    onClick={getCusLoc}
+                    style={{ cursor: "pointer" }}
+                  >
+                    Update Location
+                  </Navbar.Text>,
+                ]
               ) : (
                 <Nav.Link href="#dashboard">Dashboard</Nav.Link>
               )}
diff --git a/src/functions/getCusLoc.tsx b/src/functions/getCusLoc.tsx
new file mode 100644
index 0000000..e584de6
--- /dev/null
+++ b/src/functions/getCusLoc.tsx
@@ -0,0 +1,24 @@
+export function getCusLoc() {
+  console.log("I was triggered during componentDidMount");
+  return;
+}
+function handleLocationError(
+  browserHasGeolocation: boolean,
+  infoWindow: google.maps.InfoWindow,
+  pos: google.maps.LatLng
+) {
+  infoWindow.setPosition(pos);
+  infoWindow.setContent(
+    browserHasGeolocation
+      ? "Error: The Geolocation service failed."
+      : "Error: Your browser doesn't support geolocation."
+  );
+  infoWindow.open(map);
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;

From 9ecfee4949c48dbaa3baf2b09aa259b1910039cc Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Mon, 22 Jul 2024 23:13:30 +0800
Subject: [PATCH 02/13] gitignore

---
 .gitignore                  |  3 +++
 src/App.tsx                 |  1 +
 src/functions/getCusLoc.tsx | 22 +---------------------
 3 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0a8a538..44ecfe8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,6 @@ dist-ssr
 
 # Firebase Key
 ./src/config/*
+
+#gmap api key
+./env
diff --git a/src/App.tsx b/src/App.tsx
index 13588d5..5a45987 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { RegisterPage } from "./pages/Register";
 import { Dashboard } from "./pages/Dashboard";
 import { FavoritePage } from "./pages/Favorites";
 import { AuthContextProvider } from "./context/Auth";
+import { APIProvider } from "@vis.gl/react-google-maps";
 
 function App() {
   return (
diff --git a/src/functions/getCusLoc.tsx b/src/functions/getCusLoc.tsx
index e584de6..cd2d7d2 100644
--- a/src/functions/getCusLoc.tsx
+++ b/src/functions/getCusLoc.tsx
@@ -1,24 +1,4 @@
 export function getCusLoc() {
-  console.log("I was triggered during componentDidMount");
+  <APIProvider apiKey={API_KEY}></APIProvider>;
   return;
 }
-function handleLocationError(
-  browserHasGeolocation: boolean,
-  infoWindow: google.maps.InfoWindow,
-  pos: google.maps.LatLng
-) {
-  infoWindow.setPosition(pos);
-  infoWindow.setContent(
-    browserHasGeolocation
-      ? "Error: The Geolocation service failed."
-      : "Error: Your browser doesn't support geolocation."
-  );
-  infoWindow.open(map);
-}
-
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;

From f5770dd464ab2c40ccf9573720e3214cf2325fc9 Mon Sep 17 00:00:00 2001
From: wongwh2002 <86612232+wongwh2002@users.noreply.github.com>
Date: Wed, 24 Jul 2024 11:31:22 +0800
Subject: [PATCH 03/13] Delete .env

---
 .env | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .env

diff --git a/.env b/.env
deleted file mode 100644
index db64467..0000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-GOOGLE_MAPS_API_KEY=AIzaSyDCs25ivx55QjPoixKSzGreSw-feBeJVms
\ No newline at end of file

From 5ec553e1e90a9e47bf30e02019c3288eeb1d2dff Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Thu, 25 Jul 2024 15:12:00 +0800
Subject: [PATCH 04/13] google maps is decent now, have not improved the UI and
 integrate database

---
 .env                        |   1 +
 package-lock.json           | 184 ++++++++++++++++++++++++++++++++++++
 package.json                |   3 +
 src/App copy.tsx            |  29 ++++++
 src/App.tsx                 | 180 ++++++++++++++++++++++++++++++-----
 src/functions/getCusLoc.tsx |  26 ++++-
 6 files changed, 396 insertions(+), 27 deletions(-)
 create mode 100644 .env
 create mode 100644 src/App copy.tsx

diff --git a/.env b/.env
new file mode 100644
index 0000000..46256a7
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_REACT_APP_gmap=AIzaSyDCs25ivx55QjPoixKSzGreSw-feBeJVms
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index cf01723..d3bb527 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,11 @@
         "@anatoliygatt/heart-switch": "^1.0.13",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@react-google-maps/api": "^2.19.3",
         "@vis.gl/react-google-maps": "^1.1.0",
+        "axios": "^1.7.2",
         "bootstrap": "^5.3.3",
+        "dotenv": "^16.4.5",
         "firebase": "^10.12.2",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.3",
@@ -1649,6 +1652,25 @@
       "integrity": "sha512-zuWxyfXNbsKbm96HhXzainONPFqRcoZblQ++e9cAIGUuHfl2cFSBzW01jtesqWG/lqaUyX3H8O1y9oWboGNQBA==",
       "license": "Apache-2.0"
     },
+    "node_modules/@googlemaps/js-api-loader": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz",
+      "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
+    "node_modules/@googlemaps/markerclusterer": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz",
+      "integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "supercluster": "^8.0.1"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.15",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
@@ -1920,6 +1942,42 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
+    "node_modules/@react-google-maps/api": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.3.tgz",
+      "integrity": "sha512-jiLqvuOt5lOowkLeq7d077AByTyJp+s6hZVlLhlq7SBacBD37aUNpXBz2OsazfeR6Aw4a+9RRhAEjEFvrR1f5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@googlemaps/js-api-loader": "1.16.2",
+        "@googlemaps/markerclusterer": "2.5.3",
+        "@react-google-maps/infobox": "2.19.2",
+        "@react-google-maps/marker-clusterer": "2.19.2",
+        "@types/google.maps": "3.55.2",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@react-google-maps/api/node_modules/@types/google.maps": {
+      "version": "3.55.2",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.2.tgz",
+      "integrity": "sha512-JcTwzkxskR8DN/nnX96Pie3gGN3WHiPpuxzuQ9z3516o1bB243d8w8DHUJ8BohuzoT1o3HUFta2ns/mkZC8KRw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-google-maps/infobox": {
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.19.2.tgz",
+      "integrity": "sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg==",
+      "license": "MIT"
+    },
+    "node_modules/@react-google-maps/marker-clusterer": {
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz",
+      "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw==",
+      "license": "MIT"
+    },
     "node_modules/@remix-run/router": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
@@ -2637,6 +2695,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -2813,6 +2888,18 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2889,6 +2976,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2934,6 +3030,18 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.783",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz",
@@ -3521,6 +3629,40 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3926,6 +4068,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
+      "license": "ISC"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4037,6 +4185,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
@@ -4349,6 +4518,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4785,6 +4960,15 @@
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
       "license": "MIT"
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 8d74193..e511872 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,11 @@
     "@anatoliygatt/heart-switch": "^1.0.13",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@react-google-maps/api": "^2.19.3",
     "@vis.gl/react-google-maps": "^1.1.0",
+    "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
+    "dotenv": "^16.4.5",
     "firebase": "^10.12.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.3",
diff --git a/src/App copy.tsx b/src/App copy.tsx
new file mode 100644
index 0000000..13588d5
--- /dev/null
+++ b/src/App copy.tsx	
@@ -0,0 +1,29 @@
+// Pages
+import { HashRouter as Router, Routes, Route } from "react-router-dom";
+import { Home } from "./pages/Home";
+import { LoginPage } from "./pages/Login";
+import { Layout } from "./Layout";
+import { RegisterPage } from "./pages/Register";
+import { Dashboard } from "./pages/Dashboard";
+import { FavoritePage } from "./pages/Favorites";
+import { AuthContextProvider } from "./context/Auth";
+
+function App() {
+  return (
+    <AuthContextProvider>
+      <Router>
+        <Routes>
+          <Route element={<Layout />}>
+            <Route path="/" element={<Home />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/register" element={<RegisterPage />} />
+            <Route path="/favorites" element={<FavoritePage />} />
+          </Route>
+        </Routes>
+      </Router>
+    </AuthContextProvider>
+  );
+}
+
+export default App;
diff --git a/src/App.tsx b/src/App.tsx
index 5a45987..99b4589 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,29 +1,163 @@
-// Pages
-import { HashRouter as Router, Routes, Route } from "react-router-dom";
-import { Home } from "./pages/Home";
-import { LoginPage } from "./pages/Login";
-import { Layout } from "./Layout";
-import { RegisterPage } from "./pages/Register";
-import { Dashboard } from "./pages/Dashboard";
-import { FavoritePage } from "./pages/Favorites";
-import { AuthContextProvider } from "./context/Auth";
-import { APIProvider } from "@vis.gl/react-google-maps";
+import React, { Fragment, useState, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  GoogleMap,
+  useLoadScript,
+  MarkerF,
+  InfoWindowF,
+} from "@react-google-maps/api";
+
+const singaporeLoc = { lat: 1.3521, lng: 103.8198 };
+const gMapKey = import.meta.env.VITE_REACT_APP_gmap;
+const markers = [
+  {
+    id: 1,
+    name: "NUS",
+    position: { lat: 1.2966, lng: 103.77641 },
+  },
+  {
+    id: 2,
+    name: "Kent Ridge",
+    position: { lat: 1.2933, lng: 103.7831 },
+  },
+  {
+    id: 3,
+    name: "Botanic Garden",
+    position: { lat: 1.3223, lng: 103.8149 },
+  },
+];
 
 function App() {
+  const [cusLatitude, setLatitude] = useState(null);
+  const [cusLongitude, setLongitude] = useState(null);
+  const [currentPosition, setCurrentPosition] = useState(null);
+  const [cusPos, setCusPos] = useState(null);
+  const [activeMarker, setActiveMarker] = useState(null);
+  const [distances, setDistances] = useState([]);
+
+  const { isLoaded } = useLoadScript({
+    googleMapsApiKey: gMapKey,
+  });
+
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        setLatitude(latitude);
+        setLongitude(longitude);
+        setCurrentPosition({ lat: latitude, lng: longitude });
+        setCusPos({ lat: latitude, lng: longitude });
+      },
+      (error) => console.log(error),
+      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
+    );
+  }, []);
+
+  useEffect(() => {
+    if (distances) {
+      calculateDistances();
+    }
+  }, [currentPosition]);
+
+  const handleActiveMarker = (marker) => {
+    if (marker === activeMarker) {
+      return;
+    }
+    setActiveMarker(marker);
+    if (marker !== 0) {
+      setCurrentPosition(markers.find((m) => m.id === marker).position);
+    } else {
+      setCurrentPosition(cusPos);
+    }
+  };
+
+  const calculateDistances = async () => {
+    try {
+      const origins = [{ lat: cusLatitude, lng: cusLongitude }];
+      const destinations = markers.map((marker) => ({
+        lat: marker.position.lat,
+        lng: marker.position.lng,
+      }));
+
+      const service = new google.maps.DistanceMatrixService();
+      service.getDistanceMatrix(
+        {
+          origins: origins,
+          destinations: destinations,
+          travelMode: "DRIVING",
+        },
+        (response, status) => {
+          if (status === "OK") {
+            const results = response.rows[0].elements;
+            const updatedDistances = results.map((result, index) => ({
+              id: markers[index].id,
+              name: markers[index].name,
+              distance: result.distance.text,
+              position: markers[index].position,
+            }));
+            setDistances(updatedDistances);
+          }
+        }
+      );
+    } catch (error) {
+      console.error("Error fetching distance data:", error);
+    }
+    console.log(distances);
+  };
+
   return (
-    <AuthContextProvider>
-      <Router>
-        <Routes>
-          <Route element={<Layout />}>
-            <Route path="/" element={<Home />} />
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/dashboard" element={<Dashboard />} />
-            <Route path="/register" element={<RegisterPage />} />
-            <Route path="/favorites" element={<FavoritePage />} />
-          </Route>
-        </Routes>
-      </Router>
-    </AuthContextProvider>
+    <Fragment>
+      <div className="container">
+        <h1 className="text-center">Location!</h1>
+        <div style={{ width: "100%", height: "90vh" }}>
+          {isLoaded ? (
+            <GoogleMap
+              center={currentPosition || cusPos}
+              zoom={13}
+              onClick={() => setActiveMarker(null)}
+              mapContainerStyle={{ width: "100%", height: "90vh" }}
+            >
+              {cusPos && (
+                <MarkerF
+                  key={0}
+                  position={cusPos}
+                  onClick={() => handleActiveMarker(0)}
+                  icon={{
+                    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
+                    size: new google.maps.Size(20, 32),
+                    origin: new google.maps.Point(0, 0),
+                    anchor: new google.maps.Point(0, 32),
+                  }}
+                >
+                  {activeMarker === 0 && (
+                    <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
+                      <div>Current location</div>
+                    </InfoWindowF>
+                  )}
+                </MarkerF>
+              )}
+              {distances.map(({ id, name, position, distance }) => (
+                <MarkerF
+                  key={id}
+                  position={position}
+                  onClick={() => handleActiveMarker(id)}
+                >
+                  {activeMarker === id && (
+                    <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
+                      <div>
+                        <strong>{name}</strong> <br /> Distance: {distance}
+                      </div>
+                    </InfoWindowF>
+                  )}
+                </MarkerF>
+              ))}
+            </GoogleMap>
+          ) : (
+            <div>Loading...</div>
+          )}
+        </div>
+      </div>
+    </Fragment>
   );
 }
 
diff --git a/src/functions/getCusLoc.tsx b/src/functions/getCusLoc.tsx
index cd2d7d2..edabbf4 100644
--- a/src/functions/getCusLoc.tsx
+++ b/src/functions/getCusLoc.tsx
@@ -1,4 +1,22 @@
-export function getCusLoc() {
-  <APIProvider apiKey={API_KEY}></APIProvider>;
-  return;
-}
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { APIProvider, Map } from "@vis.gl/react-google-maps";
+
+const App = () => (
+  <APIProvider apiKey={`${import.meta.env.VITE_REACT_APP_gmap}`}>
+    <Map
+      style={{ width: "100vw", height: "100vh" }}
+      defaultCenter={{ lat: 22.54992, lng: 0 }}
+      defaultZoom={3}
+      gestureHandling={"greedy"}
+      disableDefaultUI={true}
+    />
+  </APIProvider>
+);
+
+const root = createRoot(document.querySelector("#app"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

From 29d29c25a4eb23d090f5001c65f462263443c2a7 Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Thu, 25 Jul 2024 16:45:42 +0800
Subject: [PATCH 05/13] comments

---
 src/App.tsx | 41 +++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 99b4589..b394cf1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import {
 } from "@react-google-maps/api";
 
 const singaporeLoc = { lat: 1.3521, lng: 103.8198 };
-const gMapKey = import.meta.env.VITE_REACT_APP_gmap;
+const gMapKey = import.meta.env.VITE_REACT_APP_gmap; //gmap api key
 const markers = [
   {
     id: 1,
@@ -25,7 +25,7 @@ const markers = [
     name: "Botanic Garden",
     position: { lat: 1.3223, lng: 103.8149 },
   },
-];
+]; //need replace with db data
 
 function App() {
   const [cusLatitude, setLatitude] = useState(null);
@@ -72,6 +72,7 @@ function App() {
   };
 
   const calculateDistances = async () => {
+    //calc distance of customer to every other location
     try {
       const origins = [{ lat: cusLatitude, lng: cusLongitude }];
       const destinations = markers.map((marker) => ({
@@ -129,28 +130,32 @@ function App() {
                     anchor: new google.maps.Point(0, 32),
                   }}
                 >
-                  {activeMarker === 0 && (
+                  {activeMarker === 0 && ( //show customer loc
                     <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
                       <div>Current location</div>
                     </InfoWindowF>
                   )}
                 </MarkerF>
               )}
-              {distances.map(({ id, name, position, distance }) => (
-                <MarkerF
-                  key={id}
-                  position={position}
-                  onClick={() => handleActiveMarker(id)}
-                >
-                  {activeMarker === id && (
-                    <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
-                      <div>
-                        <strong>{name}</strong> <br /> Distance: {distance}
-                      </div>
-                    </InfoWindowF>
-                  )}
-                </MarkerF>
-              ))}
+              {distances.map(
+                (
+                  { id, name, position, distance } //show the rest loc
+                ) => (
+                  <MarkerF
+                    key={id}
+                    position={position}
+                    onClick={() => handleActiveMarker(id)}
+                  >
+                    {activeMarker === id && (
+                      <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
+                        <div>
+                          <strong>{name}</strong> <br /> Distance: {distance}
+                        </div>
+                      </InfoWindowF>
+                    )}
+                  </MarkerF>
+                )
+              )}
             </GoogleMap>
           ) : (
             <div>Loading...</div>

From 89ccf46c80521cf868f03a2f855922b9150f0745 Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Fri, 26 Jul 2024 00:43:47 +0800
Subject: [PATCH 06/13] created context, move mapcomponent out, markers
 currently doesnt work on map?

---
 src/App.tsx                     | 187 +++++---------------------------
 src/components/MapComponent.tsx | 144 ++++++++++++++++++++++++
 src/context/Location.tsx        |  49 +++++++++
 src/functions/getCusLoc.tsx     |  22 ----
 4 files changed, 220 insertions(+), 182 deletions(-)
 create mode 100644 src/components/MapComponent.tsx
 create mode 100644 src/context/Location.tsx
 delete mode 100644 src/functions/getCusLoc.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b394cf1..3fbb8c1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,168 +1,35 @@
-import React, { Fragment, useState, useEffect } from "react";
+import React from "react";
 import { createRoot } from "react-dom/client";
-import {
-  GoogleMap,
-  useLoadScript,
-  MarkerF,
-  InfoWindowF,
-} from "@react-google-maps/api";
-
-const singaporeLoc = { lat: 1.3521, lng: 103.8198 };
-const gMapKey = import.meta.env.VITE_REACT_APP_gmap; //gmap api key
-const markers = [
-  {
-    id: 1,
-    name: "NUS",
-    position: { lat: 1.2966, lng: 103.77641 },
-  },
-  {
-    id: 2,
-    name: "Kent Ridge",
-    position: { lat: 1.2933, lng: 103.7831 },
-  },
-  {
-    id: 3,
-    name: "Botanic Garden",
-    position: { lat: 1.3223, lng: 103.8149 },
-  },
-]; //need replace with db data
+import MapComponent from "./components/MapComponent";
+import { LocationContextProvider } from "./context/Location";
 
 function App() {
-  const [cusLatitude, setLatitude] = useState(null);
-  const [cusLongitude, setLongitude] = useState(null);
-  const [currentPosition, setCurrentPosition] = useState(null);
-  const [cusPos, setCusPos] = useState(null);
-  const [activeMarker, setActiveMarker] = useState(null);
-  const [distances, setDistances] = useState([]);
-
-  const { isLoaded } = useLoadScript({
-    googleMapsApiKey: gMapKey,
-  });
-
-  useEffect(() => {
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        const { latitude, longitude } = position.coords;
-        setLatitude(latitude);
-        setLongitude(longitude);
-        setCurrentPosition({ lat: latitude, lng: longitude });
-        setCusPos({ lat: latitude, lng: longitude });
-      },
-      (error) => console.log(error),
-      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
-    );
-  }, []);
-
-  useEffect(() => {
-    if (distances) {
-      calculateDistances();
-    }
-  }, [currentPosition]);
-
-  const handleActiveMarker = (marker) => {
-    if (marker === activeMarker) {
-      return;
-    }
-    setActiveMarker(marker);
-    if (marker !== 0) {
-      setCurrentPosition(markers.find((m) => m.id === marker).position);
-    } else {
-      setCurrentPosition(cusPos);
-    }
-  };
-
-  const calculateDistances = async () => {
-    //calc distance of customer to every other location
-    try {
-      const origins = [{ lat: cusLatitude, lng: cusLongitude }];
-      const destinations = markers.map((marker) => ({
-        lat: marker.position.lat,
-        lng: marker.position.lng,
-      }));
-
-      const service = new google.maps.DistanceMatrixService();
-      service.getDistanceMatrix(
-        {
-          origins: origins,
-          destinations: destinations,
-          travelMode: "DRIVING",
-        },
-        (response, status) => {
-          if (status === "OK") {
-            const results = response.rows[0].elements;
-            const updatedDistances = results.map((result, index) => ({
-              id: markers[index].id,
-              name: markers[index].name,
-              distance: result.distance.text,
-              position: markers[index].position,
-            }));
-            setDistances(updatedDistances);
-          }
-        }
-      );
-    } catch (error) {
-      console.error("Error fetching distance data:", error);
-    }
-    console.log(distances);
-  };
+  // Initial locations data
+  const initialMarkers = [
+    {
+      id: 1,
+      name: "NUS",
+      distance: "",
+      position: { lat: 1.2966, lng: 103.77641 },
+    },
+    {
+      id: 2,
+      name: "Kent Ridge",
+      distance: "",
+      position: { lat: 1.2933, lng: 103.7831 },
+    },
+    {
+      id: 3,
+      name: "Botanic Garden",
+      distance: "",
+      position: { lat: 1.3223, lng: 103.8149 },
+    },
+  ];
 
   return (
-    <Fragment>
-      <div className="container">
-        <h1 className="text-center">Location!</h1>
-        <div style={{ width: "100%", height: "90vh" }}>
-          {isLoaded ? (
-            <GoogleMap
-              center={currentPosition || cusPos}
-              zoom={13}
-              onClick={() => setActiveMarker(null)}
-              mapContainerStyle={{ width: "100%", height: "90vh" }}
-            >
-              {cusPos && (
-                <MarkerF
-                  key={0}
-                  position={cusPos}
-                  onClick={() => handleActiveMarker(0)}
-                  icon={{
-                    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
-                    size: new google.maps.Size(20, 32),
-                    origin: new google.maps.Point(0, 0),
-                    anchor: new google.maps.Point(0, 32),
-                  }}
-                >
-                  {activeMarker === 0 && ( //show customer loc
-                    <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
-                      <div>Current location</div>
-                    </InfoWindowF>
-                  )}
-                </MarkerF>
-              )}
-              {distances.map(
-                (
-                  { id, name, position, distance } //show the rest loc
-                ) => (
-                  <MarkerF
-                    key={id}
-                    position={position}
-                    onClick={() => handleActiveMarker(id)}
-                  >
-                    {activeMarker === id && (
-                      <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
-                        <div>
-                          <strong>{name}</strong> <br /> Distance: {distance}
-                        </div>
-                      </InfoWindowF>
-                    )}
-                  </MarkerF>
-                )
-              )}
-            </GoogleMap>
-          ) : (
-            <div>Loading...</div>
-          )}
-        </div>
-      </div>
-    </Fragment>
+    <LocationContextProvider>
+      <MapComponent />
+    </LocationContextProvider>
   );
 }
 
diff --git a/src/components/MapComponent.tsx b/src/components/MapComponent.tsx
new file mode 100644
index 0000000..5a51a0c
--- /dev/null
+++ b/src/components/MapComponent.tsx
@@ -0,0 +1,144 @@
+import React, { useState, useEffect, Fragment } from "react";
+import {
+  GoogleMap,
+  useLoadScript,
+  MarkerF,
+  InfoWindowF,
+} from "@react-google-maps/api";
+import { useLocationContext } from "../context/Location";
+
+// Google Maps API key from environment variable
+const gMapKey = import.meta.env.VITE_REACT_APP_gmap;
+const singaporeLoc = { lat: 1.3521, lng: 103.8198 };
+
+const MapComponent: React.FC = () => {
+  // State for customer position and active marker
+  const [cusPos, setCusPos] = useState<{ lat: number; lng: number } | null>(
+    null
+  );
+  const [currentPosition, setCurrentPosition] = useState<{
+    lat: number;
+    lng: number;
+  } | null>(null);
+  const [activeMarker, setActiveMarker] = useState<number | null>(null);
+
+  // State for locations from context
+  const { locations, setLocations } = useLocationContext();
+
+  // Load the Google Maps script
+  const { isLoaded } = useLoadScript({ googleMapsApiKey: gMapKey });
+
+  // Fetch user's current position on component mount
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        setCusPos({ lat: latitude, lng: longitude });
+        setCurrentPosition({ lat: latitude, lng: longitude });
+      },
+      (error) => console.error(error),
+      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
+    );
+  }, []);
+
+  // Calculate distances when customer position is set and map is loaded
+  useEffect(() => {
+    if (cusPos && isLoaded) {
+      calculateDistances();
+    }
+  }, [cusPos, isLoaded]);
+
+  // Handle marker click and set the active marker
+  const handleActiveMarker = (markerId: number | null) => {
+    setActiveMarker(markerId);
+    if (markerId !== null) {
+      const marker = locations.find((loc) => loc.id === markerId);
+      if (marker) setCurrentPosition(marker.position);
+    } else {
+      setCurrentPosition(cusPos);
+    }
+  };
+
+  // Calculate distances between customer and other locations
+  const calculateDistances = async () => {
+    if (!cusPos) return;
+    const service = new google.maps.DistanceMatrixService();
+    const origins = [{ lat: cusPos.lat, lng: cusPos.lng }];
+    const destinations = locations.map((marker) => marker.position);
+
+    service.getDistanceMatrix(
+      {
+        origins: origins,
+        destinations: destinations,
+        travelMode: "DRIVING",
+      },
+      (response, status) => {
+        if (status === "OK") {
+          const results = response.rows[0].elements;
+          const updatedLocations = results.map((result, index) => ({
+            ...locations[index],
+            distance: result.distance.text,
+          }));
+          setLocations(updatedLocations);
+        }
+      }
+    );
+  };
+
+  return (
+    <Fragment>
+      <div className="container">
+        <h1 className="text-center">Location!</h1>
+        <div style={{ width: "100%", height: "90vh" }}>
+          {isLoaded ? (
+            <GoogleMap
+              center={currentPosition || singaporeLoc}
+              zoom={13}
+              onClick={() => handleActiveMarker(null)}
+              mapContainerStyle={{ width: "100%", height: "90vh" }}
+            >
+              {cusPos && (
+                <MarkerF
+                  key={0}
+                  position={cusPos}
+                  onClick={() => handleActiveMarker(0)}
+                  icon={{
+                    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
+                    size: new google.maps.Size(20, 32),
+                    origin: new google.maps.Point(0, 0),
+                    anchor: new google.maps.Point(0, 32),
+                  }}
+                >
+                  {activeMarker === 0 && (
+                    <InfoWindowF onCloseClick={() => handleActiveMarker(null)}>
+                      <div>Current location</div>
+                    </InfoWindowF>
+                  )}
+                </MarkerF>
+              )}
+              {locations.map(({ id, name, position, distance }) => (
+                <MarkerF
+                  key={id}
+                  position={position}
+                  onClick={() => handleActiveMarker(id)}
+                >
+                  {activeMarker === id && (
+                    <InfoWindowF onCloseClick={() => handleActiveMarker(null)}>
+                      <div>
+                        <strong>{name}</strong> <br /> Distance: {distance}
+                      </div>
+                    </InfoWindowF>
+                  )}
+                </MarkerF>
+              ))}
+            </GoogleMap>
+          ) : (
+            <div>Loading...</div>
+          )}
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default MapComponent;
diff --git a/src/context/Location.tsx b/src/context/Location.tsx
new file mode 100644
index 0000000..0bc447a
--- /dev/null
+++ b/src/context/Location.tsx
@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+// Define the structure for each Location
+interface Location {
+  id: number;
+  name: string;
+  distance: string;
+  position: {
+    lat: number;
+    lng: number;
+  };
+}
+
+// Define the structure for the context type
+type LocationContextType = {
+  locations: Location[];
+  setLocations: React.Dispatch<React.SetStateAction<Location[]>>;
+};
+
+// Create the context with an initial undefined value
+const LocationContext = createContext<LocationContextType | undefined>(
+  undefined
+);
+
+// Provider component for the Location context
+const LocationContextProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [locations, setLocations] = useState<Location[]>([]);
+
+  return (
+    <LocationContext.Provider value={{ locations, setLocations }}>
+      {children}
+    </LocationContext.Provider>
+  );
+};
+
+// Custom hook to use the Location context
+const useLocationContext = (): LocationContextType => {
+  const context = useContext(LocationContext);
+  if (!context) {
+    throw new Error(
+      "useLocationContext must be used within a LocationContextProvider"
+    );
+  }
+  return context;
+};
+
+export { LocationContextProvider, useLocationContext };
diff --git a/src/functions/getCusLoc.tsx b/src/functions/getCusLoc.tsx
deleted file mode 100644
index edabbf4..0000000
--- a/src/functions/getCusLoc.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { APIProvider, Map } from "@vis.gl/react-google-maps";
-
-const App = () => (
-  <APIProvider apiKey={`${import.meta.env.VITE_REACT_APP_gmap}`}>
-    <Map
-      style={{ width: "100vw", height: "100vh" }}
-      defaultCenter={{ lat: 22.54992, lng: 0 }}
-      defaultZoom={3}
-      gestureHandling={"greedy"}
-      disableDefaultUI={true}
-    />
-  </APIProvider>
-);
-
-const root = createRoot(document.querySelector("#app"));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

From d76a6fdf142394bd8378fab9e7bce745e85aeb77 Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Fri, 26 Jul 2024 02:08:48 +0800
Subject: [PATCH 07/13] checkpoint! all works with context now

---
 src/App.tsx                     | 21 ---------------
 src/components/MapComponent.tsx | 45 ++++++++++++++++++++++++++++++---
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3fbb8c1..267b97d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,27 +5,6 @@ import { LocationContextProvider } from "./context/Location";
 
 function App() {
   // Initial locations data
-  const initialMarkers = [
-    {
-      id: 1,
-      name: "NUS",
-      distance: "",
-      position: { lat: 1.2966, lng: 103.77641 },
-    },
-    {
-      id: 2,
-      name: "Kent Ridge",
-      distance: "",
-      position: { lat: 1.2933, lng: 103.7831 },
-    },
-    {
-      id: 3,
-      name: "Botanic Garden",
-      distance: "",
-      position: { lat: 1.3223, lng: 103.8149 },
-    },
-  ];
-
   return (
     <LocationContextProvider>
       <MapComponent />
diff --git a/src/components/MapComponent.tsx b/src/components/MapComponent.tsx
index 5a51a0c..e822109 100644
--- a/src/components/MapComponent.tsx
+++ b/src/components/MapComponent.tsx
@@ -10,6 +10,27 @@ import { useLocationContext } from "../context/Location";
 // Google Maps API key from environment variable
 const gMapKey = import.meta.env.VITE_REACT_APP_gmap;
 const singaporeLoc = { lat: 1.3521, lng: 103.8198 };
+var first = true;
+const markers = [
+  {
+    id: 4,
+    name: "NUS",
+    distance: "5",
+    position: { lat: 1.2966, lng: 103.77641 },
+  },
+  {
+    id: 2,
+    name: "Kent Ridge",
+    distance: "",
+    position: { lat: 1.2933, lng: 103.7831 },
+  },
+  {
+    id: 3,
+    name: "Botanic Garden",
+    distance: "",
+    position: { lat: 1.3223, lng: 103.8149 },
+  },
+];
 
 const MapComponent: React.FC = () => {
   // State for customer position and active marker
@@ -24,6 +45,12 @@ const MapComponent: React.FC = () => {
 
   // State for locations from context
   const { locations, setLocations } = useLocationContext();
+  useEffect(() => {
+    if (first) {
+      setLocations(markers);
+      first = false;
+    }
+  });
 
   // Load the Google Maps script
   const { isLoaded } = useLoadScript({ googleMapsApiKey: gMapKey });
@@ -48,6 +75,11 @@ const MapComponent: React.FC = () => {
     }
   }, [cusPos, isLoaded]);
 
+  // Debugging: Log locations when they are updated
+  useEffect(() => {
+    console.log("Updated locations:", locations);
+  }, [locations]);
+
   // Handle marker click and set the active marker
   const handleActiveMarker = (markerId: number | null) => {
     setActiveMarker(markerId);
@@ -64,7 +96,10 @@ const MapComponent: React.FC = () => {
     if (!cusPos) return;
     const service = new google.maps.DistanceMatrixService();
     const origins = [{ lat: cusPos.lat, lng: cusPos.lng }];
-    const destinations = locations.map((marker) => marker.position);
+    const destinations = markers.map((marker) => ({
+      lat: marker.position.lat,
+      lng: marker.position.lng,
+    }));
 
     service.getDistanceMatrix(
       {
@@ -80,6 +115,8 @@ const MapComponent: React.FC = () => {
             distance: result.distance.text,
           }));
           setLocations(updatedLocations);
+          console.log(updatedLocations);
+          console.log(locations);
         }
       }
     );
@@ -92,14 +129,14 @@ const MapComponent: React.FC = () => {
         <div style={{ width: "100%", height: "90vh" }}>
           {isLoaded ? (
             <GoogleMap
-              center={currentPosition || singaporeLoc}
+              center={currentPosition || cusPos || singaporeLoc}
               zoom={13}
               onClick={() => handleActiveMarker(null)}
               mapContainerStyle={{ width: "100%", height: "90vh" }}
             >
               {cusPos && (
                 <MarkerF
-                  key={0}
+                  key={cusPos.lat}
                   position={cusPos}
                   onClick={() => handleActiveMarker(0)}
                   icon={{
@@ -118,7 +155,7 @@ const MapComponent: React.FC = () => {
               )}
               {locations.map(({ id, name, position, distance }) => (
                 <MarkerF
-                  key={id}
+                  key={id} // Ensure each marker has a unique key
                   position={position}
                   onClick={() => handleActiveMarker(id)}
                 >

From 6293076f6fb8eaf691423ea17c85902018e55aef Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Sat, 27 Jul 2024 18:14:45 +0800
Subject: [PATCH 08/13] update for register location input

---
 index.html                      |  4 +-
 src/App copy.tsx                | 29 ------------
 src/App.tsx                     | 27 +++++++++---
 src/App1.tsx                    | 15 +++++++
 src/components/MapComponent.tsx | 46 ++++++++++++++-----
 src/components/NavBar.tsx       |  7 +--
 src/main.tsx                    |  2 +-
 src/pages/Register.tsx          | 78 ++++++++++++++++++++++++++++++++-
 8 files changed, 153 insertions(+), 55 deletions(-)
 delete mode 100644 src/App copy.tsx
 create mode 100644 src/App1.tsx

diff --git a/index.html b/index.html
index 2e090b3..15fdb01 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image" href=src\pictures\food-saviour-logo.png />
+    <link rel="icon" type="image" href="src\pictures\food-saviour-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Food Saviour</title>
   </head>
diff --git a/src/App copy.tsx b/src/App copy.tsx
deleted file mode 100644
index 13588d5..0000000
--- a/src/App copy.tsx	
+++ /dev/null
@@ -1,29 +0,0 @@
-// Pages
-import { HashRouter as Router, Routes, Route } from "react-router-dom";
-import { Home } from "./pages/Home";
-import { LoginPage } from "./pages/Login";
-import { Layout } from "./Layout";
-import { RegisterPage } from "./pages/Register";
-import { Dashboard } from "./pages/Dashboard";
-import { FavoritePage } from "./pages/Favorites";
-import { AuthContextProvider } from "./context/Auth";
-
-function App() {
-  return (
-    <AuthContextProvider>
-      <Router>
-        <Routes>
-          <Route element={<Layout />}>
-            <Route path="/" element={<Home />} />
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/dashboard" element={<Dashboard />} />
-            <Route path="/register" element={<RegisterPage />} />
-            <Route path="/favorites" element={<FavoritePage />} />
-          </Route>
-        </Routes>
-      </Router>
-    </AuthContextProvider>
-  );
-}
-
-export default App;
diff --git a/src/App.tsx b/src/App.tsx
index 267b97d..5e59afc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,30 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import MapComponent from "./components/MapComponent";
+// Pages
+import { HashRouter as Router, Routes, Route } from "react-router-dom";
+import { Home } from "./pages/Home";
+import { LoginPage } from "./pages/Login";
+import { Layout } from "./Layout";
+import { RegisterPage } from "./pages/Register";
+import { Dashboard } from "./pages/Dashboard";
+import { FavoritePage } from "./pages/Favorites";
+import { AuthContextProvider } from "./context/Auth";
 import { LocationContextProvider } from "./context/Location";
 
 function App() {
-  // Initial locations data
   return (
     <LocationContextProvider>
-      <MapComponent />
+      <AuthContextProvider>
+        <Router>
+          <Routes>
+            <Route element={<Layout />}>
+              <Route path="/" element={<Home />} />
+              <Route path="/login" element={<LoginPage />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/register" element={<RegisterPage />} />
+              <Route path="/favorites" element={<FavoritePage />} />
+            </Route>
+          </Routes>
+        </Router>
+      </AuthContextProvider>
     </LocationContextProvider>
   );
 }
diff --git a/src/App1.tsx b/src/App1.tsx
new file mode 100644
index 0000000..267b97d
--- /dev/null
+++ b/src/App1.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import MapComponent from "./components/MapComponent";
+import { LocationContextProvider } from "./context/Location";
+
+function App() {
+  // Initial locations data
+  return (
+    <LocationContextProvider>
+      <MapComponent />
+    </LocationContextProvider>
+  );
+}
+
+export default App;
diff --git a/src/components/MapComponent.tsx b/src/components/MapComponent.tsx
index e822109..e7d7681 100644
--- a/src/components/MapComponent.tsx
+++ b/src/components/MapComponent.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, Fragment } from "react";
 import {
   GoogleMap,
-  useLoadScript,
   MarkerF,
   InfoWindowF,
+  useJsApiLoader,
 } from "@react-google-maps/api";
 import { useLocationContext } from "../context/Location";
 
@@ -15,7 +15,7 @@ const markers = [
   {
     id: 4,
     name: "NUS",
-    distance: "5",
+    distance: "",
     position: { lat: 1.2966, lng: 103.77641 },
   },
   {
@@ -53,7 +53,9 @@ const MapComponent: React.FC = () => {
   });
 
   // Load the Google Maps script
-  const { isLoaded } = useLoadScript({ googleMapsApiKey: gMapKey });
+  const { isLoaded, loadError } = useJsApiLoader({ googleMapsApiKey: gMapKey });
+
+  const mapRef = React.useRef<google.maps.Map | null>(null);
 
   // Fetch user's current position on component mount
   useEffect(() => {
@@ -85,11 +87,30 @@ const MapComponent: React.FC = () => {
     setActiveMarker(markerId);
     if (markerId !== null) {
       const marker = locations.find((loc) => loc.id === markerId);
-      if (marker) setCurrentPosition(marker.position);
-    } else {
-      setCurrentPosition(cusPos);
+      if (marker && mapRef.current) {
+        mapRef.current.panTo(marker.position);
+        setCurrentPosition(marker.position);
+      } else if (markerId === cusPos?.lat) {
+        mapRef.current.panTo(cusPos);
+        setCurrentPosition(cusPos);
+      }
     }
+    // else {
+    //   if (cusPos && mapRef.current) {
+    //     mapRef.current.panTo(cusPos);
+    //   }
+    //   setCurrentPosition(cusPos);
+    // }
   };
+  //   const handleActiveMarker = (markerId: number | null) => {
+  //     setActiveMarker(markerId);
+  //     if (markerId !== null) {
+  //       const marker = locations.find((loc) => loc.id === markerId);
+  //       if (marker) setCurrentPosition(marker.position);
+  //     } else {
+  //       setCurrentPosition(cusPos);
+  //     }
+  //   };
 
   // Calculate distances between customer and other locations
   const calculateDistances = async () => {
@@ -105,7 +126,7 @@ const MapComponent: React.FC = () => {
       {
         origins: origins,
         destinations: destinations,
-        travelMode: "DRIVING",
+        travelMode: google.maps.TravelMode.DRIVING,
       },
       (response, status) => {
         if (status === "OK") {
@@ -115,13 +136,13 @@ const MapComponent: React.FC = () => {
             distance: result.distance.text,
           }));
           setLocations(updatedLocations);
-          console.log(updatedLocations);
-          console.log(locations);
         }
       }
     );
   };
 
+  if (loadError) return <div>Error loading maps</div>;
+
   return (
     <Fragment>
       <div className="container">
@@ -129,16 +150,17 @@ const MapComponent: React.FC = () => {
         <div style={{ width: "100%", height: "90vh" }}>
           {isLoaded ? (
             <GoogleMap
-              center={currentPosition || cusPos || singaporeLoc}
+              center={cusPos || singaporeLoc}
               zoom={13}
               onClick={() => handleActiveMarker(null)}
               mapContainerStyle={{ width: "100%", height: "90vh" }}
+              onLoad={(map) => (mapRef.current = map)}
             >
               {cusPos && (
                 <MarkerF
                   key={cusPos.lat}
                   position={cusPos}
-                  onClick={() => handleActiveMarker(0)}
+                  onClick={() => handleActiveMarker(cusPos.lat)}
                   icon={{
                     url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
                     size: new google.maps.Size(20, 32),
@@ -146,7 +168,7 @@ const MapComponent: React.FC = () => {
                     anchor: new google.maps.Point(0, 32),
                   }}
                 >
-                  {activeMarker === 0 && (
+                  {activeMarker === cusPos.lat && (
                     <InfoWindowF onCloseClick={() => handleActiveMarker(null)}>
                       <div>Current location</div>
                     </InfoWindowF>
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index a14e8dc..4bd0360 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { auth } from "../config/firebase";
 import { Button, Container, Nav, Navbar } from "react-bootstrap";
 import { useAuth } from "../context/Auth";
-import { getCusLoc } from "../functions/getCusLoc";
+// import { getCusLoc } from "../functions/getCusLoc";
 
 export function NavBar() {
   let navigate = useNavigate();
@@ -37,10 +37,7 @@ export function NavBar() {
               {isConsumer ? (
                 [
                   <Nav.Link href="#favorites">Favorites</Nav.Link>,
-                  <Navbar.Text
-                    onClick={getCusLoc}
-                    style={{ cursor: "pointer" }}
-                  >
+                  <Navbar.Text onClick={Logout} style={{ cursor: "pointer" }}>
                     Update Location
                   </Navbar.Text>,
                 ]
diff --git a/src/main.tsx b/src/main.tsx
index 7024fe0..87dded7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import App from "./App1.tsx";
 import "bootstrap/dist/css/bootstrap.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 3afafa0..16cc00c 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -1,10 +1,14 @@
-import { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import ErrorText from "../components/ErrorText";
 import { auth, db } from "../config/firebase";
 import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
 import { ButtonGroup, ToggleButton } from "react-bootstrap";
 import { doc, setDoc } from "firebase/firestore";
+import { Autocomplete, useJsApiLoader } from "@react-google-maps/api";
+
+// Declare libraries outside the component
+const libraries = ["places"];
 
 export const RegisterPage = () => {
   const [registering, setRegistering] = useState<boolean>(false);
@@ -14,8 +18,43 @@ export const RegisterPage = () => {
   const [confirm, setConfirm] = useState<string>("");
   const [error, setError] = useState<string>("");
   const [isConsumer, setIsConsumer] = useState<boolean>(true);
+  const [bizLoc, setBizLoc] = useState<string>("");
+  const [bizCoords, setBizCoords] = useState<{ lat: number; lng: number }>({
+    lat: -1,
+    lng: -1,
+  });
+
+  const { isLoaded } = useJsApiLoader({
+    googleMapsApiKey: import.meta.env.VITE_REACT_APP_gmap,
+    libraries,
+  });
 
   const navigate = useNavigate();
+  const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (autocompleteRef.current && inputRef.current) {
+      autocompleteRef.current.setFields(["formatted_address", "geometry"]);
+      autocompleteRef.current.addListener("place_changed", () => {
+        const place = autocompleteRef.current?.getPlace();
+        if (place?.formatted_address && place?.geometry?.location) {
+          setBizLoc(place.formatted_address);
+          setBizCoords({
+            lat: place.geometry.location.lat(),
+            lng: place.geometry.location.lng(),
+          });
+        }
+      });
+    }
+  }, [isLoaded]);
+
+  useEffect(() => {
+    if (autocompleteRef.current && inputRef.current) {
+      console.log(bizCoords);
+      console.log(bizLoc);
+    }
+  });
 
   const signUpWithEmailAndPassword = () => {
     if (!name || !email || !password || !confirm) {
@@ -123,6 +162,41 @@ export const RegisterPage = () => {
           onChange={(e) => setConfirm(e.target.value)}
         />
       </div>
+      {!isConsumer ? (
+        <div className="form-outline mb-4">
+          <label>Business Location</label>
+          {isLoaded && (
+            <Autocomplete
+              onLoad={(autocomplete) =>
+                (autocompleteRef.current = autocomplete)
+              }
+              onPlaceChanged={() => {
+                const place = autocompleteRef.current?.getPlace();
+                if (place?.formatted_address && place?.geometry?.location) {
+                  setBizLoc(place.formatted_address);
+                  setBizCoords({
+                    lat: place.geometry.location.lat(),
+                    lng: place.geometry.location.lng(),
+                  });
+                }
+              }}
+            >
+              <input
+                ref={inputRef}
+                autoComplete="location"
+                type="text"
+                name="location"
+                id="location"
+                placeholder="Business Location"
+                className="form-control"
+                required
+                value={bizLoc}
+                onChange={(e) => setBizLoc(e.target.value)}
+              />
+            </Autocomplete>
+          )}
+        </div>
+      ) : null}
       <div className="mb-4">
         <ButtonGroup>
           <ToggleButton
@@ -165,3 +239,5 @@ export const RegisterPage = () => {
     </form>
   );
 };
+
+export default RegisterPage;

From b50083d8b1afb234055a8b659c6cbe05b5908f1a Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Sat, 27 Jul 2024 18:49:55 +0800
Subject: [PATCH 09/13] adding to database works first try letsgo!

---
 src/main.tsx                 | 2 +-
 src/{App1.tsx => notApp.tsx} | 1 +
 src/pages/Register.tsx       | 8 +++++++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 rename src/{App1.tsx => notApp.tsx} (97%)

diff --git a/src/main.tsx b/src/main.tsx
index 87dded7..7024fe0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App1.tsx";
+import App from "./App.tsx";
 import "bootstrap/dist/css/bootstrap.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/App1.tsx b/src/notApp.tsx
similarity index 97%
rename from src/App1.tsx
rename to src/notApp.tsx
index 267b97d..df0a8f0 100644
--- a/src/App1.tsx
+++ b/src/notApp.tsx
@@ -8,6 +8,7 @@ function App() {
   return (
     <LocationContextProvider>
       <MapComponent />
+      ???
     </LocationContextProvider>
   );
 }
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 16cc00c..c73c99e 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -4,7 +4,7 @@ import ErrorText from "../components/ErrorText";
 import { auth, db } from "../config/firebase";
 import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
 import { ButtonGroup, ToggleButton } from "react-bootstrap";
-import { doc, setDoc } from "firebase/firestore";
+import { doc, setDoc, GeoPoint } from "firebase/firestore";
 import { Autocomplete, useJsApiLoader } from "@react-google-maps/api";
 
 // Declare libraries outside the component
@@ -78,6 +78,12 @@ export const RegisterPage = () => {
           await setDoc(doc(db, "consumer", user.uid), {
             favorites: [],
           });
+        } else {
+          const locData = {
+            name: name,
+            location: new GeoPoint(bizCoords.lat, bizCoords.lng),
+          };
+          await setDoc(doc(db, "Business", name), locData);
         }
         return updateProfile(user, { displayName: name });
       })

From 10751962dabb1f89dbd19e99c1b4d0e117168126 Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Sun, 28 Jul 2024 05:37:04 +0800
Subject: [PATCH 10/13] successfully pull data from db to calculate distance,
 moved functions out of map into locationhandlers.tsx, need to display
 distance and fix the mapping now,

a bit buggy on startup still
---
 src/App.tsx                        |   2 +
 src/components/MapComponent.tsx    | 126 ++++++--------------------
 src/components/NavBar.tsx          |  77 ++++++++++++----
 src/context/Location.tsx           |  29 ++++--
 src/functions/GetLocation.tsx      |  18 ++++
 src/functions/LocationHandlers.tsx | 137 +++++++++++++++++++++++++++++
 src/pages/Favorites.tsx            |   2 -
 7 files changed, 270 insertions(+), 121 deletions(-)
 create mode 100644 src/functions/GetLocation.tsx
 create mode 100644 src/functions/LocationHandlers.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5e59afc..65f23f8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { Dashboard } from "./pages/Dashboard";
 import { FavoritePage } from "./pages/Favorites";
 import { AuthContextProvider } from "./context/Auth";
 import { LocationContextProvider } from "./context/Location";
+import MapComponent from "./components/MapComponent";
 
 function App() {
   return (
@@ -24,6 +25,7 @@ function App() {
             </Route>
           </Routes>
         </Router>
+        <MapComponent />
       </AuthContextProvider>
     </LocationContextProvider>
   );
diff --git a/src/components/MapComponent.tsx b/src/components/MapComponent.tsx
index e7d7681..541bf23 100644
--- a/src/components/MapComponent.tsx
+++ b/src/components/MapComponent.tsx
@@ -5,35 +5,13 @@ import {
   InfoWindowF,
   useJsApiLoader,
 } from "@react-google-maps/api";
-import { useLocationContext } from "../context/Location";
+import { useLocationContext, singaporeLoc } from "../context/Location";
+import { useUpdateLocations } from "../functions/LocationHandlers";
 
 // Google Maps API key from environment variable
 const gMapKey = import.meta.env.VITE_REACT_APP_gmap;
-const singaporeLoc = { lat: 1.3521, lng: 103.8198 };
-var first = true;
-const markers = [
-  {
-    id: 4,
-    name: "NUS",
-    distance: "",
-    position: { lat: 1.2966, lng: 103.77641 },
-  },
-  {
-    id: 2,
-    name: "Kent Ridge",
-    distance: "",
-    position: { lat: 1.2933, lng: 103.7831 },
-  },
-  {
-    id: 3,
-    name: "Botanic Garden",
-    distance: "",
-    position: { lat: 1.3223, lng: 103.8149 },
-  },
-];
 
 const MapComponent: React.FC = () => {
-  // State for customer position and active marker
   const [cusPos, setCusPos] = useState<{ lat: number; lng: number } | null>(
     null
   );
@@ -42,51 +20,28 @@ const MapComponent: React.FC = () => {
     lng: number;
   } | null>(null);
   const [activeMarker, setActiveMarker] = useState<number | null>(null);
-
   // State for locations from context
   const { locations, setLocations } = useLocationContext();
-  useEffect(() => {
-    if (first) {
-      setLocations(markers);
-      first = false;
-    }
-  });
-
   // Load the Google Maps script
   const { isLoaded, loadError } = useJsApiLoader({ googleMapsApiKey: gMapKey });
+  const { calculateDistances } = useUpdateLocations();
 
   const mapRef = React.useRef<google.maps.Map | null>(null);
-
-  // Fetch user's current position on component mount
   useEffect(() => {
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        const { latitude, longitude } = position.coords;
-        setCusPos({ lat: latitude, lng: longitude });
-        setCurrentPosition({ lat: latitude, lng: longitude });
-      },
-      (error) => console.error(error),
-      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
-    );
-  }, []);
-
+    setCusPos(locations.curLoc);
+  });
   // Calculate distances when customer position is set and map is loaded
   useEffect(() => {
     if (cusPos && isLoaded) {
-      calculateDistances();
+      calculateDistances(cusPos);
     }
   }, [cusPos, isLoaded]);
 
-  // Debugging: Log locations when they are updated
-  useEffect(() => {
-    console.log("Updated locations:", locations);
-  }, [locations]);
-
   // Handle marker click and set the active marker
   const handleActiveMarker = (markerId: number | null) => {
     setActiveMarker(markerId);
     if (markerId !== null) {
-      const marker = locations.find((loc) => loc.id === markerId);
+      const marker = locations.locs.find((loc) => loc.id === markerId);
       if (marker && mapRef.current) {
         mapRef.current.panTo(marker.position);
         setCurrentPosition(marker.position);
@@ -95,50 +50,6 @@ const MapComponent: React.FC = () => {
         setCurrentPosition(cusPos);
       }
     }
-    // else {
-    //   if (cusPos && mapRef.current) {
-    //     mapRef.current.panTo(cusPos);
-    //   }
-    //   setCurrentPosition(cusPos);
-    // }
-  };
-  //   const handleActiveMarker = (markerId: number | null) => {
-  //     setActiveMarker(markerId);
-  //     if (markerId !== null) {
-  //       const marker = locations.find((loc) => loc.id === markerId);
-  //       if (marker) setCurrentPosition(marker.position);
-  //     } else {
-  //       setCurrentPosition(cusPos);
-  //     }
-  //   };
-
-  // Calculate distances between customer and other locations
-  const calculateDistances = async () => {
-    if (!cusPos) return;
-    const service = new google.maps.DistanceMatrixService();
-    const origins = [{ lat: cusPos.lat, lng: cusPos.lng }];
-    const destinations = markers.map((marker) => ({
-      lat: marker.position.lat,
-      lng: marker.position.lng,
-    }));
-
-    service.getDistanceMatrix(
-      {
-        origins: origins,
-        destinations: destinations,
-        travelMode: google.maps.TravelMode.DRIVING,
-      },
-      (response, status) => {
-        if (status === "OK") {
-          const results = response.rows[0].elements;
-          const updatedLocations = results.map((result, index) => ({
-            ...locations[index],
-            distance: result.distance.text,
-          }));
-          setLocations(updatedLocations);
-        }
-      }
-    );
   };
 
   if (loadError) return <div>Error loading maps</div>;
@@ -175,7 +86,7 @@ const MapComponent: React.FC = () => {
                   )}
                 </MarkerF>
               )}
-              {locations.map(({ id, name, position, distance }) => (
+              {locations.locs.map(({ id, name, position, distance }) => (
                 <MarkerF
                   key={id} // Ensure each marker has a unique key
                   position={position}
@@ -201,3 +112,24 @@ const MapComponent: React.FC = () => {
 };
 
 export default MapComponent;
+
+// interface Location {
+//   id: string;
+//   name: string;
+//   distance: string;
+//   position: {
+//     lat: number;
+//     lng: number;
+//   };
+// }
+
+// // Define the structure for the context type
+// type LocationContextType = {
+//   locations: {
+//     curLoc: {
+//       lat: number;
+//       lng: number;
+//     };
+//     locs: Location[];
+//   };
+// };
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 4bd0360..87476f4 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -3,13 +3,22 @@ import { useNavigate } from "react-router-dom";
 import { auth } from "../config/firebase";
 import { Button, Container, Nav, Navbar } from "react-bootstrap";
 import { useAuth } from "../context/Auth";
-// import { getCusLoc } from "../functions/getCusLoc";
+import {
+  useGetCurLoc,
+  useUpdateLocations,
+} from "../functions/LocationHandlers";
+import { useEffect, useState } from "react";
+import { useLocationContext } from "../context/Location";
 
 export function NavBar() {
   let navigate = useNavigate();
   const { user, isConsumer } = useAuth();
+  const { updateLocation } = useGetCurLoc();
+  const { handleLocationContext, isLoading, locList } = useUpdateLocations();
+  const { locations, setLocations } = useLocationContext();
+  const [isLocationUpdated, setIsLocationUpdated] = useState(false);
 
-  const Logout = () => {
+  const handleLogout = () => {
     signOut(auth)
       .then(() => {
         navigate("/");
@@ -18,6 +27,36 @@ export function NavBar() {
       .catch((error) => console.error(error));
   };
 
+  const locContext = async () => {
+    await handleLocationContext();
+    console.log("work?");
+    console.log(locations);
+    if (locations.locs && locations.locs.length > 0) {
+      setIsLocationUpdated(true);
+    }
+  };
+
+  useEffect(() => {
+    if (isConsumer && !isLocationUpdated) {
+      const intervalId = setInterval(async () => {
+        await locContext();
+      }, 2000); // Adjust interval as needed
+
+      return () => clearInterval(intervalId);
+    }
+  }, [isConsumer, isLocationUpdated, locations.locs]);
+
+  useEffect(() => {
+    const init = async () => {
+      if (isConsumer) {
+        await updateLocation();
+        console.log("Location updated");
+        console.log(locations);
+      }
+    };
+    init();
+  }, [isConsumer]);
+
   return (
     <Navbar className="bg-body-tertiary" bg="dark" data-bs-theme="dark">
       <Container>
@@ -32,23 +71,27 @@ export function NavBar() {
           Food Saviour
         </Navbar.Brand>
         {user ? (
-          <>
-            <Nav className="me-auto">
-              {isConsumer ? (
-                [
-                  <Nav.Link href="#favorites">Favorites</Nav.Link>,
-                  <Navbar.Text onClick={Logout} style={{ cursor: "pointer" }}>
-                    Update Location
-                  </Navbar.Text>,
-                ]
-              ) : (
-                <Nav.Link href="#dashboard">Dashboard</Nav.Link>
-              )}
-            </Nav>
-            <Navbar.Text onClick={Logout} style={{ cursor: "pointer" }}>
+          <Nav className="w-100 justify-content-between">
+            {isConsumer ? (
+              <>
+                <Nav.Link href="#favorites">Favorites</Nav.Link>
+                <Navbar.Text
+                  onClick={updateLocation}
+                  style={{ cursor: "pointer" }}
+                >
+                  Update Location
+                </Navbar.Text>
+                <Navbar.Text onClick={locContext} style={{ cursor: "pointer" }}>
+                  DB
+                </Navbar.Text>
+              </>
+            ) : (
+              <Nav.Link href="#dashboard">Dashboard</Nav.Link>
+            )}
+            <Navbar.Text onClick={handleLogout} style={{ cursor: "pointer" }}>
               Logout
             </Navbar.Text>
-          </>
+          </Nav>
         ) : (
           <Button variant="outline-success" onClick={() => navigate("/login")}>
             Sign In
diff --git a/src/context/Location.tsx b/src/context/Location.tsx
index 0bc447a..7200fea 100644
--- a/src/context/Location.tsx
+++ b/src/context/Location.tsx
@@ -1,8 +1,10 @@
 import React, { createContext, useContext, useState, ReactNode } from "react";
 
+export const singaporeLoc = { lat: 1.3521, lng: 103.8198 };
+
 // Define the structure for each Location
-interface Location {
-  id: number;
+export interface Location {
+  id: string;
   name: string;
   distance: string;
   position: {
@@ -13,8 +15,19 @@ interface Location {
 
 // Define the structure for the context type
 type LocationContextType = {
-  locations: Location[];
-  setLocations: React.Dispatch<React.SetStateAction<Location[]>>;
+  locations: {
+    curLoc: {
+      lat: number;
+      lng: number;
+    };
+    locs: Location[];
+  };
+  setLocations: React.Dispatch<
+    React.SetStateAction<{
+      curLoc: { lat: number; lng: number };
+      locs: Location[];
+    }>
+  >;
 };
 
 // Create the context with an initial undefined value
@@ -26,7 +39,13 @@ const LocationContext = createContext<LocationContextType | undefined>(
 const LocationContextProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [locations, setLocations] = useState<Location[]>([]);
+  const [locations, setLocations] = useState<{
+    curLoc: { lat: number; lng: number };
+    locs: Location[];
+  }>({
+    curLoc: { lat: singaporeLoc.lat, lng: singaporeLoc.lng },
+    locs: [],
+  });
 
   return (
     <LocationContext.Provider value={{ locations, setLocations }}>
diff --git a/src/functions/GetLocation.tsx b/src/functions/GetLocation.tsx
new file mode 100644
index 0000000..a68bf19
--- /dev/null
+++ b/src/functions/GetLocation.tsx
@@ -0,0 +1,18 @@
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "../config/firebase";
+
+export const getLocList = async () => {
+  try {
+    const locRef = collection(db, "Business");
+    const querySnapshot = await getDocs(locRef);
+
+    const returnList = querySnapshot.docs.map((doc) => ({
+      ...doc.data(),
+      id: doc.id,
+    }));
+    // console.log(returnList);
+    return returnList;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/src/functions/LocationHandlers.tsx b/src/functions/LocationHandlers.tsx
new file mode 100644
index 0000000..316e6c0
--- /dev/null
+++ b/src/functions/LocationHandlers.tsx
@@ -0,0 +1,137 @@
+import {
+  useLocationContext,
+  singaporeLoc,
+  Location,
+} from "../context/Location";
+import { useEffect, useState } from "react";
+import { collection, GeoPoint, getDocs } from "firebase/firestore";
+import { db } from "../config/firebase";
+
+export const useGetCurLoc = () => {
+  const { locations, setLocations } = useLocationContext();
+  const updateLocation = () => {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        setLocations({
+          curLoc: {
+            lat: latitude,
+            lng: longitude,
+          },
+          locs: locations.locs,
+        });
+        console.log(locations);
+      },
+      (error) => {
+        console.error(error);
+        console.error("using default location: Singapore Center");
+        setLocations({
+          curLoc: {
+            lat: singaporeLoc.lat,
+            lng: singaporeLoc.lng,
+          },
+          locs: locations.locs,
+        });
+      },
+      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
+    );
+  };
+  return { locations, updateLocation };
+};
+
+export const useUpdateLocations = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(false); // Loading state
+  const [locList, setLocList] = useState<{}[]>([]); // State for user favorite food items
+  const { locations, setLocations } = useLocationContext();
+
+  const getLocList = async () => {
+    try {
+      const locRef = collection(db, "Business");
+      const querySnapshot = await getDocs(locRef);
+
+      const returnList = querySnapshot.docs.map((doc) => ({
+        ...doc.data(),
+        id: doc.id,
+      }));
+      return returnList;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const fetchLocList = async () => {
+    setIsLoading(true);
+    try {
+      const updatedLocList = await getLocList();
+      setLocList(updatedLocList);
+    } catch (error) {
+      console.error("Error fetching food items:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleLocationContext = async () => {
+    await fetchLocList();
+    const updateLoc: Location[] = locList.map((loc) => {
+      const id = loc.id || "";
+      const name = loc.name || "";
+      const geoPoint = loc.location || new GeoPoint(0, 0);
+
+      return {
+        id,
+        name,
+        distance: "",
+        position: {
+          lat: geoPoint._lat,
+          lng: geoPoint._long,
+        },
+      };
+    });
+
+    setLocations({
+      curLoc: {
+        lat: locations.curLoc.lat,
+        lng: locations.curLoc.lng,
+      },
+      locs: updateLoc,
+    });
+  };
+
+  const calculateDistances = async (cusPos: { lat: number; lng: number }) => {
+    if (!cusPos) return;
+    const service = new google.maps.DistanceMatrixService();
+    const origins = [{ lat: cusPos.lat, lng: cusPos.lng }];
+    const destinations = locations.locs.map((loc) => loc.position);
+
+    service.getDistanceMatrix(
+      {
+        origins: origins,
+        destinations: destinations,
+        travelMode: google.maps.TravelMode.DRIVING,
+      },
+      (response, status) => {
+        if (status === "OK") {
+          const results = response.rows[0].elements;
+          const updatedLocations = locations.locs.map((loc, index) => {
+            const result = results[index];
+            const distanceText =
+              result.status === "OK" ? result.distance.text : "Too Far";
+            return {
+              ...loc,
+              distance: distanceText,
+            };
+          });
+          setLocations({
+            curLoc: locations.curLoc,
+            locs: updatedLocations,
+          });
+        } else {
+          console.error("Error calculating distances:", status);
+        }
+      }
+    );
+  };
+
+  return { handleLocationContext, isLoading, locList, calculateDistances };
+};
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index 470b033..cd14a46 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -10,7 +10,6 @@ import { doc, increment, updateDoc } from "firebase/firestore";
 import { db } from "../config/firebase";
 import { deleteWarning } from "../functions/Alert";
 import { ConCards } from "../components/ConCards";
-
 export function FavoritePage() {
   const { user, isConsumer } = useAuth(); // Auth context
   // Redirect the user if not authenticated or not a consumer
@@ -48,7 +47,6 @@ export function FavoritePage() {
     }
   };
 
-  // Fetch food list when user or consumer status changes
   useEffect(() => {
     fetchFoodList();
   }, [user, isConsumer]);

From a5f9346ff8ebb8b7a460a5b0a6b88f78efe8de62 Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Sun, 28 Jul 2024 16:57:37 +0800
Subject: [PATCH 11/13] fix problem with canter customer position

---
 src/components/NavBar.tsx          | 25 +++++++++++--------------
 src/functions/LocationHandlers.tsx | 29 +++++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 87476f4..d6b71e2 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -29,7 +29,7 @@ export function NavBar() {
 
   const locContext = async () => {
     await handleLocationContext();
-    console.log("work?");
+    // console.log("work?");
     console.log(locations);
     if (locations.locs && locations.locs.length > 0) {
       setIsLocationUpdated(true);
@@ -46,16 +46,16 @@ export function NavBar() {
     }
   }, [isConsumer, isLocationUpdated, locations.locs]);
 
-  useEffect(() => {
-    const init = async () => {
-      if (isConsumer) {
-        await updateLocation();
-        console.log("Location updated");
-        console.log(locations);
-      }
-    };
-    init();
-  }, [isConsumer]);
+  // useEffect(() => {
+  //   const init = async () => {
+  //     if (isConsumer) {
+  //       await updateLocation();
+  //       console.log("Location updated");
+  //       console.log(locations);
+  //     }
+  //   };
+  //   init();
+  // }, [isConsumer]);
 
   return (
     <Navbar className="bg-body-tertiary" bg="dark" data-bs-theme="dark">
@@ -81,9 +81,6 @@ export function NavBar() {
                 >
                   Update Location
                 </Navbar.Text>
-                <Navbar.Text onClick={locContext} style={{ cursor: "pointer" }}>
-                  DB
-                </Navbar.Text>
               </>
             ) : (
               <Nav.Link href="#dashboard">Dashboard</Nav.Link>
diff --git a/src/functions/LocationHandlers.tsx b/src/functions/LocationHandlers.tsx
index 316e6c0..2e27c34 100644
--- a/src/functions/LocationHandlers.tsx
+++ b/src/functions/LocationHandlers.tsx
@@ -6,6 +6,7 @@ import {
 import { useEffect, useState } from "react";
 import { collection, GeoPoint, getDocs } from "firebase/firestore";
 import { db } from "../config/firebase";
+var local = [singaporeLoc.lat, singaporeLoc.lng];
 
 export const useGetCurLoc = () => {
   const { locations, setLocations } = useLocationContext();
@@ -13,6 +14,8 @@ export const useGetCurLoc = () => {
     navigator.geolocation.getCurrentPosition(
       (position) => {
         const { latitude, longitude } = position.coords;
+        local[0] = latitude;
+        local[1] = longitude;
         setLocations({
           curLoc: {
             lat: latitude,
@@ -73,6 +76,7 @@ export const useUpdateLocations = () => {
 
   const handleLocationContext = async () => {
     await fetchLocList();
+    local = await getCurLocation();
     const updateLoc: Location[] = locList.map((loc) => {
       const id = loc.id || "";
       const name = loc.name || "";
@@ -91,11 +95,32 @@ export const useUpdateLocations = () => {
 
     setLocations({
       curLoc: {
-        lat: locations.curLoc.lat,
-        lng: locations.curLoc.lng,
+        lat: local[0],
+        lng: local[1],
       },
       locs: updateLoc,
     });
+    // console.log("help");
+    // console.log(local);
+    // console.log(locations);
+  };
+
+  const getCurLocation = async () => {
+    return new Promise((resolve, reject) => {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          local[0] = latitude;
+          local[1] = longitude;
+          resolve([latitude, longitude]);
+        },
+        (error) => {
+          console.error(error);
+          reject(error);
+        },
+        { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
+      );
+    });
   };
 
   const calculateDistances = async (cusPos: { lat: number; lng: number }) => {

From d4b7ef48da194d7a69c75244d496eaaad64f2a4f Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Sun, 28 Jul 2024 17:18:43 +0800
Subject: [PATCH 12/13] has distance now :D

---
 src/components/ConCards.tsx     | 127 ++++++++++++++++++--------------
 src/components/MapComponent.tsx |   2 +-
 2 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/src/components/ConCards.tsx b/src/components/ConCards.tsx
index 0ff6172..cac61b2 100644
--- a/src/components/ConCards.tsx
+++ b/src/components/ConCards.tsx
@@ -2,6 +2,8 @@ import { Badge, Card, Col, Container, Row } from "react-bootstrap";
 import { timestampToString } from "../functions/Date";
 import { HeartSwitch } from "@anatoliygatt/heart-switch";
 import { FoodItem } from "../interface/FoodItem";
+import { useLocationContext } from "../context/Location";
+import { useAuth } from "../context/Auth";
 
 // ConCards component to display a grid of food cards
 export const ConCards = ({
@@ -16,58 +18,73 @@ export const ConCards = ({
   toggleFavorite: (foodId: string) => Promise<void>;
   setCuisine: React.Dispatch<React.SetStateAction<string>>;
   setBusiness: React.Dispatch<React.SetStateAction<string>>;
-}) => (
-  <Row md={4} className="g-4">
-    {/* Map through the filtered food list and display each food item */}
-    {searchFoodList.map((food, index) => (
-      <Col key={index}>
-        <Card
-          className="flex"
-          bg={food.post ? "light" : "secondary"}
-          key={food.id}
-        >
-          <Card.Img variant="top" src={food.imageURL} /> {/* Food image */}
-          <Card.Body>
-            <Card.Title>{food.name}</Card.Title> {/* Food name */}
-            <Card.Subtitle>${food.price}</Card.Subtitle> {/* Food price */}
-            <Card.Text>Date: {timestampToString(food.date)}</Card.Text>{" "}
-            {/* Food date */}
-            {/* Badge to filter by cuisine */}
-            <Badge
-              style={{ cursor: "pointer" }}
-              pill
-              className="ms-2"
-              bg="warning"
-              onClick={() => setCuisine(food.cuisine)}
-            >
-              {food.cuisine}
-            </Badge>
-            {/* Badge to filter by business */}
-            <Badge
-              style={{ cursor: "pointer" }}
-              pill
-              className="ms-2"
-              bg="dark"
-              onClick={() => setBusiness(food.business)}
-            >
-              {food.business}
-            </Badge>
-            {/* HeartSwitch to toggle favorite status */}
-            <Container className="mt-2">
-              <Row className="justify-content-md-end">
-                <Col xs={2}>
-                  <HeartSwitch
-                    size="sm"
-                    checked={favList.includes(food.id)}
-                    onChange={() => toggleFavorite(food.id)}
-                  />
-                </Col>
-                <Col xs={1}>{food.favoriteCount || 0}</Col>
-              </Row>
-            </Container>
-          </Card.Body>
-        </Card>
-      </Col>
-    ))}
-  </Row>
-);
+}) => {
+  // Access the user, isConsumer, and locations contexts
+  const { user, isConsumer } = useAuth();
+  const { locations, setLocations } = useLocationContext();
+
+  // Function to get the distance of the business
+  const getDistance = (businessName: string) => {
+    const location = locations.locs.find((loc) => loc.name === businessName);
+    return location ? location.distance : "";
+  };
+
+  return (
+    <Row md={4} className="g-4">
+      {/* Map through the filtered food list and display each food item */}
+      {searchFoodList.map((food, index) => (
+        <Col key={index}>
+          <Card
+            className="flex"
+            bg={food.post ? "light" : "secondary"}
+            key={food.id}
+          >
+            <Card.Img variant="top" src={food.imageURL} /> {/* Food image */}
+            <Card.Body>
+              <Card.Title>{food.name}</Card.Title> {/* Food name */}
+              <Card.Subtitle>${food.price}</Card.Subtitle> {/* Food price */}
+              <Card.Text>Date: {timestampToString(food.date)}</Card.Text>{" "}
+              {/* Food date */}
+              {/* Badge to filter by cuisine */}
+              <Badge
+                style={{ cursor: "pointer" }}
+                pill
+                className="ms-2"
+                bg="warning"
+                onClick={() => setCuisine(food.cuisine)}
+              >
+                {food.cuisine}
+              </Badge>
+              {/* Badge to filter by business */}
+              <Badge
+                style={{ cursor: "pointer" }}
+                pill
+                className="ms-2"
+                bg="dark"
+                onClick={() => setBusiness(food.business)}
+              >
+                {food.business}
+              </Badge>
+              {/* HeartSwitch to toggle favorite status */}
+              <Container className="mt-2">
+                <Row className="justify-content-md-end">
+                  {/* Display distance */}
+                  {getDistance(food.business)}
+                  <Col xs={2}>
+                    <HeartSwitch
+                      size="sm"
+                      checked={favList.includes(food.id)}
+                      onChange={() => toggleFavorite(food.id)}
+                    />
+                  </Col>
+                  <Col xs={1}>{food.favoriteCount || 0}</Col>
+                  {/* <Col xs={2}>{getDistance(food.business)}</Col>{" "} */}
+                </Row>
+              </Container>
+            </Card.Body>
+          </Card>
+        </Col>
+      ))}
+    </Row>
+  );
+};
diff --git a/src/components/MapComponent.tsx b/src/components/MapComponent.tsx
index 541bf23..6791718 100644
--- a/src/components/MapComponent.tsx
+++ b/src/components/MapComponent.tsx
@@ -57,7 +57,7 @@ const MapComponent: React.FC = () => {
   return (
     <Fragment>
       <div className="container">
-        <h1 className="text-center">Location!</h1>
+        <h1 className="text-center"></h1>
         <div style={{ width: "100%", height: "90vh" }}>
           {isLoaded ? (
             <GoogleMap

From e80f3d3ba78c4e886e27b95f86590f6c46a58718 Mon Sep 17 00:00:00 2001
From: wongwh2002 <wenghongwong5686@gmail.com>
Date: Sun, 28 Jul 2024 17:33:09 +0800
Subject: [PATCH 13/13] edited only run map when consumer or not logged in

---
 src/App.tsx                 |  2 +-
 src/components/ConCards.tsx |  3 +--
 src/components/NavBar.tsx   | 18 +++++++++++++-----
 src/pages/Favorites.tsx     |  3 +++
 src/pages/Home.tsx          |  6 +++++-
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 65f23f8..af8c1e7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,7 +25,7 @@ function App() {
             </Route>
           </Routes>
         </Router>
-        <MapComponent />
+        {/* <MapComponent /> */}
       </AuthContextProvider>
     </LocationContextProvider>
   );
diff --git a/src/components/ConCards.tsx b/src/components/ConCards.tsx
index cac61b2..7daba5e 100644
--- a/src/components/ConCards.tsx
+++ b/src/components/ConCards.tsx
@@ -20,8 +20,7 @@ export const ConCards = ({
   setBusiness: React.Dispatch<React.SetStateAction<string>>;
 }) => {
   // Access the user, isConsumer, and locations contexts
-  const { user, isConsumer } = useAuth();
-  const { locations, setLocations } = useLocationContext();
+  const { locations } = useLocationContext();
 
   // Function to get the distance of the business
   const getDistance = (businessName: string) => {
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index d6b71e2..fa74bda 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -15,7 +15,7 @@ export function NavBar() {
   const { user, isConsumer } = useAuth();
   const { updateLocation } = useGetCurLoc();
   const { handleLocationContext, isLoading, locList } = useUpdateLocations();
-  const { locations, setLocations } = useLocationContext();
+  const { locations } = useLocationContext();
   const [isLocationUpdated, setIsLocationUpdated] = useState(false);
 
   const handleLogout = () => {
@@ -37,7 +37,7 @@ export function NavBar() {
   };
 
   useEffect(() => {
-    if (isConsumer && !isLocationUpdated) {
+    if (!isLocationUpdated) {
       const intervalId = setInterval(async () => {
         await locContext();
       }, 2000); // Adjust interval as needed
@@ -90,9 +90,17 @@ export function NavBar() {
             </Navbar.Text>
           </Nav>
         ) : (
-          <Button variant="outline-success" onClick={() => navigate("/login")}>
-            Sign In
-          </Button>
+          <>
+            <Navbar.Text onClick={updateLocation} style={{ cursor: "pointer" }}>
+              Update Current Location
+            </Navbar.Text>
+            <Button
+              variant="outline-success"
+              onClick={() => navigate("/login")}
+            >
+              Sign In
+            </Button>
+          </>
         )}
       </Container>
     </Navbar>
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index cd14a46..18d0861 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -10,6 +10,7 @@ import { doc, increment, updateDoc } from "firebase/firestore";
 import { db } from "../config/firebase";
 import { deleteWarning } from "../functions/Alert";
 import { ConCards } from "../components/ConCards";
+import MapComponent from "../components/MapComponent"; // Import the MapComponent
 export function FavoritePage() {
   const { user, isConsumer } = useAuth(); // Auth context
   // Redirect the user if not authenticated or not a consumer
@@ -135,6 +136,8 @@ export function FavoritePage() {
       {!isLoading && searchFoodList.length == 0 && (
         <h1 className="mt-3">No Results</h1>
       )}
+      {/* Display MapComponent at the end of the page */}
+      <MapComponent />
     </>
   );
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 0106227..9f74d11 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { doc, increment, updateDoc } from "firebase/firestore";
 import { db } from "../config/firebase";
 import { ConCards } from "../components/ConCards";
+import MapComponent from "../components/MapComponent"; // Import the MapComponent
 
 export function Home() {
   const [foodList, setFoodList] = useState<FoodItem[]>([]); // State for all posted food items
@@ -139,9 +140,12 @@ export function Home() {
       )}
 
       {/* Display message if no results found */}
-      {!isLoading && searchFoodList.length == 0 && (
+      {!isLoading && searchFoodList.length === 0 && (
         <h1 className="mt-3">No Results</h1>
       )}
+
+      {/* Display MapComponent at the end of the page */}
+      {isConsumer ? <MapComponent /> : null}
     </>
   );
 }