diff --git a/src/components/assessment/__tests__/index.tsx b/src/components/assessment/__tests__/index.tsx index ee97b85a73..bf001cae49 100644 --- a/src/components/assessment/__tests__/index.tsx +++ b/src/components/assessment/__tests__/index.tsx @@ -5,13 +5,14 @@ import { MemoryRouter } from 'react-router' import Assessment, { IAssessmentProps } from '../' import { mockAssessmentOverviews } from '../../../mocks/assessmentAPI' import { mockRouterProps } from '../../../mocks/components' -import { AssessmentCategories } from '../assessmentShape' +import { AssessmentCategories, IAssessment } from '../assessmentShape' const defaultProps: IAssessmentProps = { assessmentCategory: AssessmentCategories.Mission, assessmentOverviews: undefined, handleAssessmentOverviewFetch: () => {}, handleSubmitAssessment: (id: number) => {}, + newAssessment: (assessment: IAssessment) => {}, isStudent: false, ...mockRouterProps('/academy/missions', {}) } diff --git a/src/components/assessment/index.tsx b/src/components/assessment/index.tsx index c640ec6374..6f98e0dc8c 100644 --- a/src/components/assessment/index.tsx +++ b/src/components/assessment/index.tsx @@ -28,6 +28,7 @@ import { AssessmentCategory, AssessmentStatuses, GradingStatuses, + IAssessment, IAssessmentOverview } from '../assessment/assessmentShape' import { OwnProps as AssessmentProps } from '../assessment/AssessmentWorkspace' @@ -35,6 +36,7 @@ import { controlButton } from '../commons' import ContentDisplay from '../commons/ContentDisplay' import ImportFromFileComponent from '../commons/ImportFromFileComponent' import Markdown from '../commons/Markdown' +// import { AnyAction } from 'redux'; const DEFAULT_QUESTION_ID: number = 0 @@ -52,6 +54,7 @@ export interface IAssessmentProps export interface IDispatchProps { handleAssessmentOverviewFetch: () => void handleSubmitAssessment: (id: number) => void + newAssessment: (assessment: IAssessment) => void } export interface IOwnProps { @@ -68,6 +71,7 @@ type State = { showClosedAssessments: boolean showOpenedAssessments: boolean showUpcomingAssessments: boolean + editOverview: string } class Assessment extends React.Component { @@ -80,17 +84,18 @@ class Assessment extends React.Component { betchaAssessment: null, showClosedAssessments: false, showOpenedAssessments: true, - showUpcomingAssessments: true + showUpcomingAssessments: true, + editOverview: '' } } public render() { const assessmentId: number | null = stringParamToInt(this.props.match.params.assessmentId) const questionId: number = - stringParamToInt(this.props.match.params.questionId) || DEFAULT_QUESTION_ID; + stringParamToInt(this.props.match.params.questionId) || DEFAULT_QUESTION_ID // If mission for testing is to render, create workspace - const editingOverview = localStorage.getItem("MissionEditingOverviewSA"); + const editingOverview = localStorage.getItem('MissionEditingOverviewSA') if (assessmentId === -1 && editingOverview) { const overview = JSON.parse(editingOverview) const assessmentProps: AssessmentProps = { @@ -150,15 +155,15 @@ class Assessment extends React.Component { ) /** Mission editing card, stored in local storage and have index of -1. */ - const missionEditingCard = editingOverview ? - makeOverviewCard( - JSON.parse(editingOverview), - -1, - this.setBetchaAssessment, - true, - false - ) : - null; + const missionEditingCard = editingOverview + ? this.makeEditingOverviewCard( + JSON.parse(editingOverview), + -1, + this.setBetchaAssessment, + true, + false + ) + : null /** Render cards */ const upcomingCardsCollapsible = @@ -295,6 +300,110 @@ class Assessment extends React.Component { this.setBetchaAssessmentNull() } } + + private editOverview = (field: string, value: any) => { + const overviewString: string | null = localStorage.getItem('MissionEditingOverviewSA') + if (overviewString) { + const overview = JSON.parse(overviewString) + overview[field] = value + localStorage.setItem('MissionEditingOverviewSA', JSON.stringify(overview)) + this.props.newAssessment(overview) + } + } + + private handleEditOverview = (field: string) => (e: any) => + this.editOverview(field, e.target.value) + private toggleEditField = (field: string) => (e: any) => { + this.setState({ editOverview: field }) + } + + private makeEditingOverviewCard = ( + overview: IAssessmentOverview, + index: number, + setBetchaAssessment: (assessment: IAssessmentOverview | null) => void, + renderAttemptButton: boolean, + renderGradingStatus: boolean + ) => ( +
+ You can edit this card + +
+ +
+
+ {this.makeEditingOverviewCardTitle( + overview, + index, + setBetchaAssessment, + renderGradingStatus + )} +
+
+ {' '} + {beforeNow(overview.openAt) + ? `Grade: ${overview.grade} / ${overview.maxGrade}` + : `Max Grade: ${overview.maxGrade}`}{' '} +
+
+
+
+ {' '} + {beforeNow(overview.openAt) + ? `XP: ${overview.xp} / ${overview.maxXp}` + : `Max XP: ${overview.maxXp}`}{' '} +
+
+
+ {this.state.editOverview === 'shortSummary' ? ( + + ) : ( + + )} +
+
+ + +
+ {this.state.editOverview === "date" + ? [, + ] + : (beforeNow(overview.openAt) + ? `Due: ${getPrettyDate(overview.closeAt)}` + : `Opens at: ${getPrettyDate(overview.openAt)}`)} +
+
+ {renderAttemptButton ? makeOverviewCardButton(overview) : null} +
+
+
+
+ ) + + private makeEditingOverviewCardTitle = ( + overview: IAssessmentOverview, + index: number, + setBetchaAssessment: (assessment: IAssessmentOverview | null) => void, + renderGradingStatus: boolean + ) => ( +
+ +

+ { this.state.editOverview === 'title' + ? + : overview.title }{' '} + {renderGradingStatus ? makeGradingStatus(overview.gradingStatus) : null} +

+
+
{makeSubmissionButton(overview, index, setBetchaAssessment)}
+
+ ) } /** diff --git a/src/containers/assessment/index.ts b/src/containers/assessment/index.ts index f1cd9405c7..8de20110ee 100644 --- a/src/containers/assessment/index.ts +++ b/src/containers/assessment/index.ts @@ -2,7 +2,7 @@ import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux' import { withRouter } from 'react-router' import { bindActionCreators, Dispatch } from 'redux' -import { fetchAssessmentOverviews, submitAssessment } from '../../actions/session' +import { fetchAssessmentOverviews, submitAssessment, updateAssessment } from '../../actions/session' import Assessment, { IDispatchProps, IOwnProps, IStateProps } from '../../components/assessment' import { IAssessmentOverview } from '../../components/assessment/assessmentShape' import { IState, Role } from '../../reducers/states' @@ -23,7 +23,8 @@ const mapDispatchToProps: MapDispatchToProps = (dispatch: Di bindActionCreators( { handleAssessmentOverviewFetch: fetchAssessmentOverviews, - handleSubmitAssessment: submitAssessment + handleSubmitAssessment: submitAssessment, + newAssessment: updateAssessment, }, dispatch )