Add mock Assessment API calls (#113)

Resolves #74

* Add /missions result

* Add closed and all missions

Also added a counter for all the ids

* Add mock questions

* Make assessment folder

* Add types and interfaces for assessment api calls

* Match mock data to updated fields

- Only closed assessment previews available (2 of them)
- 3 open assessment previews
- Changed dates to string

* Make Questions use inheritence

The union of interfaces seems to work.

* Use IAssessment in Assessment component

* Change dispatch name in component

* Use proper variable names in AssessmentContainer

* Change state to use IAssessment

Also:
- Used `Array<T>` for definition in mock api
- Formatted AssessmentContainer

* Use IAssessmentOverview in academy/missions

Also removed category-specific assessments

* Use IAssessmentOverview for Missions

Also added an enum for AssessmentCategory

* Fix mission tests

* Use assessment-related names in MissionsContainer

* Modify state to use IAssessmentOverview

* Modify mission info fetch action to assessment

* Fix linting and tests

* Fix filtering issue for missions

The problem was with a faulty dataset.Also added
- Fix for not showing "loading" page (which was a mistake I made a few
commits ago)
- Spacing out for contentdisplay cards

* Use enum category values

* Arrange fields in alphabetical order

* Format mockAPI

* Make fetchAssessmentOverviews general

This is because the API fetch is to fetch all the previews. Having the
parameter for category there, but not using it (or using it, resulting
in multiple calls for multiple categories) is not preferred.

* Add saga for assessment overview fetching

Note that the initial data is still not removed.

* Add mock API fetch for assessment overviews

The default value for the overviews is now undefined so as to
simulate the fetching.

* Format some files

* Add API call for fetching assessment

Moved the fetch dispact in the academy/mission component from the render
function to the componentWillMount function, as we should not render
(due to content updates) while the render function is running.

* Format and update test files

* Add historyHelper to state

It got lost somewhere in the rebase

* Use typed Map instead of Object for IAssessments

Author: remo5000

src/actions/actionTypes.ts

@@ -34,8 +34,10 @@ export const INTERRUPT_EXECUTION = 'INTERRUPT_EXECUTION'
 export const CHANGE_TOKEN = 'CHANGE_TOKEN'
 export const FETCH_ANNOUNCEMENTS = 'FETCH_ANNOUNCEMENTS'
 export const FETCH_ASSESSMENT = 'FETCH_ASSESSMENT'
-export const FETCH_MISSIONS_INFO = 'FETCH_MISSIONS_INFO'
+export const FETCH_ASSESSMENT_OVERVIEWS = 'FETCH_ASSESSMENT_OVERVIEWS'
 export const FETCH_USERNAME = 'FETCH_USERNAME'
 export const LOGIN = 'LOGIN'
 export const SET_USERNAME = 'SET_USERNAME'
 export const UPDATE_HISTORY_HELPERS = 'UPDATE_HISTORY_HELPERS'
+export const UPDATE_ASSESSMENT_OVERVIEWS = 'UPDATE_ASSESSMENT_OVERVIEWS'
+export const UPDATE_ASSESSMENT = 'UPDATE_ASSESSMENT'

src/actions/session.ts

@@ -1,4 +1,6 @@
 import { ActionCreator } from 'redux'
+
+import { IAssessment, IAssessmentOverview } from '../components/assessment/assessmentShape'
 import * as actionTypes from './actionTypes'
 
 export const changeToken: ActionCreator<actionTypes.IAction> = (token: string) => ({
@@ -10,13 +12,13 @@ export const fetchAnnouncements = () => ({
   type: actionTypes.FETCH_ANNOUNCEMENTS
 })
 
-export const fetchAssessment = (missionId: number) => ({
+export const fetchAssessment = (id: number) => ({
   type: actionTypes.FETCH_ASSESSMENT,
-  payload: missionId
+  payload: id
 })
 
-export const fetchMissionsInfo = () => ({
-  type: actionTypes.FETCH_MISSIONS_INFO
+export const fetchAssessmentOverviews = () => ({
+  type: actionTypes.FETCH_ASSESSMENT_OVERVIEWS
 })
 
 export const fetchUsername = () => ({
@@ -36,3 +38,13 @@ export const updateHistoryHelpers: ActionCreator<actionTypes.IAction> = (loc: st
   type: actionTypes.UPDATE_HISTORY_HELPERS,
   payload: loc
 })
+
+export const updateAssessmentOverviews = (overviews: IAssessmentOverview[]) => ({
+  type: actionTypes.UPDATE_ASSESSMENT_OVERVIEWS,
+  payload: overviews
+})
+
+export const updateAssessment = (assessment: IAssessment) => ({
+  type: actionTypes.UPDATE_ASSESSMENT,
+  payload: assessment
+})

src/components/academy/Missions.tsx

@@ -5,26 +5,21 @@ import { RouteComponentProps } from 'react-router'
 import { NavLink } from 'react-router-dom'
 
 import AssessmentContainer from '../../containers/AssessmentContainer'
-import { OwnProps as AssessmentProps } from '../Assessment'
+import { OwnProps as AssessmentProps } from '../assessment'
+import { IAssessmentOverview } from '../assessment/assessmentShape'
 import ContentDisplay, { IContentDisplayProps } from '../commons/ContentDisplay'
 
-export type MissionInfo = {
-  id: number
-  title: string
-  description: string
-}
-
 export interface IMissionParams {
   missionId?: string
 }
 
 export interface IMissionsProps extends RouteComponentProps<IMissionParams> {
-  missionsInfo?: MissionInfo[]
-  handleMissionsInfoFetch: () => void
+  assessmentOverviews?: IAssessmentOverview[]
+  handleAssessmentOverviewFetch: () => void
 }
 
-export type StateProps = Pick<IMissionsProps, 'missionsInfo'>
-export type DispatchProps = Pick<IMissionsProps, 'handleMissionsInfoFetch'>
+export type StateProps = Pick<IMissionsProps, 'assessmentOverviews'>
+export type DispatchProps = Pick<IMissionsProps, 'handleAssessmentOverviewFetch'>
 
 class Missions extends React.Component<IMissionsProps, {}> {
   public render() {
@@ -39,8 +34,8 @@ class Missions extends React.Component<IMissionsProps, {}> {
     // if there is no mission specified, Render only information.
     if (missionIdParam === null) {
       const props: IContentDisplayProps = {
-        display: <MissionInfoCard missionsInfo={this.props.missionsInfo} />,
-        loadContentDispatch: this.props.handleMissionsInfoFetch
+        display: <AssessmentOverviewCard assessmentOverviews={this.props.assessmentOverviews} />,
+        loadContentDispatch: this.props.handleAssessmentOverviewFetch
       }
       return (
         <div className="Missions">
@@ -56,17 +51,17 @@ class Missions extends React.Component<IMissionsProps, {}> {
   }
 }
 
-interface IMissionInfoCardProps {
-  missionsInfo?: MissionInfo[]
+interface IAssessmentOverviewCardProps {
+  assessmentOverviews?: IAssessmentOverview[]
 }
 
-export const MissionInfoCard: React.SFC<IMissionInfoCardProps> = props => {
-  if (props.missionsInfo === undefined) {
-    return <NonIdealState description="Fetching missions..." visual={<Spinner />} />
-  } else if (props.missionsInfo.length === 0) {
-    return <NonIdealState title="There are no missions." visual={IconNames.FLAME} />
+export const AssessmentOverviewCard: React.SFC<IAssessmentOverviewCardProps> = props => {
+  if (props.assessmentOverviews === undefined) {
+    return <NonIdealState description="Fetching assessment..." visual={<Spinner />} />
+  } else if (props.assessmentOverviews.length === 0) {
+    return <NonIdealState title="There are no assessments." visual={IconNames.FLAME} />
   }
-  const cards = props.missionsInfo.map((mission, index) => (
+  const cards = props.assessmentOverviews.map((mission, index) => (
     <div key={index}>
       <Card className="row mission-info">
         <div className="col-xs-3 mission-info-picture">PICTURE</div>
@@ -78,7 +73,7 @@ export const MissionInfoCard: React.SFC<IMissionInfoCardProps> = props => {
             <h6>Mission 0 : 123123 XP (hardcoded)</h6>
           </div>
           <div className="row mission-info-description">
-            <p className="col-xs-12">{mission.description}</p>
+            <p className="col-xs-12">{mission.shortSummary}</p>
           </div>
           <div className="row between-xs middle-xs mission-info-controls">
             <div className="col-xs-8 mission-info-due-date-parent">

src/components/academy/__tests__/Missions.tsx

@@ -2,37 +2,25 @@ import { mount } from 'enzyme'
 import * as React from 'react'
 import { MemoryRouter } from 'react-router'
 
+import { mockAssessmentOverviews } from '../../../mocks/api'
 import { mockRouterProps } from '../../../mocks/components'
 import Missions, { IMissionsProps } from '../Missions'
 
 const mockUndefinedMissions: IMissionsProps = {
   ...mockRouterProps('/academy/missions', {}),
-  handleMissionsInfoFetch: () => {}
+  handleAssessmentOverviewFetch: () => {}
 }
 
 const mockEmptyMissions: IMissionsProps = {
   ...mockRouterProps('/academy/missions', {}),
-  missionsInfo: [],
-  handleMissionsInfoFetch: () => {}
+  assessmentOverviews: [],
+  handleAssessmentOverviewFetch: () => {}
 }
 
 const mockPresentMissions: IMissionsProps = {
   ...mockRouterProps('/academy/missions', {}),
-  missionsInfo: [
-    {
-      id: 0,
-      title: 'An Odessey to Runes',
-      description:
-        'Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum in'
-    },
-    {
-      id: 1,
-      title: 'The Secret to Streams',
-      description:
-        'Once upon a time, () => { Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum in }'
-    }
-  ],
-  handleMissionsInfoFetch: () => {}
+  assessmentOverviews: mockAssessmentOverviews,
+  handleAssessmentOverviewFetch: () => {}
 }
 
 test('Missions page "loading" content renders correctly', () => {