edit page working I think maybe perhaps

public-convenience-ltd · Jul 26, 2021 · 4a32ca0 · 4a32ca0
1 parent e26bf4e
commit 4a32ca0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx
@@ -106,12 +106,12 @@ const LooMap = ({
           label={toilet.name || 'Unnamed toilet'}
           onClick={() => {
             if (!staticMap) {
-              router.push(`/loos/${toilet.id}`, `/loos/${toilet.id}`, {shallow: true});
+              router.push(`/loos/${toilet.id}`, `/loos/${toilet.id}`);
             }
           }}
           onKeyDown={(event: { originalEvent: { keyCode: number; }; }) => {
             if (!staticMap && event.originalEvent.keyCode === KEY_ENTER) {
-              router.push(`/loos/${toilet.id}`, `/loos/${toilet.id}`, {shallow: true});
+              router.push(`/loos/${toilet.id}`, `/loos/${toilet.id}`);
             }
           }}
           keyboard={false}
@@ -129,7 +129,7 @@ const LooMap = ({
       }
 
       setAnnouncement(`${toilet.name || 'Unnamed toilet'} selected`);
-      router.push(`/loos/${toilet.id}`, `/loos/${toilet.id}`, {shallow: true});
+      router.push(`/loos/${toilet.id}`, `/loos/${toilet.id}`);
     },
     [intersectingToilets, router.push]
   );

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,8 +1,12 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
 
 class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx)
+    if(typeof window !== 'undefined') {
+      window.plausible = window.plausible || function() {(window.plausible.q = window.plausible.q || []).push(arguments)}
+    }
+
     return { ...initialProps }
   }
 
@@ -13,6 +17,12 @@ class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
+          <title>The Great British Public Toilet Map</title>
+          <meta
+            name="Description"
+            content="The Great British Public Toilet Map is the UK's largest database of publicly-accessible toilets, with over 11000 facilities."
+          />
+          <script async defer data-domain="toiletmap.org.uk" src="https://stats.toiletmap.org.uk/js/index.js"></script>
         </body>
       </Html>
     )

diff --git a/src/pages/EditPage.tsx → src/pages/loos/[id]/edit.tsx b/src/pages/EditPage.tsx → src/pages/loos/[id]/edit.tsx
@@ -9,31 +9,35 @@ import useSWR, { mutate } from 'swr';
 // import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
-import PageLayout from '../components/PageLayout';
-import Button from '../components/Button';
-import Spacer from '../components/Spacer';
-import Notification from '../components/Notification';
-import EntryForm from '../components/EntryForm';
-import LooMap from '../components/LooMap';
-import Box from '../components/Box';
-
-import config from '../config';
-import { useMutation } from '../graphql/fetcher';
-import useNearbyLoos from '../components/useNearbyLoos';
-import { useMapState } from '../components/MapState';
+import PageLayout from '../../../components/PageLayout';
+import Button from '../../../components/Button';
+import Spacer from '../../../components/Spacer';
+import Notification from '../../../components/Notification';
+import EntryForm from '../../../components/EntryForm';
+import Box from '../../../components/Box';
+
+import config from '../../../config';
+import { useMutation } from '../../../graphql/fetcher';
+import useNearbyLoos from '../../../components/useNearbyLoos';
+import { useMapState } from '../../../components/MapState';
 
 // const FIND_LOO_BY_ID_QUERY = print(loader('../graphql/findLooById.graphql'));
 // const UPDATE_LOO_MUTATION = print(loader('../graphql/updateLoo.graphql'));
-import FIND_LOO_BY_ID_QUERY from '../graphql/findLooById.graphql';
-import UPDATE_LOO_MUTATION from '../graphql/updateLoo.graphql';
+import FIND_LOO_BY_ID_QUERY from '../../../graphql/findLooById.graphql';
+import UPDATE_LOO_MUTATION from '../../../graphql/updateLoo.graphql';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
 
 const EditPage = (props: { match: { params: { id: any; }; }; }) => {
+  const router = useRouter();
+  const {id: selectedLooId} = router.query;
+
   const {
     isValidating: loadingLooData,
     data: looData,
     error: looError,
   } = useSWR(
-    [FIND_LOO_BY_ID_QUERY, JSON.stringify({ id: props.match.params.id })],
+    [FIND_LOO_BY_ID_QUERY, JSON.stringify({ id: selectedLooId })],
     {
       revalidateOnFocus: false,
     }
@@ -43,6 +47,8 @@ const EditPage = (props: { match: { params: { id: any; }; }; }) => {
 
   const looLocation = (looData && looData.loo.location) || null;
 
+  const LooMap = React.useMemo(() => dynamic(() => import('../../../components/LooMap'), { loading: () => <p>Loading map...</p>, ssr: false, }), [])
+
   // set the map position to the loo location
   React.useEffect(() => {
     if (looLocation) {
@@ -202,7 +208,7 @@ const EditPage = (props: { match: { params: { id: any; }; }; }) => {
 
               <Button
                 as={Link}
-                to={`/loos/${props.match.params.id}/remove`}
+                href={`/loos/${selectedLooId}/remove`}
                 css={{
                   width: '100%',
                 }}