feat: add courseware search feature to course home

package.json

@@ -32,8 +32,8 @@
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-component-footer": "11.6.3",
     "@edx/frontend-component-header": "3.6.4",
-    "@edx/frontend-lib-special-exams": "2.10.0",
-    "@edx/frontend-platform": "4.1.0",
+    "@edx/frontend-lib-special-exams": "~2.8.0",
+    "@edx/frontend-platform": "3.4.1",
     "@edx/paragon": "20.28.4",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -45,7 +45,6 @@
     "classnames": "2.3.2",
     "core-js": "3.22.2",
     "history": "5.3.0",
-    "html-react-parser": "^3.0.15",
     "js-cookie": "3.0.1",
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.8.1",

src/course-home/data/api.js

@@ -420,3 +420,10 @@ export async function unsubscribeFromCourseGoal(token) {
   return getAuthenticatedHttpClient().post(url.href)
     .then(res => camelCaseObject(res));
 }
+
+export async function searchCourseContentFromAPI(courseId, searchKeyword) {
+  const url = new URL(`${getConfig().LMS_BASE_URL}/search/${courseId}`);
+  const formData = `search_string=${searchKeyword}&page_size=20&page_index=0`;
+  return getAuthenticatedHttpClient().post(url.href, formData)
+    .then(res => camelCaseObject(res));
+}

src/course-home/data/thunks.js

@@ -12,6 +12,7 @@ import {
   postDismissWelcomeMessage,
   postRequestCert,
   getLiveTabIframe,
+  searchCourseContentFromAPI,
 } from './api';
 
 import {
@@ -139,3 +140,18 @@ export function processEvent(eventData, getTabData) {
     }
   };
 }
+
+export function searchCourseContent(courseId, searchKeyword) {
+  return async (dispatch) => {
+    searchCourseContentFromAPI(courseId, searchKeyword).then(response => {
+      const { data } = response;
+      dispatch(addModel({
+        modelType: 'contentSearchResults',
+        model: {
+          id: courseId,
+          ...data,
+        },
+      }));
+    });
+  };
+}

src/course-home/outline-tab/OutlineTab.jsx

@@ -28,6 +28,7 @@ import { useModel } from '../../generic/model-store';
 import WelcomeMessage from './widgets/WelcomeMessage';
 import ProctoringInfoPanel from './widgets/ProctoringInfoPanel';
 import AccountActivationAlert from '../../alerts/logistration-alert/AccountActivationAlert';
