Skip to content

Commit

Permalink
Merge pull request #288 from systemli/add-map-to-ticker-form
Browse files Browse the repository at this point in the history 
♻️ Add Preview for Location to TickerForm
  • Loading branch information
@0x46616c6b
0x46616c6b authored Jul 15, 2022
2 parents 4f242e9 + 6508685 commit 0241a1b
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 28 deletions.
9 changes: 5 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
"@semantic-ui-react/css-patch": "^1.0.0",
"history": "^4.9.0",
"jwt-decode": "^2.2.0",
"leaflet": "^1.6.0",
"leaflet": "^1.8.0",
"leaflet-draw": "^1.0.4",
"lodash": "^4.17.21",
"moment": "^2.24.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-hook-form": "^7.32.0",
"react-image-lightbox": "^5.1.4",
"react-leaflet": "^3.0.0",
"react-leaflet-draw": "^0.19.0",
"react-leaflet": "^4.0.1",
"react-leaflet-draw": "^0.20.1",
"react-markdown": "^8.0.3",
"react-moment": "^0.9.7",
"react-query": "^3.39.1",
Expand All @@ -32,10 +32,11 @@
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.17.12",
"@types/jwt-decode": "^3.1.0",
"@types/leaflet": "^1.7.11",
"@types/leaflet-draw": "^1.0.5",
"@types/node": "^18.0.0",
"@types/react-dom": "^17.0.17",
"@types/jwt-decode": "^3.1.0",
"@types/react-router-dom": "^5.0.0",
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
Expand Down
20 changes: 16 additions & 4 deletions src/components/TickerForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
import { useQueryClient } from 'react-query'
import useAuth from './useAuth'
import LocationSearch, { Result } from './LocationSearch'
import { MapContainer, Marker, TileLayer } from 'react-leaflet'

interface Props {
ticker?: Ticker
Expand All @@ -47,7 +48,7 @@ interface FormValues {

const TickerForm: FC<Props> = props => {
const ticker = props.ticker
const { handleSubmit, register, setValue } = useForm<FormValues>({
const { handleSubmit, register, setValue, watch } = useForm<FormValues>({
defaultValues: {
title: ticker?.title,
domain: ticker?.domain,
Expand Down Expand Up @@ -125,6 +126,8 @@ const TickerForm: FC<Props> = props => {
register('location.lon', { valueAsNumber: true })
})

const position = watch('location')

return (
<Form id="editTicker" onSubmit={handleSubmit(onSubmit)}>
<Form.Group widths="equal">
Expand Down Expand Up @@ -224,8 +227,7 @@ const TickerForm: FC<Props> = props => {
<Message info size="small">
You can add a default location to the ticker. This will help you to have
a pre-selected location when you add a map to a message. <br />
Current Location: {ticker?.location.lat.toPrecision(2)},
{ticker?.location.lon.toPrecision(2)}
Current Location: {position.lat.toFixed(2)},{position.lon.toFixed(2)}
</Message>
<Form.Group widths="equal">
<Form.Field width="15">
Expand All @@ -240,7 +242,17 @@ const TickerForm: FC<Props> = props => {
/>
</Form.Field>
</Form.Group>
{/* TODO: Add Map for the current selected location */}
{position.lat !== 0 && position.lon !== 0 ? (
<MapContainer
center={[position.lat, position.lon]}
scrollWheelZoom={false}
style={{ height: 200 }}
zoom={10}
>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={[position.lat, position.lon]} />
</MapContainer>
) : null}
</Form>
)
}
Expand Down
48 changes: 28 additions & 20 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1199,10 +1199,10 @@
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==

"@react-leaflet/core@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.1.1.tgz#827fd05bb542cf874116176d8ef48d5b12163f81"
integrity sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==
"@react-leaflet/core@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.0.0.tgz#212f4d87dc7681f40ca0e47d99672676c20c8ef6"
integrity sha512-SQQ5DCQIaLzvslN6wCXs5OWqtlvk1Ubv2n5d7zTM8SDl9hM5Rr2wVy7/nOCIY958D75/ovhq6ZoSvT7GLCX6sg==

"@semantic-ui-react/css-patch@^1.0.0":
version "1.0.0"
Expand Down Expand Up @@ -1363,7 +1363,14 @@
dependencies:
jwt-decode "*"

"@types/leaflet@^1.7.11":
"@types/leaflet-draw@^1.0.5":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@types/leaflet-draw/-/leaflet-draw-1.0.5.tgz#9e65c1261d055b62b38c542ce7d49be67ddf8581"
integrity sha512-m/vmhI1XjiBZphwKwmmcOoxbMd0ybN78uZb1c9//zOG0aWVYJd3XTnIW1pnPhxhIB4EB1tgjmWjq0YQM/IyuXg==
dependencies:
"@types/leaflet" "*"

"@types/leaflet@*", "@types/leaflet@^1.7.11":
version "1.7.11"
resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.11.tgz#48b33b7a15b015bbb1e8950399298a112c3220c8"
integrity sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==
Expand Down Expand Up @@ -4843,10 +4850,10 @@ leaflet-draw@^1.0.4:
resolved "https://registry.yarnpkg.com/leaflet-draw/-/leaflet-draw-1.0.4.tgz#45be92f378ed253e7202fdeda1fcc71885198d46"
integrity sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ==

leaflet@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"
integrity sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ==
leaflet@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==

leven@^3.1.0:
version "3.1.0"
Expand Down Expand Up @@ -4919,7 +4926,7 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"

lodash-es@^4.17.10, lodash-es@^4.17.21:
lodash-es@^4.17.15, lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
Expand Down Expand Up @@ -6488,19 +6495,20 @@ react-is@^18.0.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==

react-leaflet-draw@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/react-leaflet-draw/-/react-leaflet-draw-0.19.0.tgz#95de33054016db27e171f8f8f646f6bad17106f3"
integrity sha512-aOB7Nqgl79l62L7vHxhdyKJD6ep+1Q+qTfnrYfmcgF+yK0A1lQA2fUv9N4C0HCbejcyiqx1XYchSCw9Q+Vtc3A==
react-leaflet-draw@^0.20.1:
version "0.20.1"
resolved "https://registry.yarnpkg.com/react-leaflet-draw/-/react-leaflet-draw-0.20.1.tgz#f0d119c2b2d413f04e79eb278befcab233935889"
integrity sha512-Y5XYWut/GL8wku5j65PJeu36tMT1bDL4T963tHfynBD9XaujGbVAvXw2gLGN9SKQ67m15tfxtMI+E4oeNMjnIQ==
dependencies:
lodash-es "^4.17.10"
fast-deep-equal "^3.1.3"
lodash-es "^4.17.15"

react-leaflet@^3.0.0:
version "3.2.5"
resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.2.5.tgz#bec0bfab9dd8c2b030ea630f7a0687a60322ca7d"
integrity sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==
react-leaflet@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.0.1.tgz#84f085241c741b43184808c2038642e88de7655e"
integrity sha512-CpMQ99+52AklQofrGrVQHqHSyY41wqax1wT65XdyEkky/26V/j+Sv+fp0/wOaqPvdEMaSO/Ovj4dS7bGqtYpwQ==
dependencies:
"@react-leaflet/core" "^1.1.1"
"@react-leaflet/core" "^2.0.0"

react-lifecycles-compat@^3.0.0:
version "3.0.4"
Expand Down

0 comments on commit 0241a1b

Please sign in to comment.