create setStatus mutation

Author: ShMcK

web-app/src/App.tsx

@@ -1,30 +1,41 @@
 import * as React from 'react'
-import { ApolloProvider } from '@apollo/react-hooks'
+import { ApolloProvider, useMutation } from '@apollo/react-hooks'
 import * as CR from 'typings'
 
 import client from './services/apollo'
+import { SET_STATUS } from './services/apollo/mutations'
 import Debugger from './components/Debugger'
 import Routes from './Routes'
-import DataContext, { initialData, initialState } from './utils/DataContext'
 import { send } from './utils/vscode'
 
 interface ReceivedEvent {
   data: CR.Action
 }
 
 const App = () => {
+  const initialState = { SelectTutorial: 'Initial ' }
+
+  // set state machine state
   const [state, setState] = React.useState(initialState)
-  const [data, setData]: [CR.MachineContext, (data: CR.MachineContext) => void] = React.useState(initialData)
+
+  // update level/stage/step status based on user progress & position
+  // TODO: model server more effeciently
+  const [setStatus] = useMutation(SET_STATUS)
 
   // update state based on response from editor
   const handleEvent = (event: ReceivedEvent): void => {
     const message = event.data
     // messages from core
+    const { progress, position } = message.payload.data
+
     if (message.type === 'SET_STATE') {
+      // SET_STATE - set state machine state
       setState(message.payload.state)
-      setData(message.payload.data)
+
+      setStatus({ variables: { progress, position } })
     } else if (message.type === 'SET_DATA') {
-      setData(message.payload.data)
+      // SET_DATA - set state machine context
+      setStatus({ variables: { progress, position } })
     }
   }
 
@@ -44,20 +55,15 @@ const App = () => {
 
   const value = {
     state,
-    position: data.position,
-    data: data.data,
-    progress: data.progress,
   }
 
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
     <ApolloProvider client={client}>
-      <DataContext.Provider value={value}>
-        <div>
-          {process.env.REACT_APP_DEBUG && <Debugger value={value} />}
-          <Routes state={state} />
-        </div>
-      </DataContext.Provider>
+      <div>
+        {process.env.REACT_APP_DEBUG && <Debugger value={value} />}
+        <Routes state={state} />
+      </div>
     </ApolloProvider>
   )
 }

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

@@ -14,8 +14,8 @@ const TutorialList = (props: Props) => (
       <TutorialItem
         key={tutorial.id}
         onNew={() => props.onNew(tutorial.id)}
-        title={tutorial.title}
-        text={tutorial.text}
+        title={tutorial.title || ''}
+        text={tutorial.text || ''}
       />
     ))}
   </div>

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

@@ -1,62 +1,16 @@
 import ApolloClient, { InMemoryCache } from 'apollo-boost'
 
+import typeDefs from './typeDefs'
+import resolvers from './resolvers'
+
 const client = new ApolloClient({
     uri: process.env.REACT_APP_GQL_URI,
     headers: {
         Authorization: process.env.GQL_AUTH_TOKEN,
     },
     cache: new InMemoryCache(),
-    resolvers: {
-        Mutation: {
-            setStatus: (_root, variables, { cache, getCacheKey }) => {
-                // TODO: optimize status setting to act on diffs
-
-                // set local cache
-                function set(typename: string, id: string, status: 'ACTIVE' | 'COMPLETE') {
-                    const writeId = getCacheKey({ __typename: typename, id })
-                    const data = { status }
-                    cache.writeData({ id: writeId, data })
-                }
-
-                const { progress, position } = variables
-
-                // set level progress & active
-                for (const levelId of Object.keys(progress.levels)) {
-                    set('Level', levelId, 'COMPLETE')
-                }
-                set('Level', position.levelId, 'ACTIVE')
-
-                // set stage progress & active
-                for (const stageId of Object.keys(progress.stages)) {
-                    set('Stage', stageId, 'COMPLETE')
-                }
-                set('Stage', position.stageId, 'ACTIVE')
-
-                // set step progress & active
-                for (const stepId of Object.keys(progress.steps)) {
-                    set('Step', stepId, 'COMPLETE')
-                }
-                set('Step', position.stepId, 'ACTIVE')
-
-                return null
-            },
-        },
-        Level: {
-            status() {
-                return 'INCOMPLETE'
-            }
-        },
-        Stage: {
-            status() {
-                return 'INCOMPLETE'
-            }
-        },
-        Step: {
-            status() {
-                return 'INCOMPLETE'
-            }
-        }
-    },
+    typeDefs,
+    resolvers,
 })
 
 export default client

web-app/src/services/apollo/mutations.ts

@@ -0,0 +1,7 @@
+import { gql } from 'apollo-boost'
+
+export const SET_STATUS = gql`
+  mutation ToggleTodo($progress: Progress!, $position: Position) {
+    setStatus(progress: $progress, position: $position) @client
+  }
+`

web-app/src/services/apollo/resolvers.ts

@@ -0,0 +1,53 @@
+const resolvers = {
+    Mutation: {
+        setStatus: (_root, variables, { cache, getCacheKey }) => {
+            // TODO: optimize status setting to act on diffs
+
+            // set local cache
+            function set(typename: string, id: string, status: 'ACTIVE' | 'COMPLETE') {
+                const writeId = getCacheKey({ __typename: typename, id })
+                const data = { status }
+                cache.writeData({ id: writeId, data })
+            }
+
+            const { progress, position } = variables
+
+            // set level progress & active
+            for (const levelId of Object.keys(progress.levels)) {
+                set('Level', levelId, 'COMPLETE')
+            }
+            set('Level', position.levelId, 'ACTIVE')
+
+            // set stage progress & active
+            for (const stageId of Object.keys(progress.stages)) {
+                set('Stage', stageId, 'COMPLETE')
+            }
+            set('Stage', position.stageId, 'ACTIVE')
+
+            // set step progress & active
+            for (const stepId of Object.keys(progress.steps)) {
+                set('Step', stepId, 'COMPLETE')
+            }
+            set('Step', position.stepId, 'ACTIVE')
+
+            return null
+        },
+    },
+    Level: {
+        status() {
+            return 'INCOMPLETE'
+        }
+    },
+    Stage: {
+        status() {
+            return 'INCOMPLETE'
+        }
+    },
+    Step: {
+        status() {
+            return 'INCOMPLETE'
+        }
+    }
+}
+
+export default resolvers

web-app/src/services/apollo/typeDefs.ts

@@ -0,0 +1,15 @@
+import { gql } from 'apollo-boost'
+
+const typeDefs = gql`
+  input Progress {
+    levels: JSONObject
+    stages: JSONObject
+    steps: JSONObject
+  }
+  input Position {
+    levelId: String
+    stageId: String
+    stepId: String
+  }
+`
+export default typeDefs