Main feature

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-/.env
+/.env
+/notes.txt

README.md

@@ -1 +1,9 @@
-# my-app-react
+# Walking Buddy
+
+## Project Description
+
+This application helps you find walking buddies in your neighborhood.
+
+The app uses Firebase for authentication, database and storage.  Firebase provides pre-build components for authentication. The Firestore database manages user data and profiles useful for personalizing the experience for users. Firebase storage houses the profile images of users
+
+The project uses Google Calendar API for setting appointments. The application is built with React and uses Material UI, google-maps-react,and @aldabil/react-scheduler libraries.

package.json

@@ -8,11 +8,11 @@
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.14",
-
     "@react-google-maps/api": "^2.12.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.3",
     "firebase": "^9.9.4",
     "google-maps-react": "github:fullstackreact/google-maps-react",
     "react": "^18.2.0",

src/CalendarScheduler.js

@@ -7,6 +7,7 @@ import {
   updateUserProfileCalendarEvent,
 } from "./firebase";
 import { useLocation } from "react-router-dom";
+import { green, yellow } from "@mui/material/colors";
 
 /* 
 if no curly braces use same name - it is an object then you say userEmail.name, UserEmail.email
@@ -87,13 +88,24 @@ function CalendarScheduler() {
           startDate.getHours() +
           ":" +
           startDate.getMinutes();
+        // if event.isEventApproved == undefined is true then set to false else set to event.isEventApproved
+        const isEventApproved =
+          event.isEventApproved == undefined ? false : event.isEventApproved;
+        let color = "#0000FF";
+
+        if (isEventApproved == true) {
+          color = "#22bf5c";
+        } else {
+          color = "#0000FF";
+        }
 
         let newmyObject = [
           {
             end: new Date(formattedEndDate),
             start: new Date(formattedStartDate),
             event_id: "1",
             title: event.userEventTitle,
+            color: color,
           },
         ];
         arr = [...arr, newmyObject[0]];

src/Home.js

@@ -7,8 +7,7 @@ import { GoogleMap, useLoadScript, Marker } from "@react-google-maps/api";
 import { usePosition } from "use-position";
 import { InfoWindow } from "@react-google-maps/api";
 import { Circle } from "@react-google-maps/api";
-import update from "./firebase";
-import { GetAlldata } from "./firebase";
+
 import { databaseCollection } from "./constants";
 import { initializeApp } from "firebase/app";
 import { useNavigate } from "react-router-dom";
@@ -40,6 +39,18 @@ import "react-sliding-pane/dist/react-sliding-pane.css";
 import Slider from "@mui/material/Slider";
 import CalendarScheduler from "./CalendarScheduler";
 
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Divider from "@mui/material/Divider";
+
+import Tooltip from "@mui/material/Tooltip";
+import PersonAdd from "@mui/icons-material/PersonAdd";
+import Settings from "@mui/icons-material/Settings";
+import Logout from "@mui/icons-material/Logout";
+import { ResetTvRounded } from "@mui/icons-material";
+import { fetchUserMarkers, updateLocation } from "./serviceRequest";
+
 function Home() {
   console.log(`${process.env.REACT_APP_googleMapsApiKey}`);
   const { isLoaded } = useLoadScript({
@@ -65,10 +76,14 @@ function PopulateLocationInformation(latitude, longitude) {
   const location = useLocation();
   if (location.state) {
     console.log(location.state.user_email, "This is location info");
-    update(latitude, longitude, location.state.user_email);
+    updateLocation(location.state.user_email,longitude,latitude).then((data)=>{
+      //
+    });
   }
 }
 
+
+
 function Maps() {
   const [selected, setSelected] = useState(null);
   const [clickbutton, setClickButton] = useState(false);
@@ -93,6 +108,7 @@ function Maps() {
         state: {
           //if(userEmailCalender){user_email:userEmailCalender}
           //else user_email:location.state.user_email
+          // useEmailCalendar is other person and location.stat.user_email is logged in person
           user_email: userEmailCalendar || location.state.user_email,
         },
       });
@@ -128,22 +144,32 @@ function Maps() {
   };
 
   // get coordinates in array
-  const [markers, setFire] = useState([]);
+  const [markers, setMarkers] = useState([]);
   const app = initializeApp(firebaseConfig);
   const db = getFirestore(app);
   var locationmap = [];
   useEffect(() => {
-    const docs = getDocs(collection(db, databaseCollection)).then((docSnap) => {
+
+
+      /*
+      const docs = getDocs(collection(db, databaseCollection)).then((docSnap) => {
       docSnap.forEach((doc) => {
         locationmap.push({ ...doc.data(), id: doc.id });
       });
+      */
+
+      fetchUserMarkers().then((markersList) => {
+        setMarkers(markersList);
+        console.log("fireeeee", markers);
+      });
+
+
       // setFire stores data in the markers
-      setFire(locationmap);
+      //setMarkers(locationmap);
 
       //return locationmap;
-      console.log("fireeeee", markers);
-    });
-  }, []);
+          },[]);
+
 
   console.log("locationCoordinates:", markers);
 
@@ -174,6 +200,27 @@ function Maps() {
         return distance;
       }
     });
