feat: related-programs modal

src/containers/CourseCard/components/CourseCardMenu.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Dropdown, Icon, IconButton } from '@edx/paragon';
-import { MoreVert } from '@edx/paragon/icons';
-
-export const CourseCardMenu = () => (
-  <Dropdown>
-    <Dropdown.Toggle
-      id="dropdown-toggle-with-iconbutton"
-      as={IconButton}
-      src={MoreVert}
-      iconAs={Icon}
-      variant="primary"
-      alt="Actions dropdown"
-    />
-    <Dropdown.Menu>
-      <Dropdown.Item href="#/action-1">Unenroll</Dropdown.Item>
-      <Dropdown.Item href="#/action-2">Email Settings</Dropdown.Item>
-      <Dropdown.Item href="#/action-3">Share to Facebook</Dropdown.Item>
-      <Dropdown.Item href="#/action-3">Share to Twitter</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
-);
-
-export default CourseCardMenu;

src/containers/CourseCard/components/CourseCardMenu/hooks.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StrictDict } from 'utils';
+import * as module from './hooks';
+
+export const state = StrictDict({
+  isUnenrollConfirmVisible: (val) => React.useState(val),
+  isEmailSettingsVisible: (val) => React.useState(val),
+});
+
+export const unenrollModalHooks = () => {
+  const [isVisible, setIsVisible] = module.state.isUnenrollConfirmVisible(false);
+  return {
+    show: () => setIsVisible(true),
+    hide: () => setIsVisible(false),
+    isVisible,
+  };
+};
+
+export const emailSettingsModalHooks = () => {
+  const [isVisible, setIsVisible] = module.state.isEmailSettingsVisible(false);
+  return {
+    show: () => setIsVisible(true),
+    hide: () => setIsVisible(false),
+    isVisible,
+  };
+};
+
+export const menuHooks = () => {
+  const unenrollModal = module.unenrollModalHooks();
+  const emailSettingsModal = module.emailSettingsModalHooks();
+  const ref = React.useRef(null);
+  return {
+    emailSettingsModal,
+    unenrollModal,
+    ref,
+  };
+};
+
+export default menuHooks;

src/containers/CourseCard/components/CourseCardMenu/index.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Dropdown, Icon, IconButton } from '@edx/paragon';
+import { MoreVert } from '@edx/paragon/icons';
+
+import shapes from 'data/services/lms/shapes';
+import EmailSettingsModal from 'containers/EmailSettingsModal';
+import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
+import hooks from './hooks';
+
+export const CourseCardMenu = ({ cardData }) => {
+  const {
+    ref,
+    emailSettingsModal,
+    unenrollModal,
+  } = hooks();
+  return (
+    <>
+      <Dropdown ref={ref}>
+        <Dropdown.Toggle
+          id="dropdown-toggle-with-iconbutton"
+          as={IconButton}
+          src={MoreVert}
+          iconAs={Icon}
+          variant="primary"
+          alt="Actions dropdown"
+        />
+        <Dropdown.Menu>
+          <Dropdown.Item onClick={unenrollModal.show}>Unenroll</Dropdown.Item>
+          <Dropdown.Item onClick={emailSettingsModal.show}>Email Settings</Dropdown.Item>
+          <Dropdown.Item href="#/action-3">Share to Facebook</Dropdown.Item>
+          <Dropdown.Item href="#/action-3">Share to Twitter</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+      <UnenrollConfirmModal
+        show={unenrollModal.isVisible}
+        menuRef={ref}
+        closeModal={unenrollModal.hide}
+      />
+      <EmailSettingsModal
+        show={emailSettingsModal.isVisible}
+        menuRef={ref}
+        closeModal={emailSettingsModal.hide}
+        cardData={cardData}
+      />
+    </>
+  );
+};
+CourseCardMenu.propTypes = {
+  cardData: shapes.courseRunCardData.isRequired,
+};
+
+export default CourseCardMenu;

src/containers/CourseCard/components/RelatedProgram.jsx

@@ -1,42 +0,0 @@
-/* eslint-disable quotes */
-import React from 'react';
-import { Button, useToggle, ModalDialog } from '@edx/paragon';
-import { Program } from '@edx/paragon/icons';
-
-export const RelatedProgram = () => {
-  const [isOpen, open, close] = useToggle(false);
-  return (
-    <>
-      <Button
-        variant="tertiary"
-        size="sm"
-        iconBefore={Program}
-        onClick={open}
-      >
-        2 Related Program
-      </Button>
-      <ModalDialog
-        title="My dialog"
-        isOpen={isOpen}
-        onClose={close}
-        hasCloseButton
-        isFullscreenOnMobile
-      >
-        <ModalDialog.Header>
-          <ModalDialog.Title>
-            Related Programs
-          </ModalDialog.Title>
-        </ModalDialog.Header>
-
-        <ModalDialog.Body>
-          <p>
-            {/* eslint-disable-next-line */}
-            I am baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
-          </p>
-        </ModalDialog.Body>
-      </ModalDialog>
-    </>
-  );
-};
-
-export default RelatedProgram;

src/containers/CourseCard/components/RelatedProgramsBadge.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable quotes */
+import React from 'react';
+import { Button, useToggle } from '@edx/paragon';
+import { Program } from '@edx/paragon/icons';
+
+import RelatedProgramsBadgeModal from 'containers/RelatedProgramsModal';
+
+export const RelatedProgramsBadge = ({ cardData }) => {
+  const [isOpen, open, closeModal] = useToggle(false);
+  return (
+    <>
+      <Button
+        variant="tertiary"
+        size="sm"
+        iconBefore={Program}
+        onClick={open}
+      >
+        2 Related Program
+      </Button>
+      <RelatedProgramsBadgeModal {...{ isOpen, closeModal, cardData }} />
+    </>
+  );
+};
+
+export default RelatedProgramsBadge;

src/containers/CourseCard/index.jsx

@@ -4,7 +4,7 @@ import { Card } from '@edx/paragon';
 
 import shapes from 'data/services/lms/shapes';
 
-import RelatedProgram from './components/RelatedProgram';
+import RelatedProgramsBadge from './components/RelatedProgramsBadge';
 import CourseCardMenu from './components/CourseCardMenu';
 import CourseCardBanners from './components/CourseCardBanners';
 import CourseCardActions from './components/CourseCardActions';
@@ -33,12 +33,15 @@ export const CourseCard = ({ cardData }) => {
         <Card.Body>
           <Card.Header
             title={title}
-            actions={<CourseCardMenu />}
+            actions={<CourseCardMenu cardData={cardData} />}
           />
           <Card.Section>
             {providerName || 'Unkown'} • {courseNumber} • Access expires {accessExpirationDate}
           </Card.Section>
-          <Card.Footer orientation="vertical" textElement={<RelatedProgram />}>
+          <Card.Footer
+            orientation="vertical"
+            textElement={<RelatedProgramsBadge cardData={cardData} />}
+          >
             <CourseCardActions cardData={cardData} />
           </Card.Footer>
         </Card.Body>