feat: working react page with implementation of _render_react_page

openassessment/templates/openassessmentblock/react_template.html

@@ -0,0 +1 @@
+<div></div>

openassessment/xblock/load_static.py

@@ -28,41 +28,40 @@ class LoadStatic:
     """
 
     _manifest = {}
-    _base_url = ''
+    _is_dev_server = False
     _is_loaded = False
 
     @staticmethod
     def reload_manifest():
         """
         Reload from manifest file
         """
-        root_url, base_url = '', '/static/dist/'
-        base_url_override = ''
-
-        if hasattr(settings, 'LMS_ROOT_URL'):
-            root_url = settings.LMS_ROOT_URL
-        else:
-            logger.error('LMS_ROOT_URL is undefined')
-
+        # comment this out while developing
+        if (LoadStatic._is_loaded):
+            return
         try:
             json_data = resource_string(__name__, 'static/dist/manifest.json').decode("utf8")
             LoadStatic._manifest = json.loads(json_data)
-            base_url_override = LoadStatic._manifest.get('base_url', None)
+            LoadStatic._is_dev_server = LoadStatic._manifest.get('is_dev_server', False)
             LoadStatic._is_loaded = True
         except OSError:
             logger.error('Cannot find static/dist/manifest.json')
-        finally:
-            if base_url_override and urlparse(base_url_override).scheme:
-                LoadStatic._base_url = base_url_override
-            else:
-                LoadStatic._base_url = urljoin(root_url, base_url)
 
     @staticmethod
     def get_url(key):
         """
         get url from key
         """
-        if not LoadStatic._is_loaded:
-            LoadStatic.reload_manifest()
+        LoadStatic.reload_manifest()
         url = LoadStatic._manifest[key] if key in LoadStatic._manifest else key
-        return urljoin(LoadStatic._base_url, url)
+        if LoadStatic._is_dev_server:
+            return url
+        return urljoin(settings.STATIC_URL, 'dist', url)
+
+    @staticmethod
+    def get_is_dev_server():
+        """
+        get is_dev_server
+        """
+        LoadStatic.reload_manifest()
+        return LoadStatic._is_dev_server

openassessment/xblock/openassessmentblock.py

@@ -553,8 +553,9 @@ def student_view(self, context=None):  # pylint: disable=unused-argument
             "rubric_assessments": ui_models,
             "show_staff_area": self.is_course_staff and not self.in_studio_preview,
         }
-        template = get_template("openassessmentblock/oa_base.html")
-        return self._create_fragment(template, context_dict, initialize_js_func='OpenAssessmentBlock')
+        # template = get_template("openassessmentblock/oa_base.html")
+        # return self._create_fragment(template, context_dict, initialize_js_func='OpenAssessmentBlock')
+        return self._render_react_page('oa_base', context_dict, on_mount_func='OpenAssessmentBlock')
 
     def ora_blocks_listing_view(self, context=None):
         """This view is used in the Open Response Assessment tab in the LMS Instructor Dashboard
@@ -664,6 +665,63 @@ def waiting_step_details_view(self, context=None):  # pylint: disable=unused-arg
             additional_js_context=context_dict,
         )
 
