show error dialog if no data found

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx

@@ -1,25 +1,37 @@
 import * as React from 'react'
+import { Dialog } from '@alifd/next'
 import useFetch from '../../services/hooks/useFetch'
 import * as TT from 'typings/tutorial'
 import LoadingPage from '../Loading'
 
 interface Props {
   url: string
   onLoadSummary(data: TT.Tutorial): void
+  onReturnToSelection(): void
 }
 
 const LoadTutorialSummary = (props: Props) => {
   const { data, error, loading } = useFetch<TT.Tutorial>(props.url)
+  if (!data) {
+    return (
+      <Dialog
+        title="Tutorial Not Found"
+        visible={true}
+        closeable={false}
+        footerActions={['ok']}
+        onOk={props.onReturnToSelection}
+      >
+        No data returned for tutorial
+      </Dialog>
+    )
+  }
   if (loading) {
     return <LoadingPage text="Loading tutorial summary..." />
   }
   if (error) {
     console.log(`Failed to load tutorial summary: ${error}`)
     return <div>Error loading summary</div>
   }
-  if (!data) {
-    return <div>No data returned for tutorial</div>
-  }
   props.onLoadSummary(data)
   return null
 }

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

@@ -58,7 +58,9 @@ const SelectTutorialPage = (props: Props) => {
           setTab={setTab}
         />
       )}
-      {page === 'loading' && url && <LoadTutorialSummary url={url} onLoadSummary={onLoadSummary} />}
+      {page === 'loading' && url && (
+        <LoadTutorialSummary url={url} onLoadSummary={onLoadSummary} onReturnToSelection={() => setPage('form')} />
+      )}
       {page === 'summary' && data && <TutorialOverview onNext={onNext} tutorial={data} onClear={onClear} />}
     </div>
   )