fix: hovering logic, update graphql schemas

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"

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>

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>

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 && (

src/types/PointOfInterest.ts

@@ -9,5 +9,5 @@ export interface PointOfInterest {
   address: string;
   website: string;
   category?: string;
-  pathToBanner?: string;
+  image?: string;
 }