+import CoursewareSearch from './widgets/CoursewareSearch';
 
 const OutlineTab = ({ intl }) => {
   const {
@@ -157,6 +158,7 @@ const OutlineTab = ({ intl }) => {
           )}
           <StartOrResumeCourseCard />
           <WelcomeMessage courseId={courseId} />
+          <CoursewareSearch courseId={courseId} />
           {rootCourseId && (
             <>
               <div className="row w-100 m-0 mb-3 justify-content-end">

src/course-home/outline-tab/messages.js

@@ -331,6 +331,16 @@ const messages = defineMessages({
     defaultMessage: 'Onboarding Past Due',
     description: 'Text that show when the deadline of proctortrack onboarding exam has passed, it appears on button that start the onboarding exam however for this case the button is disabled for obvious reason',
   },
+  coursewareSearchInputLabel: {
+    id: 'learning.coursewareSearch.inputLabel',
+    defaultMessage: 'Course Content Search',
+    description: 'Search input label',
+  },
+  coursewareSearchButtonLabel: {
+    id: 'learning.coursewareSearch.buttonLabel',
+    defaultMessage: 'Search',
+    description: 'Search button label',
+  },
 });
 
 export default messages;

src/course-home/outline-tab/widgets/CoursewareSearch.jsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Form,
+  Container,
+  Hyperlink,
+  Layout,
+} from '@edx/paragon';
+import { useDispatch } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { getConfig } from '@edx/frontend-platform';
+import messages from '../messages';
+import { useModel, updateModel } from '../../../generic/model-store';
+import { searchCourseContent } from '../../data/thunks';
+
+const CoursewareSearch = ({ courseId, intl }) => {
+  const {
+    org,
+  } = useModel('courseHomeMeta', courseId);
+
+  const eventProperties = {
+    org_key: org,
+    courserun_key: courseId,
+  };
+
+  const dispatch = useDispatch();
+
+  const {
+    results,
+    took,
+  } = useModel('contentSearchResults', courseId);
+
+  const [searchKeyword, setSearchKeyword] = useState('');
+
+  useEffect(() => {
+    if (!searchKeyword) {
+      dispatch(updateModel({
+        modelType: 'contentSearchResults',
+        model: {
+          id: courseId,
+          results: [],
+          took: false,
+        },
+      }));
+    }
+  }, [searchKeyword]);
+
+  const searchClick = () => {
+    sendTrackingLogEvent('edx.course.home.courseware_search.clicked', {
+      ...eventProperties,
+      event_type: 'search',
+      keyword: searchKeyword,
+    });
+    dispatch(searchCourseContent(courseId, searchKeyword));
+  };
+
+  return (
+    <div>
+      <Form.Group>
+        <Form.Control
+          className="float-left w-75"
+          floatingLabel={intl.formatMessage(messages.coursewareSearchInputLabel)}
+          value={searchKeyword}
+          onChange={(e) => setSearchKeyword(e.target.value)}
+        />
+        <Button
+          variant="primary"
+          className="float-left"
+          onClick={() => searchClick()}
+        >
+          {intl.formatMessage(messages.coursewareSearchButtonLabel)}
+        </Button>
+        <div className="clearfix" />
+      </Form.Group>
+      {(took && results.length === 0) && (
+        <Container size="xl">
+          {
+            `Could not find any component matching "${searchKeyword}"`
+          }
+        </Container>
+      )}
+      {(took && results.length > 0) && results.map(resultItem => (
+        <Container
+          size="xl"
+        >
+          <Layout>
+            <Layout.Element>
+              <Hyperlink
+                destination={`${getConfig().LMS_BASE_URL}${resultItem.data.url}`}
+              >
+                { resultItem.data.location.join('/') }
+              </Hyperlink>
+            </Layout.Element>
+          </Layout>
+        </Container>
+      ))}
+    </div>
+  );
+};
+
+CoursewareSearch.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearch);

src/courseware/course/sequence/Unit.jsx

