From d8fc80cee4562f7022df903ec72473afa08fce2d Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz.stueckler@gmail.com>
Date: Fri, 16 Apr 2021 18:39:55 +0200
Subject: [PATCH] fix: hovering logic, update graphql schemas
---
src/App.tsx | 11 ++++++++---
src/Sidebar/SidebarListElement.tsx | 11 ++++++++---
src/Sidebar/SidebarListView.tsx | 11 ++++++++++-
src/Sidebar/SidebarSingleView.tsx | 12 +++++++-----
src/types/PointOfInterest.ts | 2 +-
5 files changed, 34 insertions(+), 13 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 4618dfa..938975d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,9 +37,11 @@ function App() {
name
description
website
+ address
lat
lng
- pathToBanner
+ image
+ category
}
}
`,
@@ -51,8 +53,10 @@ function App() {
}, [data]);
useEffect(() => {
- error && console.error('Error while fetching', error);
- setShowErrorModal(true);
+ if (error) {
+ console.error('Error while fetching', error);
+ setShowErrorModal(true);
+ }
}, [error]);
return (
@@ -77,6 +81,7 @@ function App() {
<SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
) : (
<SidebarListView
+ hoveredPoiId={hoveredPoiId}
onMouseEnter={handlePoiHoverOn}
onMouseLeave={handlePoiHoverOff}
className="sidebar"
diff --git a/src/Sidebar/SidebarListElement.tsx b/src/Sidebar/SidebarListElement.tsx
index c99ff20..ac5e6bd 100644
--- a/src/Sidebar/SidebarListElement.tsx
+++ b/src/Sidebar/SidebarListElement.tsx
@@ -3,17 +3,22 @@ import type { PointOfInterest } from 'src/types/PointOfInterest';
interface Props {
value: PointOfInterest;
+ hovered?: boolean;
}
-const SidebarListElement: React.FC<Props> = ({ value, ...restProps }) => {
+const SidebarListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
return (
value && (
<div
{...restProps}
- className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2"
+ className={`border-2 border-black border-opacity-20 ${
+ hovered ? 'border-opacity-40' : 'hover:border-opacity-40'
+ } cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2`}
>
<div className="p-3">
- <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">OFFENE WERKSTATT</h2>
+ <h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">
+ {value.category}
+ </h2>
<h1 className="title-font text-lg font-medium text-gray-900">{value.name}</h1>
</div>
</div>
diff --git a/src/Sidebar/SidebarListView.tsx b/src/Sidebar/SidebarListView.tsx
index 3f77665..2503578 100644
--- a/src/Sidebar/SidebarListView.tsx
+++ b/src/Sidebar/SidebarListView.tsx
@@ -10,9 +10,17 @@ interface Props {
onMouseEnter?: (id: number) => void;
onMouseLeave?: () => void;
className?: string;
+ hoveredPoiId?: number | null;
}
-const SidebarListView: React.FC<Props> = ({ values, onMouseEnter, onMouseLeave, onClick, ...restProps }) => {
+const SidebarListView: React.FC<Props> = ({
+ values,
+ onMouseEnter,
+ onMouseLeave,
+ onClick,
+ hoveredPoiId,
+ ...restProps
+}) => {
return (
values && (
<SidebarContainer {...restProps}>
@@ -25,6 +33,7 @@ const SidebarListView: React.FC<Props> = ({ values, onMouseEnter, onMouseLeave,
{...(onMouseEnter ? { onMouseEnter: () => onMouseEnter(poi.id) } : {})}
{...(onClick ? { onClick: () => onClick(poi.id) } : {})}
value={poi}
+ hovered={hoveredPoiId === poi.id}
/>
))}
</SidebarContainer>
diff --git a/src/Sidebar/SidebarSingleView.tsx b/src/Sidebar/SidebarSingleView.tsx
index ded6df1..b5db3fe 100644
--- a/src/Sidebar/SidebarSingleView.tsx
+++ b/src/Sidebar/SidebarSingleView.tsx
@@ -14,20 +14,22 @@ const SidebarSingleView: React.FC<Props> = ({ value, onClose, className, ...rest
const strippedUrl = value?.website?.replace(/(^\w+:|^)\/\//, '');
return (
<SidebarContainer className={`relative p-0 ${className || ''}`} {...restProps}>
- <div className={`${value.pathToBanner ? '' : 'pl-5 pt-5'}`}>
+ <div className={`${value.image ? '' : 'pl-5 pt-5'}`}>
<CloseIcon
size={32}
className={`${
- value.pathToBanner ? 'absolute left-5 top-5 ' : ''
+ value.image ? 'absolute left-5 top-5 ' : ''
}p-1 text-gray-500 inline-block cursor-pointer hover:bg-gray-300 hover:bg-opacity-50 rounded-full`}
onClick={onClose}
/>
</div>
- {value.pathToBanner && (
- <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.pathToBanner} alt="blog" />
+ {value.image && (
+ <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.image} alt="blog" />
)}
<div className="p-6">
- <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">OFFENE WERKSTATT</h2>
+ <h2 className="tracking-widest uppercase text-xs title-font font-medium text-gray-400 mb-1">
+ {value.category}
+ </h2>
<h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1>
<p className="leading-relaxed mb-6">{value.description}</p>
{value.website && (
diff --git a/src/types/PointOfInterest.ts b/src/types/PointOfInterest.ts
index 4dc0d0f..81cd084 100644
--- a/src/types/PointOfInterest.ts
+++ b/src/types/PointOfInterest.ts
@@ -9,5 +9,5 @@ export interface PointOfInterest {
address: string;
website: string;
category?: string;
- pathToBanner?: string;
+ image?: string;
}
--
GitLab