setup basic error

typings/index.d.ts

@@ -40,6 +40,7 @@ export interface Environment {
 
 export interface MachineContext {
   env: Environment
+  error: string | null
   tutorial: G.Tutorial | null
   position: Position
   progress: Progress

web-app/src/Routes.tsx

@@ -15,23 +15,24 @@ const { Route } = Router
 const tempSend = (action: any) => console.log('sent')
 
 const Routes = () => {
+  // TODO: refactor for typescript to understand send & context passed into React.cloneElement's
   return (
     <Workspace>
       <Router>
         <Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
-          <LoadingPage text="Launching..." />
+          <LoadingPage text="Launching..." context={{} as CR.MachineContext} />
         </Route>
         <Route path="Start.SelectTutorial">
-          <NewPage send={tempSend} />
+          <NewPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
         <Route path="Start.ContinueTutorial">
           <ContinuePage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
         <Route path="Tutorial.Initialize">
-          <LoadingPage text="Initializing..." />
+          <LoadingPage text="Initializing..." context={{} as CR.MachineContext} />
         </Route>
         <Route path="Tutorial.LoadNext">
-          <LoadingPage text="Loading..." />
+          <LoadingPage text="Loading..." context={{} as CR.MachineContext} />
         </Route>
         <Route path="Tutorial.Summary">
           <OverviewPage send={tempSend} context={{} as CR.MachineContext} />

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

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import * as T from 'typings'
+import { Message as AlifdMessage } from '@alifd/next'
+
+interface Props {
+  type: 'error'
+  title: string
+  description?: string
+}
+
+const Message = (props: Props) => {
+  return (
+    <AlifdMessage type={props.type} title={props.title}>
+      {props.description}
+    </AlifdMessage>
+  )
+}
+
+export default Message

web-app/src/containers/LoadingPage.tsx

@@ -1,24 +1,38 @@
 import * as React from 'react'
+import * as T from 'typings'
 import Loading from '../components/Loading'
+import Message from '../components/Message'
 
 interface Props {
-	text: string
+  text: string
+  context: T.MachineContext
 }
 
 const styles = {
-	page: {
-		position: 'relative' as 'relative',
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'center',
-		width: '100%',
-	},
+  page: {
+    position: 'relative' as 'relative',
+    display: 'flex',
+    flexDirection: 'column' as 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
 }
 
-const LoadingPage = ({ text }: Props) => (
-	<div style={styles.page}>
-		<Loading text={text} />
-	</div>
-)
+const LoadingPage = ({ text, context }: Props) => {
+  const { error } = context
+  if (error) {
+    return (
+      <div style={styles.page}>
+        <Message type="error" title={error} />
+      </div>
+    )
+  }
+  return (
+    <div style={styles.page}>
+      <Loading text={text} />
+    </div>
+  )
+}
 
 export default LoadingPage

web-app/src/containers/New/index.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
 import * as G from 'typings/graphql'
-import * as CR from 'typings'
+import * as T from 'typings'
 
 import queryTutorials from '../../services/apollo/queries/tutorials'
 import NewPage from './NewPage'
 import LoadingPage from '../LoadingPage'
 import ErrorView from '../../components/Error'
 
-const Loading = () => <LoadingPage text="Loading tutorials" />
-
 interface ContainerProps {
-  send(action: CR.Action): void
+  send(action: T.Action): void
+  context: T.MachineContext
 }
 
 interface TutorialsData {
@@ -20,23 +19,20 @@ interface TutorialsData {
 
 const NewPageContainer = (props: ContainerProps) => {
   const { data, loading, error } = useQuery<TutorialsData>(queryTutorials)
-  if (loading) {
-    return <Loading />
-  }
 
   if (error) {
     return <ErrorView error={error} />
   }
 
+  if (loading) {
+    return <LoadingPage text="Loading tutorials" context={props.context} />
+  }
+
   if (!data) {
     return null
   }
 
-  return (
-    <React.Suspense fallback={Loading}>
-      <NewPage tutorialList={data.tutorials} />
-    </React.Suspense>
-  )
+  return <NewPage tutorialList={data.tutorials} />
 }
 
 export default NewPageContainer

web-app/src/services/channel/index.ts

@@ -57,6 +57,7 @@ class Channel {
       case 'COMMAND_START':
       case 'COMMAND_SUCCESS':
       case 'COMMAND_FAIL':
+      case 'ERROR':
         this.machineSend(action)
         return
       default:

web-app/src/services/state/actions/api.ts

@@ -34,6 +34,7 @@ export default {
     if (!result || !result.data) {
       // TODO: handle failed authentication
       console.error('ERROR: Authentication failed')
+      channel.receive({ data: { type: 'ERROR', payload: { error: 'Authentication Failed' } } })
       return
     }
     const { token } = result.data.editorLogin

web-app/src/services/state/actions/context.ts

@@ -211,4 +211,10 @@ export default {
       return position
     },
   }),
+  // @ts-ignore
+  setError: assign({
+    error: (context: CR.MachineContext, event: CR.MachineEvent): string | null => {
+      return event.payload.error
+    },
+  }),
 }

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

@@ -12,6 +12,7 @@ export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.Mach
     id: 'root',
     initial: 'Start',
     context: {
+      error: null,
       env: { machineId: '', sessionId: '', token: '' },
       tutorial: null,
       position: { levelId: '', stepId: '' },
@@ -22,6 +23,11 @@ export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.Mach
       },
       processes: [],
     },
+    on: {
+      ERROR: {
+        actions: ['setError'],
+      },
+    },
     states: {
       Start: {
         initial: 'Startup',

web-app/stories/Loading.stories.tsx

@@ -7,4 +7,4 @@ import LoadingPage from '../src/containers/LoadingPage'
 
 storiesOf('Components', module)
   .addDecorator(SideBarDecorator)
-  .add('Loading', () => <LoadingPage text="Content" />)
+  .add('Loading', () => <LoadingPage text="Content" context={{}} />)