Skip to content

Commit

Permalink
Merge pull request #732 from Michael-Dratch/Michael-Dratch/712-error-…
Browse files Browse the repository at this point in the history 
…message-if-map-fails-to-load

Michael dratch/712 error message if map fails to load
  • Loading branch information
@CodeWritingCow
CodeWritingCow authored Jul 7, 2024
2 parents dbfd341 + 4d43b07 commit 5cf0388
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 131 deletions.
209 changes: 104 additions & 105 deletions src/app/find-properties/[[...opa_id]]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const MapPage = ({ params }: MapPageProps) => {
const [featureCount, setFeatureCount] = useState<number>(0);
const [currentView, setCurrentView] = useState<BarClickOptions>("detail");
const [loading, setLoading] = useState(true);
const [hasLoadingError, setHasLoadingError] = useState(false);
const [selectedProperty, setSelectedProperty] =
useState<MapGeoJSONFeature | null>(null);
const [isStreetViewModalOpen, setIsStreetViewModalOpen] =
Expand Down Expand Up @@ -208,118 +209,116 @@ const MapPage = ({ params }: MapPageProps) => {
}, [currentView, selectedProperty, shouldFilterSavedProperties]);

return (
<NextUIProvider>
<div className="flex flex-col">
<div className="flex flex-grow overflow-hidden">
<StreetViewModal
isOpen={isStreetViewModalOpen}
onClose={() => setIsStreetViewModalOpen(false)}
>
<StreetView
lat={streetViewLocation?.[1].toString() || ""}
lng={streetViewLocation?.[0].toString() || ""}
yaw="180"
pitch="5"
fov="0.7"
<NextUIProvider>
<div className="flex flex-col">
<div className="flex flex-grow overflow-hidden">
<StreetViewModal
isOpen={isStreetViewModalOpen}
onClose={() => setIsStreetViewModalOpen(false)}
>
<StreetView
lat={streetViewLocation?.[1].toString() || ""}
lng={streetViewLocation?.[0].toString() || ""}
yaw="180"
pitch="5"
fov="0.7"
/>
</StreetViewModal>
<div className={`flex-grow ${isVisible("map")}`}>
<div className={`sticky top-0 z-10 sm:hidden ${isVisible("map")}`}>
<SidePanelControlBar {...controlBarProps} />
</div>
{isLinkedPropertyParsed ? (
<PropertyMap
featuresInView={featuresInView}
setFeaturesInView={setFeaturesInView}
setLoading={setLoading}
setHasLoadingError={setHasLoadingError}
selectedProperty={selectedProperty}
setSelectedProperty={setSelectedProperty}
setFeatureCount={setFeatureCount}
initialViewState={initialViewState}
prevCoordinate={prevCoordinateRef.current}
setPrevCoordinate={() => (prevCoordinateRef.current = null)}
/>
</StreetViewModal>
<div className={`flex-grow ${isVisible("map")}`}>
<div
className={`sticky top-0 z-10 sm:hidden ${isVisible("map")}`}
>
) : (
<div className="flex w-full h-full justify-center">
<Spinner />
</div>
)}
</div>
<SidePanel
isVisible={isVisible("properties")}
selectedProperty={selectedProperty}
>
{!selectedProperty && (
<div className="h-14 sticky top-0 z-10">
<SidePanelControlBar {...controlBarProps} />
</div>
{isLinkedPropertyParsed ? (
<PropertyMap
featuresInView={featuresInView}
setFeaturesInView={setFeaturesInView}
setLoading={setLoading}
selectedProperty={selectedProperty}
setSelectedProperty={setSelectedProperty}
setFeatureCount={setFeatureCount}
initialViewState={initialViewState}
prevCoordinate={prevCoordinateRef.current}
setPrevCoordinate={() => (prevCoordinateRef.current = null)}
)}
{currentView === "download" ? (
<div className="relative">
<ThemeButton
color="secondary"
className="right-4 lg:right-[24px] absolute top-8 min-w-[3rem]"
aria-label="Close download panel"
startContent={<PiX />}
onPress={() => updateCurrentView("detail")}
/>
) : (
<div className="flex w-full h-full justify-center">
<Spinner />
</div>
)}
</div>
<SidePanel
isVisible={isVisible("properties")}
selectedProperty={selectedProperty}
>
{!selectedProperty && (
<div className="h-14 sticky top-0 z-10">
<SidePanelControlBar {...controlBarProps} />
<div className="p-4 mt-8 text-center">
<h2 className="heading-xl font-semibold mb-4">
Access Our Data
</h2>
<p>
If you are interested in accessing the data behind this
dashboard, please reach out to us at
<a
href="mailto:cleanandgreenphl@gmail.com"
className="text-blue-600 hover:text-blue-800 underline"
>
{" "}
cleanandgreenphl@gmail.com
</a>
. Let us know who you are and why you want the data. We are
happy to share the data with anyone with community-oriented
interests.
</p>
</div>
)}
{currentView === "download" ? (
<div className="relative">
<ThemeButton
color="secondary"
className="right-4 lg:right-[24px] absolute top-8 min-w-[3rem]"
aria-label="Close download panel"
startContent={<PiX />}
onPress={() => updateCurrentView("detail")}
/>
<div className="p-4 mt-8 text-center">
<h2 className="heading-xl font-semibold mb-4">
Access Our Data
</h2>
<p>
If you are interested in accessing the data behind this
dashboard, please reach out to us at
<a
href="mailto:cleanandgreenphl@gmail.com"
className="text-blue-600 hover:text-blue-800 underline"
>
{" "}
cleanandgreenphl@gmail.com
</a>
. Let us know who you are and why you want the data. We
are happy to share the data with anyone with
community-oriented interests.
</p>
</div>
</div>
) : currentView === "filter" ? (
<FilterView updateCurrentView={updateCurrentView} />
</div>
) : currentView === "filter" ? (
<FilterView updateCurrentView={updateCurrentView} />
) : (
<PropertyDetailSection
featuresInView={featuresInView}
display={currentView as "detail" | "list"}
loading={loading}
hasLoadingError={hasLoadingError}
selectedProperty={selectedProperty}
setSelectedProperty={setSelectedProperty}
setIsStreetViewModalOpen={setIsStreetViewModalOpen}
shouldFilterSavedProperties={shouldFilterSavedProperties}
setShouldFilterSavedProperties={setShouldFilterSavedProperties}
smallScreenMode={smallScreenMode}
updateCurrentView={updateCurrentView}
/>
)}
</SidePanel>
<ThemeButton
aria-label={`Change to ${smallScreenMode}`}
label={smallScreenMode === "map" ? "List View" : "Map View"}
className="fixed bottom-10 left-1/2 -ml-[3.5rem] rounded-2xl sm:hidden max-md:min-w-[7rem]"
onPress={updateSmallScreenMode}
startContent={
smallScreenMode === "map" ? (
<ListBullets />
) : (
<PropertyDetailSection
featuresInView={featuresInView}
display={currentView as "detail" | "list"}
loading={loading}
selectedProperty={selectedProperty}
setSelectedProperty={setSelectedProperty}
setIsStreetViewModalOpen={setIsStreetViewModalOpen}
shouldFilterSavedProperties={shouldFilterSavedProperties}
setShouldFilterSavedProperties={
setShouldFilterSavedProperties
}
smallScreenMode={smallScreenMode}
updateCurrentView={updateCurrentView}
/>
)}
</SidePanel>
<ThemeButton
aria-label={`Change to ${smallScreenMode}`}
label={smallScreenMode === "map" ? "List View" : "Map View"}
className="fixed bottom-10 left-1/2 -ml-[3.5rem] rounded-2xl sm:hidden max-md:min-w-[7rem]"
onPress={updateSmallScreenMode}
startContent={
smallScreenMode === "map" ? (
<ListBullets />
) : (
<GlobeHemisphereWest />
)
}
/>
</div>
<GlobeHemisphereWest />
)
}
/>
</div>
</NextUIProvider>
</div>
</NextUIProvider>
);
};

