Merge pull request #2335 from bryanjenningz/get-dojo-exercises-from-b…

…ackend

Get exercises from backend on DOJO exercises page

__dummy__/getExercisesData.ts

@@ -0,0 +1,95 @@
+import { GetExercisesQuery } from '../graphql'
+
+const getExercisesData: GetExercisesQuery = {
+  lessons: [
+    {
+      title: 'Foundations of JavaScript',
+      docUrl: '/curriculum/js0/primitive_data_and_operators',
+      slug: 'js0'
+    },
+    {
+      title: 'Variables & Functions',
+      docUrl: '/curriculum/js1/hypertext_markup_language',
+      slug: 'js1'
+    },
+    {
+      title: 'Arrays',
+      docUrl: '/curriculum/js2/introduction_to_testing_inner_properties',
+      slug: 'js2'
+    },
+    {
+      title: 'Objects',
+      docUrl: '/curriculum/js3/preflight',
+      slug: 'js3'
+    },
+    {
+      title: 'Front End Engineering',
+      docUrl: '/curriculum/js4/interactive_elements',
+      slug: 'js4'
+    },
+    {
+      title: 'End To End',
+      docUrl: '/curriculum/js5/request_and_response',
+      slug: 'js5'
+    },
+    {
+      title: 'React, GraphQL, SocketIO',
+      docUrl: '',
+      slug: 'js6'
+    },
+    {
+      title: 'JavaScript Algorithms',
+      docUrl:
+        'https://docs.google.com/document/d/1ekuu6VbN7qqypm71cVHT-BkdxYSwY0BBHLK8xGXSN1U/edit',
+      slug: 'js7'
+    },
+    {
+      title: 'Trees',
+      docUrl: '',
+      slug: 'js8'
+    },
+    {
+      title: 'General Algorithms',
+      docUrl: '',
+      slug: 'js9'
+    }
+  ],
+  alerts: [],
+  exercises: [
+    {
+      module: {
+        name: 'Numbers',
+        lesson: {
+          slug: 'js0'
+        }
+      },
+      description: '```\nlet a = 5\na = a + 10\n// what is a?\n```',
+      answer: '15',
+      explanation: 'You can reassign variables that were created with "let".'
+    },
+    {
+      module: {
+        name: 'Numbers',
+        lesson: {
+          slug: 'js0'
+        }
+      },
+      description: '```\nlet a = 1\na += 2\n// what is a?\n```',
+      answer: '3',
+      explanation: '`a += 2` is a shorter way to write `a = a + 2`'
+    },
+    {
+      module: {
+        name: 'Numbers',
+        lesson: {
+          slug: 'js0'
+        }
+      },
+      description: '```\nlet a = 1\na -= 2\n// what is a?\n```',
+      answer: '-1',
+      explanation: '`a -= 2` is a shorter way to write `a = a - 2`'
+    }
+  ]
+}
+
+export default getExercisesData

__tests__/pages/exercises/[lessonSlug].test.js

@@ -4,16 +4,8 @@ import '@testing-library/jest-dom'
 import Exercises from '../../../pages/exercises/[lessonSlug]'
 import { useRouter } from 'next/router'
 import { MockedProvider } from '@apollo/client/testing'
