typings update first pass

src/channel/state/Progress.ts

@@ -1,23 +1,23 @@
-import * as CR from 'typings'
+import * as T from 'typings'
 import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import Storage from '../../services/storage'
 
-const defaultValue: CR.Progress = {
+const defaultValue: T.Progress = {
   levels: {},
   steps: {},
   complete: false,
 }
 
 // hold current progress and sync to storage based on tutorial.id/version
 class Progress {
-  private value: CR.Progress
-  private storage: Storage<CR.Progress> | undefined
+  private value: T.Progress
+  private storage: Storage<T.Progress> | undefined
   constructor() {
     this.value = defaultValue
   }
-  public setTutorial = async (workspaceState: vscode.Memento, tutorial: G.Tutorial): Promise<CR.Progress> => {
-    this.storage = new Storage<CR.Progress>({
+  public setTutorial = async (workspaceState: vscode.Memento, tutorial: TT.Tutorial): Promise<T.Progress> => {
+    this.storage = new Storage<T.Progress>({
       key: `coderoad:progress:${tutorial.id}:${tutorial.version}`,
       storage: workspaceState,
       defaultValue,
@@ -28,7 +28,7 @@ class Progress {
   public get = () => {
     return this.value
   }
-  public set = (value: CR.Progress) => {
+  public set = (value: T.Progress) => {
     this.value = value
     if (!this.storage) {
       return defaultValue
@@ -39,7 +39,7 @@ class Progress {
   public reset = () => {
     this.set(defaultValue)
   }
-  public setStepComplete = (tutorialData: TT.TutorialData, stepId: string): CR.Progress => {
+  public setStepComplete = (tutorialData: TT.TutorialData, stepId: string): T.Progress => {
     const next = this.value
     // mark step complete
     next.steps[stepId] = true

typings/index.d.ts

@@ -69,7 +69,7 @@ export interface MachineStateSchema {
     Setup: {
       states: {
         Startup: {}
-        Authenticate: {}
+        // Authenticate: {}
         Error: {}
         LoadStoredTutorial: {}
         Start: {}

typings/tutorial.d.ts

@@ -30,6 +30,7 @@ export type Step = {
 /** A tutorial for use in VSCode CodeRoad */
 export type Tutorial = {
   id: string
+  version: string
   summary: TutorialSummary
   data: TutorialData
 }

web-app/src/App.tsx

@@ -1,14 +1,10 @@
-import { ApolloProvider } from '@apollo/react-hooks'
 import * as React from 'react'
 import ErrorBoundary from './components/ErrorBoundary'
 import Routes from './Routes'
-import client from './services/apollo'
 
 const App = () => (
   <ErrorBoundary>
-    <ApolloProvider client={client}>
-      <Routes />
-    </ApolloProvider>
+    <Routes />
   </ErrorBoundary>
 )
 

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

@@ -1,5 +1,4 @@
 import { ApolloError } from 'apollo-boost'
-import { GraphQLError } from 'graphql'
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
 import onError from '../../services/sentry/onError'
@@ -34,25 +33,7 @@ const ErrorView = ({ error }: Props) => {
   return (
     <div css={styles.container}>
       <h1>Error</h1>
-      {error.graphQLErrors && (
-        <div>
-          {error.graphQLErrors.map(({ message, locations, path }: GraphQLError, index: number) => (
-            <h5 key={index}>
-              <b>[GraphQL error]:</b> Message: {message}, Location: {locations}, Path: {path}
-            </h5>
-          ))}
-        </div>
-      )}
-      {error.networkError && (
-        <h5>
-          <b>[Network error]:</b> {error.networkError.message}
-        </h5>
-      )}
-      {error.extraInfo && (
-        <p>
-          <b>[Extra info]:</b> {JSON.stringify(error.extraInfo)}
-        </p>
-      )}
+      <div>{JSON.stringify(error)}</div>
     </div>
   )
 }

web-app/src/containers/Overview/OverviewPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import moment from 'moment'
 import Button from '../../components/Button'
 import Markdown from '../../components/Markdown'
@@ -71,9 +71,7 @@ const styles = {
 interface Props {
   title: string
   description: string
-  createdBy: G.User
-  updatedAt: string
-  levels: G.Level[]
+  levels: TT.Level[]
   onNext(): void
   onBack(): void
 }
@@ -93,15 +91,15 @@ const Summary = (props: Props) => (
         </div>
         <h1 css={styles.title}>{props.title}</h1>
         <h3>{props.description}</h3>
-        <h5 css={styles.meta}>
+        {/* <h5 css={styles.meta}>
           <div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
           <div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
-        </h5>
+        </h5> */}
       </div>
       <div>
         <div css={styles.levelList}>
           <h2>Content</h2>
-          {props.levels.map((level: G.Level, index: number) => (
+          {props.levels.map((level: TT.Level, index: number) => (
             <div key={index}>
               <h3>
                 {index + 1}. {level.title}

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

@@ -1,9 +1,8 @@
 import { useQuery } from '@apollo/react-hooks'
 import * as React from 'react'
 import * as CR from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import ErrorView from '../../components/Error'
-import queryTutorial from '../../services/apollo/queries/tutorial'
 import OverviewPage from './OverviewPage'
 import LoadingPage from '../Loading'
 
@@ -13,7 +12,7 @@ interface PageProps {
 }
 
 interface TutorialData {
-  tutorial: G.Tutorial
+  tutorial: TT.Tutorial
 }
 
 interface TutorialDataVariables {
@@ -27,51 +26,36 @@ const Overview = (props: PageProps) => {
   if (!tutorial) {
     throw new Error('Tutorial not found in summary page')
   }
-  const { loading, error, data } = useQuery<TutorialData, TutorialDataVariables>(queryTutorial, {
-    fetchPolicy: 'no-cache', // to ensure latest
-    variables: {
-      tutorialId: tutorial.id,
-      // version: tutorial.version.version, // TODO: re-enable latest
-    },
-  })
 
-  if (loading) {
-    return <LoadingPage text="Loading Summary..." context={props.context} />
-  }
-
-  if (error) {
-    return <ErrorView error={error} />
-  }
-
-  if (!data) {
-    return null
-  }
-
-  const onNext = () =>
-    props.send({
-      type: 'TUTORIAL_START',
-      payload: {
-        tutorial: data.tutorial,
-      },
-    })
-
-  const onBack = () => props.send({ type: 'BACK' })
-
-  const { title, description } = data.tutorial.summary
-  const { createdBy, updatedAt, data: tutorialData } = data.tutorial.version
-  const { levels } = tutorialData
-
-  return (
-    <OverviewPage
-      title={title}
-      description={description}
-      createdBy={createdBy}
-      updatedAt={updatedAt}
-      levels={levels}
-      onNext={onNext}
-      onBack={onBack}
-    />
-  )
+  console.log('todo overview load')
+
+  return <div>Overview Page</div>
+
+  // const onNext = () =>
+  //   props.send({
+  //     type: 'TUTORIAL_START',
+  //     payload: {
+  //       tutorial: data.tutorial,
+  //     },
+  //   })
+
+  // const onBack = () => props.send({ type: 'BACK' })
+
+  // const { title, description } = data.tutorial.summary
+  // const { createdBy, updatedAt, data: tutorialData } = data.tutorial.version
+  // const { levels } = tutorialData
+
+  // return (
+  //   <OverviewPage
+  //     title={title}
+  //     description={description}
+  //     createdBy={createdBy}
+  //     updatedAt={updatedAt}
+  //     levels={levels}
+  //     onNext={onNext}
+  //     onBack={onBack}
+  //   />
+  // )
 }
 
 export default Overview

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as T from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import { css, jsx } from '@emotion/core'
 import TutorialItem from './TutorialItem'
 
@@ -18,11 +18,11 @@ const styles = {
 
 interface Props {
   send(action: T.Action): void
-  tutorialList: G.Tutorial[]
+  tutorialList: TT.Tutorial[]
 }
 
 const SelectTutorial = (props: Props) => {
-  const onSelect = (tutorial: G.Tutorial) => {
+  const onSelect = (tutorial: TT.Tutorial) => {
     props.send({
       type: 'SELECT_TUTORIAL',
       payload: {
@@ -36,13 +36,12 @@ const SelectTutorial = (props: Props) => {
         <span>Select a tutorial to launch in this workspace:</span>
       </div>
       <div>
-        {props.tutorialList.map((tutorial: G.Tutorial) => (
+        {props.tutorialList.map((tutorial: TT.Tutorial) => (
           <TutorialItem
             key={tutorial.id}
             onSelect={() => onSelect(tutorial)}
             title={tutorial.summary.title || ''}
             description={tutorial.summary.description || ''}
-            createdBy={tutorial.createdBy}
           />
         ))}
       </div>

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import { css, jsx } from '@emotion/core'
 import Card from '../../components/Card'
 import Tag from '../../components/Tag'
@@ -49,21 +49,9 @@ const styles = {
 interface Props {
   title: string
   description: string
-  createdBy?: G.User | null
   onSelect(): void
 }
 
-// icons from https://konpa.github.io/devicon/
-const LanguageIcon = () => (
-  <svg viewBox="0 0 128 128" css={styles.languageIcon}>
-    <path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
-    <path
-      fill="#323330"
-      d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"
-    ></path>
-  </svg>
-)
-
 const TutorialItem = (props: Props) => (
   <Card onClick={props.onSelect}>
     <div style={styles.card}>
@@ -72,7 +60,7 @@ const TutorialItem = (props: Props) => (
       </div>
       <div css={styles.right}>
         <h2 css={styles.title}>{props.title}</h2>
-        {props.createdBy && <h3 css={styles.author}>{props.createdBy.name}</h3>}
+        {/* {props.createdBy && <h3 css={styles.author}>{props.createdBy.name}</h3>} */}
         <div css={styles.tags}>
           <Tag>javascript</Tag>
         </div>

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

@@ -1,9 +1,8 @@
 import { useQuery } from '@apollo/react-hooks'
 import * as React from 'react'
 import * as T from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import ErrorView from '../../components/Error'
-import queryTutorials from '../../services/apollo/queries/tutorials'
 import LoadingPage from '../Loading'
 import SelectTutorial from './SelectTutorial'
 
@@ -13,27 +12,11 @@ interface ContainerProps {
 }
 
 interface TutorialsData {
-  tutorials: G.Tutorial[]
+  tutorials: TT.Tutorial[]
 }
 
 const SelectPageContainer = (props: ContainerProps) => {
-  const { data, loading, error } = useQuery<TutorialsData>(queryTutorials, {
-    fetchPolicy: 'no-cache',
-  })
-
-  if (error) {
-    return <ErrorView error={error} />
-  }
-
-  if (loading) {
-    return <LoadingPage text="Loading tutorials" context={props.context} />
-  }
-
-  if (!data) {
-    return null
-  }
-
-  return <SelectTutorial tutorialList={data.tutorials} send={props.send} />
+  return <div>SelectTutorial</div>
 }
 
 export default SelectPageContainer

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as CR from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import BetaBadge from '../../components/BetaBadge'
 import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
@@ -46,7 +46,7 @@ const styles = {
 interface Props {
   onContinue(): void
   onNew(): void
-  tutorial?: G.Tutorial
+  tutorial?: TT.Tutorial
 }
 
 export const StartPage = (props: Props) => (