remove useRouter

unfoldingWord · Dec 12, 2023 · 99613e4 · 99613e4
1 parent be30f6b
commit 99613e4
Show file tree

Hide file tree

Showing 18 changed files with 297 additions and 81 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,4 @@
 {
-  "presets": ["next/babel"],
   "env": {
     "test": {
       "plugins": [

diff --git a/jest.config.js b/jest.config.js
@@ -26,6 +26,7 @@ module.exports = {
     '^@components/(.*)$': '<rootDir>/src/components/$1',
     '^@context/(.*)$': '<rootDir>/src/context/$1',
     '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^@styles/(.*)$': '<rootDir>/src/styles/$1',
     '^@utils/(.*)$': '<rootDir>/src/utils/$1',
   },
   'collectCoverageFrom': [

diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "resource-workspace-rcl": "2.1.4",
     "scripture-resources-rcl": "5.5.9",
     "scripture-tsv": "0.4.0",
-    "single-scripture-rcl": "3.4.17",
+    "single-scripture-rcl": "3.4.19-beta.2",
     "tailwindcss": "^2.0.4",
     "tc-ui-toolkit": "5.3.3",
     "translation-helps-rcl": "3.5.14",

diff --git a/pages/_app.js b/pages/_app.js
@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { ThemeProvider } from '@material-ui/core/styles'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import StoreContextProvider from '@context/StoreContext'
+import AuthContextProvider from '@context/AuthContext'
+import { APP_NAME } from '@common/constants'
+import AppHead from '@components/AppHead'
+import theme from '../src/theme'
+import '@styles/globals.css'
+
+export default function Application({ Component, pageProps }) {
+  useEffect(() => {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side')
+
+    if (jssStyles) {
+      jssStyles.parentElement.removeChild(jssStyles)
+    }
+  }, [])
+
+  return (
+    <>
+      <AppHead title={APP_NAME} />
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <AuthContextProvider>
+          <StoreContextProvider>
+            <Component {...pageProps} />
+          </StoreContextProvider>
+        </AuthContextProvider>
+      </ThemeProvider>
+    </>
+  )
+}
+
+Application.propTypes = {
+  Component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  pageProps: PropTypes.object,
+}
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -5,8 +5,8 @@ import CssBaseline from '@material-ui/core/CssBaseline'
 import StoreContextProvider from '@context/StoreContext'
 import AuthContextProvider from '@context/AuthContext'
 // import { APP_NAME } from '@common/constants'
-// import '@styles/globals.css'
-// import WorkspaceContainer from '@components/WorkspaceContainer'
+import '@styles/globals.css'
+import WorkspaceContainer from '@components/WorkspaceContainer'
 import Layout from '@components/Layout'
 import theme from '../theme'
 
@@ -27,7 +27,7 @@ export default function Application() {
       <AuthContextProvider>
         <StoreContextProvider>
           <Layout>
-            {/*<WorkspaceContainer />*/}
+            <WorkspaceContainer />
           </Layout>
         </StoreContextProvider>
       </AuthContextProvider>

diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { useRouter } from 'next/router'
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
@@ -9,7 +8,7 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
 import ExitToAppIcon from '@material-ui/icons/ExitToApp'
 import SettingsIcon from '@material-ui/icons/Settings'
 import BugReportIcon from '@material-ui/icons/BugReport'
-import DoneAllIcon from '@material-ui/icons/DoneAll';
+import DoneAllIcon from '@material-ui/icons/DoneAll'
 import IconButton from '@material-ui/core/IconButton'
 import ListItem from '@material-ui/core/ListItem'
 import List from '@material-ui/core/List'
@@ -34,30 +33,31 @@ export default function Drawer({
   checkUnsavedChanges,
   showFeedback,
 }) {
-  const router = useRouter()
+  const {
+    state: {
+      mergeStatusForCards,
+      cardsSaving,
+      cardsLoadingMerge,
+    },
+    actions: {
+      setPage,
+    }
+  } = useContext(StoreContext)
 
   async function onSettingsClick() {
     const okToContinue = await checkUnsavedChanges()
 
     if (okToContinue) {
-      router.push('/settings')
+      setPage('/settings')
       onClose()
     }
   }
 
   function onFeedbackClick() {
     onClose()
     showFeedback && showFeedback()
-  }
-
-  const {
-    state: {
-      mergeStatusForCards,
-      cardsSaving,
-      cardsLoadingMerge,
-    },
-  } = useContext(StoreContext)
 
+  }
   const mergeButtonProps = useMergeCardsProps({ mergeStatusForCards, isMerging: cardsLoadingMerge?.length });
 
   const {

diff --git a/src/components/ErrorPage.jsx b/src/components/ErrorPage.jsx
@@ -0,0 +1,62 @@
+import { useContext } from 'react'
+import PropTypes from 'prop-types'
+import { StoreContext } from '@context/StoreContext'
+
+export default function ErrorPage({ statusCode }) {
+  const {
+    actions: {
+      setPage
+    },
+  } = useContext(StoreContext)
+
+  if (statusCode) {
+    return <div>{`Error ${statusCode}`}</div>
+  }
+
+  localStorage.clear()
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    setPage('/')
+  }
+
+  return (
+    <div className='flex flex-col items-center justify-center h-full text-black font-sans text-center'>
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        width="500px"
+        height="350px"
+        viewBox="0 0 512 512"
+        fill='currentColor'
+        xmlSpace="preserve"
+      >
+        <path fill='#FF6B6B' d="M471.929,480.979H40.074c-30.883,0-50.135-33.478-34.552-60.175L221.449,50.871c15.427-26.43,53.649-26.478,69.104,0L506.48,420.805C522.049,447.477,502.84,480.979,471.929,480.979z"/>
+        <path fill='#EE5253' d="M250.776,67.988L34.849,437.922c-2.361,4.046,0.532,9.099,5.225,9.099h431.855c4.684,0,7.591-5.046,5.225-9.099L261.226,67.988C258.889,63.984,253.127,63.96,250.776,67.988z"/>
+        <path fill='#E4EAF8' d="M256.109,358.131c9.98,0,18.411,8.305,18.411,18.134c0,9.7-8.431,17.895-18.411,17.895c-10.271,0-18.627-8.028-18.627-17.895C237.482,366.435,246.012,358.131,256.109,358.131z"/>
+        <path fill='#E4EAF8' d="M256.109,330.134c-10.33,0-17.544-5.003-17.544-12.166V216.821c0-5.99,7.05-12.404,17.544-12.404c9.461,0,17.761,5.797,17.761,12.404v101.147C273.87,325.017,266.401,330.134,256.109,330.134z"/>
+        <path fill='#EE5253' d="M26.127,420.805L242.054,50.871c5.464-9.361,14.148-15.875,24.25-18.52c-16.842-4.409-35.352,2.238-44.855,18.52L5.522,420.805c-15.569,26.671,3.641,60.175,34.552,60.175h20.605C29.794,480.979,10.545,447.499,26.127,420.805z"/>
+        <path fill='#E24951' d="M55.454,437.922l210.85-361.235l-5.078-8.699c-2.341-4.012-8.103-4.02-10.45,0L34.849,437.922c-2.362,4.046,0.532,9.099,5.225,9.099h20.605C55.994,447.022,53.088,441.976,55.454,437.922z"/>
+        <path fill='#D8DCE5' d="M258.087,376.265c0-6.13,3.319-11.665,8.265-14.965c-2.95-1.991-6.486-3.169-10.242-3.169c-10.097,0-18.627,8.305-18.627,18.134c0,9.868,8.356,17.896,18.627,17.896c3.726,0,7.234-1.144,10.17-3.08C261.339,387.859,258.087,382.421,258.087,376.265z"/>
+        <path fill='#D8DCE5' d="M259.17,317.968V216.821c0-3.696,2.69-7.548,7.21-9.96c-2.945-1.518-6.511-2.444-10.271-2.444c-10.494,0-17.544,6.414-17.544,12.404v101.147c0,7.163,7.214,12.166,17.544,12.166c3.934,0,7.449-0.752,10.299-2.069C261.906,325.954,259.17,322.372,259.17,317.968z"/>
+      </svg>
+      <h2 className='m-0 p-0'>
+        An unexpected error has occurred. The application cache has been cleared.
+      </h2>
+      <button
+        onClick={handleClick}
+        className='flex items-center justify-center py-2.5 px-6 m-6 bg-primary text-white no-underline rounded uppercase cursor-pointer focus:outline-none border-none font-semibold'
+      >
+        Go to account settings
+      </button>
+    </div>
+)
+}
+
+ErrorPage.propTypes = { statusCode: PropTypes.number }
+
+ErrorPage.getInitialProps = ({ res, err }) => {//eslint-disable-next-line
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode }
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,6 +1,5 @@
 import { useState, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { useRouter } from 'next/router'
 import { makeStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import IconButton from '@material-ui/core/IconButton'
@@ -44,16 +43,16 @@ export default function Header({
   mergeStatusForCards,
 }) {
   const classes = useStyles()
-  const router = useRouter()
   const [drawerOpen, setOpen] = useState(false)
   const { actions: { logout } } = useContext(AuthContext)
   const {
     state: {
       cardsSaving,
-      cardsLoadingUpdate
+      cardsLoadingUpdate,
     },
     actions: {
       checkUnsavedChanges,
+      setPage,
     }
   } = useContext(StoreContext)
 
@@ -104,7 +103,7 @@ export default function Header({
             <Typography
               variant='h6'
               className={classes.title}
-              onClick={() => router.push('/')}
+              onClick={() => setPage('/')}
             >
               {title}
             </Typography>

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -8,14 +8,14 @@ import { StoreContext } from '@context/StoreContext'
 import { getBuildId } from '@utils/build'
 import { APP_NAME, BASE_URL, PROD, QA, QA_BASE_URL } from '@common/constants'
 import useValidateAccountSettings from '@hooks/useValidateAccountSettings'
-import { useRouter } from 'next/router'
+import SettingsPage from '@components/SettingsPage'
+import { parsePage } from '@utils/pages'
 
 export default function Layout({
   children,
   showChildren,
   title = APP_NAME,
 }) {
-  const router = useRouter()
   const mainScreenRef = useRef(null)
   const [feedback, setFeedback_] = useState(null) // contains feedback data
   const {
@@ -43,6 +43,7 @@ export default function Layout({
       owner,
       server,
       mergeStatusForCards,
+      page,
     },
     actions: {
       setCurrentLayout,
@@ -57,27 +58,58 @@ export default function Layout({
   }, [ mainScreenRef?.current ])
 
   useEffect(() => {
-    const params = router?.query
+    const parsedUrl = new URL(window.location.href)
+    const params = parsedUrl.searchParams
 
-    if (typeof params?.server === 'string') { // if URL param given
-      let serverID_ = params.server.toUpperCase() === QA ? QA : PROD
+    if (params && typeof params.get('server') === 'string') { // if URL param given
+      let serverID_ = params.get('server').toUpperCase() === QA ? QA : PROD
       let server_ = (serverID_ === QA) ? QA_BASE_URL : BASE_URL
-      if (params.server?.length === 0){
+
+      if (params.get('server')?.length === 0){
         server_ = (import.meta.env.NEXT_PUBLIC_BUILD_CONTEXT === 'production') ? BASE_URL : QA_BASE_URL
         serverID_ = (server_ === QA_BASE_URL) ? QA : PROD
       }
 
       if (server !== server_) {
-        console.log(`_app.js - On init switching server to: ${serverID_}, url server param '${params.server}', old server ${server}, reloading page`)
+        console.log(
+          `_app.js - On init switching server to: ${serverID_}, url server param '${params.get(
+            'server',
+          )}', old server ${server}, reloading page`,
+        )
         setServer(server_) // persist server selection in localstorage
-        router.push(`/?server=${serverID_}`) // reload page
+        window.location.assign(`${window.location.host}/?server=${serverID_}`) // reload page
       }
     }
-  }, [router?.query]) // TRICKY query property not loaded on first pass, so watch for change
+  }, [])
 
   const buildId = useMemo(getBuildId, [])
   useValidateAccountSettings(authentication, showAccountSetup, languageId, owner, setShowAccountSetup)
 
+  /**
+   * determine the page to show based on state
+   * @returns {*|JSX.Element}
+   */
+  function getDisplayPage() {
+    const parsed = parsePage(page)
+
+    if (showChildren || (authentication && !showAccountSetup)) {
+      return children
+    }
+
+    if ((authentication && showAccountSetup) || (parsed?.page === '/settings')) {
+      return (
+        <SettingsPage/>
+      )
+    }
+
+    return (
+      <Onboarding
+        authentication={authentication}
+        authenticationComponent={authenticationComponent}
+      />
+    )
+  }
+
   return (
     <div
       className='h-screen w-screen flex flex-col'
@@ -92,14 +124,7 @@ export default function Layout({
         mergeStatusForCards={mergeStatusForCards}
       />
       <main className='flex flex-1 flex-col w-auto m-0 bg-gray-200'>
-        {showChildren || (authentication && !showAccountSetup) ? (
-          children
-        ) : (
-          <Onboarding
-            authentication={authentication}
-            authenticationComponent={authenticationComponent}
-          />
-        )}
+        {getDisplayPage()}
       </main>
       <Footer
         buildHash={buildId?.hash}

diff --git a/src/components/Onboarding.jsx b/src/components/Onboarding.jsx
@@ -1,12 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import dynamic from 'next/dynamic'
 import Paper from 'translation-helps-rcl/dist/components/Paper'
-import CircularProgress from '@components/CircularProgress'
-
-const AccountSetup = dynamic(() => import('@components/AccountSetup'), {
-  loading: () => <CircularProgress size={180} />,
-})
+import AccountSetup from '@components/AccountSetup'
 
 function Onboarding({ authentication, authenticationComponent }) {
   if (authentication) {