Merge pull request #2328 from lindapaiste/refactor/share-modal

Connect `ShareModal` to Redux.

Author: raclim

client/modules/IDE/components/IDEOverlays.jsx

@@ -34,9 +34,6 @@ export default function IDEOverlays() {
     preferencesIsVisible,
     keyboardShortcutVisible,
     shareModalVisible,
-    shareModalProjectId,
-    shareModalProjectName,
-    shareModalProjectUsername,
     errorType,
     previousPath
   } = useSelector((state) => state.ide);
@@ -87,11 +84,7 @@ export default function IDEOverlays() {
           ariaLabel={t('IDEView.ShareARIA')}
           closeOverlay={() => dispatch(closeShareModal())}
         >
-          <ShareModal
-            projectId={shareModalProjectId}
-            projectName={shareModalProjectName}
-            ownerUsername={shareModalProjectUsername}
-          />
+          <ShareModal />
         </Overlay>
       )}
       {keyboardShortcutVisible && (

client/modules/IDE/components/ShareModal.jsx

@@ -1,11 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import CopyableInput from './CopyableInput';
 // import getConfig from '../../../utils/getConfig';
 
-const ShareModal = ({ projectId, ownerUsername, projectName }) => {
+const ShareModal = () => {
   const { t } = useTranslation();
+
+  // TODO: store these as nested properties instead of top-level
+  const projectId = useSelector((state) => state.ide.shareModalProjectId);
+  const projectName = useSelector((state) => state.ide.shareModalProjectName);
+  const ownerUsername = useSelector(
+    (state) => state.ide.shareModalProjectUsername
+  );
+
   const hostname = window.location.origin;
   // const previewUrl = getConfig('PREVIEW_URL');
   return (
@@ -35,10 +43,4 @@ const ShareModal = ({ projectId, ownerUsername, projectName }) => {
   );
 };
 
-ShareModal.propTypes = {
-  projectId: PropTypes.string.isRequired,
-  ownerUsername: PropTypes.string.isRequired,
-  projectName: PropTypes.string.isRequired
-};
-
 export default ShareModal;