From 45978603fb96f56a47968c2536c49ca36f32f6b7 Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz.stueckler@gmail.com>
Date: Fri, 30 Apr 2021 17:57:35 +0200
Subject: [PATCH] Revert "Merge branch 'feat/add-poi-form' into 'main'"
This reverts commit e52c58075b310168abe3b56e0cf0f64832a627fc, reversing
changes made to 804bcc17e679b6cf5064ff4da93b1cdd84bccac6.
---
.gitlab-ci.yml | 2 +-
package-lock.json | 482 +-----------------
package.json | 7 +-
snowpack.config.js | 3 +-
src/App.tsx | 97 ++++
src/{components => }/Map/Map.tsx | 59 +--
.../Map/MapViewController.tsx | 0
src/{components => }/Modal.tsx | 0
src/Sidebar/SidebarContainer.tsx | 21 +
.../SidebarListElement.tsx} | 9 +-
src/Sidebar/SidebarListView.tsx | 44 ++
src/Sidebar/SidebarSingleView.tsx | 54 ++
src/components/App.tsx | 29 --
src/components/ErrorModal.tsx | 16 -
src/components/Sidebar/AddPoiForm.tsx | 127 -----
src/components/Sidebar/SidebarContainer.tsx | 19 -
src/components/Sidebar/SidebarCreateView.tsx | 24 -
src/components/Sidebar/SidebarListView.tsx | 31 --
src/components/Sidebar/SidebarSingleView.tsx | 62 ---
src/components/Sidebar/Tag.tsx | 19 -
src/components/SwrWrapper.tsx | 29 --
src/hooks/index.ts | 2 -
src/hooks/usePoiData.ts | 34 --
src/hooks/useStore.ts | 46 --
src/index.css | 8 -
src/index.tsx | 14 +-
src/testData.json | 55 ++
src/types/Error.ts | 5 -
src/types/PointOfInterest.ts | 13 +-
tailwind.config.js | 2 +-
30 files changed, 325 insertions(+), 988 deletions(-)
create mode 100644 src/App.tsx
rename src/{components => }/Map/Map.tsx (52%)
rename src/{components => }/Map/MapViewController.tsx (100%)
rename src/{components => }/Modal.tsx (100%)
create mode 100644 src/Sidebar/SidebarContainer.tsx
rename src/{components/Sidebar/ListElement.tsx => Sidebar/SidebarListElement.tsx} (70%)
create mode 100644 src/Sidebar/SidebarListView.tsx
create mode 100644 src/Sidebar/SidebarSingleView.tsx
delete mode 100644 src/components/App.tsx
delete mode 100644 src/components/ErrorModal.tsx
delete mode 100644 src/components/Sidebar/AddPoiForm.tsx
delete mode 100644 src/components/Sidebar/SidebarContainer.tsx
delete mode 100644 src/components/Sidebar/SidebarCreateView.tsx
delete mode 100644 src/components/Sidebar/SidebarListView.tsx
delete mode 100644 src/components/Sidebar/SidebarSingleView.tsx
delete mode 100644 src/components/Sidebar/Tag.tsx
delete mode 100644 src/components/SwrWrapper.tsx
delete mode 100644 src/hooks/index.ts
delete mode 100644 src/hooks/usePoiData.ts
delete mode 100644 src/hooks/useStore.ts
create mode 100644 src/testData.json
delete mode 100644 src/types/Error.ts
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 2e644af..6a3dd2c 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -9,7 +9,7 @@ before_script:
- apk add --no-cache lftp openssh
- mkdir -p ~/.ssh
- echo "$SSH_KNOWN_HOSTS" >> ~/.ssh/known_hosts
- - echo "$FRONTEND_ENV" > .env
+ - echo "$FRONTEND_ENV" >> .env
npm build:
stage: build
diff --git a/package-lock.json b/package-lock.json
index 2ad7b7e..4fa0eba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
"packages": {
"": {
"dependencies": {
- "@tailwindcss/forms": "^0.3.2",
"graphql": "^15.5.0",
"graphql-request": "^3.4.0",
"heroicons-react": "1.3.0",
@@ -13,13 +12,10 @@
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-leaflet": "^3.1.0",
- "react-router-dom": "^5.2.0",
"swr": "^0.5.5",
- "tailwindcss": "^2.0.3",
- "zustand": "^3.4.1"
+ "tailwindcss": "^2.0.3"
},
"devDependencies": {
- "@jadex/snowpack-plugin-tailwindcss-jit": "^0.2.0",
"@snowpack/plugin-dotenv": "^2.1.0",
"@snowpack/plugin-postcss": "^1.1.0",
"@snowpack/plugin-react-refresh": "^2.4.0",
@@ -27,7 +23,6 @@
"@types/leaflet": "^1.7.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
- "@types/react-router-dom": "^5.1.7",
"@types/snowpack-env": "^2.3.2",
"autoprefixer": "^10.2.4",
"postcss": "^8.2.6",
@@ -265,14 +260,6 @@
"@babel/core": "^7.0.0-0"
}
},
- "node_modules/@babel/runtime": {
- "version": "7.13.10",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
- "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
- "dependencies": {
- "regenerator-runtime": "^0.13.4"
- }
- },
"node_modules/@babel/template": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
@@ -318,21 +305,6 @@
"purgecss": "^3.1.3"
}
},
- "node_modules/@jadex/snowpack-plugin-tailwindcss-jit": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/@jadex/snowpack-plugin-tailwindcss-jit/-/snowpack-plugin-tailwindcss-jit-0.2.0.tgz",
- "integrity": "sha512-iZfHqtLZzsFKAgMBVCGFJdQWWnXoLhWr7m98DJalu772SSMGXrWryW4nC/Hyk/1RDiL861BAVzXO6aZT3KLtgw==",
- "dev": true,
- "dependencies": {
- "fs": "^0.0.1-security",
- "micromatch": "^4.0.2",
- "path": "^0.12.7"
- },
- "peerDependencies": {
- "snowpack": "^3.2.2",
- "tailwindcss": "^2.1.0"
- }
- },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -478,7 +450,6 @@
"resolved": "https://registry.npmjs.org/@snowpack/plugin-postcss/-/plugin-postcss-1.2.2.tgz",
"integrity": "sha512-XL4EyfDLcxCeo9bOm8ScNAFq9pU4bFkFq4GY6/Zokq/rxMh9lugOHTLWeT/p4IxLh4CX1o7pX8b61Eplcqlfqg==",
"dev": true,
- "license": "MIT",
"dependencies": {
"postcss-load-config": "^3.0.1",
"workerpool": "^6.1.2"
@@ -515,17 +486,6 @@
"typescript": "*"
}
},
- "node_modules/@tailwindcss/forms": {
- "version": "0.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.2.tgz",
- "integrity": "sha512-aj2/rJsGb2whAZ/BQWHWWQRSbhH0r/l1ozOByiv+ZNjBD84GMvb5dhAyfpeasFky+EJrAwX5eaqft8NQMZFWvA==",
- "dependencies": {
- "mini-svg-data-uri": "^1.2.3"
- },
- "peerDependencies": {
- "tailwindcss": ">=2.0.0"
- }
- },
"node_modules/@tootallnate/once": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -541,12 +501,6 @@
"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
"dev": true
},
- "node_modules/@types/history": {
- "version": "4.7.8",
- "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
- "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==",
- "dev": true
- },
"node_modules/@types/leaflet": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.0.tgz",
@@ -588,27 +542,6 @@
"@types/react": "*"
}
},
- "node_modules/@types/react-router": {
- "version": "5.1.13",
- "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
- "integrity": "sha512-ZIuaO9Yrln54X6elg8q2Ivp6iK6p4syPsefEYAhRDAoqNh48C8VYUmB9RkXjKSQAJSJV0mbIFCX7I4vZDcHrjg==",
- "dev": true,
- "dependencies": {
- "@types/history": "*",
- "@types/react": "*"
- }
- },
- "node_modules/@types/react-router-dom": {
- "version": "5.1.7",
- "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz",
- "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==",
- "dev": true,
- "dependencies": {
- "@types/history": "*",
- "@types/react": "*",
- "@types/react-router": "*"
- }
- },
"node_modules/@types/scheduler": {
"version": "0.16.1",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
@@ -1614,12 +1547,6 @@
"node": "*"
}
},
- "node_modules/fs": {
- "version": "0.0.1-security",
- "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
- "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=",
- "dev": true
- },
"node_modules/fs-extra": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -1917,27 +1844,6 @@
"react": ">=16.13"
}
},
- "node_modules/history": {
- "version": "4.10.1",
- "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
- "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
- "dependencies": {
- "@babel/runtime": "^7.1.2",
- "loose-envify": "^1.2.0",
- "resolve-pathname": "^3.0.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0",
- "value-equal": "^1.0.1"
- }
- },
- "node_modules/hoist-non-react-statics": {
- "version": "3.3.2",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
- "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
- "dependencies": {
- "react-is": "^16.7.0"
- }
- },
"node_modules/hosted-git-info": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
@@ -2272,9 +2178,10 @@
}
},
"node_modules/isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+ "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+ "dev": true
},
"node_modules/isexe": {
"version": "2.0.0",
@@ -2544,24 +2451,6 @@
"node": ">=6"
}
},
- "node_modules/mini-create-react-context": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
- "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
- "dependencies": {
- "@babel/runtime": "^7.12.1",
- "tiny-warning": "^1.0.3"
- },
- "peerDependencies": {
- "prop-types": "^15.0.0",
- "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
- }
- },
- "node_modules/mini-svg-data-uri": {
- "version": "1.2.3",
- "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
- "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
- },
"node_modules/minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -3160,16 +3049,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/path": {
- "version": "0.12.7",
- "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
- "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
- "dev": true,
- "dependencies": {
- "process": "^0.11.1",
- "util": "^0.10.3"
- }
- },
"node_modules/path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -3192,14 +3071,6 @@
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
},
- "node_modules/path-to-regexp": {
- "version": "1.8.0",
- "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
- "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
- "dependencies": {
- "isarray": "0.0.1"
- }
- },
"node_modules/path-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -3508,15 +3379,6 @@
"node": ">= 0.8"
}
},
- "node_modules/process": {
- "version": "0.11.10",
- "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
- "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
- "dev": true,
- "engines": {
- "node": ">= 0.6.0"
- }
- },
"node_modules/process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -3542,16 +3404,6 @@
"node": ">=10"
}
},
- "node_modules/prop-types": {
- "version": "15.7.2",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
- "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
- "dependencies": {
- "loose-envify": "^1.4.0",
- "object-assign": "^4.1.1",
- "react-is": "^16.8.1"
- }
- },
"node_modules/psl": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -3645,11 +3497,6 @@
"react": "17.0.2"
}
},
- "node_modules/react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
- },
"node_modules/react-leaflet": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.1.0.tgz",
@@ -3672,43 +3519,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/react-router": {
- "version": "5.2.0",
- "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
- "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
- "dependencies": {
- "@babel/runtime": "^7.1.2",
- "history": "^4.9.0",
- "hoist-non-react-statics": "^3.1.0",
- "loose-envify": "^1.3.1",
- "mini-create-react-context": "^0.4.0",
- "path-to-regexp": "^1.7.0",
- "prop-types": "^15.6.2",
- "react-is": "^16.6.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0"
- },
- "peerDependencies": {
- "react": ">=15"
- }
- },
- "node_modules/react-router-dom": {
- "version": "5.2.0",
- "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
- "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
- "dependencies": {
- "@babel/runtime": "^7.1.2",
- "history": "^4.9.0",
- "loose-envify": "^1.3.1",
- "prop-types": "^15.6.2",
- "react-router": "5.2.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0"
- },
- "peerDependencies": {
- "react": ">=15"
- }
- },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3746,12 +3556,6 @@
"util-deprecate": "~1.0.1"
}
},
- "node_modules/readable-stream/node_modules/isarray": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
- "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
- "dev": true
- },
"node_modules/readdirp": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
@@ -3777,11 +3581,6 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
},
- "node_modules/regenerator-runtime": {
- "version": "0.13.7",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
- "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
- },
"node_modules/request": {
"version": "2.88.2",
"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -3858,11 +3657,6 @@
"node": ">=4"
}
},
- "node_modules/resolve-pathname": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
- "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
- },
"node_modules/retry": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
@@ -4336,16 +4130,6 @@
"node": ">= 10"
}
},
- "node_modules/tiny-invariant": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
- "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
- },
- "node_modules/tiny-warning": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
- "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
- },
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4457,26 +4241,11 @@
"punycode": "^2.1.0"
}
},
- "node_modules/util": {
- "version": "0.10.4",
- "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
- "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
- "dev": true,
- "dependencies": {
- "inherits": "2.0.3"
- }
- },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
},
- "node_modules/util/node_modules/inherits": {
- "version": "2.0.3",
- "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
- "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
- "dev": true
- },
"node_modules/uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
@@ -4495,11 +4264,6 @@
"builtins": "^1.0.3"
}
},
- "node_modules/value-equal": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
- "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
- },
"node_modules/verror": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -4745,14 +4509,6 @@
"engines": {
"node": ">=8"
}
- },
- "node_modules/zustand": {
- "version": "3.4.1",
- "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.4.1.tgz",
- "integrity": "sha512-Kb91vSjy5vwBQ/PQ1a5GE6naS3gCxCgpkujT9zqZSO85+gnvmzgqraMW3ao1I0jR4PwHBXtLTf26r9j7EXoUiQ==",
- "peerDependencies": {
- "react": ">=16.8"
- }
}
},
"dependencies": {
@@ -4965,14 +4721,6 @@
"@babel/helper-plugin-utils": "^7.12.13"
}
},
- "@babel/runtime": {
- "version": "7.13.10",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
- "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
- "requires": {
- "regenerator-runtime": "^0.13.4"
- }
- },
"@babel/template": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
@@ -5018,17 +4766,6 @@
"purgecss": "^3.1.3"
}
},
- "@jadex/snowpack-plugin-tailwindcss-jit": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/@jadex/snowpack-plugin-tailwindcss-jit/-/snowpack-plugin-tailwindcss-jit-0.2.0.tgz",
- "integrity": "sha512-iZfHqtLZzsFKAgMBVCGFJdQWWnXoLhWr7m98DJalu772SSMGXrWryW4nC/Hyk/1RDiL861BAVzXO6aZT3KLtgw==",
- "dev": true,
- "requires": {
- "fs": "^0.0.1-security",
- "micromatch": "^4.0.2",
- "path": "^0.12.7"
- }
- },
"@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -5174,14 +4911,6 @@
"npm-run-path": "^4.0.1"
}
},
- "@tailwindcss/forms": {
- "version": "0.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.2.tgz",
- "integrity": "sha512-aj2/rJsGb2whAZ/BQWHWWQRSbhH0r/l1ozOByiv+ZNjBD84GMvb5dhAyfpeasFky+EJrAwX5eaqft8NQMZFWvA==",
- "requires": {
- "mini-svg-data-uri": "^1.2.3"
- }
- },
"@tootallnate/once": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -5194,12 +4923,6 @@
"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
"dev": true
},
- "@types/history": {
- "version": "4.7.8",
- "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
- "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==",
- "dev": true
- },
"@types/leaflet": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.0.tgz",
@@ -5241,27 +4964,6 @@
"@types/react": "*"
}
},
- "@types/react-router": {
- "version": "5.1.13",
- "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
- "integrity": "sha512-ZIuaO9Yrln54X6elg8q2Ivp6iK6p4syPsefEYAhRDAoqNh48C8VYUmB9RkXjKSQAJSJV0mbIFCX7I4vZDcHrjg==",
- "dev": true,
- "requires": {
- "@types/history": "*",
- "@types/react": "*"
- }
- },
- "@types/react-router-dom": {
- "version": "5.1.7",
- "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz",
- "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==",
- "dev": true,
- "requires": {
- "@types/history": "*",
- "@types/react": "*",
- "@types/react-router": "*"
- }
- },
"@types/scheduler": {
"version": "0.16.1",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
@@ -6048,12 +5750,6 @@
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz",
"integrity": "sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA=="
},
- "fs": {
- "version": "0.0.1-security",
- "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
- "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=",
- "dev": true
- },
"fs-extra": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -6273,27 +5969,6 @@
"integrity": "sha512-gz1XE6/BsuVfyBM/RiDMgapPmrf2ZrDcF8GxJ26PJTPQnEbDFs9TPzpJ5IDPQLpUor/qshPbVDv20yWIwhMwyA==",
"requires": {}
},
- "history": {
- "version": "4.10.1",
- "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
- "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
- "requires": {
- "@babel/runtime": "^7.1.2",
- "loose-envify": "^1.2.0",
- "resolve-pathname": "^3.0.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0",
- "value-equal": "^1.0.1"
- }
- },
- "hoist-non-react-statics": {
- "version": "3.3.2",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
- "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
- "requires": {
- "react-is": "^16.7.0"
- }
- },
"hosted-git-info": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
@@ -6548,9 +6223,10 @@
}
},
"isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+ "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+ "dev": true
},
"isexe": {
"version": "2.0.0",
@@ -6776,20 +6452,6 @@
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true
},
- "mini-create-react-context": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
- "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
- "requires": {
- "@babel/runtime": "^7.12.1",
- "tiny-warning": "^1.0.3"
- }
- },
- "mini-svg-data-uri": {
- "version": "1.2.3",
- "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
- "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
- },
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -7234,16 +6896,6 @@
"lines-and-columns": "^1.1.6"
}
},
- "path": {
- "version": "0.12.7",
- "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
- "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
- "dev": true,
- "requires": {
- "process": "^0.11.1",
- "util": "^0.10.3"
- }
- },
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -7260,14 +6912,6 @@
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
},
- "path-to-regexp": {
- "version": "1.8.0",
- "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
- "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
- "requires": {
- "isarray": "0.0.1"
- }
- },
"path-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -7478,12 +7122,6 @@
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
},
- "process": {
- "version": "0.11.10",
- "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
- "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
- "dev": true
- },
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -7506,16 +7144,6 @@
"retry": "^0.12.0"
}
},
- "prop-types": {
- "version": "15.7.2",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
- "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
- "requires": {
- "loose-envify": "^1.4.0",
- "object-assign": "^4.1.1",
- "react-is": "^16.8.1"
- }
- },
"psl": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -7574,11 +7202,6 @@
"scheduler": "^0.20.2"
}
},
- "react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
- },
"react-leaflet": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.1.0.tgz",
@@ -7593,37 +7216,6 @@
"integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
"dev": true
},
- "react-router": {
- "version": "5.2.0",
- "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
- "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
- "requires": {
- "@babel/runtime": "^7.1.2",
- "history": "^4.9.0",
- "hoist-non-react-statics": "^3.1.0",
- "loose-envify": "^1.3.1",
- "mini-create-react-context": "^0.4.0",
- "path-to-regexp": "^1.7.0",
- "prop-types": "^15.6.2",
- "react-is": "^16.6.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0"
- }
- },
- "react-router-dom": {
- "version": "5.2.0",
- "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
- "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
- "requires": {
- "@babel/runtime": "^7.1.2",
- "history": "^4.9.0",
- "loose-envify": "^1.3.1",
- "prop-types": "^15.6.2",
- "react-router": "5.2.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0"
- }
- },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7656,14 +7248,6 @@
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
- },
- "dependencies": {
- "isarray": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
- "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
- "dev": true
- }
}
},
"readdirp": {
@@ -7690,11 +7274,6 @@
}
}
},
- "regenerator-runtime": {
- "version": "0.13.7",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
- "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
- },
"request": {
"version": "2.88.2",
"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -7757,11 +7336,6 @@
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
},
- "resolve-pathname": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
- "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
- },
"retry": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
@@ -8104,16 +7678,6 @@
"yallist": "^4.0.0"
}
},
- "tiny-invariant": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
- "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
- },
- "tiny-warning": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
- "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
- },
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -8200,23 +7764,6 @@
"punycode": "^2.1.0"
}
},
- "util": {
- "version": "0.10.4",
- "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
- "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
- "dev": true,
- "requires": {
- "inherits": "2.0.3"
- },
- "dependencies": {
- "inherits": {
- "version": "2.0.3",
- "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
- "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
- "dev": true
- }
- }
- },
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8237,11 +7784,6 @@
"builtins": "^1.0.3"
}
},
- "value-equal": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
- "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
- },
"verror": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -8428,12 +7970,6 @@
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
"integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
"dev": true
- },
- "zustand": {
- "version": "3.4.1",
- "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.4.1.tgz",
- "integrity": "sha512-Kb91vSjy5vwBQ/PQ1a5GE6naS3gCxCgpkujT9zqZSO85+gnvmzgqraMW3ao1I0jR4PwHBXtLTf26r9j7EXoUiQ==",
- "requires": {}
}
}
}
diff --git a/package.json b/package.json
index d4e0b16..f829d35 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
"lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
},
"dependencies": {
- "@tailwindcss/forms": "^0.3.2",
"graphql": "^15.5.0",
"graphql-request": "^3.4.0",
"heroicons-react": "1.3.0",
@@ -14,13 +13,10 @@
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-leaflet": "^3.1.0",
- "react-router-dom": "^5.2.0",
"swr": "^0.5.5",
- "tailwindcss": "^2.0.3",
- "zustand": "^3.4.1"
+ "tailwindcss": "^2.0.3"
},
"devDependencies": {
- "@jadex/snowpack-plugin-tailwindcss-jit": "^0.2.0",
"@snowpack/plugin-dotenv": "^2.1.0",
"@snowpack/plugin-postcss": "^1.1.0",
"@snowpack/plugin-react-refresh": "^2.4.0",
@@ -28,7 +24,6 @@
"@types/leaflet": "^1.7.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
- "@types/react-router-dom": "^5.1.7",
"@types/snowpack-env": "^2.3.2",
"autoprefixer": "^10.2.4",
"postcss": "^8.2.6",
diff --git a/snowpack.config.js b/snowpack.config.js
index 09245c9..829a854 100644
--- a/snowpack.config.js
+++ b/snowpack.config.js
@@ -10,11 +10,10 @@ module.exports = {
'@snowpack/plugin-typescript',
'@snowpack/plugin-postcss',
'@snowpack/plugin-dotenv',
- '@jadex/snowpack-plugin-tailwindcss-jit',
],
routes: [
/* Enable an SPA Fallback in development: */
- { match: 'routes', src: '.*', dest: '/index.html' },
+ // {"match": "routes", "src": ".*", "dest": "/index.html"},
],
optimize: {
/* Example: Bundle your final build: */
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..938975d
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import useSWR from 'swr';
+import SidebarListView from './Sidebar/SidebarListView';
+import type { PointOfInterest } from './types/PointOfInterest';
+import SidebarSingleView from './Sidebar/SidebarSingleView';
+import Map from './Map/Map';
+import Modal from './Modal';
+import { ExclamationOutline as AlertIcon } from 'heroicons-react';
+
+function App() {
+ const [poiData, setPoiData] = useState<PointOfInterest[]>([]);
+ const [selectedPoi, setSelectedPoi] = useState<null | PointOfInterest>(null);
+ const [hoveredPoiId, setHoveredPoiId] = useState<null | number>(null);
+ const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
+
+ const handlePoiClick = (id: number) => {
+ const newPoi = poiData.find((poi) => poi.id === id);
+ newPoi && setSelectedPoi(newPoi);
+ };
+
+ const handlePoiClose = () => {
+ setSelectedPoi(null);
+ };
+
+ const handlePoiHoverOn = (poiId: number) => {
+ setHoveredPoiId(poiId);
+ };
+
+ const handlePoiHoverOff = () => {
+ setHoveredPoiId(null);
+ };
+
+ const { data, error } = useSWR(
+ `{
+ pois {
+ id
+ name
+ description
+ website
+ address
+ lat
+ lng
+ image
+ category
+ }
+ }
+ `,
+ );
+
+ useEffect(() => {
+ data && console.log('Fetched new data', data);
+ data?.pois && setPoiData(data.pois);
+ }, [data]);
+
+ useEffect(() => {
+ if (error) {
+ console.error('Error while fetching', error);
+ setShowErrorModal(true);
+ }
+ }, [error]);
+
+ return (
+ <>
+ {showErrorModal && (
+ <Modal
+ title="API nicht erreichbar"
+ text="Kann die API nicht erreichen. Bitte später erneut probieren."
+ icon={<AlertIcon className="h-6 w-6 text-red-600" />}
+ />
+ )}
+ <div className={'flex md:flex-row-reverse flex-col h-full'}>
+ <Map
+ onMouseEnter={handlePoiHoverOn}
+ onMouseLeave={handlePoiHoverOff}
+ hoveredPoiId={hoveredPoiId}
+ values={poiData}
+ onSelect={handlePoiClick}
+ selectedEntry={selectedPoi}
+ />
+ {selectedPoi ? (
+ <SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
+ ) : (
+ <SidebarListView
+ hoveredPoiId={hoveredPoiId}
+ onMouseEnter={handlePoiHoverOn}
+ onMouseLeave={handlePoiHoverOff}
+ className="sidebar"
+ values={poiData}
+ onClick={handlePoiClick}
+ />
+ )}
+ </div>
+ </>
+ );
+}
+
+export default App;
diff --git a/src/components/Map/Map.tsx b/src/Map/Map.tsx
similarity index 52%
rename from src/components/Map/Map.tsx
rename to src/Map/Map.tsx
index 635bd42..5f571c8 100644
--- a/src/components/Map/Map.tsx
+++ b/src/Map/Map.tsx
@@ -1,33 +1,34 @@
-import type { LatLngExpression } from 'leaflet';
-import { divIcon, DivIconOptions } from 'leaflet';
-import React, { useMemo } from 'react';
import { MapContainer, Marker, TileLayer } from 'react-leaflet';
-import { usePoiData, useStore } from '../../hooks';
+import React, { useMemo } from 'react';
+import { divIcon, DivIconOptions } from 'leaflet';
+import type { PointOfInterest } from '../types/PointOfInterest';
+import type { LatLngExpression } from 'leaflet';
import MapViewController from './MapViewController';
interface Props {
- hideAllPois?: boolean;
+ values: PointOfInterest[];
+ onSelect: (id: number) => void;
+ selectedEntry?: PointOfInterest | null;
+ hoveredPoiId?: number | null;
+ onMouseEnter?: (id: number) => void;
+ onMouseLeave?: () => void;
}
const DEFAULT_CENTER: LatLngExpression = [53.550359, 9.986701];
-const iconProps: DivIconOptions = {
- className: 'marker',
- // Source: https://fontawesome.com/icons/map-marker-alt
- html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg>`,
- iconSize: [24, 32],
- iconAnchor: [12, 32],
-};
-export const Map: React.FC<Props> = ({ hideAllPois = false }) => {
+export const Map: React.FC<Props> = (props) => {
+ const iconProps: DivIconOptions = {
+ className: 'marker',
+ // Source: https://fontawesome.com/icons/map-marker-alt
+ html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg>`,
+ iconSize: [24, 32],
+ iconAnchor: [12, 32],
+ };
const icon = useMemo(() => divIcon(iconProps), [iconProps]);
const largeIcon = useMemo(() => divIcon({ ...iconProps, iconSize: [30, 40], iconAnchor: [15, 40] }), [iconProps]);
-
- const { data } = usePoiData();
- const hoveredPoi = useStore((state) => state.hoveredPoi);
- const setHoveredPoi = useStore((state) => state.setHoveredPoi);
- const selectedPoi = useStore((state) => state.selectedPoi);
- const setSelectedPoi = useStore((state) => state.setSelectedPoi);
- const selectedLatlng: LatLngExpression | undefined = selectedPoi ? [selectedPoi?.lat, selectedPoi?.lng] : undefined;
+ const selectedLatlng: LatLngExpression | undefined = props.selectedEntry
+ ? [props.selectedEntry?.lat, props.selectedEntry?.lng]
+ : undefined;
return (
<MapContainer
@@ -49,25 +50,25 @@ export const Map: React.FC<Props> = ({ hideAllPois = false }) => {
/>
<MapViewController center={selectedLatlng ?? DEFAULT_CENTER} zoom={13} />
{/* Single marker when POI is selected */}
- {!!(selectedPoi && selectedLatlng && !hideAllPois) && <Marker icon={largeIcon} position={selectedLatlng} />}
+ {!!(props.selectedEntry && selectedLatlng) && <Marker icon={largeIcon} position={selectedLatlng} />}
{/* Multiple markers, when no POI is selected */}
- {!selectedPoi &&
- !hideAllPois &&
- data?.map((poi) => {
+ {!props.selectedEntry &&
+ props.values &&
+ props.values.map((poi) => {
const poiLatLng: LatLngExpression = [poi.lat, poi.lng];
return (
<Marker
- icon={hoveredPoi?.id === poi.id ? largeIcon : icon}
- opacity={hoveredPoi?.id === poi.id ? 1 : 0.7}
+ icon={props.hoveredPoiId === poi.id ? largeIcon : icon}
+ opacity={props.hoveredPoiId === poi.id ? 1 : 0.7}
key={poi.id}
position={poiLatLng}
eventHandlers={{
- click: () => setSelectedPoi(poi),
+ click: () => props.onSelect(poi.id),
mouseover: () => {
- setHoveredPoi(poi);
+ props.onMouseEnter && props.onMouseEnter(poi.id);
},
mouseout: () => {
- setHoveredPoi(null);
+ props.onMouseLeave && props.onMouseLeave();
},
}}
/>
diff --git a/src/components/Map/MapViewController.tsx b/src/Map/MapViewController.tsx
similarity index 100%
rename from src/components/Map/MapViewController.tsx
rename to src/Map/MapViewController.tsx
diff --git a/src/components/Modal.tsx b/src/Modal.tsx
similarity index 100%
rename from src/components/Modal.tsx
rename to src/Modal.tsx
diff --git a/src/Sidebar/SidebarContainer.tsx b/src/Sidebar/SidebarContainer.tsx
new file mode 100644
index 0000000..de02c07
--- /dev/null
+++ b/src/Sidebar/SidebarContainer.tsx
@@ -0,0 +1,21 @@
+import React, { CSSProperties } from 'react';
+
+interface Props {
+ style?: CSSProperties;
+ className?: string;
+}
+
+const SidebarContainer: React.FC<Props> = ({ style, className, children }) => {
+ return (
+ <div
+ style={style}
+ className={`flex flex-col shadow-2xl border-t-2 md:border-r-2 md:border-t-0 border-black border-opacity-20 ${
+ className ?? ''
+ }`}
+ >
+ {children}
+ </div>
+ );
+};
+
+export default SidebarContainer;
diff --git a/src/components/Sidebar/ListElement.tsx b/src/Sidebar/SidebarListElement.tsx
similarity index 70%
rename from src/components/Sidebar/ListElement.tsx
rename to src/Sidebar/SidebarListElement.tsx
index a088ece..ac5e6bd 100644
--- a/src/components/Sidebar/ListElement.tsx
+++ b/src/Sidebar/SidebarListElement.tsx
@@ -1,15 +1,12 @@
-import React, { SyntheticEvent } from 'react';
+import React from 'react';
import type { PointOfInterest } from 'src/types/PointOfInterest';
interface Props {
value: PointOfInterest;
hovered?: boolean;
- onMouseEnter: (event: SyntheticEvent) => void;
- onMouseLeave: (event: SyntheticEvent) => void;
- onClick: (event: SyntheticEvent) => void;
}
-const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
+const SidebarListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
return (
value && (
<div
@@ -29,4 +26,4 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
);
};
-export default ListElement;
+export default SidebarListElement;
diff --git a/src/Sidebar/SidebarListView.tsx b/src/Sidebar/SidebarListView.tsx
new file mode 100644
index 0000000..2503578
--- /dev/null
+++ b/src/Sidebar/SidebarListView.tsx
@@ -0,0 +1,44 @@
+import React, { CSSProperties } from 'react';
+import SidebarContainer from './SidebarContainer';
+import SidebarListElement from './SidebarListElement';
+import type { PointOfInterest } from '../types/PointOfInterest';
+
+interface Props {
+ style?: CSSProperties;
+ values: PointOfInterest[];
+ onClick?: (id: number) => void;
+ onMouseEnter?: (id: number) => void;
+ onMouseLeave?: () => void;
+ className?: string;
+ hoveredPoiId?: number | null;
+}
+
+const SidebarListView: React.FC<Props> = ({
+ values,
+ onMouseEnter,
+ onMouseLeave,
+ onClick,
+ hoveredPoiId,
+ ...restProps
+}) => {
+ return (
+ values && (
+ <SidebarContainer {...restProps}>
+ <h1 className="text-xl font-medium title-font m-4 text-gray-900 mb-2">{values.length} Orte:</h1>
+ {values &&
+ values.map((poi) => (
+ <SidebarListElement
+ key={poi.id}
+ {...(onMouseLeave ? { onMouseLeave: () => onMouseLeave() } : {})}
+ {...(onMouseEnter ? { onMouseEnter: () => onMouseEnter(poi.id) } : {})}
+ {...(onClick ? { onClick: () => onClick(poi.id) } : {})}
+ value={poi}
+ hovered={hoveredPoiId === poi.id}
+ />
+ ))}
+ </SidebarContainer>
+ )
+ );
+};
+
+export default SidebarListView;
diff --git a/src/Sidebar/SidebarSingleView.tsx b/src/Sidebar/SidebarSingleView.tsx
new file mode 100644
index 0000000..b5db3fe
--- /dev/null
+++ b/src/Sidebar/SidebarSingleView.tsx
@@ -0,0 +1,54 @@
+import React, { CSSProperties } from 'react';
+import SidebarContainer from './SidebarContainer';
+import type { PointOfInterest } from '../types/PointOfInterest';
+import { X as CloseIcon, HomeOutline as HomeIcon, LocationMarkerOutline as AddressIcon } from 'heroicons-react';
+
+interface Props {
+ style?: CSSProperties;
+ value: PointOfInterest;
+ onClose?: () => void;
+ className?: string;
+}
+
+const SidebarSingleView: React.FC<Props> = ({ value, onClose, className, ...restProps }) => {
+ const strippedUrl = value?.website?.replace(/(^\w+:|^)\/\//, '');
+ return (
+ <SidebarContainer className={`relative p-0 ${className || ''}`} {...restProps}>
+ <div className={`${value.image ? '' : 'pl-5 pt-5'}`}>
+ <CloseIcon
+ size={32}
+ className={`${
+ 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.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 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 && (
+ <div className={'flex items-center'}>
+ <HomeIcon size={18} className={'text-gray-500 mr-2'} />
+ <a className={'text-sm text-gray-500 hover:underline'} href={value.website}>
+ {strippedUrl}
+ </a>
+ </div>
+ )}
+ {value.address && (
+ <div className={'flex items-center mt-3'}>
+ <AddressIcon size={18} className={'text-gray-500 mr-2'} />
+ <div className="text-sm text-gray-500">{value.address}</div>
+ </div>
+ )}
+ </div>
+ </SidebarContainer>
+ );
+};
+
+export default SidebarSingleView;
diff --git a/src/components/App.tsx b/src/components/App.tsx
deleted file mode 100644
index f5aba53..0000000
--- a/src/components/App.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { useStore } from '../hooks';
-import ErrorModal from './ErrorModal';
-import Map from './Map/Map';
-import SidebarCreateView from './Sidebar/SidebarCreateView';
-import SidebarListView from './Sidebar/SidebarListView';
-import SidebarSingleView from './Sidebar/SidebarSingleView';
-
-const App = () => {
- const selectedPoi = useStore((state) => state.selectedPoi);
-
- return (
- <>
- <ErrorModal />
- <div className={'flex md:flex-row-reverse flex-col h-full'}>
- <Route path="/add" children={({ match }) => <Map hideAllPois={!!match} />} />
- <Switch>
- <Route exact path="/add">
- <SidebarCreateView />
- </Route>
- <Route>{selectedPoi ? <SidebarSingleView /> : <SidebarListView />}</Route>
- </Switch>
- </div>
- </>
- );
-};
-
-export default App;
diff --git a/src/components/ErrorModal.tsx b/src/components/ErrorModal.tsx
deleted file mode 100644
index 7386e08..0000000
--- a/src/components/ErrorModal.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ExclamationOutline as AlertIcon } from 'heroicons-react';
-import React from 'react';
-import { useStore } from '../hooks';
-import Modal from './Modal';
-
-interface Props {}
-
-const ErrorModal: React.FC<Props> = () => {
- const error = useStore((state) => state.error);
- const icons: { [index: string]: JSX.Element } = {
- alert: <AlertIcon className="h-6 w-6 text-red-600" />,
- };
- return error && <Modal title={error.title} text={error.message} icon={icons[error.icon]} />;
-};
-
-export default ErrorModal;
diff --git a/src/components/Sidebar/AddPoiForm.tsx b/src/components/Sidebar/AddPoiForm.tsx
deleted file mode 100644
index a91d286..0000000
--- a/src/components/Sidebar/AddPoiForm.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { GraphQLClient, request, gql } from 'graphql-request';
-import React, { useEffect, useState } from 'react';
-
-interface Props {}
-
-const AddPoiForm: React.FC<Props> = () => {
- const [formData, setFormData] = useState({
- lat: 123,
- lng: 123,
- name: '',
- address: '',
- description: '',
- website: '',
- category: '',
- image: '',
- tags: '',
- });
-
- useEffect(() => {
- console.log('Form data', formData);
- }, [formData]);
-
- const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
- setFormData({ ...formData, [e.target.name]: e.target.value });
- };
-
- // const mutation = gql`
- // mutation createPoiMutation(
- // $name: String!
- // $email: String!
- // $lat: Float!
- // $lng: Float!
- // $website: String
- // $description: String
- // $address: String!
- // $category: String!
- // ) {
- // createPoi(
- // poi: {
- // name: $name
- // email: $email
- // lat: $lat
- // lng: $lng
- // website: $website
- // description: $description
- // address: $address
- // category: $category
- // image: "ababababa"
- // }
- // )
- // }
- // `;
-
- // const variables = {
- // name: 'Inception',
- // email: 2010,
- // file: document.querySelector('input#avatar').files[0]
- // };
- // const data = await request(import.meta.env.SNOWPACK_PUBLIC_API_URL, mutation, formData);
-
- return (
- <form className="flex flex-col">
- <p className="leading-relaxed mb-5 text-gray-600">Bitte auf der Karte einen Pin setzen.</p>
- <label className="block mb-4">
- <span className="form-label">Name</span>
- <input
- type="text"
- name="name"
- value={formData.name}
- className="form-input"
- placeholder="Musterspace"
- onChange={handleInputChange}
- />
- </label>
- <label className="block mb-4">
- <span className="form-label">Adresse</span>
- <input
- type="text"
- name="address"
- value={formData.address}
- className="form-input"
- placeholder=""
- onChange={handleInputChange}
- />
- </label>
- <label className="block mb-4">
- <span className="form-label">Webseite</span>
- <input
- type="text"
- name="website"
- value={formData.website}
- className="form-input"
- placeholder=""
- onChange={handleInputChange}
- />
- </label>
- <label className="block mb-4">
- <span className="form-label">Beschreibung</span>
- <textarea
- name="description"
- value={formData.description}
- className="form-input"
- rows={3}
- onChange={handleInputChange}
- ></textarea>
- </label>
- <label className="block mb-6">
- <span className="form-label">Bild</span>
- <input
- className="block w-full focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
- type="file"
- id="avatar"
- name="avatar"
- accept="image/png, image/jpeg"
- ></input>
- </label>
- <button
- type="submit"
- className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded-lg text-lg"
- >
- Hinzufügen
- </button>
- </form>
- );
-};
-
-export default AddPoiForm;
diff --git a/src/components/Sidebar/SidebarContainer.tsx b/src/components/Sidebar/SidebarContainer.tsx
deleted file mode 100644
index f00e3b1..0000000
--- a/src/components/Sidebar/SidebarContainer.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-interface Props {
- className?: string;
-}
-
-const SidebarContainer: React.FC<Props> = ({ className, children }) => {
- return (
- <aside
- className={`sidebar box-border flex flex-col shadow-2xl border-t-2 md:border-r-2 md:border-t-0 border-black border-opacity-20 ${
- className ?? ''
- }`}
- >
- {children}
- </aside>
- );
-};
-
-export default SidebarContainer;
diff --git a/src/components/Sidebar/SidebarCreateView.tsx b/src/components/Sidebar/SidebarCreateView.tsx
deleted file mode 100644
index 85eeb5f..0000000
--- a/src/components/Sidebar/SidebarCreateView.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { X as CloseIcon } from 'heroicons-react';
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import AddPoiForm from './AddPoiForm';
-import SidebarContainer from './SidebarContainer';
-
-interface Props {}
-
-const SidebarCreateView: React.FC<Props> = () => {
- const history = useHistory();
- return (
- <SidebarContainer className="p-5">
- <CloseIcon
- size={32}
- className={`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">Ort anlegen:</h1>
- <AddPoiForm />
- </SidebarContainer>
- );
-};
-
-export default SidebarCreateView;
diff --git a/src/components/Sidebar/SidebarListView.tsx b/src/components/Sidebar/SidebarListView.tsx
deleted file mode 100644
index 5d2460d..0000000
--- a/src/components/Sidebar/SidebarListView.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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;
diff --git a/src/components/Sidebar/SidebarSingleView.tsx b/src/components/Sidebar/SidebarSingleView.tsx
deleted file mode 100644
index 12c3070..0000000
--- a/src/components/Sidebar/SidebarSingleView.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { HomeOutline as HomeIcon, LocationMarkerOutline as AddressIcon, X as CloseIcon } from 'heroicons-react';
-import React from 'react';
-import { useStore } from '../../hooks';
-import SidebarContainer from './SidebarContainer';
-import Tag from './Tag';
-
-interface Props {}
-
-const SidebarSingleView: React.FC<Props> = () => {
- const selectedPoi = useStore((state) => state.selectedPoi);
- const setSelectedPoi = useStore((state) => state.setSelectedPoi);
- const strippedUrl = selectedPoi?.website?.replace(/(^\w+:|^)\/\//, '');
-
- 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)}
- />
- </div>
- {selectedPoi?.image && (
- <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={selectedPoi?.image} alt="blog" />
- )}
- <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 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?.tags?.length && (
- <div className={'flex items-center mt-3'}>
- {selectedPoi?.tags.map((tag) => (
- <Tag key={tag.id} color={tag.color}>
- {tag.displayName}
- </Tag>
- ))}
- </div>
- )}
- </div>
- </SidebarContainer>
- );
-};
-
-export default SidebarSingleView;
diff --git a/src/components/Sidebar/Tag.tsx b/src/components/Sidebar/Tag.tsx
deleted file mode 100644
index 7b730b4..0000000
--- a/src/components/Sidebar/Tag.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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;
diff --git a/src/components/SwrWrapper.tsx b/src/components/SwrWrapper.tsx
deleted file mode 100644
index 96b19de..0000000
--- a/src/components/SwrWrapper.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { request } from 'graphql-request';
-import React from 'react';
-import { SWRConfig } from 'swr';
-import { useStore } from '../hooks';
-
-interface Props {}
-
-const SwrWrapper: React.FC<Props> = ({ children }) => {
- const setError = useStore((state) => state.setError);
- return (
- <SWRConfig
- value={{
- fetcher: (query: string) => request(import.meta.env.SNOWPACK_PUBLIC_API_URL, query),
- 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);
- },
- }}
- >
- {children}
- </SWRConfig>
- );
-};
-
-export default SwrWrapper;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index df87068..0000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './usePoiData';
-export * from './useStore';
diff --git a/src/hooks/usePoiData.ts b/src/hooks/usePoiData.ts
deleted file mode 100644
index d23d3c7..0000000
--- a/src/hooks/usePoiData.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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 };
-};
diff --git a/src/hooks/useStore.ts b/src/hooks/useStore.ts
deleted file mode 100644
index 4c01525..0000000
--- a/src/hooks/useStore.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-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 });
- },
- })),
-);
diff --git a/src/index.css b/src/index.css
index 18a8368..e8d6792 100644
--- a/src/index.css
+++ b/src/index.css
@@ -45,11 +45,3 @@ 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;
-}
diff --git a/src/index.tsx b/src/index.tsx
index 96a7b15..85d91b1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,17 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { BrowserRouter as Router } from 'react-router-dom';
-import App from './components/App';
-import SwrWrapper from './components/SwrWrapper';
+import App from './App';
+import { SWRConfig } from 'swr';
+import { request } from 'graphql-request';
import './index.css';
ReactDOM.render(
<React.StrictMode>
- <SwrWrapper>
- <Router>
- <App />
- </Router>
- </SwrWrapper>
+ <SWRConfig value={{ fetcher: (query: string) => request(import.meta.env.SNOWPACK_PUBLIC_API_URL, query) }}>
+ <App />
+ </SWRConfig>
</React.StrictMode>,
document.getElementById('root'),
);
diff --git a/src/testData.json b/src/testData.json
new file mode 100644
index 0000000..d93ab54
--- /dev/null
+++ b/src/testData.json
@@ -0,0 +1,55 @@
+[
+ {
+ "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"
+ }
+]
diff --git a/src/types/Error.ts b/src/types/Error.ts
deleted file mode 100644
index 0979889..0000000
--- a/src/types/Error.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Error {
- title: string;
- message: string;
- icon: string;
-}
diff --git a/src/types/PointOfInterest.ts b/src/types/PointOfInterest.ts
index c612f81..81cd084 100644
--- a/src/types/PointOfInterest.ts
+++ b/src/types/PointOfInterest.ts
@@ -1,3 +1,5 @@
+import type { LatLngExpression } from 'leaflet';
+
export interface PointOfInterest {
id: number;
lat: number;
@@ -8,15 +10,4 @@ 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[];
}
diff --git a/tailwind.config.js b/tailwind.config.js
index d6669e9..e6c84f1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,5 +8,5 @@ module.exports = {
variants: {
extend: {},
},
- plugins: [require('@tailwindcss/forms')],
+ plugins: [],
};
--
GitLab