+    def _render_react_page(self, page_name, props, on_mount_func=None):
+        template = get_template("openassessmentblock/react_template.html")
+        fragment = Fragment(template.render())
+
+        # if additional_css is None:
+        #     additional_css = []
+        # if additional_js is None:
+        #     additional_js = []
+
+        i18n_service = self.runtime.service(self, 'i18n')
+        if hasattr(i18n_service, 'get_language_bidi') and i18n_service.get_language_bidi():
+            css_url = LoadStatic.get_url("openassessment-rtl.css")
+        else:
+            css_url = LoadStatic.get_url("openassessment-ltr.css")
+
+        # TODO: load CSS and JavaScript as URLs once they can be served by the CDN
+        # for css in additional_css:
+        #     fragment.add_css_url(css)
+        fragment.add_css_url(css_url)
+        fragment.add_css_url(LoadStatic.get_url("react_base.css"))
+
+        # minified additional_js should be already included in 'make javascript'
+        fragment.add_javascript_url(LoadStatic.get_url("react_base.js"))
+
+        js_context_dict = {
+            "ALLOWED_IMAGE_MIME_TYPES": self.ALLOWED_IMAGE_MIME_TYPES,
+            "ALLOWED_FILE_MIME_TYPES": self.ALLOWED_FILE_MIME_TYPES,
+            "FILE_EXT_BLACK_LIST": self.FILE_EXT_BLACK_LIST,
+            "FILE_TYPE_WHITE_LIST": self.white_listed_file_types,
+            "MAXIMUM_FILE_UPLOAD_COUNT": self.MAX_FILES_COUNT,
+            "TEAM_ASSIGNMENT": self.is_team_assignment(),
+            "AVAILABLE_EDITORS": AVAILABLE_EDITORS,
+            "TEXT_RESPONSE_EDITOR": self.text_response_editor,
+            "PROPS": props,
+            "PAGE_NAME": page_name,
+            "ON_MOUNT_FUNC": on_mount_func,
+            "IS_DEV_SERVER": LoadStatic.get_is_dev_server(),
+        }
+
+        initialize_js_func='render_react'
+        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)
+        # 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')
+
     def _create_fragment(
         self,
         template,

openassessment/xblock/static/dist/manifest.json

@@ -1,22 +1,19 @@
 {
-  "base_url": "/static/dist",
-  "openassessment-editor-textarea.js": "/openassessment-editor-textarea.b8f866ba96a1d2ad92a4.js",
-  "openassessment-editor-textarea.js.map": "/openassessment-editor-textarea.b8f866ba96a1d2ad92a4.js.map",
-  "openassessment-editor-tinymce.js": "/openassessment-editor-tinymce.2cc0cab55c3be729265e.js",
-  "openassessment-editor-tinymce.js.map": "/openassessment-editor-tinymce.2cc0cab55c3be729265e.js.map",
-  "openassessment-lms.css": "/openassessment-lms.967dad15c001a5dc6a5e.css",
-  "openassessment-lms.js": "/openassessment-lms.967dad15c001a5dc6a5e.js",
-  "openassessment-lms.css.map": "/openassessment-lms.967dad15c001a5dc6a5e.css.map",
-  "openassessment-lms.js.map": "/openassessment-lms.967dad15c001a5dc6a5e.js.map",
-  "openassessment-ltr.css": "/openassessment-ltr.b9eeb00dfc7524a80658.css",
-  "openassessment-ltr.js": "/openassessment-ltr.b9eeb00dfc7524a80658.js",
-  "openassessment-ltr.css.map": "/openassessment-ltr.b9eeb00dfc7524a80658.css.map",
-  "openassessment-ltr.js.map": "/openassessment-ltr.b9eeb00dfc7524a80658.js.map",
-  "openassessment-rtl.css": "/openassessment-rtl.ef543a27286a069bd958.css",
-  "openassessment-rtl.js": "/openassessment-rtl.ef543a27286a069bd958.js",
-  "openassessment-rtl.css.map": "/openassessment-rtl.ef543a27286a069bd958.css.map",
-  "openassessment-rtl.js.map": "/openassessment-rtl.ef543a27286a069bd958.js.map",
-  "openassessment-studio.js": "/openassessment-studio.13c817d25360969539ff.js",
-  "openassessment-studio.js.map": "/openassessment-studio.13c817d25360969539ff.js.map",
-  "default-avatar.svg": "/95ec738c0b7faac5b5c9126794446bbd.svg"
+  "is_dev_server": "true",
+  "0.js": "http://localhost:18001/0.js",
+  "loading.js": "http://localhost:18001/loading.js",
+  "oa_base.css": "http://localhost:18001/oa_base.css",
+  "oa_base.js": "http://localhost:18001/oa_base.js",
+  "openassessment-editor-textarea.js": "http://localhost:18001/openassessment-editor-textarea.js",
+  "openassessment-editor-tinymce.js": "http://localhost:18001/openassessment-editor-tinymce.js",
+  "openassessment-lms.css": "http://localhost:18001/openassessment-lms.css",
+  "openassessment-lms.js": "http://localhost:18001/openassessment-lms.js",
+  "openassessment-ltr.css": "http://localhost:18001/openassessment-ltr.css",
+  "openassessment-ltr.js": "http://localhost:18001/openassessment-ltr.js",
+  "openassessment-rtl.css": "http://localhost:18001/openassessment-rtl.css",
+  "openassessment-rtl.js": "http://localhost:18001/openassessment-rtl.js",
+  "openassessment-studio.js": "http://localhost:18001/openassessment-studio.js",
+  "react_base.css": "http://localhost:18001/react_base.css",
+  "react_base.js": "http://localhost:18001/react_base.js",
+  "default-avatar.svg": "http://localhost:18001/95ec738c0b7faac5b5c9126794446bbd.svg"
 }