src/components/Sidebar/SidebarSingleView.tsx

+import {
+  HomeOutline as HomeIcon,
+  LocationMarkerOutline as AddressIcon,
+  UserGroupOutline as RealtionStatusIcon,
+} from 'heroicons-react';
+import React from 'react';
+import { useStore } from '../../hooks';
+import SidebarContainer from './SidebarContainer';
+import Tag from '../Tag';
+import CloseButton from './CloseButton';
+import { useHistory } from 'react-router-dom';
+
+const SidebarSingleView: React.FC = () => {
+  const selectedPoi = useStore((state) => state.selectedPoi);
+  const strippedUrl = selectedPoi?.website?.replace(/(^\w+:|^)\/\//, '');
+  const history = useHistory();
+
+  return (
+    <SidebarContainer className={`relative p-0`}>
+      <div className={`${selectedPoi?.image ? '' : 'pl-5 pt-5 '}`}>
+        <CloseButton
+          absolute
+          onClick={() => {
+            history.push('/');
+          }}
+        />
+      </div>
+      {selectedPoi?.image && (
+        <img
+          className="lg:h-48 md:h-36 w-full object-cover object-center"
+          src={selectedPoi?.image}
+          alt={selectedPoi?.name}
+        />
+      )}
+      <div className="p-6">
+        <h2 className="tracking-widest uppercase text-xs title-font font-medium text-gray-400 mb-1">
+          {selectedPoi?.category}
+        </h2>
+        <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{selectedPoi?.name}</h1>
+        <p className="leading-relaxed mb-6">{selectedPoi?.description}</p>
+        {selectedPoi?.website && (
+          <div className={'flex items-center'}>
+            <HomeIcon size={18} className={'text-gray-500 mr-2'} />
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              className={'text-sm text-gray-500 hover:underline'}
+              href={selectedPoi?.website}
+            >
+              {strippedUrl}
+            </a>
+          </div>
+        )}
+        {selectedPoi?.address && (
+          <div className={'flex items-center mt-3'}>
+            <AddressIcon size={18} className={'text-gray-500 mr-2'} />
+            <div className="text-sm text-gray-500">{selectedPoi?.address}</div>
+          </div>
+        )}
+        {selectedPoi?.relationStatus && (
+          <div className={'flex items-center mt-3'}>
+            <RealtionStatusIcon size={18} className={'text-gray-500 mr-2'} />
+            <div className="text-sm text-gray-500">{selectedPoi?.relationStatus}</div>
+          </div>
+        )}
+        {!!selectedPoi?.tags?.length && (
+          <div className={'flex items-center mt-3 flex-wrap'}>
+            {selectedPoi?.tags.map((tag) => (
+              <Tag key={tag.id} color={tag.color}>
+                {tag.displayName}
+              </Tag>
+            ))}
+          </div>
+        )}
+      </div>
+    </SidebarContainer>
+  );
+};
+
+export default SidebarSingleView;

src/components/Spinner.tsx

+import React from 'react';
+
+const Spinner: React.FC = () => {
+  return (
+    <svg
+      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+};
+
+export default Spinner;

src/components/SwrWrapper.tsx

+import React from 'react';
+import { SWRConfig } from 'swr';
+import { useStore } from '../hooks';
+import fetcher from '../util/fetcher';
+
+const SwrWrapper: React.FC = ({ children }) => {
+  const setError = useStore((state) => state.setError);
+  const error = useStore((state) => state.error);
+  return (
+    <SWRConfig
+      value={{
+        fetcher,
+        onError: (error) => {
+          setError({
+            title: 'API nicht erreichbar',
+            message: 'Kann die API nicht erreichen. Bitte später erneut probieren.',
+            icon: 'alert',
+          });
+          console.error('Error while fetching', error);
+        },
+        onSuccess: () => {
+          // Reset error modal
+          if (error) setError(null);
+        },
+      }}
+    >
+      {children}
+    </SWRConfig>
+  );
+};
+
+export default SwrWrapper;

src/components/Tag.tsx

+import React from 'react';
+import { X as CloseIcon } from 'heroicons-react';
+
+interface Props {
+  children: string | JSX.Element;
+  color?: string;
+  onClick?: () => void;
+  onClickDelete?: () => void;
+}
+
+const Tag: React.FC<Props> = ({ children, onClick, onClickDelete, color = 'pink' }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={`${
+        onClick ? 'cursor-pointer ' : ''
+      }inline-flex flex-nowrap items-center px-2 py-0.5 m-0.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 mr-2 whitespace-nowrap`}
+      style={color ? { backgroundColor: color } : {}}
+    >
+      {children}
+      {onClickDelete && (
+        <CloseIcon
+          onClick={onClickDelete}
+          className="ml-0.5 inline-block cursor-pointer text-gray-600 hover:text-gray-800"
+          size={12}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Tag;

src/generated/graphql.ts

+import type { GraphQLClient } from 'graphql-request';
+import type * as Dom from 'graphql-request/dist/types.dom';
+import gql from 'graphql-tag';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  /** A date string with format `Y-m-d`, e.g. `2011-05-23`. */
+  Date: any;
+  /** A datetime string with format `Y-m-d H:i:s`, e.g. `2018-05-23 13:43:32`. */
+  DateTime: any;
+  /** Can be used as an argument to upload files using https://github.com/jaydenseric/graphql-multipart-request-spec */
+  Upload: any;
+};
+
+
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  createPoi?: Maybe<Scalars['Boolean']>;
+  createTags?: Maybe<Array<Maybe<Tag>>>;
+};
+
+
+export type MutationCreatePoiArgs = {
+  poi: PoiInput;
+};
+
+
+export type MutationCreateTagsArgs = {
+  tags: Array<TagInput>;
+};
+
+export type Poi = {
+  __typename?: 'POI';
+  id: Scalars['ID'];
+  lat: Scalars['Float'];
+  lng: Scalars['Float'];
+  name: Scalars['String'];
+  published: Scalars['Boolean'];
+  website?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+  address: Scalars['String'];
+  image: Scalars['String'];
+  category: Scalars['String'];
+  relationStatus: Scalars['String'];
+  tags?: Maybe<Array<Maybe<Tag>>>;
+  created_at?: Maybe<Scalars['DateTime']>;
+  updated_at?: Maybe<Scalars['DateTime']>;
+};
+
+export type PoiInput = {
+  name: Scalars['String'];
+  email: Scalars['String'];
+  lat: Scalars['Float'];
+  lng: Scalars['Float'];
+  website?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+  address: Scalars['String'];
+  category: Scalars['String'];
+  relationStatus: Scalars['String'];
+  image: Scalars['Upload'];
+  tagIds?: Maybe<Array<Maybe<Scalars['ID']>>>;
+};
+
+/** Pagination information about the corresponding list of items. */
+export type PageInfo = {
+  __typename?: 'PageInfo';
+  /** When paginating forwards, are there more items? */
+  hasNextPage: Scalars['Boolean'];
+  /** When paginating backwards, are there more items? */
+  hasPreviousPage: Scalars['Boolean'];
+  /** When paginating backwards, the cursor to continue. */
+  startCursor?: Maybe<Scalars['String']>;
+  /** When paginating forwards, the cursor to continue. */
+  endCursor?: Maybe<Scalars['String']>;
+  /** Total number of node in connection. */
+  total?: Maybe<Scalars['Int']>;
+  /** Count of nodes in current request. */
+  count?: Maybe<Scalars['Int']>;
+  /** Current page of request. */
+  currentPage?: Maybe<Scalars['Int']>;
+  /** Last page in connection. */
+  lastPage?: Maybe<Scalars['Int']>;
+};
+
+/** Pagination information about the corresponding list of items. */
+export type PaginatorInfo = {
+  __typename?: 'PaginatorInfo';
+  /** Total count of available items in the page. */
+  count: Scalars['Int'];
+  /** Current pagination page. */
+  currentPage: Scalars['Int'];
+  /** Index of first item in the current page. */
+  firstItem?: Maybe<Scalars['Int']>;
+  /** If collection has more pages. */
+  hasMorePages: Scalars['Boolean'];
+  /** Index of last item in the current page. */
+  lastItem?: Maybe<Scalars['Int']>;
+  /** Last page number of the collection. */
+  lastPage: Scalars['Int'];
+  /** Number of items per page in the collection. */
+  perPage: Scalars['Int'];
+  /** Total items available in the collection. */
+  total: Scalars['Int'];
+};
+
+export type Query = {
+  __typename?: 'Query';
+  pois?: Maybe<Array<Maybe<Poi>>>;
+  poi?: Maybe<Poi>;
+};
+
+
+export type QueryPoiArgs = {
+  id?: Maybe<Scalars['ID']>;
+};
+
+export type Tag = {
+  __typename?: 'Tag';
+  id: Scalars['ID'];
+  displayName: Scalars['String'];
+  color: Scalars['String'];
+  created_at?: Maybe<Scalars['DateTime']>;
+  updated_at?: Maybe<Scalars['DateTime']>;
+};
+
+export type TagInput = {
+  displayName: Scalars['String'];
+  color: Scalars['String'];
+};
+
+
+export type User = {
+  __typename?: 'User';
+  id: Scalars['ID'];
+  name: Scalars['String'];
+  email: Scalars['String'];
+  created_at: Scalars['DateTime'];
+  updated_at: Scalars['DateTime'];
+};
+
+export type CreatePoiMutationMutationVariables = Exact<{
+  name: Scalars['String'];
+  email: Scalars['String'];
+  lat: Scalars['Float'];
+  lng: Scalars['Float'];
+  website?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+  address: Scalars['String'];
+  category: Scalars['String'];
+  relationStatus: Scalars['String'];
+  image: Scalars['Upload'];
+  tagIds?: Maybe<Array<Maybe<Scalars['ID']>> | Maybe<Scalars['ID']>>;
+}>;
+
+
+export type CreatePoiMutationMutation = (
+  { __typename?: 'Mutation' }
+  & Pick<Mutation, 'createPoi'>
+);
+
+export type CreateTagsMutationMutationVariables = Exact<{
+  tags: Array<TagInput> | TagInput;
+}>;
+
+
+export type CreateTagsMutationMutation = (
+  { __typename?: 'Mutation' }
+  & { createTags?: Maybe<Array<Maybe<(
+    { __typename?: 'Tag' }
+    & Pick<Tag, 'id'>
+  )>>> }
+);
+
+
+export const CreatePoiMutationDocument = gql`
+    mutation createPoiMutation($name: String!, $email: String!, $lat: Float!, $lng: Float!, $website: String, $description: String, $address: String!, $category: String!, $relationStatus: String!, $image: Upload!, $tagIds: [ID]) {
+  createPoi(
+    poi: {name: $name, email: $email, lat: $lat, lng: $lng, website: $website, description: $description, address: $address, category: $category, relationStatus: $relationStatus, image: $image, tagIds: $tagIds}
+  )
+}
+    `;
+export const CreateTagsMutationDocument = gql`
+    mutation createTagsMutation($tags: [TagInput!]!) {
+  createTags(tags: $tags) {
+    id
+  }
+}
+    `;
+
+export type SdkFunctionWrapper = <T>(action: (requestHeaders?:Record<string, string>) => Promise<T>, operationName: string) => Promise<T>;
+
+
+const defaultWrapper: SdkFunctionWrapper = (action, _operationName) => action();
+
+export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
+  return {
+    createPoiMutation(variables: CreatePoiMutationMutationVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<CreatePoiMutationMutation> {
+      return withWrapper((wrappedRequestHeaders) => client.request<CreatePoiMutationMutation>(CreatePoiMutationDocument, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'createPoiMutation');
+    },
+    createTagsMutation(variables: CreateTagsMutationMutationVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<CreateTagsMutationMutation> {
+      return withWrapper((wrappedRequestHeaders) => client.request<CreateTagsMutationMutation>(CreateTagsMutationDocument, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'createTagsMutation');
+    }
+  };
+}
+export type Sdk = ReturnType<typeof getSdk>;
\ No newline at end of file

src/graphql/mutations.ts

+import { gql } from 'graphql-request';
+
+export const createPoi = gql`
+  mutation createPoiMutation(
+    $name: String!
+    $email: String!
+    $lat: Float!
+    $lng: Float!
+    $website: String
+    $description: String
+    $address: String!
+    $category: String!
+    $relationStatus: String!
+    $image: Upload!
+    $tagIds: [ID]
+  ) {
+    createPoi(
+      poi: {
+        name: $name
+        email: $email
+        lat: $lat
+        lng: $lng
+        website: $website
+        description: $description
+        address: $address
+        category: $category
+        relationStatus: $relationStatus
+        image: $image
+        tagIds: $tagIds
+      }
+    )
+  }
+`;
+
+export const createTags = gql`
+  mutation createTagsMutation($tags: [TagInput!]!) {
+    createTags(tags: $tags) {
+      id
+    }
+  }
+`;

src/hooks/index.ts

+export * from './usePoiData';
+export * from './useStore';

src/hooks/useFilteredPoiData.ts

+import type { poiData } from './usePoiData';
+import { usePoiData } from './usePoiData';
+import { useStore } from './useStore';
+import type { Tag } from '../types/PointOfInterest';
+
+export interface poiFilteredData extends poiData {
+  filterTags: Tag[] | null;
+  setFilterTags: (tags: Tag[]) => void;
+  filterCategories: string[];
+  setFilterCategories: (categories: string[]) => void;
+}
+
+export const useFilteredPoiData = (): poiFilteredData => {
+  const { data } = usePoiData();
+  const filterTags = useStore((store) => store.filterTags);
+  const setFilterTags = useStore((state) => state.setFilterTags);
+  const filterCategories = useStore((store) => store.filterCategories);
+  const setFilterCategories = useStore((state) => state.setFilterCategories);
+
+  let filteredData = data;
+  if (filterTags?.length) {
+    filteredData = filteredData?.filter(
+      (poi) => !filterTags.filter((fTag) => !poi.tags.find((tag) => tag.id === fTag.id)).length,
+    );
+  }
+  if (filterCategories?.length) {
+    filteredData = filteredData?.filter((poi) => !!filterCategories.find((category) => poi.category === category));
+  }
+
+  return {
+    data: filteredData,
+    filterTags,
+    setFilterTags,
+    filterCategories,
+    setFilterCategories,
+  };
+};

src/hooks/usePoiData.ts

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

src/hooks/useStore.ts

+import type { Error } from 'src/types/Error';
+import type { PointOfInterest, Tag } from 'src/types/PointOfInterest';
+import type { Notification } from 'src/types/Notification';
+import type { LatLngTuple } from 'leaflet';
+import create, { State } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+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;
+  draftPoi: LatLngTuple | null;
+  setDraftPoi: (latLng: LatLngTuple | null) => void;
+  notification: Notification | null;
+  setNotification: (notification: Notification | null) => void;
+  filterTags: Tag[];
+  setFilterTags: (tags: Tag[]) => void;
+  filterCategories: string[];
+  setFilterCategories: (categories: string[]) => 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>(
+  devtools((set) => ({
+    selectedPoi: null,
+    setSelectedPoi: (poi) => {
+      set({
+        selectedPoi: poi,
+      });
+    },
+    hoveredPoi: null,
+    setHoveredPoi: (poi) => {
+      set({
+        hoveredPoi: poi,
+      });
+    },
+    error: null,
+    setError: (error) => {
+      set({ error });
+    },
+    draftPoi: null,
+    setDraftPoi: (latLng) => {
+      set({
+        draftPoi: latLng,
+      });
+    },
+    notification: null,
+    setNotification: (notification) => {
+      set({ notification });
+    },
+    filterTags: [],
+    setFilterTags: (tags) => {
+      set({ filterTags: tags });
+    },
+    filterCategories: [],
+    setFilterCategories: (categories) => {
+      set({ filterCategories: categories });
+    },
+  })),
+);

src/index.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --fabcity-red: #ee2f45;
+  --fabcity-green: #08aa64;
+  --fabcity-blue: #19459c;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.marker-red {
+  color: var(--fabcity-red);
+}
+
+.marker-green {
+  color: var(--fabcity-green);
+}
+
+.marker-blue {
+  color: var(--fabcity-blue);
+}
+
+.sidebar {
+  flex-basis: 40%;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.leaflet-control-container {
+  display: none;
+}
+
+@screen md {
+  .sidebar {
+    flex-basis: 30vw;
+    min-width: 300px;
+    max-width: 500px;
+    max-height: initial;
+  }
+
+  .leaflet-control-container {
+    display: initial;
+  }
+}
+
+.form-input-custom {
+  @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-none text-sm text-gray-600;
+}
+
+.form-button {
+  @apply mt-2 flex justify-center items-center text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded-lg text-lg disabled:opacity-50 disabled:cursor-default disabled:hover:bg-indigo-500;
+}
+
+.input-chevron {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
 }

src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+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>
-    <App />
+    <SwrWrapper>
+      <Router>
+        <App />
+      </Router>
+    </SwrWrapper>
   </React.StrictMode>,
   document.getElementById('root'),
 );

src/logo.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-  <g fill="#61DAFB">
-    <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4a43.8 43.8 0 00-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9a487.8 487.8 0 00-41.6-50c32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9a467 467 0 00-63.6 11c-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4a44 44 0 0022.5 5.6c27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7a450.4 450.4 0 01-13.5 39.5 473.3 473.3 0 00-27.5-47.4c14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5a532.7 532.7 0 01-24.1 38.2 520.3 520.3 0 01-90.2.1 551.2 551.2 0 01-45-77.8 521.5 521.5 0 0144.8-78.1 520.3 520.3 0 0190.2-.1 551.2 551.2 0 0145 77.8 560 560 0 01-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8a448.8 448.8 0 01-41.2 8 552.4 552.4 0 0027.4-47.8zM421.2 430a412.3 412.3 0 01-27.8-32 619 619 0 0055.3 0c-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9a451.2 451.2 0 01-41-7.9c3.7-12.9 8.3-26.2 13.5-39.5a473.3 473.3 0 0027.5 47.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32a619 619 0 00-55.3 0c9-11.7 18.3-22.4 27.5-32zm-74 58.9a552.4 552.4 0 00-27.4 47.7c-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9a473.5 473.5 0 00-22.2 60.6c-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9a487.8 487.8 0 0041.6 50c-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9a467 467 0 0063.6-11 280 280 0 015.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9a473.5 473.5 0 0022.2-60.6c9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-    <circle cx="420.9" cy="296.5" r="45.7"/>
-  </g>
-</svg>

src/types/Error.ts

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

src/types/Notification.ts

+export interface Notification {
+  title: string;
+  text: string;
+  type: 'alert' | 'success';
+}

src/types/PointOfInterest.ts

+export interface PointOfInterestBase {
+  lat: number;
+  lng: number;
+  name: string;
+  description: string;
+  address: string;
+  website: string;
+  category: string;
+  relationStatus: string;
+}
+export interface PointOfInterest extends PointOfInterestBase {
+  id: number;
+  image?: string;
+  tags: Tag[];
+}
+
+export interface PointOfInterestFormData extends PointOfInterestBase {
+  email: string;
+  image: File | null;
+  tags: number[];
+}
+
+export interface Tag {
+  id: string;
+  displayName: string;
+  color: string;
+}
+
+export interface PointsOfInterestDTO {
+  pois: PointOfInterest[];
+}

src/util/array.ts

+export function removeDuplicateObjects<T>(arr: T[], key: keyof T): T[] {
+  const tagMap = new Map(arr.map((item: T) => [item[key], item]));
+  return [...tagMap.values()];
+}

src/util/color.ts

+export function generateRandomHslColor(saturation = 100, lightness = 50, distinctValues = 20): string {
+  const randomColorIndex = getRandomIntInclusive(0, distinctValues);
+  const color = `hsl(${Math.floor(randomColorIndex * (360 / distinctValues))},${saturation}%,${lightness}%)`;
+  return color;
+}
+
+function getRandomIntInclusive(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}

src/util/fetcher.ts

+import { request } from 'graphql-request';
+import type { Variables } from 'graphql-request/dist/types';
+
+const fetcher = <T, V extends Variables>(query: string, variables?: V): Promise<T> =>
+  request(import.meta.env.SNOWPACK_PUBLIC_API_URL, query, variables);
+
+export default fetcher;

src/util/file.ts

+export const validateFile = (
+  file: File,
+  allowedSize = 5000000,
+  allowedExtensions = ['jpg', 'jpeg', 'png'],
+): boolean => {
+  const { name: fileName, size: fileSize } = file;
+
+  const fileExtension = fileName.split('.').pop();
+  if (fileExtension && !allowedExtensions.includes(fileExtension.toLowerCase())) {
+    return false;
+  } else if (fileSize > allowedSize) {
+    return false;
+  }
+  return true;
+};