Merge pull request #254 from TaloDev/develop

Release 0.29.0

Author: tudddorrr

config/entrypoint.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 for filename in /bin/www/js/*.js; do
-    envsub $filename $filename
+  envsub $filename $filename
 done
 
 nginx -g 'daemon off;'

cypress/e2e/pages/Demo.spec.cy.js

@@ -0,0 +1,29 @@
+/// <reference types='cypress' />
+
+describe('Demo', () => {
+  it('should let users enter the demo dashboard', () => {
+    cy.intercept('POST', 'http://talo.api/public/demo', {
+      statusCode: 200,
+      fixture: 'responses/auth/dev'
+    })
+
+    cy.visitAsGuest('/demo')
+    cy.findByText('Launch demo').click()
+
+    cy.findByText('Superstatic dashboard').should('exist')
+  })
+
+  it('should handle errors', () => {
+    cy.intercept('POST', 'http://talo.api/public/demo', {
+      statusCode: 500,
+      body: {
+        message: 'Something went wrong'
+      }
+    })
+
+    cy.visitAsGuest('/demo')
+    cy.findByText('Launch demo').click()
+
+    cy.findByText('Something went wrong').should('exist')
+  })
+})

cypress/e2e/pages/Login.spec.cy.js

@@ -47,7 +47,7 @@ describe('Login', () => {
     cy.location('pathname').should('eq', '/account')
   })
 
-  it('should redirect to the dashboard after logging in if the intended route does not exist', () => {
+  it('should redirect to the 404 page after logging in if the intended route does not exist', () => {
     cy.intercept('POST', 'http://talo.api/public/users/login', {
       statusCode: 200,
       fixture: 'responses/auth/dev'
@@ -58,7 +58,6 @@ describe('Login', () => {
     cy.findByLabelText('Password').type('password')
     cy.findByText('Login').click()
 
-    cy.findByText('Superstatic dashboard').should('exist')
-    cy.location('pathname').should('eq', '/')
+    cy.findByText('404 Not Found').should('exist')
   })
 })

package-lock.json

@@ -71,7 +71,7 @@
   "lint-staged": {
     "*.{js,jsx}": "eslint --fix"
   },
-  "version": "0.28.1",
+  "version": "0.29.0",
   "engines": {
     "node": "20.x"
   },

package.json

@@ -20,9 +20,8 @@ function AppLoading() {
 function App() {
   const setUser = useSetRecoilState(userState)
 
-  const [isRefreshing, setRefreshing] = useState(true)
   const [hasTriedRefreshing, setTriedRefreshing] = useState(false)
-  const [intendedUrl, setIntendedUrl] = useState(null)
+  const [intendedRoute, setIntendedRoute] = useState(null)
 
   const games = useRecoilValue(gamesState)
   const [activeGame, setActiveGame] = useRecoilState(activeGameState)
@@ -38,30 +37,34 @@ function App() {
     } catch (err) {
       setActiveGame(null)
     } finally {
-      setRefreshing(false)
       setTriedRefreshing(true)
     }
   }
 
   useEffect(() => {
-    setIntendedUrl(window.location.pathname + window.location.search)
+    const location = window.location.pathname + window.location.search
+    if (location !== '/') {
+      setIntendedRoute(location)
+    } else {
+      setTriedRefreshing(true)
+    }
   }, [])
 
   useEffect(() => {
-    if (!hasTriedRefreshing && intendedUrl) {
+    if (!hasTriedRefreshing && intendedRoute) {
       handleRefreshSession()
     }
-  }, [intendedUrl, hasTriedRefreshing])
+  }, [intendedRoute, hasTriedRefreshing])
 
   useEffect(() => {
     if (!activeGame && games.length > 0) setActiveGame(games[0])
   }, [activeGame, games])
 
-  if (isRefreshing) return <AppLoading />
+  if (!hasTriedRefreshing) return <AppLoading />
 
   return (
     <Suspense fallback={<AppLoading />}>
-      <Router intendedUrl={intendedUrl} />
+      <Router intendedRoute={intendedRoute} />
     </Suspense>
   )
 }

src/App.jsx

@@ -8,7 +8,7 @@ import routes from './constants/routes'
 import activeGameState from './state/activeGameState'
 import AuthService from './services/AuthService'
 import canViewPage from './utils/canViewPage'
-import NotFoundHandler from './components/NotFoundHandler'
+import IntendedRouteHandler from './components/IntendedRouteHandler'
 
 const Login = lazy(() => import(/* webpackChunkName: 'login' */ './pages/Login'))
 const Dashboard = lazy(() => import(/* webpackChunkName: 'dashboard' */ './pages/Dashboard'))
