Skip to content
Snippets Groups Projects
Commit dd089057 authored by Moritz Stückler's avatar Moritz Stückler :cowboy:
Browse files

feat: add error modal component

parent 37b7f160
No related branches found
No related tags found
No related merge requests found
import React, { useEffect, useState } from 'react';
import useSWR from 'swr';
import SidebarListView from './Sidebar/SidebarListView';
// import mockData from './testData.json';
import type { PointOfInterest } from './types/PointOfInterest';
import SidebarSingleView from './Sidebar/SidebarSingleView';
import Map from './Map/Map';
import Modal from './Modal';
import { ExclamationOutline as AlertIcon } from 'heroicons-react';
function App() {
const [poiData, setPoiData] = useState<PointOfInterest[]>([]);
const [selectedPoi, setSelectedPoi] = useState<null | PointOfInterest>(null);
const [hoveredPoiId, setHoveredPoiId] = useState<null | number>(null);
const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
const handlePoiClick = (id: number) => {
const newPoi = poiData.find((poi) => poi.id === id);
......@@ -45,35 +47,45 @@ function App() {
useEffect(() => {
data && console.log('Fetched new data', data);
data && data.pois && setPoiData(data.pois);
data?.pois && setPoiData(data.pois);
}, [data]);
useEffect(() => {
error && console.error('Error while fetching', error);
setShowErrorModal(true);
}, [error]);
return (
<div className={'flex md:flex-row-reverse flex-col h-full'}>
<Map
onMouseEnter={handlePoiHoverOn}
onMouseLeave={handlePoiHoverOff}
hoveredPoiId={hoveredPoiId}
values={poiData}
onSelect={handlePoiClick}
selectedEntry={selectedPoi}
/>
{selectedPoi ? (
<SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
) : (
<SidebarListView
<>
{showErrorModal && (
<Modal
title="API nicht erreichbar"
text="Kann die API nicht erreichen. Bitte später erneut probieren."
icon={<AlertIcon className="h-6 w-6 text-red-600" />}
/>
)}
<div className={'flex md:flex-row-reverse flex-col h-full'}>
<Map
onMouseEnter={handlePoiHoverOn}
onMouseLeave={handlePoiHoverOff}
className="sidebar"
hoveredPoiId={hoveredPoiId}
values={poiData}
onClick={handlePoiClick}
onSelect={handlePoiClick}
selectedEntry={selectedPoi}
/>
)}
</div>
{selectedPoi ? (
<SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
) : (
<SidebarListView
onMouseEnter={handlePoiHoverOn}
onMouseLeave={handlePoiHoverOff}
className="sidebar"
values={poiData}
onClick={handlePoiClick}
/>
)}
</div>
</>
);
}
......
......@@ -33,7 +33,7 @@ export const Map: React.FC<Props> = (props) => {
return (
<MapContainer
id={'mapid'}
className={'h-full w-full'}
className={'h-full w-full z-0'}
style={{ flex: 3 }}
center={DEFAULT_CENTER}
zoom={13}
......
import React from 'react';
interface Props {
title: string;
text: string;
icon?: JSX.Element;
}
const Modal: React.FC<Props> = ({ title, text, icon }) => {
return (
<div role="dialog" aria-modal="true" className="fixed z-10 inset-0 flex flex-column items-center justify-center">
<div className="fixed inset-0 bg-gray-400 bg-opacity-50" aria-hidden="true"></div>
<div className="inline-block z-10 bg-white rounded-lg text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-white p-4 sm:p-6">
<div className="sm:flex sm:items-start">
{icon && (
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
{icon}
</div>
)}
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{title}
</h3>
<div className="mt-2">
<p className="text-sm text-gray-500">{text}</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Modal;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment