Map feature

.env

@@ -3,3 +3,5 @@ ALGOLIA_INDEX_NAME=esika
 ALGOLIA_APP_ID=6208GZDBB0
 ALGOLIA_ADMIN_KEY=46b4e5cfcc4f05a43293f9345744414e
 ALGOLIA_SEARCH_KEY=e4251a0982ea2328fbe0f223e9e89740
+MAPBOX_ACCESS_TOKEN=pk.eyJ1Ijoiam9uYXRoemloaW5kdWxhIiwiYSI6ImNreW4wZXBwbTNsd2EydW4wamJ1aTdidHgifQ.zVkgrvMk02fZiJFaV_jkDQ
+MAPBOX_CUSTOM_STYLE_URL=mapbox://styles/jonathzihindula/ckynaitbt8tyh14qpylblnbwp

package.json

@@ -29,6 +29,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-image-file-resizer": "^0.4.7",
+    "react-map-gl": "^6.1.18",
     "react-phone-input-2": "^2.14.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/app/modules/__modules__/MapBox/MapBoxMarker/index.tsx

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import { Marker } from 'react-map-gl';
+import LocationVector from 'app/modules/__modules__/_vectors/LocationVector';
+
+interface IMarkerProps {
+  latitude: number;
+  longitude: number;
+  onClick: () => void;
+}
+
+const MapBoxMarker = ({
+  latitude,
+  longitude,
+  onClick,
+}: IMarkerProps): ReactElement => {
+  return (
+    <Marker
+      latitude={latitude}
+      longitude={longitude}
+      onClick={onClick}
+    >
+      <LocationVector className="text-red-600 h-10 w-10 animate-bounce cursor-pointer" />
+    </Marker>
+  );
+};
+
+export default MapBoxMarker;

src/app/modules/__modules__/MapBox/MapBoxPopUp/index.tsx

@@ -0,0 +1,33 @@
+import { ReactElement } from 'react';
+import { Popup } from 'react-map-gl';
+import { IProperty } from 'app/modules/@Types';
+
+interface IPopUpProps {
+  property: IProperty | null;
+  latitude: number;
+  longitude: number;
+  onClose: () => void;
+}
+
+const MapBoxPopUp = ({
+  property,
+  latitude,
+  longitude,
+  onClose,
+}: IPopUpProps): ReactElement => {
+  return (
+    <Popup
+      key={property?.propertyId}
+      latitude={latitude}
+      longitude={longitude}
+      onClose={onClose}
+    >
+      <p className="w-40 font-extrabold">{property?.title}</p>
+      <p className="overflow-hidden break-words w-40 text-xs">
+        {property?.description}
+      </p>
+    </Popup>
+  );
+};
+
+export default MapBoxPopUp;

src/app/modules/__modules__/MapBox/index.tsx

@@ -0,0 +1,86 @@
+import ReactMapGL, { NavigationControl } from 'react-map-gl';
+import { ReactElement, SetStateAction, useState } from 'react';
+import keys from 'app/modules/utils/configs/keys';
+import ShowWidget from 'app/modules/__modules__/ShowWidget';
+import { IProperty } from 'app/modules/@Types';
+import MapBoxMarker from './MapBoxMarker/index';
+import MapBoxPopUp from './MapBoxPopUp/index';
+import CloseVector from '../_vectors/closeVector';
+
+interface ICoordinates {
+  longitude: number;
+  latitude: number;
+  zoom: number;
+}
+
+interface Props {
+  property: IProperty | null;
+  isLoading: boolean;
+  onClick: () => void;
+}
+
+const MapBox = ({
+  property,
+  isLoading,
+  onClick,
+}: Props): ReactElement => {
+  const [coordinates] = useState({
+    lng: 32.58252,
+    lat: 0.347596,
+  });
+  const [displayPupUp, setDisplayPopUp] = useState(true);
+
+  const [viewport, setViewport] = useState<ICoordinates>({
+    longitude: coordinates.lng,
+    latitude: coordinates.lat,
+    zoom: 12,
+  });
+
+  const togglePopUp = () => {
+    setDisplayPopUp(!displayPupUp);
+  };
+
+  return (
+    <div className="mt-4 mx-auto">
+      <ShowWidget
+        condition={!isLoading}
+        fallback={
+          <div className="w-full h-full mt-3 sm:mt-0 bg-gray-200 animate-pulse" />
+        }
+      >
+        <ReactMapGL
+          {...viewport}
+          mapStyle={keys.MAPBOX_CUSTOM_STYLE_URL}
+          mapboxApiAccessToken={keys.MAPBOX_ACCESS_TOKEN}
+          width="100%"
+          height="50vh"
+          onViewportChange={(
+            viewport: SetStateAction<ICoordinates>,
+          ): void => {
+            setViewport(viewport);
+          }}
+        >
+          <NavigationControl className="right-4 top-4" />
+          <div onClick={onClick} aria-hidden>
+            <CloseVector className="text-black bg-white shadow-xl rounded-lg mt-4 ml-4 cursor-pointer" />
+          </div>
+          <MapBoxMarker
+            latitude={coordinates.lat}
+            longitude={coordinates.lng}
+            onClick={togglePopUp}
+          />
+          {displayPupUp && (
+            <MapBoxPopUp
+              property={property}
+              latitude={coordinates.lat}
+              longitude={coordinates.lng}
+              onClose={togglePopUp}
+            />
+          )}
+        </ReactMapGL>
+      </ShowWidget>
+    </div>
+  );
+};
+
+export default MapBox;

