Merge pull request #758 from neontribe/page-transition-warning

fix: avoid page transition warning

src/pages/AddPage.js

@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet';
 import queryString from 'query-string';
 import { useMutation } from '@apollo/client';
 import { loader } from 'graphql.macro';
+import { Redirect } from 'react-router-dom';
 
 import PageLayout from '../components/PageLayout';
 import LooMap from '../components/LooMap';
@@ -16,7 +17,6 @@ import useMapPosition from '../components/useMapPosition';
 import useNearbyLoos from '../components/useNearbyLoos';
 
 import config from '../config';
-import history from '../history';
 
 const UPDATE_LOO = loader('./updateLoo.graphql');
 
@@ -61,7 +61,11 @@ const AddPage = (props) => {
 
   // redirect to new toilet entry page on successful addition
   if (saveResponse && saveResponse.submitReport.code === '200') {
-    history.push(`/loos/${saveResponse.submitReport.loo.id}?message=created`);
+    return (
+      <Redirect
+        to={`/loos/${saveResponse.submitReport.loo.id}?message=created`}
+      />
+    );
   }
 
   const save = (data) => {

src/pages/EditPage.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';
@@ -20,7 +20,7 @@ import useNearbyLoos from '../components/useNearbyLoos';
 import useMapPosition from '../components/useMapPosition';
 
 import config from '../config';
-import history from '../history';
+// import history from '../history';
 
 const FIND_BY_ID = loader('./findLooById.graphql');
 const UPDATE_LOO = loader('./updateLoo.graphql');
@@ -119,12 +119,16 @@ const EditPage = (props) => {
 
   // redirect to index if loo is not active (i.e. removed)
   if (looData && !looData.loo.active) {
-    history.push('/');
+    return <Redirect to="/" />;
   }
 
   // redirect to new toilet entry page on successful addition
   if (saveResponse && saveResponse.submitReport.code === '200') {
-    history.push(`/loos/${saveResponse.submitReport.loo.id}?message=updated`);
+    return (
+      <Redirect
+        to={`/loos/${saveResponse.submitReport.loo.id}?message=updated`}
+      />
+    );
   }
 
   const getLoosToDisplay = () => {

src/pages/RemovePage.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useQuery, useMutation } from '@apollo/client';
 import { loader } from 'graphql.macro';
+import { Redirect } from 'react-router-dom';
 
 import config from '../config';
-import history from '../history';
 
 import PageLayout from '../components/PageLayout';
 import Container from '../components/Container';
@@ -67,7 +67,7 @@ const RemovePage = function (props) {
   }
 
   if (!looData.loo.active) {
-    history.push('/');
+    return <Redirect to="/" />;
   }
 
   return (