Mock Assessment API calls

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', () => {