update tutorials loading for new api

ShMcK · ShMcK · commit 85f11a4da420 · 2019-10-14T15:28:56.000-07:00
diff --git a/web-app/src/containers/New/TutorialList/index.tsx b/web-app/src/containers/New/TutorialList/index.tsx
@@ -9,26 +9,26 @@ interface Props {
 }
 
 const TutorialList = (props: Props) => {
-	const onSelect = (tutorial: T.Tutorial) => {
-		channel.machineSend({
-			type: 'TUTORIAL_START',
-			payload: {
-				tutorial,
-			}
-		})
-	}
-	return (
-		<div>
-			{props.tutorialList.map((tutorial: T.Tutorial) => (
-				<TutorialItem
-					key={tutorial.id}
-					onSelect={() => onSelect(tutorial)}
-					title={tutorial.title || ''}
-					text={tutorial.text || ''}
-				/>
-			))}
-		</div>
-	)
+  const onSelect = (tutorial: T.Tutorial) => {
+    channel.machineSend({
+      type: 'TUTORIAL_START',
+      payload: {
+        tutorial,
+      },
+    })
+  }
+  return (
+    <div>
+      {props.tutorialList.map((tutorial: T.Tutorial) => (
+        <TutorialItem
+          key={tutorial.id}
+          onSelect={() => onSelect(tutorial)}
+          title={tutorial.version.summary.title || ''}
+          text={tutorial.version.summary.description || ''}
+        />
+      ))}
+    </div>
+  )
 }
 
 export default TutorialList
diff --git a/web-app/src/containers/New/index.tsx b/web-app/src/containers/New/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useQuery } from '@apollo/react-hooks'
-import * as T from 'typings/graphql'
+import * as G from 'typings/graphql'
 import * as CR from 'typings'
 
 import queryTutorials from '../../services/apollo/queries/tutorials'
@@ -9,7 +9,7 @@ import ErrorView from '../../components/Error'
 import TutorialList from './TutorialList'
 
 interface Props {
-  tutorialList: T.Tutorial[]
+  tutorialList: G.Tutorial[]
 }
 
 export const NewPage = (props: Props) => (
@@ -25,8 +25,12 @@ interface ContainerProps {
   send(action: CR.Action): void
 }
 
+interface TutorialsData {
+  tutorials: G.Tutorial[]
+}
+
 const NewPageContainer = (props: ContainerProps) => {
-  const { data, loading, error } = useQuery(queryTutorials)
+  const { data, loading, error } = useQuery<TutorialsData>(queryTutorials)
   if (loading) {
     return <Loading />
   }
@@ -35,6 +39,10 @@ const NewPageContainer = (props: ContainerProps) => {
     return <ErrorView error={error} />
   }
 
+  if (!data) {
+    return null
+  }
+
   return (
     <React.Suspense fallback={Loading}>
       <NewPage tutorialList={data.tutorials} />
