Implemented Zoom Functionality For Apartment Maps

- Implemented zoom in/out buttons for small map and map modal
- Resolved firebase import issues by adding new export and import statements

frontend/src/components/Apartment/MapInfo.tsx

@@ -4,6 +4,8 @@ import GoogleMapReact from 'google-map-react';
 import aptIcon from '../../assets/location-pin.svg';
 import schoolIcon from '../../assets/school-pin.svg';
 import expandIcon from '../../assets/expand-button.svg';
+import zoomInIcon from '../../assets/zoom-in-icon.png';
+import zoomOutIcon from '../../assets/zoom-out-icon.png';
 import recenterIcon from '../../assets/recenter-icon.svg';
 import blackPinIcon from '../../assets/ph_map-pin-fill.svg';
 import { config } from 'dotenv';
@@ -102,6 +104,26 @@ const useStyles = makeStyles((theme) => ({
     background: 'rgba(255, 255, 255, 0.70)',
     boxShadow: '2px 4px 4px 0px rgba(0, 0, 0, 0.10)',
   },
+  zoomInButton: {
+    position: 'absolute',
+    bottom: '53px',
+    right: '13px',
+    width: '39px',
+    height: '39px',
+    borderRadius: '4px',
+    background: 'rgba(255, 255, 255, 0.70)',
+    boxShadow: '2px 4px 4px 0px rgba(0, 0, 0, 0.10)',
+  },
+  zoomOutButton: {
+    position: 'absolute',
+    bottom: '13px',
+    right: '13px',
+    width: '39px',
+    height: '39px',
+    borderRadius: '4px',
+    background: 'rgba(255, 255, 255, 0.70)',
+    boxShadow: '2px 4px 4px 0px rgba(0, 0, 0, 0.10)',
+  },
 }));
 
 /**
@@ -127,7 +149,8 @@ export default function MapInfo({
   handleClick,
   isMobile,
 }: MapInfoProps): ReactElement {
-  const { outerMapDiv, innerMapDiv, mapExpandButton, recenterButton } = useStyles();
+  const { outerMapDiv, innerMapDiv, mapExpandButton, recenterButton, zoomInButton, zoomOutButton } =
+    useStyles();
   const mapRef = useRef<google.maps.Map | null>(null);
 
   const handleApiLoaded = ({ map, maps }: { map: google.maps.Map; maps: typeof google.maps }) => {
@@ -141,6 +164,18 @@ export default function MapInfo({
     }
   };
 
+  // Function to handle zoom in/out of the map
+  const handleZoom = (zoomChange: number) => {
+    if (mapRef.current) {
+      const currentZoom = mapRef.current.getZoom() || 16; // Ensure there is a valid value for currentZoom
+      const newZoom = currentZoom + zoomChange;
+      if (newZoom > 11 && newZoom < 20) {
+        // Ensure the new zoom is within the allowed range
+        mapRef.current.setZoom(newZoom);
+      }
+    }
+  };
+
   const expandOrRecenter = (isMobile: boolean) => {
     return isMobile ? (
       <IconButton disableRipple className={recenterButton} onClick={handleRecenter}>
@@ -203,13 +238,29 @@ export default function MapInfo({
           </div>
           {expandOrRecenter(isMobile)}
           {!isMobile && (
-            <IconButton onClick={handleClick} className={mapExpandButton} disableRipple>
-              <img
-                src={expandIcon}
-                alt={'expand-icon'}
-                style={{ width: '21.4px', height: '21.4px' }}
-              />
-            </IconButton>
+            <div>
+              <IconButton onClick={handleClick} className={mapExpandButton} disableRipple>
+                <img
+                  src={expandIcon}
+                  alt={'expand-icon'}
+                  style={{ width: '21.4px', height: '21.4px' }}
+                />
+              </IconButton>
+              <IconButton disableRipple className={zoomInButton} onClick={() => handleZoom(1)}>
+                <img
+                  src={zoomInIcon}
+                  alt={'zoom-in-icon'}
+                  style={{ width: '21.4px', height: '21.4px' }}
+                />
+              </IconButton>
+              <IconButton disableRipple className={zoomOutButton} onClick={() => handleZoom(-1)}>
+                <img
+                  src={zoomOutIcon}
+                  alt={'zoom-out-icon'}
+                  style={{ width: '21.4px', height: '21.4px' }}
+                />
+              </IconButton>
+            </div>
           )}
         </div>
         <Box>

frontend/src/components/Apartment/MapModal.tsx

@@ -16,6 +16,8 @@ import aptIcon from '../../assets/location-pin.svg';
 import schoolIcon from '../../assets/school-pin.svg';
 import recenterIcon from '../../assets/recenter-icon.svg';
 import closeMapIcon from '../../assets/close-map-icon.svg';
+import zoomInIcon from '../../assets/zoom-in-icon.png';
+import zoomOutIcon from '../../assets/zoom-out-icon.png';
 import { Marker } from './Marker';
 import blackPinIcon from '../../assets/ph_map-pin-fill.svg';
 import React, { Dispatch, SetStateAction, useRef } from 'react';
@@ -57,6 +59,26 @@ const useStyles = makeStyles((theme) => ({
     background: 'rgba(255, 255, 255, 0.70)',
     boxShadow: '2px 4px 4px 0px rgba(0, 0, 0, 0.10)',
   },
+  zoomInButton: {
+    position: 'absolute',
+    bottom: '53px',
+    right: '13px',
+    width: '39px',
+    height: '39px',
+    borderRadius: '4px',
+    background: 'rgba(255, 255, 255, 0.70)',
+    boxShadow: '2px 4px 4px 0px rgba(0, 0, 0, 0.10)',
+  },
+  zoomOutButton: {
+    position: 'absolute',
+    bottom: '13px',
+    right: '13px',
+    width: '39px',
+    height: '39px',
+    borderRadius: '4px',
+    background: 'rgba(255, 255, 255, 0.70)',
+    boxShadow: '2px 4px 4px 0px rgba(0, 0, 0, 0.10)',
+  },
 }));
 
 interface MapModalProps extends BaseProps {
@@ -94,7 +116,8 @@ const MapModal = ({
   walkTime = 0,
   driveTime = 0,
 }: MapModalProps) => {
-  const { paper, outerMapDiv, innerMapDiv, recenterButton } = useStyles();
+  const { paper, outerMapDiv, innerMapDiv, recenterButton, zoomInButton, zoomOutButton } =
+    useStyles();
   const mapRef = useRef<google.maps.Map | null>(null);
 
   const handleApiLoaded = ({ map, maps }: { map: google.maps.Map; maps: typeof google.maps }) => {
@@ -108,6 +131,18 @@ const MapModal = ({
     }
   };
 
+  // Function to handle zoom in/out of the map
+  const handleZoom = (zoomChange: number) => {
+    if (mapRef.current) {
+      const currentZoom = mapRef.current.getZoom() || 16; // Ensure there is a valid value for currentZoom
+      const newZoom = currentZoom + zoomChange;
+      if (newZoom > 11 && newZoom < 20) {
+        // Ensure the new zoom is within the allowed range
+        mapRef.current.setZoom(newZoom);
+      }
+    }
+  };
+
   const IconAndText = ({
     icon,
     altText,
@@ -259,6 +294,20 @@ const MapModal = ({
                   style={{ width: '21.4px', height: '21.4px' }}
                 />
               </IconButton>
+              <IconButton disableRipple className={zoomInButton} onClick={() => handleZoom(1)}>
+                <img
+                  src={zoomInIcon}
+                  alt={'zoom-in-icon'}
+                  style={{ width: '21.4px', height: '21.4px' }}
+                />
+              </IconButton>
+              <IconButton disableRipple className={zoomOutButton} onClick={() => handleZoom(-1)}>
+                <img
+                  src={zoomOutIcon}
+                  alt={'zoom-out-icon'}
+                  style={{ width: '21.4px', height: '21.4px' }}
+                />
+              </IconButton>
             </div>
 
             <Grid

frontend/src/components/ApartmentCard/ScrollingCards.tsx

@@ -4,6 +4,7 @@ import { loadingLength } from '../../constants/HomeConsts';
 import { CardData } from '../../App';
 import { get } from '../../utils/call';
 import { makeStyles, Typography } from '@material-ui/core';
+import firebase from '../../utils/firebase';
 
 const useStyles = makeStyles({
   loadingMsg: {

frontend/src/pages/HomePage.tsx

@@ -9,6 +9,7 @@ import { CardData } from '../App';
 import { get } from '../utils/call';
 import { loadingLength } from '../constants/HomeConsts';
 import { useTitle } from '../utils';
+import firebase from '../utils/firebase';
 
 const useStyles = makeStyles({
   jumboText: {

frontend/src/pages/LocationPage.tsx

@@ -9,6 +9,7 @@ import { colors } from '../colors';
 import { CardData } from '../App';
 import { get } from '../utils/call';
 import ApartmentCards from '../components/ApartmentCard/ApartmentCards';
+import firebase from '../utils/firebase';
 
 interface Images {
   [location: string]: string;

frontend/src/pages/ReviewPage.tsx

@@ -3,6 +3,7 @@ import { Box, Container, Typography, makeStyles } from '@material-ui/core';
 import { get } from '../utils/call';
 import ApartmentCards from '../components/ApartmentCard/ApartmentCards';
 import { CardData } from '../App';
+import firebase from '../utils/firebase';
 
 type Props = {
   user: firebase.User | null;

frontend/src/pages/SearchResultsPage.tsx

@@ -6,6 +6,7 @@ import { colors } from '../colors';
 import { CardData } from '../App';
 import ApartmentCards from '../components/ApartmentCard/ApartmentCards';
 import { useTitle } from '../utils';
+import firebase from '../utils/firebase';
 
 const useStyles = makeStyles({
   searchText: {

frontend/src/utils/adminTool.ts

@@ -1,4 +1,5 @@
 import { admins } from '../constants/HomeConsts';
+import firebase from './firebase';
 export const isAdmin = (user: firebase.User | null) => {
   if (user && typeof user?.email === 'string' && admins.includes(user?.email)) return true;
   return false;

frontend/src/utils/firebase.ts

@@ -70,3 +70,4 @@ const uploadFile = async (file: File) => {
 };
 
 export { createAuthHeaders, getUser, uploadFile, subscribeLikes, signOut };
+export default firebase;