fix: looPage centering

public-convenience-ltd · Dec 6, 2021 · 844cf32 · 844cf32
1 parent 40796a0
commit 844cf32
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 140 deletions.
diff --git a/src/components/EntryForm.tsx b/src/components/EntryForm.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { useForm, Controller } from 'react-hook-form';
 import Image from 'next/image';
@@ -17,6 +16,7 @@ import Switch from '../components/Switch';
 import { WEEKDAYS, isClosed } from '../openingTimes';
 
 import crosshair from '../../public/crosshair-small.svg';
+import { useMapState } from './MapState';
 
 const openingTimesFields = WEEKDAYS.flatMap((day: string) => {
   return [
@@ -183,8 +183,9 @@ const Section = ({ register, id, title, questions, children }) => (
   </div>
 );
 
-const EntryForm = ({ title, loo, center, children, ...props }) => {
+const EntryForm = ({ title, loo, children, ...props }) => {
   const [noPayment, setNoPayment] = useState(loo.noPayment);
+  const [{ center }] = useMapState();
 
   const hasOpeningTimes = Boolean(loo.openingTimes);
 
@@ -304,6 +305,30 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
             </Box>
             &nbsp;
             <span>with where you believe the toilet to be</span>
+            <VisuallyHidden>
+              <label>
+                Latitude
+                <Input
+                  ref={register}
+                  type="text"
+                  name="geometry.coordinates.0"
+                  value={center.lat}
+                  readOnly
+                />
+              </label>
+
+              <label>
+                Longitude
+                <Input
+                  ref={register}
+                  type="text"
+                  name="geometry.coordinates.1"
+                  data-testid="loo-name"
+                  value={center.lng}
+                  readOnly
+                />
+              </label>
+            </VisuallyHidden>
           </Box>
 
           <Spacer mt={4} />
@@ -563,33 +588,6 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
             />
           </label>
 
-          <Spacer mt={3} />
-
-          <VisuallyHidden>
-            <label>
-              Latitude
-              <Input
-                ref={register}
-                type="text"
-                name="geometry.coordinates.0"
-                value={center.lat}
-                readOnly
-              />
-            </label>
-
-            <label>
-              Longitude
-              <Input
-                ref={register}
-                type="text"
-                name="geometry.coordinates.1"
-                data-testid="loo-name"
-                value={center.lng}
-                readOnly
-              />
-            </label>
-          </VisuallyHidden>
-
           <Spacer mt={4} />
 
           {isFunction(children) ? children({ isDirty }) : children}
@@ -607,30 +605,4 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
   );
 };
 
-EntryForm.propTypes = {
-  title: PropTypes.string.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  loo: PropTypes.shape({
-    name: PropTypes.string,
-    accessible: PropTypes.bool,
-    opening: PropTypes.string,
-    noPayment: PropTypes.bool,
-    paymentDetails: PropTypes.string,
-    notes: PropTypes.string,
-    openingTimes: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.oneOf([null]),
-    ]),
-  }),
-  center: PropTypes.shape({
-    lat: PropTypes.number.isRequired,
-    lng: PropTypes.number.isRequired,
-  }).isRequired,
-  saveLoading: PropTypes.bool,
-};
-
-EntryForm.defaultProps = {
-  loo: {},
-};
-
 export default EntryForm;
diff --git a/src/components/MapState.tsx b/src/components/MapState.tsx
@@ -1,5 +1,4 @@
 import React, { Dispatch, useEffect } from 'react';
-import { Loo } from '../api-client/graphql';
 import config, { Filter, FILTERS_KEY } from '../config';
 
 const MapStateContext =

diff --git a/src/pages/cookies.tsx b/src/pages/cookies.tsx
diff --git a/src/pages/loos/[id]/edit.tsx b/src/pages/loos/[id]/edit.tsx
@@ -29,6 +29,7 @@ const EditPage: PageFindLooByIdComp = (props) => {
   const router = useRouter();
   const { isLoading, user } = useUser();
   const [mapState] = useMapState();
+
   const [
     updateLooMutation,
     { data: saveData, loading: saveLoading, error: saveError },
@@ -86,7 +87,6 @@ const EditPage: PageFindLooByIdComp = (props) => {
           <EntryForm
             title="Edit This Toilet"
             loo={loo}
-            center={loo.location}
             saveLoading={saveLoading}
             saveError={saveError}
             onSubmit={save}

diff --git a/src/pages/loos/[id]/index.tsx b/src/pages/loos/[id]/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Head from 'next/head';
 import PageLayout from '../../../components/PageLayout';
 import Box from '../../../components/Box';
@@ -21,6 +21,12 @@ const SIDEBAR_BOTTOM_MARGIN = 32;
 const LooPage: PageFindLooByIdComp = (props) => {
   const [mapState, setMapState] = useMapState();
 
+  // Just set our center when this page is an ingress route
+  // This way you can click loos on the map without the map jerking about
+  useEffect(() => {
+    setMapState({ center: props.data.loo.location });
+  });
+
   const [toiletPanelDimensions, setToiletPanelDimensions] = React.useState({});
 
   const router = useRouter();
@@ -125,8 +131,4 @@ export const getStaticPaths = async () => {
   };
 };
 
-export default withApollo(
-  ssrFindLooById.withPage((arg) => ({
-    variables: { id: arg?.query?.id.toString() },
-  }))(LooPage)
-);
+export default withApollo(LooPage);
diff --git a/src/pages/loos/[id]/remove.tsx b/src/pages/loos/[id]/remove.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Head from 'next/head';
 import { useUser } from '@auth0/nextjs-auth0';
 
@@ -13,25 +13,18 @@ import Notification from '../../../components/Notification';
 import Login from '../../../components/Login';
 import PageLoading from '../../../components/PageLoading';
 import { useRouter } from 'next/router';
-import {
-  useFindLooByIdQuery,
-  useRemoveLooMutation,
-} from '../../../api-client/graphql';
+import { useRemoveLooMutation } from '../../../api-client/graphql';
 import { withApollo } from '../../../components/withApollo';
-import { NextPage } from 'next';
+import { ssrFindLooById, PageFindLooByIdComp } from '../../../api-client/page';
+import { GetServerSideProps } from 'next';
+import { dbConnect } from '../../../api/db';
 
-const RemovePage = function (props: { match: { params: { id: any } } }) {
+const RemovePage: PageFindLooByIdComp = function (props) {
+  const loo = props.data.loo;
   const { user, error, isLoading } = useUser();
 
   const [reason, setReason] = useState('');
   const router = useRouter();
-  const { id: selectedLooId } = router.query;
-
-  const {
-    data: looData,
-    error: looError,
-    loading: loadingLooData,
-  } = useFindLooByIdQuery({ variables: { id: selectedLooId as string } });
 
   const [removeLooMutation, { loading: loadingRemove, error: removeError }] =
     useRemoveLooMutation();
@@ -45,29 +38,19 @@ const RemovePage = function (props: { match: { params: { id: any } } }) {
 
     await removeLooMutation({
       variables: {
-        id: looData.loo.id,
+        id: loo.id,
         reason,
       },
     });
 
-    router.push(`/loos/${selectedLooId}?message=removed`);
+    router.push(`/loos/${loo.id}?message=removed`);
   };
 
-  if (removeError || looError) {
-    console.error(removeError || looError);
-  }
-
-  if (loadingLooData || !looData || looError) {
-    return (
-      <PageLayout>
-        <Notification>
-          {loadingLooData ? 'Fetching Toilet Data' : 'Error finding toilet.'}
-        </Notification>
-      </PageLayout>
-    );
+  if (removeError) {
+    console.error(removeError);
   }
 
-  if (!looData.loo.active) {
+  if (!loo.active) {
     router.push('/');
   }
 
@@ -137,4 +120,22 @@ const RemovePage = function (props: { match: { params: { id: any } } }) {
   );
 };
 
-export default withApollo(RemovePage as NextPage);
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  await dbConnect();
+  const res = await ssrFindLooById.getServerPage(
+    {
+      variables: { id: ctx.params.id as string },
+    },
+    ctx
+  );
+
+  if (res.props.error || !res.props.data) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return res;
+};
+
+export default withApollo(RemovePage);
diff --git a/src/pages/loos/add.tsx b/src/pages/loos/add.tsx
@@ -15,26 +15,19 @@ import { useMapState } from '../../components/MapState';
 import config from '../../config';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import { NextPage } from 'next';
 import { withApollo } from '../../components/withApollo';
 import {
   UpdateLooMutationVariables,
   useUpdateLooMutation,
 } from '../../api-client/graphql';
 import PageLoading from '../../components/PageLoading';
+import LooMap from '../../components/LooMap/LooMapLoader';
 
 const initialFormState = {
   active: null,
   noPayment: true,
 };
 
-const MapLoader = () => <p>Loading map...</p>;
-
-const LooMap = dynamic(() => import('../../components/LooMap'), {
-  loading: MapLoader,
-  ssr: false,
-});
-
 const AddPage = () => {
   const { user, error, isLoading } = useUser();
   const [mapState, setMapState] = useMapState();
@@ -116,7 +109,6 @@ const AddPage = () => {
       <EntryForm
         title="Add This Toilet"
         loo={initialFormState}
-        center={mapState.center}
         saveLoading={saveLoading}
         saveError={saveError}
         onSubmit={saveLoo}
@@ -133,4 +125,4 @@ const AddPage = () => {
   );
 };
 
-export default withApollo(AddPage as NextPage);
+export default withApollo(AddPage);
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 
 import PageLayout from '../components/PageLayout';