-import dummyLessonData from '../../../__dummy__/lessonData'
-import dummySessionData from '../../../__dummy__/sessionData'
-import dummyAlertData from '../../../__dummy__/alertData'
-import GET_APP from '../../../graphql/queries/getApp'
-
-const session = {
-  ...dummySessionData,
-  submissions: [],
-  lessonStatus: []
-}
+import getExercisesData from '../../../__dummy__/getExercisesData'
+import GET_EXERCISES from '../../../graphql/queries/getExercises'
 
 describe('Exercises page', () => {
   const { query } = useRouter()
@@ -22,13 +14,9 @@ describe('Exercises page', () => {
   test('Should render correctly', async () => {
     const mocks = [
       {
-        request: { query: GET_APP },
+        request: { query: GET_EXERCISES },
         result: {
-          data: {
-            session,
-            lessons: dummyLessonData,
-            alerts: dummyAlertData
-          }
+          data: getExercisesData
         }
       }
     ]
@@ -51,13 +39,9 @@ describe('Exercises page', () => {
   test('Renders exercise card with the skip, previous, and exit buttons', async () => {
     const mocks = [
       {
-        request: { query: GET_APP },
+        request: { query: GET_EXERCISES },
         result: {
-          data: {
-            session,
-            lessons: dummyLessonData,
-            alerts: dummyAlertData
-          }
+          data: getExercisesData
         }
       }
     ]
@@ -101,15 +85,14 @@ describe('Exercises page', () => {
   test('Should not render lessons nav card tab if lesson docUrl is null', async () => {
     const mocks = [
       {
-        request: { query: GET_APP },
+        request: { query: GET_EXERCISES },
         result: {
           data: {
-            session,
-            lessons: dummyLessonData.map(lesson => ({
+            ...getExercisesData,
+            lessons: getExercisesData.lessons.map(lesson => ({
               ...lesson,
               docUrl: null
-            })),
-            alerts: dummyAlertData
+            }))
           }
         }
       }
@@ -133,12 +116,11 @@ describe('Exercises page', () => {
   test('Should render a 500 error page if the lesson data is null', async () => {
     const mocks = [
       {
-        request: { query: GET_APP },
+        request: { query: GET_EXERCISES },
         result: {
           data: {
-            session,
-            lessons: null,
-            alerts: dummyAlertData
+            ...getExercisesData,
+            lessons: null
           }
         }
       }
@@ -156,12 +138,11 @@ describe('Exercises page', () => {
   test('Should render a 404 error page if the lesson is not found', async () => {
     const mocks = [
       {
-        request: { query: GET_APP },
+        request: { query: GET_EXERCISES },
         result: {
           data: {
-            session,
-            lessons: [],
-            alerts: dummyAlertData
+            ...getExercisesData,
+            lessons: []
           }
         }
       }
@@ -182,13 +163,9 @@ describe('Exercises page', () => {
     }))
     const mocks = [
       {
-        request: { query: GET_APP },
+        request: { query: GET_EXERCISES },
         result: {
-          data: {
-            session,
-            lessons: dummyLessonData,
-            alerts: dummyAlertData
-          }
+          data: getExercisesData
         }
       }
     ]

graphql/index.tsx

@@ -810,6 +810,37 @@ export type GetAppQuery = {
   }>
 }
 
+export type GetExercisesQueryVariables = Exact<{ [key: string]: never }>
+
+export type GetExercisesQuery = {
+  __typename?: 'Query'
+  lessons: Array<{
+    __typename?: 'Lesson'
+    title: string
+    docUrl?: string | null
+    slug: string
+  }>
+  alerts: Array<{
+    __typename?: 'Alert'
+    id: number
+    text?: string | null
+    type?: string | null
+    url?: string | null
+    urlCaption?: string | null
+  }>
+  exercises: Array<{
+    __typename?: 'Exercise'
+    description: string
+    answer: string
+    explanation?: string | null
+    module: {
+      __typename?: 'Module'
+      name: string
+      lesson: { __typename?: 'Lesson'; slug: string }
+    }
+  } | null>
+}
+
 export type GetFlaggedExercisesQueryVariables = Exact<{ [key: string]: never }>
 
 export type GetFlaggedExercisesQuery = {
@@ -3485,6 +3516,114 @@ export type GetAppQueryResult = Apollo.QueryResult<
   GetAppQuery,
   GetAppQueryVariables
 >
+export const GetExercisesDocument = gql`
+  query GetExercises {
+    lessons {
+      title
+      docUrl
+      slug
+    }
+    alerts {
+      id
+      text
+      type
+      url
+      urlCaption
+    }
+    exercises {
+      module {
+        name
+        lesson {
+          slug
+        }
+      }
+      description
+      answer
+      explanation
+    }
+  }
+`
+export type GetExercisesProps<
+  TChildProps = {},
+  TDataName extends string = 'data'
+> = {
+  [key in TDataName]: ApolloReactHoc.DataValue<
+    GetExercisesQuery,
+    GetExercisesQueryVariables
+  >
+} & TChildProps
+export function withGetExercises<
+  TProps,
+  TChildProps = {},
+  TDataName extends string = 'data'
+>(
+  operationOptions?: ApolloReactHoc.OperationOption<
+    TProps,
+    GetExercisesQuery,
+    GetExercisesQueryVariables,
+    GetExercisesProps<TChildProps, TDataName>
+  >
+) {
+  return ApolloReactHoc.withQuery<
+    TProps,
+    GetExercisesQuery,
+    GetExercisesQueryVariables,
+    GetExercisesProps<TChildProps, TDataName>
+  >(GetExercisesDocument, {
+    alias: 'getExercises',
+    ...operationOptions
+  })
+}
+
+/**
+ * __useGetExercisesQuery__
+ *
+ * To run a query within a React component, call `useGetExercisesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetExercisesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetExercisesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetExercisesQuery(
+  baseOptions?: Apollo.QueryHookOptions<
+    GetExercisesQuery,
+    GetExercisesQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetExercisesQuery, GetExercisesQueryVariables>(
+    GetExercisesDocument,
+    options
+  )
+}
+export function useGetExercisesLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    GetExercisesQuery,
+    GetExercisesQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetExercisesQuery, GetExercisesQueryVariables>(
+    GetExercisesDocument,
+    options
+  )
+}
+export type GetExercisesQueryHookResult = ReturnType<
+  typeof useGetExercisesQuery
+>
+export type GetExercisesLazyQueryHookResult = ReturnType<
+  typeof useGetExercisesLazyQuery
+>
+export type GetExercisesQueryResult = Apollo.QueryResult<
+  GetExercisesQuery,
+  GetExercisesQueryVariables
+>
 export const GetFlaggedExercisesDocument = gql`
   query getFlaggedExercises {
     exercises {

graphql/queries/getExercises.ts

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client'
+
+const GET_EXERCISES = gql`
+  query GetExercises {
+    lessons {
+      title
+      docUrl
+      slug
+    }
+    alerts {
+      id
+      text
+      type
+      url
+      urlCaption
+    }
+    exercises {
+      module {
+        name
+        lesson {
+          slug
+        }
+      }
+      description
+      answer
+      explanation
+    }
+  }
+`
+
+export default GET_EXERCISES