Skip to content

Commit

Permalink
chore: update linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@leangseu-edx
leangseu-edx committed Jul 20, 2023
1 parent 291141d commit a666a1a
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 36 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ config.rules["prefer-destructuring"] = "off";
config.rules["no-prototype-builtins"] = "off";
config.rules["template-curly-spacing"] = "off";
config.rules["indent"] = "off";
config.rules["react/prop-types"] = "off";

config.globals["gettext"] = "readonly";
config.globals["ngettext"] = "readonly";
Expand Down
6 changes: 3 additions & 3 deletions openassessment/xblock/openassessmentblock.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -704,23 +704,23 @@ def _render_react_page(self, page_name, props, on_mount_func=None):
"IS_DEV_SERVER": LoadStatic.get_is_dev_server(),
}

initialize_js_func='render_react'
initialize_js_func='RenderReact'
fragment.initialize_js(initialize_js_func, js_context_dict)
return fragment
# # minified additional_js should be already included in 'make javascript'
# fragment.add_javascript_url(LoadStatic.get_url("react_base.js"))

# context_dict["page_name"] = page_name

# fragment.initialize_js("render_react", context_dict)
# fragment.initialize_js("RenderReact", context_dict)
# return fragment
# context_dict.update({
# "page_name": page_name,
# "on_mount_func": on_mount_func
# })


# return self._create_fragment(template, context_dict, initialize_js_func='render_react')
# return self._create_fragment(template, context_dict, initialize_js_func='RenderReact')

def _create_fragment(
self,
Expand Down
73 changes: 46 additions & 27 deletions openassessment/xblock/static/js/src/react/oa_base.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { Button } from '@edx/paragon';
import { useIntl } from 'react-intl';

function OABase(props) {
const { title, rubric_assessments, show_staff_area } = props;
const {
title,
rubric_assessments: rubricAssessments,
show_staff_area: showStaffArea,
} = props;
const { formatDate } = useIntl();
React.useEffect(() => {
// Callback onMount
Expand All @@ -14,44 +18,59 @@ function OABase(props) {
<div className="wrapper wrapper--xblock wrapper--openassessment theme--basic">
<div className="openassessment problem">
<div className="wrapper--grid">
{title && <h3 className="openassessment__title problem__header">{title}</h3>}
{title && (
<h3 className="openassessment__title problem__header">{title}</h3>
)}
<h1>{formatDate(new Date())}</h1>
<Button>Test</Button>
<div className="wrapper-openassessment__message">
<div className="openassessment__message message">
<div className="message__content">
<p>This assignment has several steps. In the first step, you'll provide a response to the prompt. The other steps appear below the Your Response field.</p>
<p>
This assignment has several steps. In the first step, you&apos;ll
provide a response to the prompt. The other steps appear below
the Your Response field.
</p>
</div>
</div>
</div>

<ol className="openassessment__steps">
{
rubric_assessments.map((assessment, index) => (
<li key={`assessment-${index}`} className={`${assessment.class_id} openassessment__steps__step is--loading`}>
<header className="step__header ui-slidable__container">
<h4 className="step__title">
<button className="ui-slidable" aria-expanded="false" aria-describedby="oa_step_status oa_step_deadline" disabled>
<span className="step__counter" />
<span className="wrapper--copy">
<span className="step__label">{assessment.title}</span>
</span>
</button>
</h4>
<span className="step__status">
<span id="oa_step_status" className="step__status__value">
<span className="icon fa fa-spinner fa-spin" aria-hidden="true" />
<span className="copy">Loading</span>
</span>
</span>
</header>
</li>
))
}

{rubricAssessments.map((assessment) => (
<li
key={assessment.submission_uuid}
className={`${assessment.class_id} openassessment__steps__step is--loading`}
>
<header className="step__header ui-slidable__container">
<h4 className="step__title">
<button
className="ui-slidable"
aria-expanded="false"
aria-describedby="oa_step_status oa_step_deadline"
disabled
type="button"
>
<span className="step__counter" />
<span className="wrapper--copy">
<span className="step__label">{assessment.title}</span>
</span>
</button>
</h4>
<span className="step__status">
<span id="oa_step_status" className="step__status__value">
<span
className="icon fa fa-spinner fa-spin"
aria-hidden="true"
/>
<span className="copy">Loading</span>
</span>
</span>
</header>
</li>
))}
</ol>

{show_staff_area && <div className="openassessment__staff-area" />}
{showStaffArea && <div className="openassessment__staff-area" />}
</div>
</div>
</div>
Expand Down
13 changes: 9 additions & 4 deletions ...ssment/xblock/static/js/src/react_base.js → ...sment/xblock/static/js/src/react_base.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@ import * as OA_BASE from './lms/oa_base';

import '../../sass/react.scss';

export function render_react(runtime, element, data) {
export function RenderReact(runtime, element, data) {
const reactElement = element.lastElementChild;
const { PAGE_NAME, ON_MOUNT_FUNC, IS_DEV_SERVER } = data;
const {
PAGE_NAME, ON_MOUNT_FUNC, IS_DEV_SERVER, PROPS,
} = data;

// this is necessary for webpack-dev-server to work
// eslint-disable-next-line
if (!IS_DEV_SERVER) { __webpack_public_path__ = `${window.baseUrl }dist/`; }

const Page = React.lazy(async () => {
Expand All @@ -26,17 +29,19 @@ export function render_react(runtime, element, data) {
return await import(`./react/${PAGE_NAME}`);
} catch (error) {
console.error(error);
return null;
}
});

ReactDOM.render(
<React.Suspense fallback={<Loading />}>
<IntlProvider locale="en">
<Page {...data.PROPS} onMount={() => ON_MOUNT_FUNC && OA_BASE[ON_MOUNT_FUNC](runtime, element, data)} />
<Page {...PROPS} onMount={() => ON_MOUNT_FUNC && OA_BASE[ON_MOUNT_FUNC](runtime, element, data)} />
</IntlProvider>
</React.Suspense>,
reactElement,
);
}

window.render_react = render_react;
window.RenderReact = RenderReact;
export default RenderReact;
2 changes: 1 addition & 1 deletion webpack.dev.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ Object.assign(config, {
'openassessment-ltr': path.resolve(process.cwd(), 'openassessment/xblock/static/sass/openassessment-ltr.scss'),
'openassessment-editor-textarea': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/lms/editors/oa_editor_textarea.js'),
'openassessment-editor-tinymce': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/lms/editors/oa_editor_tinymce.js'),
'react_base': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/react_base.js'),
'react_base': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/react_base.jsx'),
...getEntries('openassessment/xblock/static/js/src/react/'),
},
output: {
Expand Down
2 changes: 1 addition & 1 deletion webpack.prod.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ Object.assign(config, {
'openassessment-ltr': path.resolve(process.cwd(), 'openassessment/xblock/static/sass/openassessment-ltr.scss'),
'openassessment-editor-textarea': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/lms/editors/oa_editor_textarea.js'),
'openassessment-editor-tinymce': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/lms/editors/oa_editor_tinymce.js'),
'react_base': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/react_base.js'),
'react_base': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/react_base.jsx'),
...getEntries('openassessment/xblock/static/js/src/react/'),
},
output: {
Expand Down

0 comments on commit a666a1a

Please sign in to comment.