test custom error page

Author: ShMcK

typings/index.d.ts

@@ -74,6 +74,7 @@ export interface MachineStateSchema {
         Initialize: {}
         Summary: {}
         LoadNext: {}
+        Error: {}
         Level: {
           states: {
             Load: {}

web-app/src/Routes.tsx

@@ -22,14 +22,17 @@ const Routes = () => {
           <LoadingPage text="Launching..." context={{} as CR.MachineContext} />
         </Route>
         <Route path={'Start.Error'}>
-          <div>Error</div>
+          <div>Something went wrong wrong</div>
         </Route>
         <Route path="Start.SelectTutorial">
           <NewPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
         <Route path="Start.ContinueTutorial">
           <ContinuePage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
+        <Route path={'Tutorial.Error'}>
+          <div>Something went wrong wrong</div>
+        </Route>
         <Route path="Tutorial.Initialize">
           <LoadingPage text="Initializing..." context={{} as CR.MachineContext} />
         </Route>

web-app/src/components/Error/index.tsx

@@ -9,20 +9,28 @@ const styles = {
     color: '#D8000C',
     backgroundColor: '#FFBABA',
     padding: '1rem',
+    width: '100%',
+    height: '100%',
   },
 }
 
 interface Props {
-  error: ApolloError
+  error?: ApolloError
 }
 
 const ErrorView = ({ error }: Props) => {
   // log error
   React.useEffect(() => {
-    console.log(error)
-    onError(error)
+    if (error) {
+      console.log(error)
+      onError(error)
+    }
   }, [])
 
+  if (!error) {
+    return null
+  }
+
   return (
     <div css={styles.container}>
       <h1>Error</h1>

web-app/src/services/state/machine.ts

@@ -123,13 +123,14 @@ export const createMachine = (options: any) => {
                   }),
                 },
                 onError: {
-                  target: 'Summary',
+                  target: 'Error',
                   actions: assign({
                     error: (context, event) => event.data,
                   }),
                 },
               },
             },
+            Error: {},
             Summary: {
               on: {
                 LOAD_TUTORIAL: {

web-app/src/services/state/services/authenticate.ts

@@ -35,26 +35,26 @@ export async function authenticate(context: CR.MachineContext): Promise<any> {
       // let message
       if (error.message.match(/Network error:/)) {
         return Promise.reject({
-          error: {
-            title: 'Network Error',
-            description: 'Make sure you have an Internet connection. Restart and try again',
-          },
+          title: 'Network Error',
+          description: 'Make sure you have an Internet connection. Restart and try again',
         })
       } else {
         return Promise.reject({
-          error: {
-            title: 'Server Error',
-            description: error.message,
-          },
+          title: 'Server Error',
+          description: error.message,
         })
       }
     })
 
   if (!result || !result.data) {
-    const error = new Error('Authentication request responded with no data')
+    const message = 'Authentication request responded with no data'
+    const error = new Error()
     console.log(error)
     onError(error)
-    return
+    return Promise.reject({
+      title: message,
+      description: 'Something went wrong.',
+    })
   }
   const { token } = result.data.editorLogin
   // add token to headers