Add XP to Profile (#318)

* Add maxGrade and xp to state

* Pass props to Profile from State

* Remove IS_XP_IMPLEMENTED

* Unhide betcha

* Use xp and maxgrade for Profile

* Update tests and format

Author: remo5000

src/components/assessment/__tests__/__snapshots__/index.tsx.snap

@@ -23,7 +23,6 @@ import { NavLink } from 'react-router-dom'
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg'
 import AssessmentWorkspaceContainer from '../../containers/assessment/AssessmentWorkspaceContainer'
-import { IS_XP_IMPLEMENTED } from '../../utils/constants'
 import { beforeNow, getPrettyDate } from '../../utils/dateHelpers'
 import { assessmentCategoryLink, stringParamToInt } from '../../utils/paramParseHelpers'
 import {
@@ -312,16 +311,14 @@ const makeOverviewCardTitle = (
   setBetchaAssessment: (assessment: IAssessmentOverview | null) => void
 ) => (
   <div className="row listing-title">
-    <Text ellipsize={true} className={IS_XP_IMPLEMENTED ? 'col-xs-10' : 'col-xs-12'}>
+    <Text ellipsize={true} className={'col-xs-10'}>
       <h4>{overview.title}</h4>
     </Text>
-    {IS_XP_IMPLEMENTED ? (
-      <div className="col-xs-2">
-        <Popover content={makeMenu(overview, index, setBetchaAssessment)}>
-          <Button icon={IconNames.MENU} minimal={true} />
-        </Popover>
-      </div>
-    ) : null}
+    <div className="col-xs-2">
+      <Popover content={makeMenu(overview, index, setBetchaAssessment)}>
+        <Button icon={IconNames.MENU} minimal={true} />
+      </Popover>
+    </div>
   </div>
 )
 

src/components/assessment/index.tsx

@@ -1,19 +1,18 @@
-import { Classes, Dialog, NonIdealState, ProgressBar, Spinner, Tooltip } from '@blueprintjs/core'
+import { Classes, Dialog, NonIdealState, ProgressBar, Spinner } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
 import * as React from 'react'
 
 import { Role } from '../../reducers/states'
-import { IS_XP_IMPLEMENTED } from '../../utils/constants'
 
 type ProfileProps = OwnProps & StateProps
 
 export type StateProps = {
-  grade?: number
-  maxGrade?: number
-  maxXp?: number
+  grade: number
+  maxGrade: number
+  maxXp: number
   name?: string
   role?: Role
-  xp?: number
+  xp: number
 }
 
 type OwnProps = {
@@ -37,31 +36,14 @@ class Profile extends React.Component<ProfileProps> {
           <div className="progress">
             <div className="grade">
               <span className="label">Grade</span>
-              <span className="value">
-                {this.props.grade !== undefined ? this.props.grade : '???'}
-              </span>
+              <span className="value">{this.props.grade}</span>
             </div>
-            {IS_XP_IMPLEMENTED ? (
-              <>
-                {/* TODO: Move tooltip out of this tenary once max grade for a
-                  user is implemented in GET /user.
-                  https://github.com/source-academy/cadet/issues/205 */}
-                <Tooltip content="Sorry, the grade progress bar is not ready yet">
-                  <ProgressBar className="grade" animate={false} stripes={false} />
-                </Tooltip>
-                <div className="xp">
-                  <span className="label">XP</span>
-                  <span className="value">
-                    <Tooltip content="Sorry, the XP display is not ready yet">
-                      {this.props.xp ? this.props.xp : '???'}
-                    </Tooltip>
-                  </span>
-                </div>
-                <Tooltip content="Sorry, the XP progress bar is not ready yet">
-                  <ProgressBar className="xp" animate={false} stripes={false} />
-                </Tooltip>
-              </>
-            ) : null}
+            <ProgressBar className="grade" animate={false} stripes={false} />
+            <div className="xp">
+              <span className="label">XP</span>
+              <span className="value">{this.props.xp}</span>
+            </div>
+            <ProgressBar className="xp" animate={false} stripes={false} />
           </div>
         </>
       )

src/components/dropdown/Profile.tsx

@@ -3,14 +3,13 @@ import { connect, MapStateToProps } from 'react-redux'
 import Profile, { StateProps } from '../components/dropdown/Profile'
 import { IState } from '../reducers/states'
 
-// TODO: connect to actual state once backend implements these features
 const mapStateToProps: MapStateToProps<StateProps, {}, IState> = state => ({
   grade: state.session.grade,
-  maxGrade: undefined,
-  maxXp: undefined,
+  maxGrade: state.session.maxGrade,
+  maxXp: state.session.maxXp,
   name: state.session.name,
   role: state.session.role,
-  xp: undefined
+  xp: state.session.xp
 })
 
 export default connect(mapStateToProps)(Profile)

src/containers/ProfileContainer.ts

@@ -78,10 +78,13 @@ export interface ISessionState {
   readonly gradingOverviews?: GradingOverview[]
   readonly gradings: Map<number, Grading>
   readonly historyHelper: HistoryHelper
+  readonly maxGrade: number
+  readonly maxXp: number
   readonly refreshToken?: string
   readonly role?: Role
   readonly story?: Story
   readonly name?: string
+  readonly xp: number
 }
 
 type ReplHistory = {
@@ -247,8 +250,11 @@ export const defaultSession: ISessionState = {
     lastAcademyLocations: [null, null],
     lastGeneralLocations: [null, null]
   },
+  maxGrade: 0,
+  maxXp: 0,
   refreshToken: undefined,
-  name: undefined
+  name: undefined,
+  xp: 0
 }
 
 export const defaultState: IState = {

src/reducers/states.ts

@@ -2,11 +2,6 @@ import * as dotenv from 'dotenv'
 
 dotenv.config()
 
-/* Remove this variable entirely when implemented. DO NOT just set to true;
- * also check that the CSS looks acceptable, since there will be className
- * changes. */
-export const IS_XP_IMPLEMENTED = false
-
 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