+  let minDistance = Number.MAX_VALUE;
+  markers.forEach((markers) => {
+    var locationlatlng = new window.google.maps.LatLng(
+      markers.latitude,
+      markers.longitude
+    );
+    console.log("location latlng:", locationlatlng);
+    // current coordinates
+    var fromlocationlatlng = new window.google.maps.LatLng(latitude, longitude);
+
+    //compute distance from current coodinates to firestore markers
+    let distance = window.google.maps.geometry.spherical.computeDistanceBetween(
+      fromlocationlatlng,
+      locationlatlng
+    );
+    console.log("Distance fetched", distance);
+    // sets the markers that show up based on what range in slider we select
+    if (distance < minDistance) {
+      minDistance = distance;
+    }
+  });
 
   console.log("Return Markers:", returnMarkers);
 
@@ -211,7 +258,45 @@ function Maps() {
   if (emailProp.state) {
     console.log(emailProp.state.user_email, "This is email info");
   }
+  const calculateZoomLevel = () => {
+    if (minDistance < 1) {
+      return 15;
+    }
+    if (minDistance < 2 && minDistance > 1) {
+      return 13;
+    }
+    if (minDistance > 2 && minDistance < 3) {
+      return 12;
+    }
+  };
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCalendarOpen = (event) => {
+    setCalendarOpened(true);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
   // radius is in meters
+
+  const fetchImageUrl = () => {
+    console.log("returnMarkers=", returnMarkers);
+    if (returnMarkers) {
+      const result = returnMarkers.find(
+        (marker) => marker.email == location.state.user_email
+      );
+      console.log("Markers object of user", result);
+      return result && result.imageUrl ? result.imageUrl : null;
+    }
+    return null;
+  };
+
   return (
     <div>
       <Box sx={{ flexGrow: 1 }}>
@@ -245,9 +330,101 @@ function Maps() {
               valueLabelDisplay="auto"
             />
             {location.state ? (
-              <Button color="inherit" onClick={handleOnClick}>
+              /*  <Button color="inherit" onClick={handleOnClick}>
                 Logout
-              </Button>
+              </Button> */
+
+              <React.Fragment>
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    textAlign: "center",
+                  }}
+                >
+                  <Typography sx={{ minWidth: 100 }}>Contact</Typography>
+                  <Typography sx={{ minWidth: 100 }}>Profile</Typography>
+                  <Tooltip title="accountSetting">
+                    <IconButton
+                      onClick={handleClick}
+                      size="small"
+                      sx={{ ml: 2 }}
+                      aria-controls={open ? "account-menu" : undefined}
+                      aria-haspopup="true"
+                      aria-expanded={open ? "true" : undefined}
+                    >
+                      <Avatar
+                        sx={{ width: 40, height: 40, margin: "auto" }}
+                        src={fetchImageUrl() ? fetchImageUrl() : " "}
+                      ></Avatar>
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+                <Menu
+                  anchorEl={anchorEl}
+                  id="account-menu"
+                  open={open}
+                  onClose={handleClose}
+                  onClick={handleClose}
+                  PaperProps={{
+                    elevation: 0,
+                    sx: {
+                      overflow: "visible",
+                      filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                      mt: 1.5,
+                      "& .MuiAvatar-root": {
+                        width: 32,
+                        height: 32,
+                        ml: -0.5,
+                        mr: 1,
+                      },
+                      "&:before": {
+                        content: '""',
+                        display: "block",
+                        position: "absolute",
+                        top: 0,
+                        right: 14,
+                        width: 10,
+                        height: 10,
+                        bgcolor: "background.paper",
+                        transform: "translateY(-50%) rotate(45deg)",
+                        zIndex: 0,
+                      },
+                    },
+                  }}
+                  transformOrigin={{ horizontal: "right", vertical: "top" }}
+                  anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+                >
+                  <MenuItem onClick={handleClose}>
+                    <Avatar
+                      src={fetchImageUrl() ? fetchImageUrl() : " "}
+                    ></Avatar>{" "}
+                    Profile
+                  </MenuItem>
+                  <MenuItem onClick={handleClose}>
+                    <Avatar /> My account
+                  </MenuItem>
+                  <Divider />
+                  <MenuItem onClick={handleClose}>
+                    <ListItemIcon>
+                      <PersonAdd fontSize="small" />
+                    </ListItemIcon>
+                    Add another account
+                  </MenuItem>
+                  <MenuItem onClick={handleCalendarOpen}>
+                    <ListItemIcon>
+                      <Settings fontSize="small" />
+                    </ListItemIcon>
+                    Calendar
+                  </MenuItem>
+                  <MenuItem onClick={handleOnClick}>
+                    <ListItemIcon>
+                      <Logout fontSize="small" />
+                    </ListItemIcon>
+                    Logout
+                  </MenuItem>
+                </Menu>
+              </React.Fragment>
             ) : (
               <Button color="inherit" onClick={handleOnClickLogin}>
                 Login
@@ -272,7 +449,7 @@ function Maps() {
       <GoogleMap
         // options = {options}
         id="circle-example"
-        zoom={12}
+        zoom={calculateZoomLevel()}
         center={{
           lat: parseFloat(latitude),
           lng: parseFloat(longitude),
@@ -314,7 +491,9 @@ function Maps() {
                     console.log(selected);
                   }}
                   icon={
-                    location.state.user_email == email
+                    location.state.user_email != null &&
+                    email != null &&
+                    location.state.user_email === email
                       ? {
                           url: "/current_user.png",
                           scaledSize: new window.google.maps.Size(25, 25),