@@ -41,8 +41,9 @@ const ForgotPassword = lazy(() => import(/* webpackChunkName: 'forgot-password'
 const ResetPassword = lazy(() => import(/* webpackChunkName: 'reset-password' */ './pages/ResetPassword'))
 const PlayerSaves = lazy(() => import(/* webpackChunkName: 'player-saves' */ './pages/PlayerSaves'))
 const PlayerSaveContent = lazy(() => import(/* webpackChunkName: 'player-save-content' */ './pages/PlayerSaveContent'))
+const NotFound = lazy(() => import(/* webpackChunkName: 'not-found' */ './pages/NotFound'))
 
-function Router({ intendedUrl }) {
+function Router({ intendedRoute }) {
   const user = useRecoilValue(userState)
   const activeGame = useRecoilValue(activeGameState)
 
@@ -60,7 +61,7 @@ function Router({ intendedUrl }) {
             <Route exact path={routes.forgotPassword} element={<ForgotPassword />} />
             <Route exact path={routes.resetPassword} element={<ResetPassword />} />
 
-            <Route path='*' element={<NotFoundHandler baseRoute={routes.login} intendedUrl={intendedUrl} />} />
+            <Route path='*' element={<IntendedRouteHandler intendedRoute={intendedRoute} />} />
           </Routes>
         </main>
       }
@@ -99,7 +100,7 @@ function Router({ intendedUrl }) {
                 </>
               }
 
-              <Route path='*' element={<NotFoundHandler baseRoute={routes.dashboard} intendedUrl={intendedUrl} />} />
+              <Route path='*' element={<NotFound />} />
             </Routes>
           </main>
         </div>
@@ -109,7 +110,7 @@ function Router({ intendedUrl }) {
 }
 
 Router.propTypes = {
-  intendedUrl: PropTypes.string
+  intendedRoute: PropTypes.string
 }
 
 export default Router

src/Router.jsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Navigate } from 'react-router-dom'
+import routes from '../constants/routes'
+
+// 1. user hits dashboard.trytalo.com/leaderboards but is logged out
+// 2. user is redirected to dashboard.trytalo.com/?next=%2Fleaderboards
+// 3. "next" search param is put into sessionStorage
+// 4. useIntendedRoute hook picks up logic to redirect based on the sessionStorage
+export default function IntendedRouteHandler({ intendedRoute }) {
+  useEffect(() => {
+    const next = new URLSearchParams(window.location.search).get('next')
+    if (next) {
+      window.sessionStorage.setItem('intendedRoute', next)
+    }
+  }, [])
+
+  if (!intendedRoute) {
+    <Navigate to={routes.login} replace />
+  }
+
+  return (
+    <Navigate to={`${routes.login}?next=${encodeURIComponent(intendedRoute)}`} replace />
+  )
+}
+
+IntendedRouteHandler.propTypes = {
+  intendedRoute: PropTypes.string.isRequired
+}

src/components/IntendedRouteHandler.jsx

@@ -4,12 +4,12 @@ import Title from './Title'
 import Loading from './Loading'
 import GlobalBanners from './GlobalBanners'
 
-export default function Page({ title, showBackButton = false, isLoading = false, containerClassName = '', extraTitleComponent, children, secondaryNav }) {
+export default function Page({ title, showBackButton = false, isLoading = false, containerClassName = '', extraTitleComponent, children, secondaryNav, disableBanners }) {
   return (
     <div className='space-y-8'>
       {secondaryNav}
 
-      <GlobalBanners />
+      {!disableBanners && <GlobalBanners />}
 
       <div className={clsx('space-y-8', containerClassName)}>
         <div className='flex items-center'>
@@ -37,5 +37,6 @@ Page.propTypes = {
   containerClassName: PropTypes.string,
   children: PropTypes.node.isRequired,
   extraTitleComponent: PropTypes.node,
-  secondaryNav: PropTypes.node
+  secondaryNav: PropTypes.node,
+  disableBanners: PropTypes.bool
 }