work on page navigation

src/common/constants.js

@@ -7,7 +7,10 @@ export const QA_BASE_URL = 'https://qa.door43.org'
 export const QA = 'QA'
 export const PROD = 'PROD'
 export const TOKEN_ID = 'gatewayEdit'
+export const ERROR_PAGE = '/error'
 export const FEEDBACK_PAGE = '/feedback'
+export const HOME_PAGE = '/'
+export const SETTINGS_PAGE = '/settings'
 export const SERVER_KEY = 'server'
 
 export const SERVER_MAX_WAIT_TIME_RETRY = 25000 // in milliseconds

src/components/Drawer.jsx

@@ -40,15 +40,15 @@ export default function Drawer({
       cardsLoadingMerge,
     },
     actions: {
-      setPage,
+      setShowAccountSetup,
     }
   } = useContext(StoreContext)
 
   async function onSettingsClick() {
     const okToContinue = await checkUnsavedChanges()
 
     if (okToContinue) {
-      setPage('/settings')
+      setShowAccountSetup(true)
       onClose()
     }
   }

src/components/ErrorPage.jsx

@@ -1,12 +1,11 @@
 import { useContext } from 'react'
 import PropTypes from 'prop-types'
 import { StoreContext } from '@context/StoreContext'
+import { HOME_PAGE } from '@common/constants'
 
 export default function ErrorPage({ statusCode }) {
   const {
-    actions: {
-      setPage
-    },
+    actions: { setPage },
   } = useContext(StoreContext)
 
   if (statusCode) {
@@ -17,7 +16,7 @@ export default function ErrorPage({ statusCode }) {
 
   const handleClick = (e) => {
     e.preventDefault()
-    setPage('/')
+    setPage(HOME_PAGE)
   }
 
   return (

src/components/Header.jsx

@@ -12,7 +12,9 @@ import { AuthContext } from '@context/AuthContext'
 import { StoreContext } from '@context/StoreContext'
 import FeedbackPopup from '@components/FeedbackPopup'
 import useUpdateCardsProps from '@hooks/useUpdateCardsProps'
+import { HOME_PAGE } from '@common/constants'
 import { UpdateBranchButton, ErrorDialog } from 'translation-helps-rcl'
+
 // TODO: Enable buttons once ready to fully implement functionality
 // import LinkIcon from '@material-ui/icons/Link'
 // import Button from '@material-ui/core/Button'
@@ -103,7 +105,7 @@ export default function Header({
             <Typography
               variant='h6'
               className={classes.title}
-              onClick={() => setPage('/')}
+              onClick={() => setPage(HOME_PAGE)}
             >
               {title}
             </Typography>

src/components/Layout.jsx

@@ -6,10 +6,20 @@ import Footer from '@components/Footer'
 import Onboarding from '@components/Onboarding'
 import { StoreContext } from '@context/StoreContext'
 import { getBuildId } from '@utils/build'
-import { APP_NAME, BASE_URL, PROD, QA, QA_BASE_URL } from '@common/constants'
+import {
+  APP_NAME,
+  BASE_URL,
+  // ERROR_PAGE,
+  // FEEDBACK_PAGE,
+  HOME_PAGE,
+  PROD,
+  QA,
+  QA_BASE_URL,
+  SETTINGS_PAGE,
+} from '@common/constants'
 import useValidateAccountSettings from '@hooks/useValidateAccountSettings'
 import SettingsPage from '@components/SettingsPage'
-import { parsePage } from '@utils/pages'
+import { reloadPage } from '@utils/pages'
 
 export default function Layout({
   children,
@@ -57,6 +67,20 @@ export default function Layout({
     setMainScreenRef(mainScreenRef)
   }, [ mainScreenRef?.current ])
 
+  useEffect(() => {
+    if (page?.pageId) {
+      switch (page.pageId) {
+      case HOME_PAGE:
+        reloadPage(page.pageId, page.params)
+        break
+
+      case SETTINGS_PAGE:
+        showAccountSetup(true)
+        break
+      }
+    }
+  }, [ page ])
+
   useEffect(() => {
     const parsedUrl = new URL(window.location.href)
     const params = parsedUrl.searchParams
@@ -77,7 +101,7 @@ export default function Layout({
           )}', old server ${server}, reloading page`,
         )
         setServer(server_) // persist server selection in localstorage
-        window.location.assign(`${window.location.host}/?server=${serverID_}`) // reload page
+        reloadPage('/', `server=${serverID_}`)
       }
     }
   }, [])
@@ -90,13 +114,11 @@ export default function Layout({
    * @returns {*|JSX.Element}
    */
   function getDisplayPage() {
-    const parsed = parsePage(page)
-
     if (showChildren || (authentication && !showAccountSetup)) {
       return children
     }
 
-    if ((authentication && showAccountSetup) || (parsed?.page === '/settings')) {
+    if (authentication && showAccountSetup) {
       return (
         <SettingsPage/>
       )

src/context/StoreContext.jsx

@@ -8,7 +8,7 @@ import useLocalStorage from '@hooks/useLocalStorage'
 import useULS from '@hooks/useUserLocalStorage'
 import { AuthContext } from '@context/AuthContext'
 import useSaveChangesPrompt from '@hooks/useSaveChangesPrompt'
-import { parsePage } from '@utils/pages'
+import { parsePage, reloadPage } from '@utils/pages'
 
 export const StoreContext = createContext({})
 
@@ -110,10 +110,10 @@ export default function StoreContextProvider(props) {
   function setPage(path) {
     const parsed = parsePage(path)
 
-    if (parsed?.page === '/') {
-      window.location.assign(path) // load page
+    if (parsed?.pageId === '/') {
+      reloadPage(parsed.pageId, parsed.params)
     } else {
-      setPage_(path)
+      setPage_(parsed)
     }
   }
 

src/utils/network.js

@@ -9,6 +9,7 @@ import {
   BASE_URL,
   CHECKING_SERVER,
   FEEDBACK_PAGE,
+  HOME_PAGE,
   HTTP_GET_MAX_WAIT_TIME,
   LOCAL_NETWORK_DISCONNECTED_ERROR,
   LOGIN,
@@ -193,7 +194,7 @@ export function unAuthenticated(httpCode) {
  */
 export function reloadApp(networkError) {
   setLocalStorageValue(SERVER_CHECK_SECOND_TRY_KEY, true) // we will do longer wait on retry
-  goToPage(networkError?.setPage, '/')
+  goToPage(networkError?.setPage, HOME_PAGE)
 }
 
 /**

src/utils/pages.js

@@ -1,17 +1,30 @@
 /**
  * parse the new page path
  * @param {string} path - in format such as `/` , `/settings` or `/?server=QA`
- * @returns {{page: string, params: object}}
+ * @returns {{pageId: string, params: object}}
  */
 export function parsePage(path) {
   if ((typeof path === 'string') && (path[0] === '/')) {
     const parts = path.substr(1).split('?') // remove any parameters
-    const page = parts[0]
+    const pageId = parts[0]
     return {
-      page,
+      pageId,
       params: parts?.length > 1 ? parts[1] : '',
     }
   }
   return {}
 }
 
+/**
+ * reload the app at specific page and with specific params
+ * @param {string} page - to go to (e.g. `/`)
+ * @param {string} params - to add after ? (e.g. `server=QA`)
+ */
+export function reloadPage(page, params) {
+  let url = `${window.location.host}${page || '/'}`
+
+  if (params) { // if there are parameters to add
+    url = url + `?${params}`
+  }
+  window.location.assign(url) // reload page
+}