feat: Open sidebar from map

Author: markgoetz

src/app/components/PropertyDetailSection.tsx

@@ -33,16 +33,18 @@ interface PropertyDetailSectionProps {
   featuresInView: MapboxGeoJSONFeature[];
   display: "detail" | "list";
   loading: boolean;
+  selectedProperty: MapboxGeoJSONFeature | null;
+  setSelectedProperty: (property: MapboxGeoJSONFeature | null) => void;
 }
 
 const PropertyDetailSection: FC<PropertyDetailSectionProps> = ({
   featuresInView,
   display,
   loading,
+  selectedProperty,
+  setSelectedProperty,
 }) => {
   const [page, setPage] = useState(1);
-  const [selectedProperty, setSelectedProperty] =
-    useState<MapboxGeoJSONFeature | null>(null);
 
   const rowsPerPage = 6;
   const pages = Math.ceil(featuresInView.length / rowsPerPage);

src/app/components/PropertyMap.tsx

@@ -24,6 +24,8 @@ import Map, {
   AttributionControl,
 } from "react-map-gl";
 import { FillLayer, VectorSourceRaw } from "react-map-gl";
+import { MapboxGeoJSONFeature } from "mapbox-gl";
+
 import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
 import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
 
@@ -70,10 +72,12 @@ const MapControls = () => (
 interface PropertyMapProps {
   setFeaturesInView: Dispatch<SetStateAction<any[]>>;
   setLoading: Dispatch<SetStateAction<boolean>>;
+  setSelectedProperty: (property: MapboxGeoJSONFeature | null) => void;
 }
 const PropertyMap: React.FC<PropertyMapProps> = ({
   setFeaturesInView,
   setLoading,
+  setSelectedProperty,
 }: any) => {
   const { filter } = useFilter();
   const [popupInfo, setPopupInfo] = useState<any | null>(null);
@@ -115,6 +119,7 @@ const PropertyMap: React.FC<PropertyMapProps> = ({
       });
 
       if (features.length > 0) {
+        setSelectedProperty(features[0]);
         setPopupInfo({
           longitude: event.lngLat.lng,
           latitude: event.lngLat.lat,

src/app/map/page.tsx

@@ -11,13 +11,15 @@ import {
   SidePanelControlBar,
   FilterView,
 } from "../components";
+import { MapboxGeoJSONFeature } from "mapbox-gl";
 
 export type BarClickOptions = "filter" | "download" | "detail" | "list";
 
 const Page: FC = () => {
   const [featuresInView, setFeaturesInView] = useState<any[]>([]);
   const [currentView, setCurrentView] = useState<BarClickOptions>("detail");
   const [loading, setLoading] = useState(false);
+  const [selectedProperty, setSelectedProperty] = useState<MapboxGeoJSONFeature | null>(null);
 
   return (
     <FilterProvider>
@@ -29,6 +31,7 @@ const Page: FC = () => {
               <PropertyMap
                 setFeaturesInView={setFeaturesInView}
                 setLoading={setLoading}
+                setSelectedProperty={setSelectedProperty}
               />
             </div>
             <SidePanel>
@@ -42,6 +45,8 @@ const Page: FC = () => {
                   featuresInView={featuresInView}
                   display={currentView as "detail" | "list"}
                   loading={loading}
+                  selectedProperty={selectedProperty}
+                  setSelectedProperty={setSelectedProperty}
                 />
               )}
               {currentView === "download" && (