feat: add bookmarking for units (#11)

* feat: add bookmarking for units

* refactor: add redux for state management

src/courseware/sequence/Unit.jsx

@@ -1,10 +1,19 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
+import { connect } from 'react-redux';
+import BookmarkButton from './bookmark/BookmarkButton';
+import { addBookmark, removeBookmark } from '../../data/course-blocks/thunks';
 
-export default function Unit({ id, pageTitle }) {
+function Unit({
+  bookmarked,
+  bookmarkedUpdateState,
+  displayName,
+  id,
+  ...props
+}) {
   const iframeRef = useRef(null);
-  const iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}`;
+  const iframeUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}?show_title=0&show_bookmark_button=0`;
 
   const [iframeHeight, setIframeHeight] = useState(0);
   useEffect(() => {
@@ -17,21 +26,56 @@ export default function Unit({ id, pageTitle }) {
     };
   }, []);
 
+  const toggleBookmark = () => {
+    if (bookmarked) {
+      props.removeBookmark(id);
+    } else {
+      props.addBookmark(id);
+    }
+  };
+
   return (
-    <iframe
-      title={pageTitle}
-      ref={iframeRef}
-      src={iframeUrl}
-      allowFullScreen
-      className="d-block container-fluid px-0"
-      height={iframeHeight}
-      scrolling="no"
-      referrerPolicy="origin"
-    />
+    <div>
+      <div className="container-fluid mb-2">
+        <h2 className="mb-0">{displayName}</h2>
+        <BookmarkButton
+          onClick={toggleBookmark}
+          isBookmarked={bookmarked}
+          isProcessing={bookmarkedUpdateState === 'loading'}
+        />
+      </div>
+      <iframe
+        title={displayName}
+        ref={iframeRef}
+        src={iframeUrl}
+        allowFullScreen
+        className="d-block container-fluid px-0"
+        height={iframeHeight}
+        scrolling="no"
+        referrerPolicy="origin"
+        style={{ border: 0, width: '100%' }}
+      />
+    </div>
   );
 }
 
 Unit.propTypes = {
+  addBookmark: PropTypes.func.isRequired,
+  bookmarked: PropTypes.bool,
+  bookmarkedUpdateState: PropTypes.string,
+  displayName: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
-  pageTitle: PropTypes.string.isRequired,
+  removeBookmark: PropTypes.func.isRequired,
 };
+
+Unit.defaultProps = {
+  bookmarked: false,
+  bookmarkedUpdateState: undefined,
+};
+
+const mapStateToProps = (state, props) => state.courseBlocks.blocks[props.id] || {};
+
+export default connect(mapStateToProps, {
+  addBookmark,
+  removeBookmark,
+})(Unit);