Skip to content

Commit d721a13

Browse files
lindapaistelindapaiste
committed
Separate IDEOverlays.
1 parent 0280f99 commit d721a13

File tree

2 files changed

+128
-95
lines changed

2 files changed

+128
-95
lines changed

‎client/modules/IDE/components/IDEOverlays.jsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import { useDispatch, useSelector } from 'react-redux';
4+
import { useLocation, useParams } from 'react-router-dom';
5+
import Overlay from '../../App/components/Overlay';
6+
import {
7+
closeKeyboardShortcutModal,
8+
closePreferences,
9+
closeShareModal,
10+
hideErrorModal
11+
} from '../actions/ide';
12+
import About from './About';
13+
import AddToCollectionList from './AddToCollectionList';
14+
import ErrorModal from './ErrorModal';
15+
import Feedback from './Feedback';
16+
import KeyboardShortcutModal from './KeyboardShortcutModal';
17+
import NewFileModal from './NewFileModal';
18+
import NewFolderModal from './NewFolderModal';
19+
import Preferences from './Preferences';
20+
import { CollectionSearchbar } from './Searchbar';
21+
import ShareModal from './ShareModal';
22+
import UploadFileModal from './UploadFileModal';
23+
24+
export default function IDEOverlays() {
25+
const { t } = useTranslation();
26+
const dispatch = useDispatch();
27+
const location = useLocation();
28+
const params = useParams();
29+
30+
const {
31+
modalIsVisible,
32+
newFolderModalVisible,
33+
uploadFileModalVisible,
34+
preferencesIsVisible,
35+
keyboardShortcutVisible,
36+
shareModalVisible,
37+
shareModalProjectId,
38+
shareModalProjectName,
39+
shareModalProjectUsername,
40+
errorType,
41+
previousPath
42+
} = useSelector((state) => state.ide);
43+
44+
return (
45+
<>
46+
{preferencesIsVisible && (
47+
<Overlay
48+
title={t('Preferences.Settings')}
49+
ariaLabel={t('Preferences.Settings')}
50+
closeOverlay={() => dispatch(closePreferences())}
51+
>
52+
<Preferences />
53+
</Overlay>
54+
)}
55+
{location.pathname === '/about' && (
56+
<Overlay
57+
title={t('About.Title')}
58+
previousPath={previousPath}
59+
ariaLabel={t('About.Title')}
60+
>
61+
<About />
62+
</Overlay>
63+
)}
64+
{location.pathname === '/feedback' && (
65+
<Overlay
66+
title={t('IDEView.SubmitFeedback')}
67+
previousPath={previousPath}
68+
ariaLabel={t('IDEView.SubmitFeedbackARIA')}
69+
>
70+
<Feedback />
71+
</Overlay>
72+
)}
73+
{location.pathname.match(/add-to-collection$/) && (
74+
<Overlay
75+
ariaLabel={t('IDEView.AddCollectionARIA')}
76+
title={t('IDEView.AddCollectionTitle')}
77+
previousPath={previousPath}
78+
actions={<CollectionSearchbar />}
79+
isFixedHeight
80+
>
81+
<AddToCollectionList
82+
projectId={params.project_id}
83+
username={params.username}
84+
/>
85+
</Overlay>
86+
)}
87+
{shareModalVisible && (
88+
<Overlay
89+
title={t('IDEView.ShareTitle')}
90+
ariaLabel={t('IDEView.ShareARIA')}
91+
closeOverlay={() => dispatch(closeShareModal())}
92+
>
93+
<ShareModal
94+
projectId={shareModalProjectId}
95+
projectName={shareModalProjectName}
96+
ownerUsername={shareModalProjectUsername}
97+
/>
98+
</Overlay>
99+
)}
100+
{keyboardShortcutVisible && (
101+
<Overlay
102+
title={t('KeyboardShortcuts.Title')}
103+
ariaLabel={t('KeyboardShortcuts.Title')}
104+
closeOverlay={() => dispatch(closeKeyboardShortcutModal())}
105+
>
106+
<KeyboardShortcutModal />
107+
</Overlay>
108+
)}
109+
{errorType && (
110+
<Overlay
111+
title={t('Common.Error')}
112+
ariaLabel={t('Common.ErrorARIA')}
113+
closeOverlay={() => dispatch(hideErrorModal())}
114+
>
115+
<ErrorModal
116+
type={errorType}
117+
closeModal={() => dispatch(hideErrorModal())}
118+
/>
119+
</Overlay>
120+
)}
121+
{modalIsVisible && <NewFileModal />}
122+
{newFolderModalVisible && <NewFolderModal />}
123+
{uploadFileModalVisible && <UploadFileModal />}
124+
</>
125+
);
126+
}

‎client/modules/IDE/pages/IDEView.jsx‎

Lines changed: 2 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,10 @@ import { useTranslation, withTranslation } from 'react-i18next';
77
import { Helmet } from 'react-helmet';
88
import SplitPane from 'react-split-pane';
99
import Editor from '../components/Editor';
10+
import IDEOverlays from '../components/IDEOverlays';
1011
import Sidebar from '../components/Sidebar';
1112
import PreviewFrame from '../components/PreviewFrame';
1213
import Toolbar from '../components/Header/Toolbar';
13-
import Preferences from '../components/Preferences/index';
14-
import NewFileModal from '../components/NewFileModal';
15-
import NewFolderModal from '../components/NewFolderModal';
16-
import UploadFileModal from '../components/UploadFileModal';
17-
import ShareModal from '../components/ShareModal';
18-
import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
19-
import ErrorModal from '../components/ErrorModal';
2014
import Nav from '../components/Header/Nav';
2115
import Console from '../components/Console';
2216
import Toast from '../components/Toast';
@@ -28,11 +22,6 @@ import * as PreferencesActions from '../actions/preferences';
2822
import * as UserActions from '../../User/actions';
2923
import * as ConsoleActions from '../actions/console';
3024
import { getHTMLFile } from '../reducers/files';
31-
import Overlay from '../../App/components/Overlay';
32-
import About from '../components/About';
33-
import AddToCollectionList from '../components/AddToCollectionList';
34-
import Feedback from '../components/Feedback';
35-
import { CollectionSearchbar } from '../components/Searchbar';
3625
import { getIsUserOwner } from '../selectors/users';
3726
import RootPage from '../../../components/RootPage';
3827

