diff --git a/client/modules/IDE/components/IDEOverlays.jsx b/client/modules/IDE/components/IDEOverlays.jsx
index 6337512d53..52b21a9e9e 100644
--- a/client/modules/IDE/components/IDEOverlays.jsx
+++ b/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())}
>
-
+
)}
{keyboardShortcutVisible && (
diff --git a/client/modules/IDE/components/ShareModal.jsx b/client/modules/IDE/components/ShareModal.jsx
index ff7b80b7a3..ec7f61fbe8 100644
--- a/client/modules/IDE/components/ShareModal.jsx
+++ b/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;