From cd05b3d4411d3ccc0fa2a4273d420288ff889cea Mon Sep 17 00:00:00 2001 From: Oliver Barnwell Date: Sat, 25 Sep 2021 19:35:09 +0100 Subject: [PATCH] feat: further progress getting the edit page to work --- .gitignore | 1 + package.json | 1 + src/pages/loos/[id]/edit.tsx | 286 ++++++++++++++++++----------------- src/pages/loos/add.tsx | 3 +- yarn.lock | 5 + 5 files changed, 152 insertions(+), 144 deletions(-) diff --git a/.gitignore b/.gitignore index bd9414b80..98f4bf7a1 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ node_modules # Local config .env .now +.vscode build diff --git a/package.json b/package.json index 677aeb111..43bce9dfd 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "@mapbox/geojson-area": "0.2.2", "@mapbox/geojson-rewind": "0.5.1", "@types/jest": "27.0.1", + "@types/lodash": "4.14.174", "@types/node": "16.9.1", "@types/react": "17.0.20", "@types/react-dom": "17.0.9", diff --git a/src/pages/loos/[id]/edit.tsx b/src/pages/loos/[id]/edit.tsx index 21a98e933..0fe019674 100644 --- a/src/pages/loos/[id]/edit.tsx +++ b/src/pages/loos/[id]/edit.tsx @@ -18,27 +18,32 @@ import dynamic from 'next/dynamic'; import { useRouter } from 'next/router'; import { withApollo } from '../../../components/withApollo'; import { NextPage } from 'next'; +import { useFindLooById } from '../../../api-client/page'; +import { + UpdateLooMutationVariables, + useFindLooByIdQuery, + useUpdateLooMutation, +} from '../../../api-client/graphql'; +import { cloneDeep } from '@apollo/client/utilities'; +import { merge, uniqBy } from 'lodash'; +import Notification from '../../../components/Notification'; +import { css } from '@emotion/react'; const MapLoader = () =>

Loading map...

