Feat/add poi form

src/hooks/usePoiData.ts

+import { useEffect } from 'react';
+import type { PointsOfInterestDTO } from 'src/types/PointOfInterest';
+import useSWR from 'swr';
+
+export const usePoiData = () => {
+  const { data } = useSWR<PointsOfInterestDTO>(
+    `{
+      pois {
+        id
+        name
+        description
+        website
+        address
+        lat
+        lng
+        image
+        category
+        tags {
+          id
+          displayName
+          displayName
+          color
+        }
+      }
+    }
+    `,
+  );
+
+  useEffect(() => {
+    console.log('Got data', data);
+  }, [data]);
+
+  return { data: data?.pois };
+};

src/hooks/useStore.ts

+import type { Error } from 'src/types/Error';
+import type { PointOfInterest } from 'src/types/PointOfInterest';
+import create, { GetState, SetState, State, StateCreator, StoreApi } from 'zustand';
+
+interface Store extends State {
+  selectedPoi: PointOfInterest | null;
+  setSelectedPoi: (poi: PointOfInterest | null) => void;
+  hoveredPoi: PointOfInterest | null;
+  setHoveredPoi: (poi: PointOfInterest | null) => void;
+  error: Error | null;
+  setError: (error: Error | null) => void;
+}
+
+const log = (config: StateCreator<Store>) => (set: SetState<Store>, get: GetState<Store>, api: StoreApi<Store>) =>
+  config(
+    (args) => {
+      console.group('Global state changed');
+      console.log('%cAction:', 'color: #00A7F7; font-weight: 700;', args);
+      set(args);
+      console.log('%cNext State:', 'color: #47B04B; font-weight: 700;', get());
+      console.groupEnd();
+    },
+    get,
+    api,
+  );
+
+export const useStore = create<Store>(
+  log((set) => ({
+    selectedPoi: null,
+    setSelectedPoi: (poi) => {
+      set({
+        selectedPoi: poi,
+      });
+    },
+    hoveredPoi: null,
+    setHoveredPoi: (poi) => {
+      set({
+        hoveredPoi: poi,
+      });
+    },
+    error: null,
+    setError: (error) => {
+      set({ error });
+    },
+  })),
+);

src/index.css

@@ -45,3 +45,11 @@ code {
     display: initial;
   }
 }
+
+.form-input {
+  @apply mt-1 block w-full rounded-lg border-2 border-black border-opacity-20 hover:border-opacity-40 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
+}
+
+.form-label {
+  @apply leading-7 text-sm text-gray-600;
+}

src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
-import { SWRConfig } from 'swr';
-import { request } from 'graphql-request';
+import { BrowserRouter as Router } from 'react-router-dom';
+import App from './components/App';
+import SwrWrapper from './components/SwrWrapper';
 import './index.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <SWRConfig value={{ fetcher: (query: string) => request(import.meta.env.SNOWPACK_PUBLIC_API_URL, query) }}>
-      <App />
-    </SWRConfig>
+    <SwrWrapper>
+      <Router>
+        <App />
+      </Router>
+    </SwrWrapper>
   </React.StrictMode>,
   document.getElementById('root'),
 );

src/testData.json

-[
-  {
-    "id": 1,
-    "lat": 53.550359,
-    "lng": 9.986701,
-    "name": "Welcome Werkstatt e. V.",
-    "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.",
-    "address": "Bachstr. 98, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "website": "https://www.welcome-werkstatt.de/",
-    "image": "https://picsum.photos/720/400?random=1"
-  },
-  {
-    "id": 2,
-    "lat": 53.560359,
-    "lng": 9.976701,
-    "name": "Fabulous St. Pauli",
-    "description": "Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.",
-    "address": "Mozartstr. 8, 22081 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "website": "http://www.fablab-hamburg.org/",
-    "image": "https://picsum.photos/720/400?random=2"
-  },
-  {
-    "id": 3,
-    "lat": 53.540359,
-    "lng": 9.996701,
-    "name": "HoFaLab Wilhelmsburg",
-    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
-    "address": "Langer-Straßen-Name. 128, 22089 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "website": "https://hofalab.de/de/home-de/",
-    "image": "https://picsum.photos/720/400?random=3"
-  },
-  {
-    "id": 4,
-    "lat": 53.570359,
-    "lng": 9.986701,
-    "name": "Fab City Haus",
-    "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.",
-    "address": "Jungfernstieg 1, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "image": "https://picsum.photos/720/400?random=4"
-  },
-  {
-    "id": 5,
-    "lat": 53.565359,
-    "lng": 9.966701,
-    "name": "Haus Drei e. V.",
-    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
-    "address": "Hein-Hoyer-Allee 36, 22083 Hamburg",
-    "category": "OFFENE WERKSTATT",
-    "image": "https://picsum.photos/720/400?random=5"
-  }
-]

src/types/Error.ts

+export interface Error {
+  title: string;
+  message: string;
+  icon: string;
+}

src/types/PointOfInterest.ts

-import type { LatLngExpression } from 'leaflet';
-
 export interface PointOfInterest {
   id: number;
   lat: number;
@@ -10,4 +8,15 @@ export interface PointOfInterest {
   website: string;
   category?: string;
   image?: string;
+  tags: Tag[];
+}
+
+export interface Tag {
+  id: string;
+  displayName: string;
+  color: string;
+}
+
+export interface PointsOfInterestDTO {
+  pois: PointOfInterest[];
 }

tailwind.config.js

@@ -8,5 +8,5 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')],
 };