src/app/modules/__modules__/_vectors/closeVector.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  defaultVectorProps,
+  classNameInterface,
+} from 'app/modules/@Types';
+
+const CloseVector = ({ className }: classNameInterface) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width="53.7"
+      height="53.7"
+      viewBox="0 0 53.7 53.7"
+    >
+      <path
+        opacity="1"
+        fill="%23666E6E"
+        d="M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z"
+      />
+    </svg>
+  );
+};
+
+CloseVector.defaultVectorProps = defaultVectorProps;
+
+export default CloseVector;

src/app/modules/_noAuth/Property/PropertyDetailsDesktop/index.tsx

@@ -9,16 +9,20 @@ interface Props {
   property: IProperty | null;
   loading: boolean;
   isLoading: boolean;
+  onClick: () => void;
+  showMapButton: boolean;
 }
 
 const PropertyDetailsDesktop = ({
   agent,
   property,
   isLoading,
   loading,
+  onClick,
+  showMapButton,
 }: Props) => {
   return (
-    <div className="pt-8 pb-5 flex justify-between">
+    <div className="pt-8 pb-10 flex justify-between">
       <div className="w-[65%] h-24 border-b pb-3 border-gray-300 flex justify-between">
         <div className="block w-[80%]">
           <ShowWidget
@@ -70,7 +74,7 @@ const PropertyDetailsDesktop = ({
               </p>
             </ShowWidget>
           </div>
-          <div className="pt-2 flex justify-center items-center">
+          <div className="pt-2 flex flex-col justify-center items-center">
             <ShowWidget
               condition={!isLoading}
               fallback={
@@ -83,6 +87,15 @@ const PropertyDetailsDesktop = ({
               >
                 Contacter l&apos;agent
               </button>
+              {showMapButton && (
+                <button
+                  type="submit"
+                  onClick={onClick}
+                  className="w-[80%] p-1 bg-brand-bold text-sm text-white rounded-lg px-3 py-2 mt-4"
+                >
+                  Voir sur map
+                </button>
+              )}
             </ShowWidget>
           </div>
         </div>

src/app/modules/_noAuth/Property/index.tsx

@@ -23,6 +23,7 @@ import useResponsive from 'app/modules/Hooks/useResponsive';
 import SearchContainer from 'app/modules/__modules__/SearchContainer';
 import Header from 'app/modules/__modules__/Header';
 import { useSearch } from 'app/modules/Contexts/SearchContext';
+import MapBox from 'app/modules/__modules__/MapBox';
 import RelatedProperties from './RelatedProperties';
 import PropertyCarousel from './PropertyCarousel';
 import PropertyDetails from './PropertyDetails';
@@ -35,6 +36,8 @@ const PropertyContainer = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [agent, setAgent] = useState<IAgent | null>(null);
   const [readMore, setReadMore] = useState(false);
+  const [openMap, setOpenMap] = useState(false);
+  const [showMapButton, setShowMapButtom] = useState(true);
 
   const [isMobile] = useResponsive();
 
@@ -113,6 +116,11 @@ const PropertyContainer = () => {
     setReadMore(!readMore);
   };
 
+  const onClick = () => {
+    setOpenMap(!openMap);
+    setShowMapButtom(!showMapButton);
+  };
+
   return (
     <div className="container mx-auto px-0 md:px-8 no-scrollbars">
       {isMobile ? (
@@ -133,6 +141,15 @@ const PropertyContainer = () => {
           />
         </>
       )}
+      {openMap && (
+        <>
+          <MapBox
+            property={property}
+            isLoading={isLoading}
+            onClick={onClick}
+          />
+        </>
+      )}
 
       {isMobile ? (
         <>
@@ -158,6 +175,8 @@ const PropertyContainer = () => {
           isLoading={isLoading}
           property={property}
           agent={agent}
+          onClick={onClick}
+          showMapButton={showMapButton}
         />
       )}
 
@@ -196,7 +215,7 @@ const PropertyContainer = () => {
         </ShowWidget>
       </div>
       {isMobile && (
-        <div className="mx-4 my-5 md:container md:mx-auto md:px-56 flex justify-center items-center">
+        <div className="mx-4 my-5 md:container md:mx-auto md:px-56 flex flex-col justify-center items-center">
           <ShowWidget
             condition={!isLoading}
             fallback={
@@ -209,6 +228,15 @@ const PropertyContainer = () => {
             >
               Contacter l&apos;agent
             </button>
+            {showMapButton && (
+              <button
+                type="submit"
+                onClick={onClick}
+                className="w-full p-3 bg-brand-bold text-white rounded-lg md:mx-auto md:px-16 mt-4"
+              >
+                Voir sur map
+              </button>
+            )}
           </ShowWidget>
         </div>
       )}

src/app/modules/utils/configs/keys.ts

@@ -8,6 +8,8 @@ type kType = {
   ALGOLIA_API_KEY: valueType;
   ALGOLIA_APP_ID: valueType;
   JWT_SECRET_KEY: valueType;
+  MAPBOX_ACCESS_TOKEN: string | undefined;
+  MAPBOX_CUSTOM_STYLE_URL: valueType | string;
   USER_ROLE_KEY: string;
   AGENT_ROLE_KEY: string;
   GUEST_ROLE_KEY: string;
@@ -22,6 +24,8 @@ const keys: kType = {
   ALGOLIA_INDEX_NAME: process.env.ALGOLIA_INDEX_NAME,
   JWT_SECRET_KEY: process.env.JWT_SECRET_KEY,
   USER_ROLE_KEY: process.env.USER_ROLE_KEY || 'KF094msdkdE8RL',
+  MAPBOX_ACCESS_TOKEN: process.env.MAPBOX_ACCESS_TOKEN,
+  MAPBOX_CUSTOM_STYLE_URL: process.env.MAPBOX_CUSTOM_STYLE_URL,
   AGENT_ROLE_KEY: 'oPer849zcvDJS',
   GUEST_ROLE_KEY: 'EGsdg4ma48LT',
 };