; -const EditPage = (props: { match: { params: { id: any } } }) => { +const EditPage = (props: { match: { params: { id?: string } } }) => { const router = useRouter(); const { id: selectedLooId } = router.query; - // const { - // isValidating: loadingLooData, - // data: looData, - // error: looError, - // } = useSWR( - // [FIND_LOO_BY_ID_QUERY, JSON.stringify({ id: selectedLooId })], - // { - // revalidateOnFocus: false, - // } - // ); + const { + data: looData, + error: looError, + loading: loadingLooData, + } = useFindLooByIdQuery({ variables: { id: selectedLooId as string } }); const [mapState, setMapState] = useMapState(); - // const looLocation = (looData && looData.loo.location) || null; + const looLocation = (looData && looData.loo.location) || null; const LooMap = React.useMemo( () => @@ -50,11 +55,11 @@ const EditPage = (props: { match: { params: { id: any } } }) => { ); // set the map position to the loo location - // React.useEffect(() => { - // if (looLocation) { - // setMapState({ center: looLocation }); - // } - // }, [looLocation, setMapState]); + React.useEffect(() => { + if (looLocation) { + setMapState({ center: looLocation }); + } + }, [looLocation, setMapState]); const { data } = useNearbyLoos({ lat: mapState.center.lat, @@ -63,96 +68,89 @@ const EditPage = (props: { match: { params: { id: any } } }) => { }); // local state mapCenter to get fix issues with react-leaflet not being stateless and lat lng rounding issues - const [mapCenter, setMapCenter] = useState(); - - const [initialData, setInitialData] = useState(); - - // useEffect(() => { - // if (!looData) { - // return; - // } - - // const toilet = cloneDeep(merge({}, { active: null }, looData.loo)); - // setMapCenter(toilet.location); - - // // keep track of defaults so we only submit new information - // setInitialData({ - // loo: toilet, - // center: { - // lat: toilet.location.lat, - // lng: toilet.location.lng, - // }, - // }); - // }, [looData]); - - // const [ - // updateLoo, - // { loading: saveLoading, data: saveData, error: saveError }, - // ] = useMutation(UPDATE_LOO_MUTATION); - - // const save = async (formData: { id: any; }) => { - // formData.id = looData.loo.id; - - // try { - // const data = await updateLoo(formData); - - // // update cached query - // mutate( - // [ - // FIND_LOO_BY_ID_QUERY, - // JSON.stringify({ id: data.submitReport.loo.id }), - // ], - // { - // loo: data.submitReport.loo, - // } - // ); - // } catch (err) { - // console.error('save error', err); - // } - // }; - - // if (saveData) { - // // redirect to updated toilet entry page - // router.push(`/loos/${saveData.submitReport.loo.id}?message=updated`) - // } - - // if (loadingLooData || !looData || !initialData || looError) { - // return ( - // - // - // - // {looError ? 'Error fetching toilet data' : 'Fetching Toilet Data'} - // - // - // - // ); - // } + const [mapCenter, setMapCenter] = useState({ lat: 0, lng: 0 }); + + const [initialData, setInitialData] = useState({ + loo: null, + center: { lat: 0, lng: 0 }, + }); + + useEffect(() => { + if (!looData) { + return; + } + + const toilet = cloneDeep(merge({}, { active: null }, looData.loo)); + setMapCenter(toilet.location); + + // keep track of defaults so we only submit new information + setInitialData({ + loo: toilet, + center: { + lat: toilet.location.lat, + lng: toilet.location.lng, + }, + }); + }, [looData]); + + const [ + updateLooMutation, + { data: saveData, loading: saveLoading, error: saveError }, + ] = useUpdateLooMutation(); + + const save = async (formData: UpdateLooMutationVariables) => { + formData.id = looData.loo.id; + + try { + const data = await updateLooMutation({ variables: { ...formData } }); + useUpdateLooMutation; + } catch (err) { + console.error('save error', err); + } + }; + + if (saveData) { + // redirect to updated toilet entry page + router.push(`/loos/${saveData.submitReport.loo.id}?message=updated`); + } + + if (loadingLooData || !looData || !initialData || looError) { + return ( + + + + {looError ? 'Error fetching toilet data' : 'Fetching Toilet Data'} + + + + ); + } // redirect to index if loo is not active (i.e. removed) - // if (looData && !looData.loo.active) { - // router.push('/'); - // } + if (looData && !looData.loo.active) { + router.push('/'); + } - // const getLoosToDisplay = () => { - // let activeLoo; + const getLoosToDisplay = () => { + let activeLoo; - // if (looData) { - // activeLoo = { - // ...looData.loo, - // isHighlighted: true, - // }; - // } + if (looData) { + activeLoo = { + ...looData.loo, + isHighlighted: true, + }; + } - // // only return the active loos once (activeLoo must be first in array) - // return uniqBy([activeLoo, ...data], 'id').filter(Boolean); - // }; + // only return the active loos once (activeLoo must be first in array) + return uniqBy([activeLoo, ...data], 'id').filter(Boolean); + }; return ( @@ -162,7 +160,7 @@ const EditPage = (props: { match: { params: { id: any } } }) => { - {/* { showCrosshair controlsOffset={20} withAccessibilityOverlays={false} - onViewportChanged={(mapPosition: { center: (prevState: undefined) => undefined; }) => { + onViewportChanged={(mapPosition: { + center: (prevState: undefined) => undefined; + }) => { setMapCenter(mapPosition.center); }} - /> */} + /> - {/* - - {({ isDirty }) => ( - - - - - - - - )} - */} + + {initialData?.loo && ( + + {({ isDirty }) => ( + + + + + + + + )} + + )} ); diff --git a/src/pages/loos/add.tsx b/src/pages/loos/add.tsx index e8d47ffdf..01b6391a4 100644 --- a/src/pages/loos/add.tsx +++ b/src/pages/loos/add.tsx @@ -14,12 +14,11 @@ import useNearbyLoos from '../../components/useNearbyLoos'; import config from '../../config'; import dynamic from 'next/dynamic'; -import Router, { useRouter } from 'next/router'; +import { useRouter } from 'next/router'; import { NextPage } from 'next'; import { withApollo } from '../../components/withApollo'; import { UpdateLooMutationVariables, - useFindLooByIdQuery, useUpdateLooMutation, } from '../../api-client/graphql'; diff --git a/yarn.lock b/yarn.lock index 7f2f46278..511289dc9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1926,6 +1926,11 @@ dependencies: "@types/geojson" "*" +"@types/lodash@4.14.174": + version "4.14.174" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.174.tgz#b4b06b6eced9850eed6b6a8f1abdd0f5192803c1" + integrity sha512-KMBLT6+g9qrGXpDt7ohjWPUD34WA/jasrtjTEHStF0NPdEwJ1N9SZ+4GaMVDeuk/y0+X5j9xFm6mNiXS7UoaLQ== + "@types/long@^4.0.0": version "4.0.1" resolved "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz"