src/components/Map/MapViewController.tsx

@@ -4,12 +4,11 @@ import { useMap, useMapEvent } from 'react-leaflet';
 import { useStore } from '../../hooks';
 
 interface Props {
-  center: LatLngTuple;
-  zoom: number;
+  bounds: Array<LatLngTuple>;
   createPoiMode?: boolean;
 }
 
-const MapViewController: React.FC<Props> = ({ center, zoom, createPoiMode }) => {
+const MapViewController: React.FC<Props> = ({ bounds, createPoiMode }) => {
   const setDraftPoi = useStore((state) => state.setDraftPoi);
   const map = useMap();
 
@@ -20,8 +19,8 @@ const MapViewController: React.FC<Props> = ({ center, zoom, createPoiMode }) =>
   });
 
   useEffect(() => {
-    map.setView(center, zoom);
-  }, [center, zoom]);
+    map.fitBounds(bounds, { maxZoom: 16 });
+  }, [bounds]);
 
   return <></>;
 };

src/components/Notification.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { CheckCircleOutline as CheckIcon, X as XIcon, ExclamationOutline as AlertIcon } from 'heroicons-react';
 import { useStore } from '../hooks';
 
-interface Props {}
-
-const Notification: React.FC<Props> = () => {
+const Notification: React.FC = () => {
   const notification = useStore((state) => state.notification);
   const setNotification = useStore((state) => state.setNotification);
 

src/components/PoiLoader.tsx

+import React, { useEffect } from 'react';
+import { usePoiData, useStore } from '../hooks';
+
+interface Props {
+  poiId: string | null;
+}
+
+const PoiLoader: React.FC<Props> = ({ poiId }) => {
+  const { data } = usePoiData();
+  const setSelectedPoi = useStore((state) => state.setSelectedPoi);
+
+  useEffect(() => {
+    if (data && poiId !== undefined) {
+      const poi = poiId ? data.find((poi) => String(poi.id) === poiId) : null;
+      if (poi !== undefined) setSelectedPoi(poi);
+    }
+  }, [data, poiId]);
+  return <></>;
+};
+
+export default PoiLoader;

src/components/Select.tsx

+import React from 'react';
+import type { Theme } from 'react-select';
+import ReactSelect, { NamedProps, StylesConfig, components } from 'react-select';
+import Tag from './Tag';
+
+const Option = ({ children, data, ...rest }: { children: any; data: any }) => {
+  return (
+    // @ts-expect-error: Not typed yet
+    <components.Option {...rest}>
+      <Tag color={data.value.color}>{children}</Tag>
+    </components.Option>
+  );
+};
+
+const Select = <OptionType, isMulti extends boolean>(props: NamedProps<OptionType, isMulti>): JSX.Element => {
+  const customStyles: StylesConfig<OptionType, isMulti> = {
+    control: (provided) => ({ ...provided, border: '0', borderRadius: '0.5em' }),
+    multiValue: (provided, state) => ({
+      ...provided,
+      // @ts-expect-error: Not typed yet
+      backgroundColor: state?.data?.value?.color || 'grey',
+      borderRadius: '999px',
+      padding: '0 3px',
+    }),
+    multiValueRemove: (provided) => ({
+      ...provided,
+      color: 'hsl(0, 0%, 50%)',
+      '&:hover': { backgroundColor: 'initial', color: 'black' },
+    }),
+  };
+
+  return (
+    <ReactSelect
+      components={{
+        Option,
+      }}
+      theme={(theme): Theme => ({
+        ...theme,
+        // @ts-expect-error: ThemeConfig type from definitely-typed is not complete
+        borderRadius: '0.5em',
+        colors: {
+          ...theme.colors,
+          primary25: '#C7D2FE',
+        },
+      })}
+      placeholder={'Tags auswählen...'}
+      styles={customStyles}
+      name="pois"
+      className="hover:border-opacity-40 rounded-lg w-full border-2 border-black border-opacity-20 focus-within:border-indigo-300 focus-within:ring focus-within:ring-indigo-200 focus-within:ring-opacity-50 mt-1"
+      {...props}
+    />
+  );
+};
+
+export default Select;

src/components/Sidebar/CloseButton.tsx

+import React, { SyntheticEvent } from 'react';
+import { X as CloseIcon } from 'heroicons-react';
+interface Props {
+  onClick: (event: SyntheticEvent) => void;
+  absolute?: boolean;
+}
+
+const CloseButton: React.FC<Props> = ({ onClick, absolute = false }) => {
+  return (
+    <CloseIcon
+      size={32}
+      className={`${
+        absolute ? 'absolute left-5 top-5' : ''
+      } p-1 text-gray-600 inline-block cursor-pointer bg-gray-200 bg-opacity-30 hover:bg-opacity-80 rounded-full`}
+      onClick={onClick}
+    />
+  );
+};
+
+export default CloseButton;

src/components/Sidebar/ListElement.tsx

@@ -16,7 +16,7 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
         {...restProps}
         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`}
+        } cursor-pointer rounded-lg mx-4 my-2`}
       >
         <div className="p-3">
           <h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">

src/components/Sidebar/SidebarCreateView.tsx

-import { X as CloseIcon } from 'heroicons-react';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import AddPoiForm from '../Form/AddPoiForm';
+import CloseButton from './CloseButton';
 import SidebarContainer from './SidebarContainer';
 
-interface Props {}
-
-const SidebarCreateView: React.FC<Props> = () => {
+const SidebarCreateView: React.FC = () => {
   const history = useHistory();
   return (
     <SidebarContainer className="p-5">
-      <CloseIcon
-        size={32}
-        className={`flex-shrink-0 left-5 top-5 p-1 text-gray-500 inline-block cursor-pointer hover:bg-gray-300 hover:bg-opacity-50 rounded-full`}
-        onClick={() => history.push('/')}
-      />
-      <h1 className="text-xl font-medium title-font text-gray-900 my-2">Neuen Ort anlegen:</h1>
+      <CloseButton onClick={() => history.push('/')} />
+      <h1 className="text-xl font-medium title-font text-gray-900 mt-2 mb-4">Neuen Ort anlegen:</h1>
       <AddPoiForm />
     </SidebarContainer>
   );

src/components/Sidebar/SidebarListView.tsx

-import React from 'react';
-import { usePoiData, useStore } from '../../hooks';
-import ListElement from './ListElement';
-import SidebarContainer from './SidebarContainer';
-
-interface Props {}
-
-const SidebarListView: React.FC<Props> = () => {
-  const { data } = usePoiData();
-  const hoveredPoi = useStore((state) => state.hoveredPoi);
-  const setHoveredPoi = useStore((state) => state.setHoveredPoi);
-  const setSelectedPoi = useStore((state) => state.setSelectedPoi);
-
-  return (
-    <SidebarContainer>
-      <h1 className="text-xl font-medium title-font m-4 text-gray-900 mb-2">{data?.length} Orte:</h1>
-      {data?.map((poi) => (
-        <ListElement
-          key={poi.id}
-          onMouseEnter={() => setHoveredPoi(poi)}
-          onMouseLeave={() => setHoveredPoi(null)}
-          onClick={() => setSelectedPoi(poi)}
-          value={poi}
-          hovered={hoveredPoi?.id === poi.id}
-        />
-      ))}
-    </SidebarContainer>
-  );
-};
-
-export default SidebarListView;
+import React, { useState } from 'react';
+import { usePoiData, useStore } from '../../hooks';
+import ListElement from './ListElement';
+import SidebarContainer from './SidebarContainer';
+import { removeDuplicateObjects } from '../../util/array';
+import { useFilteredPoiData } from '../../hooks/useFilteredPoiData';
+import type { Tag } from '../../types/PointOfInterest';
+import { FilterOutline as FilterIcon } from 'heroicons-react';
+import { useHistory } from 'react-router-dom';
+import Select from '../Select';
+
+const SidebarListView: React.FC = () => {
+  const tagsToSelectOptions = (tags?: Tag[]) => tags?.map((tag) => ({ label: tag.displayName, value: tag }));
+  const history = useHistory();
+
+  const { data } = usePoiData();
+  const { data: filteredData, filterTags, setFilterTags } = useFilteredPoiData();
+  const hoveredPoi = useStore((state) => state.hoveredPoi);
+  const setHoveredPoi = useStore((state) => state.setHoveredPoi);
+  const [filterInputIsOpen, setFilterInputIsOpen] = useState(false);
+
+  const tags =
+    data &&
+    removeDuplicateObjects(
+      data?.flatMap((poi) => poi.tags),
+      'id',
+    );
+  const options = tagsToSelectOptions(tags);
+
+  return (
+    <SidebarContainer>
+      <div className="flex-col m-4 mb-2 pb-2 border-black border-opacity-20 border-b-2">
+        <div className="flex justify-between items-center">
+          <h1 className="text-xl font-medium title-font text-gray-900">{filteredData?.length} Orte:</h1>
+          <FilterIcon
+            onClick={() => setFilterInputIsOpen(!filterInputIsOpen)}
+            className="text-black text-opacity-20 hover:text-opacity-60 w-5 h-5 cursor-pointer"
+          />
+        </div>
+
+        {filterInputIsOpen && (
+          <div className="py-2">
+            <Select
+              options={options}
+              isMulti={true}
+              value={filterTags && tagsToSelectOptions(filterTags)}
+              onChange={(selectedOptions) => setFilterTags(selectedOptions.map((opt) => opt.value))}
+            />
+          </div>
+        )}
+      </div>
+
+      {filteredData?.map((poi) => (
+        <ListElement
+          key={poi.id}
+          onMouseEnter={() => setHoveredPoi(poi)}
+          onMouseLeave={() => setHoveredPoi(null)}
+          onClick={() => {
+            history.push(`/poi/${String(poi.id)}`);
+          }}
+          value={poi}
+          hovered={hoveredPoi?.id === poi.id}
+        />
+      ))}
+    </SidebarContainer>
+  );
+};
+
+export default SidebarListView;

src/components/Sidebar/SidebarSingleView.tsx

-import { HomeOutline as HomeIcon, LocationMarkerOutline as AddressIcon, X as CloseIcon } from 'heroicons-react';
+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 Tag from '../Tag';
+import CloseButton from './CloseButton';
+import { useHistory } from 'react-router-dom';
 
-interface Props {}
-
-const SidebarSingleView: React.FC<Props> = () => {
+const SidebarSingleView: React.FC = () => {
   const selectedPoi = useStore((state) => state.selectedPoi);
-  const setSelectedPoi = useStore((state) => state.setSelectedPoi);
   const strippedUrl = selectedPoi?.website?.replace(/(^\w+:|^)\/\//, '');
+  const history = useHistory();
 
   return (
     <SidebarContainer className={`relative p-0`}>
       <div className={`${selectedPoi?.image ? '' : 'pl-5 pt-5 '}`}>
-        <CloseIcon
-          size={32}
-          className={`${
-            selectedPoi?.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={() => setSelectedPoi(null)}
+        <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="blog" />
+        <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">
@@ -34,7 +41,12 @@ const SidebarSingleView: React.FC<Props> = () => {
         {selectedPoi?.website && (
           <div className={'flex items-center'}>
             <HomeIcon size={18} className={'text-gray-500 mr-2'} />
-            <a className={'text-sm text-gray-500 hover:underline'} href={selectedPoi?.website}>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              className={'text-sm text-gray-500 hover:underline'}
+              href={selectedPoi?.website}
+            >
               {strippedUrl}
             </a>
           </div>
@@ -45,8 +57,14 @@ const SidebarSingleView: React.FC<Props> = () => {
             <div className="text-sm text-gray-500">{selectedPoi?.address}</div>
           </div>
         )}
-        {!!selectedPoi?.tags?.length && (
+        {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}

src/components/Sidebar/Tag.tsx

-import React from 'react';
-
-interface Props {
-  children: string | JSX.Element;
-  color?: string;
-}
-
-const Tag: React.FC<Props> = ({ children, color }) => {
-  return (
-    <span
-      className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 mr-2"
-      style={color ? { backgroundColor: color } : {}}
-    >
-      {children}
-    </span>
-  );
-};
-
-export default Tag;

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

@@ -3,10 +3,9 @@ import { SWRConfig } from 'swr';
 import { useStore } from '../hooks';
 import fetcher from '../util/fetcher';
 
-interface Props {}
-
-const SwrWrapper: React.FC<Props> = ({ children }) => {
+const SwrWrapper: React.FC = ({ children }) => {
   const setError = useStore((state) => state.setError);
+  const error = useStore((state) => state.error);
   return (
     <SWRConfig
       value={{
@@ -19,6 +18,10 @@ const SwrWrapper: React.FC<Props> = ({ children }) => {
           });
           console.error('Error while fetching', error);
         },
+        onSuccess: () => {
+          // Reset error modal
+          if (error) setError(null);
+        },
       }}
     >
       {children}

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/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 { useEffect } from 'react';
-import type { PointsOfInterestDTO } from 'src/types/PointOfInterest';
+import type { PointOfInterest, PointsOfInterestDTO } from 'src/types/PointOfInterest';
 import useSWR from 'swr';
 
-export const usePoiData = () => {
+export interface poiData {
+  data: PointOfInterest[] | undefined;
+}
+
+export const usePoiData = (): poiData => {
   const { data } = useSWR<PointsOfInterestDTO>(
     `{
       pois {
@@ -15,6 +18,7 @@ export const usePoiData = () => {
         lng
         image
         category
+        relationStatus
         tags {
           id
           displayName
@@ -26,9 +30,5 @@ export const usePoiData = () => {
     `,
   );
 
-  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 type { PointOfInterest, Tag } from 'src/types/PointOfInterest';
 import type { Notification } from 'src/types/Notification';
 import type { LatLngTuple } from 'leaflet';
-import create, { GetState, SetState, State, StateCreator, StoreApi } from 'zustand';
+import create, { State } from 'zustand';
+import { devtools } from 'zustand/middleware';
 
 interface Store extends State {
   selectedPoi: PointOfInterest | null;
@@ -15,23 +16,27 @@ interface Store extends State {
   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,
-  );
+// 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) => ({
+  devtools((set) => ({
     selectedPoi: null,
     setSelectedPoi: (poi) => {
       set({
@@ -58,5 +63,13 @@ export const useStore = create<Store>(
     setNotification: (notification) => {
       set({ notification });
     },
+    filterTags: [],
+    setFilterTags: (tags) => {
+      set({ filterTags: tags });
+    },
+    filterCategories: [],
+    setFilterCategories: (categories) => {
+      set({ filterCategories: categories });
+    },
   })),
 );

src/index.css

@@ -33,9 +33,9 @@ code {
 }
 
 .sidebar {
-  flex: 3;
+  flex-basis: 40%;
   overflow-y: auto;
-  max-height: 50vh;
+  flex-shrink: 0;
 }
 
 .leaflet-control-container {
@@ -44,8 +44,9 @@ code {
 
 @screen md {
   .sidebar {
-    flex: 1;
-    min-width: 250px;
+    flex-basis: 30vw;
+    min-width: 300px;
+    max-width: 500px;
     max-height: initial;
   }
 
@@ -54,10 +55,24 @@ code {
   }
 }
 
-.form-input {
+.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-7 text-sm text-gray-600;
+  @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/types/PointOfInterest.ts

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