Generate story with information from backend (#250)

* Fetch grade and story from GET /user

* Dynamically import game

* Fix some broken navigations

* Refresh a user's story on page refresh

* Rebase off master

* Change state.session.story according to backend changes

* Change start mission hook to redirect only to listing

* Bump version v0.1.7 -> v0.1.8

* Fix runtime error on refresh to /academy/game on mock data

* Fix issue nesting div tag in p tag

* Use session.state.grade in profile dropdown

* Fix unconventional file names for dropdown/*

Author: ning-y

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "cadet-frontend",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "scripts-info": {
     "format": "Format source code",
     "start": "Start the Webpack development server",

src/actions/actionTypes.ts

@@ -52,9 +52,8 @@ export const FETCH_ASSESSMENT_OVERVIEWS = 'FETCH_ASSESSMENT_OVERVIEWS'
 export const FETCH_GRADING = 'FETCH_GRADING'
 export const FETCH_GRADING_OVERVIEWS = 'FETCH_GRADING_OVERVIEWS'
 export const LOGIN = 'LOGIN'
-export const SET_ROLE = 'SET_ROLE'
 export const SET_TOKENS = 'SET_TOKENS'
-export const SET_USERNAME = 'SET_USERNAME'
+export const SET_USER = 'SET_USER'
 export const SUBMIT_ANSWER = 'SUBMIT_ANSWER'
 export const SUBMIT_ASSESSMENT = 'SUBMIT_ASSESSMENT'
 export const SUBMIT_GRADING = 'SUBMIT_GRADING'

src/actions/session.ts

@@ -2,6 +2,7 @@ import { ActionCreator } from 'redux'
 
 import { Grading, GradingOverview } from '../components/academy/grading/gradingShape'
 import { IAssessment, IAssessmentOverview } from '../components/assessment/assessmentShape'
+import { Story } from '../reducers/states'
 import * as actionTypes from './actionTypes'
 
 import { Role } from '../reducers/states'
@@ -37,11 +38,6 @@ export const login = () => ({
   type: actionTypes.LOGIN
 })
 
-export const setRole: ActionCreator<actionTypes.IAction> = (role: Role) => ({
-  type: actionTypes.SET_ROLE,
-  payload: role
-})
-
 export const setTokens: ActionCreator<actionTypes.IAction> = ({ accessToken, refreshToken }) => ({
   type: actionTypes.SET_TOKENS,
   payload: {
@@ -50,9 +46,14 @@ export const setTokens: ActionCreator<actionTypes.IAction> = ({ accessToken, ref
   }
 })
 
-export const setUsername: ActionCreator<actionTypes.IAction> = (username: string) => ({
-  type: actionTypes.SET_USERNAME,
-  payload: username
+export const setUser: ActionCreator<actionTypes.IAction> = (user: {
+  name: string
+  role: Role
+  grade: number
+  story: Story
+}) => ({
+  type: actionTypes.SET_USER,
+  payload: user
 })
 
 export const submitAnswer: ActionCreator<actionTypes.IAction> = (

src/components/Application.tsx

@@ -19,7 +19,7 @@ export interface IStateProps {
   currentPlaygroundChapter: number
   role?: Role
   title: string
-  username?: string
+  name?: string
   currentPlaygroundExternalLibrary: ExternalLibraryName
 }
 
@@ -42,7 +42,7 @@ class Application extends React.Component<IApplicationProps, {}> {
         <NavigationBar
           handleLogOut={this.props.handleLogOut}
           role={this.props.role}
-          username={this.props.username}
+          name={this.props.name}
           title={this.props.title}
         />
         <div className="Application__main">

src/components/NavigationBar.tsx

@@ -17,7 +17,7 @@ export interface INavigationBarProps {
   handleLogOut: () => void
   role?: Role
   title: string
-  username?: string
+  name?: string
 }
 
 const NavigationBar: React.SFC<INavigationBarProps> = props => (
@@ -68,7 +68,7 @@ const NavigationBar: React.SFC<INavigationBarProps> = props => (
         <NavbarDivider className="default-divider" />
       </div>
 
-      <Dropdown handleLogOut={props.handleLogOut} username={props.username} />
+      <Dropdown handleLogOut={props.handleLogOut} name={props.name} />
     </NavbarGroup>
   </Navbar>
 )

src/components/__tests__/__snapshots__/Application.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Application renders correctly 1`] = `
 "<div className=\\"Application\\">
-  <NavigationBar handleLogOut={[Function: handleLogOut]} role={[undefined]} username={[undefined]} title=\\"Cadet\\" />
+  <NavigationBar handleLogOut={[Function: handleLogOut]} role={[undefined]} name={[undefined]} title=\\"Cadet\\" />
   <div className=\\"Application__main\\">
     <Switch>
       <Route path=\\"/academy\\" component={[Function]} />

src/components/__tests__/__snapshots__/NavigationBar.tsx.snap

@@ -35,7 +35,7 @@ exports[`NavigationBar renders "Not logged in" correctly 1`] = `
     <div className=\\"hidden-xs\\">
       <Blueprint2.NavbarDivider className=\\"default-divider\\" />
     </div>
-    <Dropdown handleLogOut={[Function: handleLogOut]} username={[undefined]} />
+    <Dropdown handleLogOut={[Function: handleLogOut]} name={[undefined]} />
   </Blueprint2.NavbarGroup>
 </Blueprint2.Navbar>"
 `;
@@ -75,7 +75,7 @@ exports[`NavigationBar renders correctly with username 1`] = `
     <div className=\\"hidden-xs\\">
       <Blueprint2.NavbarDivider className=\\"default-divider\\" />
     </div>
-    <Dropdown handleLogOut={[Function: handleLogOut]} username=\\"Evis Rucer\\" />
+    <Dropdown handleLogOut={[Function: handleLogOut]} name={[undefined]} />
   </Blueprint2.NavbarGroup>
 </Blueprint2.Navbar>"
 `;

src/components/academy/game/create-initializer.js

@@ -7,8 +7,15 @@ export default function (StoryXMLPlayer, story, username, attemptedAll) {
 
   var hookHandlers = {
     startMission: function (number) {
+      console.log('startMission: ' + number)
       const assessmentType = story.split('-')[0] + 's'
-      history.push(`/academy/#{assessmentType}/#{number}`)
+      return history.push('/academy/' + assessmentType)
+      // TODO: Reimplement redirection to actual assessment rather than the
+      //       listing, after story.xml files have been changed. Currently, the
+      //       story xml number points to the mission number, but the
+      //       assessment id we obtain and therefore organise our assessments
+      //       by refers to the database table ID
+      // return history.push('/academy/' + assessmentType + '/' + number)
     },
     openTemplate: function (name) {
       switch (name) {
@@ -19,7 +26,7 @@ export default function (StoryXMLPlayer, story, username, attemptedAll) {
         case 'lesson_plan':
           return history.push('/academy/missions');
         case 'students':
-          return history.push('/profile');
+          return history.push('/news');
         case 'materials':
           return history.push('/material');
         case 'IDE':
@@ -40,7 +47,7 @@ export default function (StoryXMLPlayer, story, username, attemptedAll) {
   };
 
   function openWristDevice() {
-    history.push('/academy/announements')
+    history.push('/academy/news')
   }
 
   function startGame(div, canvas, saveData) {

src/components/academy/game/game.js

@@ -1,12 +1,10 @@
 import createInitializer from './create-initializer'
 
-export default function(div, canvas, story) {
+export default function(div, canvas, username, story, attemptedAll) {
   window.ASSETS_HOST =
     'https://s3-ap-southeast-1.amazonaws.com/source-academy-assets/';
   var StoryXMLPlayer = require('./story-xml-player');
   var container = document.getElementById('game-display')
-  var username = container.getAttribute('data-username')
-  var attemptedAll = container.getAttribute('data-attempted-all') === "true"
   var initialize = createInitializer(StoryXMLPlayer, story, username, attemptedAll)
   initialize(div, canvas);
 }

src/components/academy/game/index.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react'
 
-import story from './game.js'
+import { setUser } from '../../../actions'
+import { store } from '../../../createStore'
+import { Story } from '../../../reducers/states'
+import { getUser } from '../../../sagas/backend'
 
 type GameProps = DispatchProps & StateProps
 
@@ -10,45 +13,67 @@ export type DispatchProps = {
 
 export type StateProps = {
   canvas?: HTMLCanvasElement
-  storyAct: string
+  name: string
+  story?: Story
 }
 
 export class Game extends React.Component<GameProps, {}> {
   private canvas: HTMLCanvasElement
   private div: HTMLDivElement
 
-  public componentDidMount() {
-    /**
-     * Basically, if the function story is called twice (on different canvas
-     * elements), the second time the component is mounted, the pixi.js canvas
-     * will show nothing but a black screen. This means that if the user
-     * navigate aways from the game tab, and then back again, the game would not
-     * work.
-     *
-     * So, we save a reference to the first canvas that is loaded. Thereafter,
-     * when this component is mounted, use that canvas instead of the new canvas
-     * mounted with this div. This is a bit hacky, and refs aren't favoured in
-     * react, but it also prevents excessive loading of the game
-     */
+  /**
+   * Basically, if the function story is called twice (on different canvas
+   * elements), the second time the component is mounted, the pixi.js canvas
+   * will show nothing but a black screen. This means that if the user
+   * navigate aways from the game tab, and then back again, the game would not
+   * work.
+   *
+   * So, we save a reference to the first canvas that is loaded. Thereafter,
+   * when this component is mounted, use that canvas instead of the new canvas
+   * mounted with this div. This is a bit hacky, and refs aren't favoured in
+   * react, but it also prevents excessive loading of the game
+   *
+   * Note that the story/4's 4th param is named 'attemptedAll'. It is true if a
+   * storyline should not be loaded, and false if it should. In contrast,
+   * backend sends us 'playStory', which is the negation (!) of `attemptedAll`.
+   */
+  public async componentDidMount() {
+    const story: any = (await import('./game.js')).default
+    let storyOpts: Array<string | boolean>
     if (this.props.canvas === undefined) {
-      story(this.div, this.canvas, this.props.storyAct)
+      // First time rendering the Game component
+      if (this.props.story) {
+        storyOpts = [this.props.story.story, !this.props.story.playStory]
+      } else {
+        // session.story is undefined if creating store from localStorage
+        const state = store.getState()
+        const tokens = {
+          accessToken: state.session.accessToken!,
+          refreshToken: state.session.refreshToken!
+        }
+        const user: any = await getUser(tokens)
+        if (user) {
+          storyOpts = [user.story.story, !user.story.playStory]
+          store.dispatch(setUser(user))
+        } else {
+          // if user is null, actions.logOut is called anyways; nonetheless we
+          // set storyOpts, otherwise typescript complains about using storyOpts
+          // before assignment in story/4 below
+          storyOpts = ['mission-1', true]
+        }
+      }
+      story(this.div, this.canvas, this.props.name, ...storyOpts)
       this.props.handleSaveCanvas(this.canvas)
     } else {
+      // This browser window has loaded the Game component & canvas before
       this.div.innerHTML = ''
       this.div.appendChild(this.props.canvas)
     }
   }
 
   public render() {
     return (
-      <div
-        id="game-display"
-        className="sa-game"
-        data-story="spaceship"
-        data-attempted-all="true"
-        data-username="mockUsername"
-        ref={e => (this.div = e!)}
-      >
+      <div id="game-display" className="sa-game" ref={e => (this.div = e!)}>
         <canvas ref={e => (this.canvas = e!)} />
       </div>
     )