Fetch assessments (#204)

* Abstract functions making backend calls

* Add property attempted to AssessmentOverviews

* Fetch and update assessmentOverviews on login

* Replace mock calls in ContentDisplay

* Replace mock calls in update assessment

* Add mockBackendSaga for dev

* Use .env variable as flag instead of NODE_ENV

* Move apiFetchSaga actions to mockBackendSaga

- apiFetchSaga is removed
- deprecated some mock userAPI enums

Author: ning-y

.env.example

@@ -1,3 +1,4 @@
 REACT_APP_IVLE_KEY=your_ivle_key_here
 REACT_APP_VERSION=$npm_package_version
 REACT_APP_BACKEND_URL=http://something.com
+REACT_APP_USE_BACKEND=

src/components/assessment/assessmentShape.ts

@@ -2,6 +2,7 @@
  * Used to display information regarding an assessment in the UI.
  */
 export interface IAssessmentOverview {
+  attempted: boolean
   category: AssessmentCategory
   closeAt: string
   coverImage: string

src/mocks/assessmentAPI.ts

@@ -9,6 +9,7 @@ import {
 
 const mockOpenAssessmentsOverviews: IAssessmentOverview[] = [
   {
+    attempted: true,
     category: AssessmentCategories.Mission,
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'www.imgur.com',
@@ -20,6 +21,7 @@ const mockOpenAssessmentsOverviews: IAssessmentOverview[] = [
     title: 'An Odessey to Runes'
   },
   {
+    attempted: false,
     category: AssessmentCategories.Mission,
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'www.imgur.com',
@@ -31,6 +33,7 @@ const mockOpenAssessmentsOverviews: IAssessmentOverview[] = [
     title: 'The Secret to Streams'
   },
   {
+    attempted: true,
     category: AssessmentCategories.Sidequest,
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'www.imgur.com',
@@ -45,6 +48,7 @@ const mockOpenAssessmentsOverviews: IAssessmentOverview[] = [
 
 const mockClosedAssessmentOverviews: IAssessmentOverview[] = [
   {
+    attempted: true,
     category: AssessmentCategories.Mission,
     closeAt: '2008-06-18T05:24:26.026Z',
     coverImage: 'www.imgur.com',
@@ -56,6 +60,7 @@ const mockClosedAssessmentOverviews: IAssessmentOverview[] = [
     title: 'A closed Mission'
   },
   {
+    attempted: false,
     category: AssessmentCategories.Sidequest,
     closeAt: '2008-06-18T05:24:26.026Z',
     coverImage: 'www.imgur.com',

src/mocks/backend.ts

@@ -0,0 +1,54 @@
+import { delay, SagaIterator } from 'redux-saga'
+import { call, put, select, takeEvery } from 'redux-saga/effects'
+
+import * as actions from '../actions'
+import * as actionTypes from '../actions/actionTypes'
+import { IState } from '../reducers/states'
+import { history } from '../utils/history'
+import { mockAssessmentOverviews, mockAssessments } from './assessmentAPI'
+import { mockFetchGrading, mockFetchGradingOverview } from './gradingAPI'
+
+export function* mockBackendSaga(): SagaIterator {
+  yield takeEvery(actionTypes.FETCH_AUTH, function*(action) {
+    const tokens = {
+      accessToken: 'accessToken',
+      refreshToken: 'refreshToken'
+    }
+    const user = {
+      name: 'DevStaff',
+      role: 'staff'
+    }
+    yield put(actions.setTokens(tokens))
+    yield put(actions.setRole(user.role))
+    yield put(actions.setUsername(user.name))
+    yield delay(2000)
+    yield history.push('/academy')
+  })
+
+  yield takeEvery(actionTypes.FETCH_ASSESSMENT_OVERVIEWS, function*() {
+    yield put(actions.updateAssessmentOverviews(mockAssessmentOverviews))
+  })
+
+  yield takeEvery(actionTypes.FETCH_ASSESSMENT, function*(action) {
+    const id = (action as actionTypes.IAction).payload
+    const assessment = mockAssessments[id]
+    yield put(actions.updateAssessment(assessment))
+  })
+
+  yield takeEvery(actionTypes.FETCH_GRADING_OVERVIEWS, function*() {
+    const accessToken = yield select((state: IState) => state.session.accessToken)
+    const gradingOverviews = yield call(() => mockFetchGradingOverview(accessToken))
+    if (gradingOverviews !== null) {
+      yield put(actions.updateGradingOverviews(gradingOverviews))
+    }
+  })
+
+  yield takeEvery(actionTypes.FETCH_GRADING, function*(action) {
+    const submissionId = (action as actionTypes.IAction).payload
+    const accessToken = yield select((state: IState) => state.session.accessToken)
+    const grading = yield call(() => mockFetchGrading(accessToken, submissionId))
+    if (grading !== null) {
+      yield put(actions.updateGrading(submissionId, grading))
+    }
+  })
+}

src/mocks/userAPI.ts

@@ -1,3 +1,6 @@
+/**
+ * Deprecated, check backend for roles
+ */
 export enum Roles {
   student = 'student',
   trainer = 'trainer',

src/sagas/backend.ts

@@ -1,50 +1,85 @@
 import { delay, SagaIterator } from 'redux-saga'
-import { call, put, takeEvery } from 'redux-saga/effects'
+import { call, put, select, takeEvery } from 'redux-saga/effects'
 
 import * as actions from '../actions'
 import * as actionTypes from '../actions/actionTypes'
+import { IAssessmentOverview } from '../components/assessment/assessmentShape'
+import { IState } from '../reducers/states'
 import { BACKEND_URL } from '../utils/constants'
 import { history } from '../utils/history'
 
 function* backendSaga(): SagaIterator {
   yield takeEvery(actionTypes.FETCH_AUTH, function*(action) {
     const ivleToken = (action as actionTypes.IAction).payload
-    const resp = yield call(request, 'auth', {
-      method: 'POST',
-      body: JSON.stringify({ login: { ivle_token: ivleToken } }),
-      headers: new Headers({
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      })
-    })
+    const resp = yield call(callAuth, ivleToken)
     const tokens = {
       accessToken: resp.access_token,
       refreshToken: resp.refresh_token
     }
-    const user = yield getUser(tokens.accessToken)
+    const user = yield call(authorizedGet, 'user', tokens.accessToken)
     yield put(actions.setTokens(tokens))
     yield put(actions.setRole(user.role))
     yield put(actions.setUsername(user.name))
     yield delay(2000)
     yield history.push('/academy')
   })
+
+  yield takeEvery(actionTypes.FETCH_ASSESSMENT_OVERVIEWS, function*() {
+    const accessToken = yield select((state: IState) => state.session.accessToken)
+    const assessmentOverviews = yield call(callAssessments, accessToken)
+    yield put(actions.updateAssessmentOverviews(assessmentOverviews))
+  })
+
+  yield takeEvery(actionTypes.FETCH_ASSESSMENT, function*(action) {
+    const accessToken = yield select((state: IState) => state.session.accessToken)
+    const id = (action as actionTypes.IAction).payload
+    const assessment = yield call(callAssessmentsId, id, accessToken)
+    yield put(actions.updateAssessment(assessment))
+  })
 }
 
-function* getUser(accessToken: string) {
-  const resp = yield call(request, 'user', {
+const callAuth = (ivleToken: string) =>
+  request('auth', {
+    method: 'POST',
+    body: JSON.stringify({ login: { ivle_token: ivleToken } }),
+    headers: new Headers({
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    })
+  })
+
+const callAssessments = async (accessToken: string) => {
+  const assessmentOverviews: any = await authorizedGet('assessments', accessToken)
+  return assessmentOverviews.map((overview: any) => {
+    // backend has property ->     type: 'mission' | 'sidequest' | 'path' | 'contest'
+    //              we have -> category: 'Mission' | 'Sidequest' | 'Path' | 'Contest'
+    overview.category = capitalise(overview.type)
+    delete overview.type
+    return overview as IAssessmentOverview
+  })
+}
+
+const callAssessmentsId = async (id: number, accessToken: string) => {
+  const assessment: any = await authorizedGet(`assessments/${id}`, accessToken)
+  assessment.category = capitalise(assessment.type)
+  delete assessment.type
+  return assessment
+}
+
+const authorizedGet = (path: string, accessToken: string) =>
+  request(path, {
     method: 'GET',
     headers: new Headers({
       Authorization: `Bearer ${accessToken}`,
       Accept: 'application/json'
     })
   })
-  return resp
-}
 
-function request(path: string, opts: {}) {
-  return fetch(`${BACKEND_URL}/v1/${path}`, opts)
+const request = (path: string, opts: {}) =>
+  fetch(`${BACKEND_URL}/v1/${path}`, opts)
     .then(data => data.json())
-    .catch(err => err)
-}
+    .catch(_ => null)
+
+const capitalise = (text: string) => text.charAt(0).toUpperCase() + text.slice(1)
 
 export default backendSaga

src/sagas/index.ts

@@ -8,57 +8,19 @@ import { call, put, race, select, take, takeEvery } from 'redux-saga/effects'
 import * as actions from '../actions'
 import * as actionTypes from '../actions/actionTypes'
 import { WorkspaceLocation } from '../actions/workspaces'
-import { mockAssessmentOverviews, mockAssessments } from '../mocks/assessmentAPI'
-import { mockFetchGrading, mockFetchGradingOverview } from '../mocks/gradingAPI'
+import { mockBackendSaga } from '../mocks/backend'
 import { defaultEditorValue, externalLibraries, IState } from '../reducers/states'
-import { IVLE_KEY } from '../utils/constants'
+import { IVLE_KEY, USE_BACKEND } from '../utils/constants'
 import { showSuccessMessage, showWarningMessage } from '../utils/notification'
 import backendSaga from './backend'
 
 function* mainSaga() {
-  yield* apiFetchSaga()
-  yield* backendSaga()
+  yield* USE_BACKEND ? backendSaga() : mockBackendSaga()
   yield* workspaceSaga()
   yield* loginSaga()
   yield* playgroundSaga()
 }
 
-function* apiFetchSaga(): SagaIterator {
-  yield takeEvery(actionTypes.FETCH_ASSESSMENT_OVERVIEWS, function*() {
-    const newContent = mockAssessmentOverviews
-    const oldContent = yield select((state: IState) => state.session.assessmentOverviews)
-    if (newContent !== oldContent) {
-      yield put(actions.updateAssessmentOverviews(newContent))
-    }
-  })
-
-  yield takeEvery(actionTypes.FETCH_ASSESSMENT, function*(action) {
-    const id = (action as actionTypes.IAction).payload
-    const newContent = mockAssessments[id]
-    const oldContent = yield select((state: IState) => state.session.assessments[id])
-    if (newContent !== oldContent) {
-      yield put(actions.updateAssessment(newContent))
-    }
-  })
-
-  yield takeEvery(actionTypes.FETCH_GRADING_OVERVIEWS, function*() {
-    const accessToken = yield select((state: IState) => state.session.accessToken)
-    const gradingOverviews = yield call(() => mockFetchGradingOverview(accessToken))
-    if (gradingOverviews !== null) {
-      yield put(actions.updateGradingOverviews(gradingOverviews))
-    }
-  })
-
-  yield takeEvery(actionTypes.FETCH_GRADING, function*(action) {
-    const submissionId = (action as actionTypes.IAction).payload
-    const accessToken = yield select((state: IState) => state.session.accessToken)
-    const grading = yield call(() => mockFetchGrading(accessToken, submissionId))
-    if (grading !== null) {
-      yield put(actions.updateGrading(submissionId, grading))
-    }
-  })
-}
-
 function* workspaceSaga(): SagaIterator {
   let context: Context
 

src/utils/constants.ts

@@ -5,3 +5,4 @@ dotenv.config()
 export const IVLE_KEY = process.env.REACT_APP_IVLE_KEY
 export const VERSION = process.env.REACT_APP_VERSION
 export const BACKEND_URL = process.env.REACT_APP_BACKEND_URL
+export const USE_BACKEND = process.env.REACT_APP_USE_BACKEND