Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #16839 from edx/ari/demo-react-renderer

Browse Source 
use reactrenderer for react includes in python templates
This commit is contained in:
Ari Rizzitano
2018-01-08 16:46:07 -05:00
committed by GitHub
parent a230cf3b5c a5ab620e3e
commit 8dcfd7f163
3 changed files with 38 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
cms/static/js/features_jsx/studio/index.jsx → cms/static/js/features_jsx/studio/CourseOrLibraryListing.jsx
View File

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
function CourseOrLibraryListing(props) {
export function CourseOrLibraryListing(props) {
const allowReruns = props.allowReruns;
const linkClass = props.linkClass;
const idBase = props.idBase;
@@ -75,57 +75,3 @@ CourseOrLibraryListing.propTypes = {
items: PropTypes.arrayOf(PropTypes.object).isRequired,
linkClass: PropTypes.string.isRequired,
};
export class StudioCourseIndex {
constructor(selector, context, allowReruns) {
// The HTML element is only conditionally shown, based on number of courses.
const element = document.querySelector(selector);
if (element) {
ReactDOM.render(
<CourseOrLibraryListing
items={context}
linkClass="course-link"
idBase="course"
allowReruns={allowReruns}
/>,
element,
);
}
}
}
export class StudioArchivedIndex {
constructor(selector, context, allowReruns) {
// The HTML element is only conditionally shown, based on number of archived courses.
const element = document.querySelector(selector);
if (element) {
ReactDOM.render(
<CourseOrLibraryListing
items={context}
linkClass="course-link"
idBase="archived"
allowReruns={allowReruns}
/>,
element,
);
}
}
}
export class StudioLibraryIndex {
constructor(selector, context) {
// The HTML element is only conditionally shown, based on number of libraries.
const element = document.querySelector(selector);
if (element) {
ReactDOM.render(
<CourseOrLibraryListing
items={context}
linkClass="library-link"
idBase="library"
allowReruns={false}
/>,
document.querySelector(selector),
);
}
}
}

57
cms/templates/index.html
View File

@@ -324,7 +324,18 @@ from openedx.core.djangolib.js_utils import (
% endif
%if len(courses) > 0 or optimization_enabled:
<div class="courses courses-tab react-course-listing active"></div>
<div class="courses courses-tab react-course-listing active">
${static.renderReact(
component="CourseOrLibraryListing",
id="react-course-listing",
props={
'items': sorted(courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else ''),
'linkClass': 'course-link',
'idBase': 'course',
'allowReruns': allow_course_reruns and rerun_creator_status and course_creator_status=='granted'
}
)}
</div>
%else:
<div class="notice notice-incontext notice-instruction notice-instruction-nocourses list-notices courses-tab active">
@@ -442,11 +453,33 @@ from openedx.core.djangolib.js_utils import (
% endif
%if archived_courses:
<div class="archived-courses react-archived-course-listing archived-courses-tab"></div>
<div class="archived-courses react-archived-course-listing archived-courses-tab">
${static.renderReact(
component="CourseOrLibraryListing",
id="react-archived-course-listing",
props={
'items': sorted(archived_courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else ''),
'linkClass': 'course-link',
'idBase': 'archived',
'allowReruns': allow_course_reruns and rerun_creator_status and course_creator_status=='granted'
}
)}
</div>
%endif
%if len(libraries) > 0 or optimization_enabled:
<div class="libraries react-library-listing libraries-tab"></div>
<div class="libraries react-library-listing libraries-tab">
${static.renderReact(
component="CourseOrLibraryListing",
id="react-library-listing",
props={
'items': sorted(libraries, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else ''),
'linkClass': 'library-link',
'idBase': 'library',
'allowReruns': allow_course_reruns and rerun_creator_status and course_creator_status=='granted'
}
)}
</div>
%else:
<div class="notice notice-incontext notice-instruction notice-instruction-nocourses list-notices libraries-tab">
@@ -552,22 +585,4 @@ from openedx.core.djangolib.js_utils import (
%endif
</div>
<%static:webpack entry="StudioIndex">
var enableReruns = ${allow_course_reruns and rerun_creator_status and course_creator_status=='granted' | n, dump_js_escaped_json};
new StudioCourseIndex(
".react-course-listing",
${sorted(courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else '') | n, dump_js_escaped_json},
enableReruns
);
new StudioArchivedIndex(
".react-archived-course-listing",
${sorted(archived_courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else '') | n, dump_js_escaped_json},
enableReruns
);
new StudioLibraryIndex(
".react-library-listing",
${sorted(libraries, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else '') | n, dump_js_escaped_json}
);
</%static:webpack>
</%block>

2
webpack.common.config.js
View File

@@ -19,7 +19,7 @@ module.exports = {
// Studio
AssetsPage: './node_modules/@edx/studio-frontend/src/index.jsx',
Import: './cms/static/js/features/import/factories/import.js',
StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',
CourseOrLibraryListing: './cms/static/js/features_jsx/studio/CourseOrLibraryListing.jsx',
AccessibilityPage: './node_modules/@edx/studio-frontend/src/accessibilityIndex.jsx',
// LMS