Expand Down
13 changes: 12 additions & 1 deletion src/components/PropertyDetailSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ interface PropertyDetailSectionProps {
featuresInView: MapGeoJSONFeature[];
display: "detail" | "list";
loading: boolean;
hasLoadingError: boolean;
selectedProperty: MapGeoJSONFeature | null;
setSelectedProperty: (property: MapGeoJSONFeature | null) => void;
setIsStreetViewModalOpen: Dispatch<SetStateAction<boolean>>;
Expand All @@ -63,6 +64,7 @@ const PropertyDetailSection: FC<PropertyDetailSectionProps> = ({
featuresInView,
display,
loading,
hasLoadingError,
selectedProperty,
setSelectedProperty,
setIsStreetViewModalOpen,
Expand Down Expand Up @@ -173,7 +175,16 @@ const PropertyDetailSection: FC<PropertyDetailSectionProps> = ({
return featuresInView.slice(start, end);
}, [page, featuresInView, smallScreenMode]);

return loading ? (
return hasLoadingError ? (
<div className="flex flex-col w-full items-center justify-center p-4 mt-24">
<div>
<p className="body-md">We are having technical issues.</p>
</div>
<div>
<p className="body-md">Please try again later.</p>
</div>
</div>
) : loading ? (
<div className="flex-grow h-full">
{/* Center vertically in screen */}
<div className="flex w-full justify-center p-4 mt-24">
Expand Down
Loading

0 comments on commit 5cf0388

Please sign in to comment.