Feature/ca google maps

client/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

client/package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@types/canvas-confetti": "^1.9.0",
+    "@types/google.maps": "^3.58.1",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@types/react-icons": "^2.2.7",

client/src/components/Navbar.tsx

@@ -10,6 +10,8 @@ const Navbar: React.FC = () => {
     setToken(null);
   };
 
+const username = localStorage.getItem("username") || "Anonymous";
+
   return (
     <nav className="navbar">
       <div className="navbar-container">
@@ -20,6 +22,7 @@ const Navbar: React.FC = () => {
             className="logo-icon"
           />
           <h2 className="nav-title">MileTracker</h2>
+          <h3 className="nav-user">Hello {username}</h3>
         </div>
 
         {token && (

client/src/components/TripForm.tsx

@@ -11,6 +11,8 @@ import Button from "./Button";
 import { baseFieldStyles, selectFieldStyles } from "../../styles/styles";
 import confetti from "canvas-confetti";
 
+// const GOOGLE_API_KEY = import.meta.env.VITE_GOOGLE_API_KEY;
+
 const ADD_TRIP = gql`
   mutation AddTrip(
     $startLocation: String!
@@ -87,6 +89,25 @@ const US_STATES = [
   "WY",
 ];
 
+// const loadGoogleMapsScript = (apiKey: string) => {
+//   if (!apiKey) {
+//     console.error("Google Maps API key is missing!");
+//     return Promise.reject("Missing API key");
+
+//   }
+//   if (window.google) return Promise.resolve();
+
+//   return new Promise<void>((resolve, reject) => {
+//     const script = document.createElement("script");
+//     script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
+//     script.async = true;
+//     script.defer = true;
+//     script.onload = () => resolve();
+//     script.onerror = () => reject("Failed to load Google Maps script.");
+//     document.head.appendChild(script);
+//   });
+// };
+
 const getTodayDate = (): string => {
   const today = new Date();
   const offsetDate = new Date(
@@ -128,6 +149,74 @@ const TripForm: React.FC<{ onTripAdded?: () => void }> = ({ onTripAdded }) => {
     },
   });
 
+
+// const startStreetRef = useRef<HTMLInputElement | null>(null);
+// const endStreetRef = useRef<HTMLInputElement | null>(null);
+
+// useEffect(() => {
+//   const initAutocomplete = async () => {
+//     try {
+//       await loadGoogleMapsScript(GOOGLE_API_KEY);
+
+//       if (window.google && startStreetRef.current) {
+//         const startAutocomplete = new google.maps.places.Autocomplete(
+//           startStreetRef.current,
+//           { types: ["address"], componentRestrictions: { country: "us" } }
+//         );
+
+//         startAutocomplete.addListener("place_changed", () => {
+//           const place = startAutocomplete.getPlace();
+//           if (place.address_components) {
+//             const city = place.address_components.find((c) =>
+//               c.types.includes("locality")
+//             )?.long_name;
+//             const state = place.address_components.find((c) =>
+//               c.types.includes("administrative_area_level_1")
+//             )?.short_name;
+
+//             setFormState((prev) => ({
+//               ...prev,
+//               startStreet: place.formatted_address || prev.startStreet,
+//               startCity: city || prev.startCity,
+//               startState: state || prev.startState,
+//             }));
+//           }
+//         });
+//       }
+
+//       if (window.google && endStreetRef.current) {
+//         const endAutocomplete = new google.maps.places.Autocomplete(
+//           endStreetRef.current,
+//           { types: ["address"], componentRestrictions: { country: "us" } }
+//         );
+
+//         endAutocomplete.addListener("place_changed", () => {
+//           const place = endAutocomplete.getPlace();
+//           if (place.address_components) {
+//             const city = place.address_components.find((c) =>
+//               c.types.includes("locality")
+//             )?.long_name;
+//             const state = place.address_components.find((c) =>
+//               c.types.includes("administrative_area_level_1")
+//             )?.short_name;
+
+//             setFormState((prev) => ({
+//               ...prev,
+//               endStreet: place.formatted_address || prev.endStreet,
+//               endCity: city || prev.endCity,
+//               endState: state || prev.endState,
+//             }));
+//           }
+//         });
+//       }
+//     } catch (error) {
+//       console.error(error);
+//     }
+//   };
+
+//   initAutocomplete();
+// }, []);
+
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
   ) => {
@@ -248,6 +337,7 @@ const TripForm: React.FC<{ onTripAdded?: () => void }> = ({ onTripAdded }) => {
               placeholder="Street (optional)"
               value={formState.startStreet}
               onChange={handleChange}
+              // ref={startStreetRef}
             />
             <input
               className={baseFieldStyles}
@@ -283,6 +373,7 @@ const TripForm: React.FC<{ onTripAdded?: () => void }> = ({ onTripAdded }) => {
               placeholder="Street (optional)"
               value={formState.endStreet}
               onChange={handleChange}
+              // ref={endStreetRef}
             />
             <input
               className={baseFieldStyles}

client/styles/navbar.css

@@ -21,9 +21,9 @@ nav button:hover {
 .nav-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  position: relative;
+  justify-content: space-evenly;
+  gap: 1rem;
+  width: 100%;
 }
 .nav-links {
   display: flex;
@@ -46,13 +46,25 @@ nav button:hover {
   background-color: var(--sky);
   color: var(--prussian);
 }
+
+.nav-title,
+.nav-user {
+  margin-bottom: 0; /* remove bottom margin so they stay in line */
+  width: auto; /* remove the fixed width that may cause wrapping */
+}
+
 .nav-title {
   font-size: 2rem;
   font-weight: 800;
   text-transform: uppercase;
   text-align: center;
-  width: 100%;
-  margin-bottom: 0.5rem;
+}
+
+.nav-user {
+    font-size: 1rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  text-align: center;
 }
 
 nav button {

server/package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@types/axios": "^0.9.36",
     "@types/bcrypt": "^5.0.2",
+    "@types/google.maps": "^3.58.1",
     "@types/jsonwebtoken": "^9.0.9",
     "@types/node": "^22.15.17",
     "@types/react-router-dom": "^5.3.3",