@@ -0,0 +1,257 @@
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext, ErrorPage } from '@edx/frontend-platform/react';
+import { Modal } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import React, {
+  Suspense, useCallback, useContext, useEffect, useLayoutEffect, useState,
+} from 'react';
+import { useDispatch } from 'react-redux';
+import { processEvent } from '../../../course-home/data/thunks';
+import { useEventListener } from '../../../generic/hooks';
+import { useModel } from '../../../generic/model-store';
+import PageLoading from '../../../generic/PageLoading';
+import { fetchCourse } from '../../data';
+import BookmarkButton from '../bookmark/BookmarkButton';
+import ShareButton from '../share/ShareButton';
+import messages from './messages';
+
+const HonorCode = React.lazy(() => import('./honor-code'));
+const LockPaywall = React.lazy(() => import('./lock-paywall'));
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+const IFRAME_FEATURE_POLICY = (
+  'microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
+/**
+ * We discovered an error in Firefox where - upon iframe load - React would cease to call any
+ * useEffect hooks until the user interacts with the page again.  This is particularly confusing
+ * when navigating between sequences, as the UI partially updates leaving the user in a nebulous
+ * state.
+ *
+ * We were able to solve this error by using a layout effect to update some component state, which
+ * executes synchronously on render.  Somehow this forces React to continue it's lifecycle
+ * immediately, rather than waiting for user interaction.  This layout effect could be anywhere in
+ * the parent tree, as far as we can tell - we chose to add a conspicuously 'load bearing' (that's
+ * a joke) one here so it wouldn't be accidentally removed elsewhere.
+ *
+ * If we remove this hook when one of these happens:
+ * 1. React figures out that there's an issue here and fixes a bug.
+ * 2. We cease to use an iframe for unit rendering.
+ * 3. Firefox figures out that there's an issue in their iframe loading and fixes a bug.
+ * 4. We stop supporting Firefox.
+ * 5. An enterprising engineer decides to create a repo that reproduces the problem, submits it to
+ *    Firefox/React for review, and they kindly help us figure out what in the world is happening
+ *    so  we can fix it.
+ *
+ * This hook depends on the unit id just to make sure it re-evaluates whenever the ID changes.  If
+ * we change whether or not the Unit component is re-mounted when the unit ID changes, this may
+ * become important, as this hook will otherwise only evaluate the useLayoutEffect once.
+ */
+function useLoadBearingHook(id) {
+  const setValue = useState(0)[1];
+  useLayoutEffect(() => {
+    setValue(currentValue => currentValue + 1);
+  }, [id]);
+}
+
+export function sendUrlHashToFrame(frame) {
+  const { hash } = window.location;
+  if (hash) {
+    // The url hash will be sent to LMS-served iframe in order to find the location of the
+    // hash within the iframe.
+    frame.contentWindow.postMessage({ hashName: hash }, `${getConfig().LMS_BASE_URL}`);
+  }
+}
+
+const Unit = ({
+  courseId,
+  format,
+  onLoaded,
+  id,
+  intl,
+}) => {
+  const { authenticatedUser } = useContext(AppContext);
+  const view = authenticatedUser ? 'student_view' : 'public_view';
+  let iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0&recheck_access=1&view=${view}`;
+  if (format) {
+    iframeUrl += `&format=${format}`;
+  }
+
+  const [iframeHeight, setIframeHeight] = useState(0);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [showError, setShowError] = useState(false);
+  const [modalOptions, setModalOptions] = useState({ open: false });
+  const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
+
+  const unit = useModel('units', id);
+  const course = useModel('coursewareMeta', courseId);
+  const {
+    contentTypeGatingEnabled,
+    userNeedsIntegritySignature,
+  } = course;
+
+  const dispatch = useDispatch();
+  // Do not remove this hook.  See function description.
+  useLoadBearingHook(id);
+
+  useEffect(() => {
+    if (userNeedsIntegritySignature && unit.graded) {
+      setShouldDisplayHonorCode(true);
+    } else {
+      setShouldDisplayHonorCode(false);
+    }
+  }, [userNeedsIntegritySignature]);
+
+  const receiveMessage = useCallback(({ data }) => {
+    const {
+      type,
+      payload,
+    } = data;
+    if (type === 'plugin.resize') {
+      setIframeHeight(payload.height);
+      if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
+        setHasLoaded(true);
+        if (onLoaded) {
+          onLoaded();
+        }
+      }
+    } else if (type === 'plugin.modal') {
+      payload.open = true;
+      setModalOptions(payload);
+    } else if (data.offset) {
+      // We listen for this message from LMS to know when the page needs to
+      // be scrolled to another location on the page.
+      window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
+    }
+  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
+  useEventListener('message', receiveMessage);
+  useEffect(() => {
+    sendUrlHashToFrame(document.getElementById('unit-iframe'));
+  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
+
+  return (
+    <div className="unit">
+      <h1 className="mb-0 h3">{unit.title}</h1>
+      <h2 className="sr-only">{intl.formatMessage(messages.headerPlaceholder)}</h2>
+      <BookmarkButton
+        unitId={unit.id}
+        isBookmarked={unit.bookmarked}
+        isProcessing={unit.bookmarkedUpdateState === 'loading'}
+      />
+      {/* TODO: social share exp. Need to remove later */}
+      {(window.expSocialShareAboutUrls && window.expSocialShareAboutUrls[unit.id] !== undefined) && (
+        <ShareButton url={window.expSocialShareAboutUrls[unit.id]} />
+      )}
+      {contentTypeGatingEnabled && unit.containsContentTypeGatedContent && (
+        <Suspense
+          fallback={(
+            <PageLoading
+              srMessage={intl.formatMessage(messages.loadingLockedContent)}
+            />
+          )}
+        >
+          <LockPaywall courseId={courseId} />
+        </Suspense>
+      )}
+      {shouldDisplayHonorCode && (
+        <Suspense
+          fallback={(
+            <PageLoading
+              srMessage={intl.formatMessage(messages.loadingHonorCode)}
+            />
+          )}
+        >
+          <HonorCode courseId={courseId} />
+        </Suspense>
+      )}
+      {!shouldDisplayHonorCode && !hasLoaded && !showError && (
+        <PageLoading
+          srMessage={intl.formatMessage(messages.loadingSequence)}
+        />
+      )}
+      {!shouldDisplayHonorCode && !hasLoaded && showError && (
+        <ErrorPage />
+      )}
+      {modalOptions.open && (
+        <Modal
+          body={(
+            <>
+              {modalOptions.body
+                ? <div className="unit-modal">{ modalOptions.body }</div>
+                : (
+                  <iframe
+                    title={modalOptions.title}
+                    allow={IFRAME_FEATURE_POLICY}
+                    frameBorder="0"
+                    src={modalOptions.url}
+                    style={{
+                      width: '100%',
+                      height: '100vh',
+                    }}
+                  />
+                )}
+            </>
+          )}
+          onClose={() => { setModalOptions({ open: false }); }}
+          open
+          dialogClassName="modal-lti"
+        />
+      )}
+      {!shouldDisplayHonorCode && (
+        <div className="unit-iframe-wrapper">
+          <iframe
+            id="unit-iframe"
+            title={unit.title}
+            src={iframeUrl}
+            allow={IFRAME_FEATURE_POLICY}
+            allowFullScreen
+            height={iframeHeight}
+            scrolling="no"
+            referrerPolicy="origin"
+            onLoad={() => {
+              // onLoad *should* only fire after everything in the iframe has finished its own load events.
+              // Which means that the plugin.resize message (which calls setHasLoaded above) will have fired already
+              // for a successful load. If it *has not fired*, we are in an error state. For example, the backend
+              // could have given us a 4xx or 5xx response.
+              if (!hasLoaded) {
+                setShowError(true);
+              }
+
+              window.onmessage = (e) => {
+                if (e.data.event_name) {
+                  dispatch(processEvent(e.data, fetchCourse));
+                }
+              };
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+Unit.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  format: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  onLoaded: PropTypes.func,
+};
+
+Unit.defaultProps = {
+  format: null,
+  onLoaded: undefined,
+};
+
+export default injectIntl(Unit);

src/courseware/course/sequence/Unit/ContentIFrame.jsx

@@ -1,139 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
-import PageLoading from '../../../../generic/PageLoading';
-import LocalIFrame from './LocalIFrame';
-import { renderers } from './constants';
-import hooks from './hooks';
-
-/**
- * Feature policy for iframe, allowing access to certain courseware-related media.
- *
- * We must use the wildcard (*) origin for each feature, as courseware content
- * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
- * block that iframes external course content.
-
- * This policy was selected in conference with the edX Security Working Group.
- * Changes to it should be vetted by them (security@edx.org).
- */
-const IFRAME_FEATURE_POLICY = (
-  'microphone *; camera *; midi *; geolocation *; encrypted-media *'
-);
-
-const ContentIFrame = ({
-  iframeUrl,
-  showContent,
-  loadingMessage,
-  id,
-  elementId,
-  onLoaded,
-  title,
-  childBlocks,
-}) => {
-  const {
-    hasLoaded,
-    showError,
-    modalOptions,
-    handleModalClose,
-    handleIFrameLoad,
-    iframeHeight,
-  } = hooks.useIFrameBehavior({
-    id,
-    elementId,
-    onLoaded,
-    title,
-  });
-
-  const renderModal = () => (
-    <Modal
-      body={(
-        <>
-          {modalOptions.body
-            ? <div className="unit-modal">{ modalOptions.body }</div>
-            : (
-              <iframe
-                title={modalOptions.title}
-                allow={IFRAME_FEATURE_POLICY}
-                frameBorder="0"
-                src={modalOptions.url}
-                style={{
-                  width: '100%',
-                  height: '100vh',
-                }}
-              />
-            )}
-        </>
-      )}
-      onClose={handleModalClose}
-      open
-      dialogClassName="modal-lti"
-    />
-  );
-
-  const renderChild = (childBlock) => {
-    const Renderer = renderers[childBlock.type];
-    return (<Renderer key={childBlock.id} {...childBlock.student_view_data} block={childBlock} />);
-  };
-
-  const renderContent = () => {
-    if (iframeUrl) {
-      return (
-        <>
-          {!hasLoaded && (
-            showError ? <ErrorPage /> : <PageLoading srMessage={loadingMessage} />
-          )}
-          <div className="unit-iframe-wrapper">
-            <iframe
-              id={elementId}
-              title={title}
-              src={iframeUrl}
-              allow={IFRAME_FEATURE_POLICY}
-              allowFullScreen
-              height={iframeHeight}
-              scrolling="no"
-              referrerPolicy="origin"
-              onLoad={handleIFrameLoad}
-            />
-          </div>
-        </>
-      );
-    }
-    return (
-      <>
-        {childBlocks.map(renderChild)}
-      </>
-    );
-  };
-
-  return (
-    <>
-      {showContent && renderContent()}
-      {modalOptions.open && renderModal()}
-    </>
-  );
-};
-
-ContentIFrame.propTypes = {
-  iframeUrl: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  showContent: PropTypes.bool.isRequired,
-  loadingMessage: PropTypes.node.isRequired,
-  elementId: PropTypes.string.isRequired,
-  onLoaded: PropTypes.func,
-  title: PropTypes.node.isRequired,
-  childBlocks: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.string,
-    student_view_data: PropTypes.shape({
-      enabled: PropTypes.bool,
-    }),
-  })).isRequired,
-};
-
-ContentIFrame.defaultProps = {
-  iframeUrl: null,
-  onLoaded: () => ({}),
-};
-
-export default ContentIFrame;

src/courseware/course/sequence/Unit/LocalIFrame.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createPortal } from 'react-dom';
-
-const LocalIFrame = ({
-  children,
-  title,
-  ...props
-}) => {
-  const [contentRef, setContentRef] = React.useState(null);
-  const mountNode = contentRef?.contentWindow?.document?.body;
-  return (
-    <iframe title={title} {...props} ref={setContentRef}>
-      {mountNode && createPortal(children, mountNode)}
-    </iframe>
-  );
-};
-
-LocalIFrame.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.node.isRequired,
-};
-export default LocalIFrame;

src/courseware/course/sequence/Unit/constants.js

@@ -1,12 +0,0 @@
-import HTMLRenderer from './renderers/HTMLRenderer';
-
-export const renderers = {
-  html: HTMLRenderer,
-};
-
-export const FRendlyTypes = Object.keys(renderers);
-
-export default {
-  renderers,
-  FRendlyTypes,
-};

src/courseware/course/sequence/Unit/hooks.js

@@ -1,211 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppContext } from '@edx/frontend-platform/react';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react';
-import { useDispatch } from 'react-redux';
-import { processEvent } from '../../../../course-home/data/thunks';
-import { useEventListener } from '../../../../generic/hooks';
-import { useModel } from '../../../../generic/model-store';
-import { fetchCourse } from '../../../data';
-
-import { FRendlyTypes } from './constants';
-
-const useFetchStudentData = ({
-  id,
-}) => {
-  const [blocks, setBlocks] = useState(null);
-  const [children, setChildren] = useState(null);
-  const [isFRendly, setIsFRendly] = useState(false);
-
-  const { authenticatedUser } = useContext(AppContext);
-
-  useEffect(() => {
-    if (children) {
-      setIsFRendly(children.every(child => FRendlyTypes.includes(child.type)));
-    }
-  }, [children, setIsFRendly]);
-
-  useEffect(() => {
-    if (blocks) {
-      setChildren(blocks[id].children.map(childID => blocks[childID]));
-    }
-  }, [blocks, setChildren]);
-
-  useEffect(() => {
-    let sequenceUrl;
-    if (authenticatedUser) {
-      const { username } = authenticatedUser;
-      sequenceUrl = `${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/${id}?username=${username}&requested_fields=children&depth=all&student_view_data=video,html`;
-      getAuthenticatedHttpClient().get(sequenceUrl).then(response => {
-        console.log({ response });
-        setBlocks(response.data.blocks);
-      });
-    }
-  }, [authenticatedUser, setBlocks]);
-  console.log({ isFRendly, children });
-  return { children, isFRendly };
-};
-
-const useUnitData = ({
-  courseId,
-  format,
-  id,
-}) => {
-  const { authenticatedUser } = useContext(AppContext);
-  const view = authenticatedUser ? 'student_view' : 'public_view';
-  let iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0&recheck_access=1&view=${view}`;
-  if (format) {
-    iframeUrl += `&format=${format}`;
-  }
-
-  const { isFRendly, children } = useFetchStudentData({ id });
-
-  const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
-
-  const unit = useModel('units', id);
-  const course = useModel('coursewareMeta', courseId);
-  const {
-    contentTypeGatingEnabled,
-    userNeedsIntegritySignature,
-  } = course;
-
-  useEffect(() => {
-    if (userNeedsIntegritySignature && unit.graded) {
-      setShouldDisplayHonorCode(true);
-    } else {
-      setShouldDisplayHonorCode(false);
-    }
-  }, [userNeedsIntegritySignature]);
-
-  return {
-    contentTypeGatingEnabled,
-    iframeUrl,
-    shouldDisplayHonorCode,
-    unit,
-    isFRendly,
-    children,
-  };
-};
-
-/**
- * We discovered an error in Firefox where - upon iframe load - React would cease to call any
- * useEffect hooks until the user interacts with the page again.  This is particularly confusing
- * when navigating between sequences, as the UI partially updates leaving the user in a nebulous
- * state.
- *
- * We were able to solve this error by using a layout effect to update some component state, which
- * executes synchronously on render.  Somehow this forces React to continue it's lifecycle
- * immediately, rather than waiting for user interaction.  This layout effect could be anywhere in
- * the parent tree, as far as we can tell - we chose to add a conspicuously 'load bearing' (that's
- * a joke) one here so it wouldn't be accidentally removed elsewhere.
- *
- * If we remove this hook when one of these happens:
- * 1. React figures out that there's an issue here and fixes a bug.
- * 2. We cease to use an iframe for unit rendering.
- * 3. Firefox figures out that there's an issue in their iframe loading and fixes a bug.
- * 4. We stop supporting Firefox.
- * 5. An enterprising engineer decides to create a repo that reproduces the problem, submits it to
- *    Firefox/React for review, and they kindly help us figure out what in the world is happening
- *    so  we can fix it.
- *
- * This hook depends on the unit id just to make sure it re-evaluates whenever the ID changes.  If
- * we change whether or not the Unit component is re-mounted when the unit ID changes, this may
- * become important, as this hook will otherwise only evaluate the useLayoutEffect once.
- */
-export const useLoadBearingHook = (id) => {
-  const setValue = useState(0)[1];
-  useLayoutEffect(() => {
-    setValue(currentValue => currentValue + 1);
-  }, [id]);
-};
-
-export const sendUrlHashToFrame = (frame) => {
-  const { hash } = window.location;
-  if (hash) {
-    // The url hash will be sent to LMS-served iframe in order to find the location of the
-    // hash within the iframe.
-    frame.contentWindow.postMessage({ hashName: hash }, `${getConfig().LMS_BASE_URL}`);
-  }
-};
-
-const useIFrameBehavior = ({
-  id,
-  elementId,
-  onLoaded,
-}) => {
-  // Do not remove this hook.  See function description.
-  useLoadBearingHook(id);
-
-  const dispatch = useDispatch();
-
-  const [iframeHeight, setIframeHeight] = useState(0);
-  const [hasLoaded, setHasLoaded] = useState(false);
-  const [showError, setShowError] = useState(false);
-  const [modalOptions, setModalOptions] = useState({ open: false });
-
-  useEffect(() => {
-    sendUrlHashToFrame(document.getElementById(elementId));
-  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
-
-  const receiveMessage = useCallback(({ data }) => {
-    const { type, payload } = data;
-    if (type === 'plugin.resize') {
-      setIframeHeight(payload.height);
-      if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
-        setHasLoaded(true);
-        if (onLoaded) {
-          onLoaded();
-        }
-      }
-    } else if (type === 'plugin.modal') {
-      payload.open = true;
-      setModalOptions(payload);
-    } else if (data.offset) {
-      // We listen for this message from LMS to know when the page needs to
-      // be scrolled to another location on the page.
-      window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
-    }
-  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
-  useEventListener('message', receiveMessage);
-
-  /**
-  * onLoad *should* only fire after everything in the iframe has finished its own load events.
-  * Which means that the plugin.resize message (which calls setHasLoaded above) will have fired already
-  * for a successful load. If it *has not fired*, we are in an error state. For example, the backend
-  * could have given us a 4xx or 5xx response.
-  */
-  const handleIFrameLoad = () => {
-    if (!hasLoaded) {
-      setShowError(true);
-    }
-    window.onmessage = (e) => {
-      if (e.data.event_name) {
-        dispatch(processEvent(e.data, fetchCourse));
-      }
-    };
-  };
-
-  const handleCloseModal = () => {
-    setModalOptions({ open: false });
-  };
-
-  return {
-    iframeHeight,
-    handleCloseModal,
-    modalOptions,
-    handleIFrameLoad,
-    showError,
-    hasLoaded,
-  };
-};
-
-export default {
-  useIFrameBehavior,
-  useUnitData,
-};

src/courseware/course/sequence/Unit/index.jsx

@@ -1,89 +0,0 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
-import PropTypes from 'prop-types';
-import React, { Suspense } from 'react';
-import PageLoading from '../../../../generic/PageLoading';
-import BookmarkButton from '../../bookmark/BookmarkButton';
-import messages from '../messages';
-import ContentIFrame from './ContentIFrame';
-import hooks from './hooks';
-
-const HonorCode = React.lazy(() => import('../honor-code'));
-const LockPaywall = React.lazy(() => import('../lock-paywall'));
-
-const Unit = ({
-  courseId,
-  format,
-  onLoaded,
-  id,
-}) => {
-  const { formatMessage } = useIntl();
-  const {
-    unit,
-    contentTypeGatingEnabled,
-    shouldDisplayHonorCode,
-    iframeUrl,
-    isFRendly,
-    children,
-  } = hooks.useUnitData({
-    courseId,
-    format,
-    id,
-  });
-
-  return (
-    <div className="unit">
-      <h1 className="mb-0 h3">{unit.title}</h1>
-      <h2 className="sr-only">{formatMessage(messages.headerPlaceholder)}</h2>
-      <BookmarkButton
-        unitId={unit.id}
-        isBookmarked={unit.bookmarked}
-        isProcessing={unit.bookmarkedUpdateState === 'loading'}
-      />
-      {contentTypeGatingEnabled && unit.containsContentTypeGatedContent && (
-        <Suspense
-          fallback={(
-            <PageLoading
-              srMessage={formatMessage(messages.loadingLockedContent)}
-            />
-          )}
-        >
-          <LockPaywall courseId={courseId} />
-        </Suspense>
-      )}
-      {shouldDisplayHonorCode && (
-        <Suspense
-          fallback={(
-            <PageLoading
-              srMessage={formatMessage(messages.loadingHonorCode)}
-            />
-          )}
-        >
-          <HonorCode courseId={courseId} />
-        </Suspense>
-      )}
-      <ContentIFrame
-        showContent={!shouldDisplayHonorCode}
-        {...(isFRendly ? { childBlocks: children } : { iframeUrl })}
-        loadingMessage={formatMessage(messages.loadingSequence)}
-        id={id}
-        elementId="unit-iframe"
-        onLoaded={onLoaded}
-        title={unit.title}
-      />
-    </div>
-  );
-};
-
-Unit.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  format: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  onLoaded: PropTypes.func,
-};
-
-Unit.defaultProps = {
-  format: null,
-  onLoaded: undefined,
-};
-
-export default Unit;

src/courseware/course/sequence/Unit/renderers/HTMLRenderer.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getConfig } from '@edx/frontend-platform';
-
-import parse from 'html-react-parser';
-
-const HTMLRenderer = ({ html }) => {
-  console.log({ html });
-  return (<div dangerouslySetInnerHTML={{ __html: html }} />);
-  // return parse(html);
-};
-
-HTMLRenderer.propTypes = {
-  html: PropTypes.string.isRequired,
-};
-
-export default HTMLRenderer;