From 96bb8a03e58e2abf201210fbbacce82795009b1b Mon Sep 17 00:00:00 2001 From: Leangseu Kim Date: Wed, 29 Sep 2021 10:57:09 -0400 Subject: [PATCH] add live view breadcrumb add courseId to courseMetadata add locationId constant update to requested course id add ora url next to the title --- src/containers/ListView/ListView.scss | 3 -- .../ListView/ListViewBreadcrumb.jsx | 45 +++++++++++++++++++ src/containers/ListView/index.jsx | 7 ++- src/data/constants/app.js | 1 + src/data/reducers/app.js | 1 + src/data/selectors/app.js | 1 + src/data/services/lms/api.js | 2 +- src/data/services/lms/fakeData/course.js | 3 +- src/data/thunkActions/app.js | 3 +- 9 files changed, 57 insertions(+), 9 deletions(-) create mode 100644 src/containers/ListView/ListViewBreadcrumb.jsx diff --git a/src/containers/ListView/ListView.scss b/src/containers/ListView/ListView.scss index f3e5801..e69de29 100644 --- a/src/containers/ListView/ListView.scss +++ b/src/containers/ListView/ListView.scss @@ -1,3 +0,0 @@ -#ora-esg-list-view { - padding: 20px; -} diff --git a/src/containers/ListView/ListViewBreadcrumb.jsx b/src/containers/ListView/ListViewBreadcrumb.jsx new file mode 100644 index 0000000..8786dbd --- /dev/null +++ b/src/containers/ListView/ListViewBreadcrumb.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +import { ArrowBack } from '@edx/paragon/icons'; +import { Hyperlink } from '@edx/paragon' + +import { locationId } from '../../data/constants/app'; +import selectors from 'data/selectors'; + +/** + * + */ +export const ListViewBreadcrumb = ({ courseId, oraName }) => { + const openResponseUrl = `${process.env.LMS_BASE_URL}/courses/${courseId}/instructor#view-open_response_assessment`; + const oraUrl = `${process.env.LMS_BASE_URL}/courses/${courseId}/jump_to/${locationId}`; + return ( + <> + + + Back to all open responses + +

{oraName}

+ + ); +}; +ListViewBreadcrumb.defaultProps = { + courseId: '', +}; +ListViewBreadcrumb.propTypes = { + courseId: PropTypes.string, +}; + +export const mapStateToProps = (state) => ({ + courseId: selectors.app.courseId(state), + oraName: selectors.app.oraName(state), +}); + +export const mapDispatchToProps = { +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ListViewBreadcrumb); \ No newline at end of file diff --git a/src/containers/ListView/index.jsx b/src/containers/ListView/index.jsx index d414a62..4478410 100644 --- a/src/containers/ListView/index.jsx +++ b/src/containers/ListView/index.jsx @@ -6,6 +6,7 @@ import { DataTable, TextFilter, MultiSelectDropdownFilter, + Container, } from '@edx/paragon'; import { @@ -17,6 +18,7 @@ import thunkActions from 'data/thunkActions'; import StatusBadge from 'components/StatusBadge'; import ReviewModal from 'containers/ReviewModal'; +import ListViewBreadcrumb from './ListViewBreadcrumb'; import './ListView.scss'; const gradeStatusOptions = Object.keys(gradingStatusDisplay).map(key => ({ @@ -58,7 +60,8 @@ export class ListView extends React.Component { } return ( -
+ + -
+ ); } } diff --git a/src/data/constants/app.js b/src/data/constants/app.js index 39e80a4..f59fa3a 100644 --- a/src/data/constants/app.js +++ b/src/data/constants/app.js @@ -2,3 +2,4 @@ import { getConfig } from '@edx/frontend-platform'; // eslint-disable-next-line import/prefer-default-export export const routePath = `${getConfig().PUBLIC_PATH}:courseId`; +export const locationId = window.location.pathname.slice(1) \ No newline at end of file diff --git a/src/data/reducers/app.js b/src/data/reducers/app.js index aedfe47..4d8760e 100644 --- a/src/data/reducers/app.js +++ b/src/data/reducers/app.js @@ -13,6 +13,7 @@ const initialState = { name: '', number: '', org: '', + courseId: '', }, showReview: false, showRubric: false, diff --git a/src/data/selectors/app.js b/src/data/selectors/app.js index 9368ca1..b6c1de3 100644 --- a/src/data/selectors/app.js +++ b/src/data/selectors/app.js @@ -9,6 +9,7 @@ export const simpleSelectors = { showRubric: state => state.app.showRubric, grading: state => state.app.grading, courseMetadata: state => state.app.courseMetadata, + courseId: state => state.app.courseMetadata.courseId, oraName: state => state.app.oraMetadata.name, oraPrompt: state => state.app.oraMetadata.prompt, oraTypes: state => state.app.oraMetadata.type, diff --git a/src/data/services/lms/api.js b/src/data/services/lms/api.js index 388824f..429c8a1 100644 --- a/src/data/services/lms/api.js +++ b/src/data/services/lms/api.js @@ -23,7 +23,7 @@ const mockFailure = (returnValFn) => (...args) => ( * get('/api/initialize', { ora_location, course_id? }) * @return { * oraMetadata: { name, prompt, type ('individual' vs 'team') }, - * courseMetadata: { courseOrg, courseName, courseNumber }, + * courseMetadata: { courseOrg, courseName, courseNumber, courseId }, * submissions: { * [submissionId]: { * id: , (not currently used) diff --git a/src/data/services/lms/fakeData/course.js b/src/data/services/lms/fakeData/course.js index 28b2b00..99b1338 100644 --- a/src/data/services/lms/fakeData/course.js +++ b/src/data/services/lms/fakeData/course.js @@ -1,5 +1,6 @@ export const org = 'AuroraU'; export const number = '101'; export const title = 'Time Travel 101'; +export const courseId = 'course-v1:Foo+TT101+R0'; -export default { org, number, title }; +export default { org, number, title, courseId }; diff --git a/src/data/thunkActions/app.js b/src/data/thunkActions/app.js index 13c8236..78c9802 100644 --- a/src/data/thunkActions/app.js +++ b/src/data/thunkActions/app.js @@ -2,8 +2,7 @@ import { StrictDict } from 'utils'; import actions from 'data/actions'; import api from 'data/services/lms/api'; - -const locationId = window.location.pathname.slice(1); +import { locationId } from '../constants/app'; /** * initialize the app, loading ora and course metadata from the api, and loading the initial