@@ -266,15 +255,6 @@ class IDEView extends React.Component {
266255
syncFileContent={this.syncFileContent}
267256
key={this.props.project.id}
268257
/>
269-
{this.props.ide.preferencesIsVisible && (
270-
<Overlay
271-
title={this.props.t('Preferences.Settings')}
272-
ariaLabel={this.props.t('Preferences.Settings')}
273-
closeOverlay={this.props.closePreferences}
274-
>
275-
<Preferences />
276-
</Overlay>
277-
)}
278258
<main className="editor-preview-container">
279259
<SplitPane
280260
split="vertical"
@@ -344,76 +324,7 @@ class IDEView extends React.Component {
344324
</SplitPane>
345325
</SplitPane>
346326
</main>
347-
{this.props.ide.modalIsVisible && <NewFileModal />}
348-
{this.props.ide.newFolderModalVisible && <NewFolderModal />}
349-
{this.props.ide.uploadFileModalVisible && <UploadFileModal />}
350-
{this.props.location.pathname === '/about' && (
351-
<Overlay
352-
title={this.props.t('About.Title')}
353-
previousPath={this.props.ide.previousPath}
354-
ariaLabel={this.props.t('About.Title')}
355-
>
356-
<About previousPath={this.props.ide.previousPath} />
357-
</Overlay>
358-
)}
359-
{this.props.location.pathname === '/feedback' && (
360-
<Overlay
361-
title={this.props.t('IDEView.SubmitFeedback')}
362-
previousPath={this.props.ide.previousPath}
363-
ariaLabel={this.props.t('IDEView.SubmitFeedbackARIA')}
364-
>
365-
<Feedback />
366-
</Overlay>
367-
)}
368-
{this.props.location.pathname.match(/add-to-collection$/) && (
369-
<Overlay
370-
ariaLabel={this.props.t('IDEView.AddCollectionARIA')}
371-
title={this.props.t('IDEView.AddCollectionTitle')}
372-
previousPath={this.props.ide.previousPath}
373-
actions={<CollectionSearchbar />}
374-
isFixedHeight
375-
>
376-
<AddToCollectionList
377-
projectId={this.props.params.project_id}
378-
username={this.props.params.username}
379-
user={this.props.user}
380-
/>
381-
</Overlay>
382-
)}
383-
{this.props.ide.shareModalVisible && (
384-
<Overlay
385-
title={this.props.t('IDEView.ShareTitle')}
386-
ariaLabel={this.props.t('IDEView.ShareARIA')}
387-
closeOverlay={this.props.closeShareModal}
388-
>
389-
<ShareModal
390-
projectId={this.props.ide.shareModalProjectId}
391-
projectName={this.props.ide.shareModalProjectName}
392-
ownerUsername={this.props.ide.shareModalProjectUsername}
393-
/>
394-
</Overlay>
395-
)}
396-
{this.props.ide.keyboardShortcutVisible && (
397-
<Overlay
398-
title={this.props.t('KeyboardShortcuts.Title')}
399-
ariaLabel={this.props.t('KeyboardShortcuts.Title')}
400-
closeOverlay={this.props.closeKeyboardShortcutModal}
401-
>
402-
<KeyboardShortcutModal />
403-
</Overlay>
404-
)}
405-
{this.props.ide.errorType && (
406-
<Overlay
407-
title={this.props.t('Common.Error')}
408-
ariaLabel={this.props.t('Common.ErrorARIA')}
409-
closeOverlay={this.props.hideErrorModal}
410-
>
411-
<ErrorModal
412-
type={this.props.ide.errorType}
413-
closeModal={this.props.hideErrorModal}
414-
/>
415-
</Overlay>
416-
)}
327+
<IDEOverlays />
417328
</RootPage>
418329
);
419330
}
@@ -480,7 +391,6 @@ IDEView.propTypes = {
480391
autocloseBracketsQuotes: PropTypes.bool.isRequired,
481392
autocompleteHinter: PropTypes.bool.isRequired
482393
}).isRequired,
483-
closePreferences: PropTypes.func.isRequired,
484394
setAllAccessibleOutput: PropTypes.func.isRequired,
485395
selectedFile: PropTypes.shape({
486396
id: PropTypes.string.isRequired,
@@ -500,12 +410,9 @@ IDEView.propTypes = {
500410
updateFileContent: PropTypes.func.isRequired,
501411
closeNewFolderModal: PropTypes.func.isRequired,
502412
closeNewFileModal: PropTypes.func.isRequired,
503-
closeShareModal: PropTypes.func.isRequired,
504-
closeKeyboardShortcutModal: PropTypes.func.isRequired,
505413
autosaveProject: PropTypes.func.isRequired,
506414
setPreviousPath: PropTypes.func.isRequired,
507415
showErrorModal: PropTypes.func.isRequired,
508-
hideErrorModal: PropTypes.func.isRequired,
509416
clearPersistedState: PropTypes.func.isRequired,
510417
startSketch: PropTypes.func.isRequired,
511418
closeUploadFileModal: PropTypes.func.isRequired,

0 commit comments

Comments
 (0)