Skip to content

Commit 7c3ea21

Browse files
raclimraclim
authored
Merge pull request #2362 from lindapaiste/refactor/ide-overlays
Move `IDEOverlays` into a separate component
2 parents ca5db3d + b079357 commit 7c3ea21

File tree

3 files changed

+132
-99
lines changed

3 files changed

+132
-99
lines changed

Diff for: ‎client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
9696
href="/login"
9797
>
9898
<button
99-
class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
99+
class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
100100
display="inline"
101101
focusable="false"
102102
kind="primary"
@@ -112,7 +112,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
112112
</div>
113113
<div>
114114
<button
115-
class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
115+
class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
116116
display="inline"
117117
focusable="false"
118118
kind="primary"
@@ -507,7 +507,7 @@ exports[`Nav renders editor version for mobile 1`] = `
507507
href="/login"
508508
>
509509
<button
510-
class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
510+
class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
511511
display="inline"
512512
focusable="false"
513513
kind="primary"
@@ -523,7 +523,7 @@ exports[`Nav renders editor version for mobile 1`] = `
523523
</div>
524524
<div>
525525
<button
526-
class="sc-jSFjdj fKQAQb sc-kEqXSa Ycwjo"
526+
class="sc-gKAaRy hWeMIn sc-kEqXSa Ycwjo"
527527
display="inline"
528528
focusable="false"
529529
kind="primary"

Diff for: ‎client/modules/IDE/components/IDEOverlays.jsx

+126
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+
}

Diff for: ‎client/modules/IDE/pages/IDEView.jsx

+2-95
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 IDEKeyHandlers from '../components/IDEKeyHandlers';
1112
import Sidebar from '../components/Sidebar';
1213
import PreviewFrame from '../components/PreviewFrame';
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 Console from '../components/Console';
2115
import Toast from '../components/Toast';
2216
import * as FileActions from '../actions/files';
@@ -27,11 +21,6 @@ import * as PreferencesActions from '../actions/preferences';
2721
import * as UserActions from '../../User/actions';
2822
import * as ConsoleActions from '../actions/console';
2923
import { getHTMLFile } from '../reducers/files';
30-
import Overlay from '../../App/components/Overlay';
31-
import About from '../components/About';
32-
import AddToCollectionList from '../components/AddToCollectionList';
33-
import Feedback from '../components/Feedback';
34-
import { CollectionSearchbar } from '../components/Searchbar';
3524
import { selectActiveFile } from '../selectors/files';
3625
import { getIsUserOwner } from '../selectors/users';
3726
import RootPage from '../../../components/RootPage';
@@ -184,15 +173,6 @@ class IDEView extends React.Component {
184173
key={this.props.project.id}
185174
/>
186175
</CmControllerContext.Provider>
187-
{this.props.ide.preferencesIsVisible && (
188-
<Overlay
189-
title={this.props.t('Preferences.Settings')}
190-
ariaLabel={this.props.t('Preferences.Settings')}
191-
closeOverlay={this.props.closePreferences}
192-
>
193-
<Preferences />
194-
</Overlay>
195-
)}
196176
<main className="editor-preview-container">
197177
<SplitPane
198178
split="vertical"
@@ -262,76 +242,7 @@ class IDEView extends React.Component {
262242
</SplitPane>
263243
</SplitPane>
264244
</main>
265-
{this.props.ide.modalIsVisible && <NewFileModal />}
266-
{this.props.ide.newFolderModalVisible && <NewFolderModal />}
267-
{this.props.ide.uploadFileModalVisible && <UploadFileModal />}
268-
{this.props.location.pathname === '/about' && (
269-
<Overlay
270-
title={this.props.t('About.Title')}
271-
previousPath={this.props.ide.previousPath}
272-
ariaLabel={this.props.t('About.Title')}
273-
>
274-
<About previousPath={this.props.ide.previousPath} />
275-
</Overlay>
276-
)}
277-
{this.props.location.pathname === '/feedback' && (
278-
<Overlay
279-
title={this.props.t('IDEView.SubmitFeedback')}
280-
previousPath={this.props.ide.previousPath}
281-
ariaLabel={this.props.t('IDEView.SubmitFeedbackARIA')}
282-
>
283-
<Feedback />
284-
</Overlay>
285-
)}
286-
{this.props.location.pathname.match(/add-to-collection$/) && (
287-
<Overlay
288-
ariaLabel={this.props.t('IDEView.AddCollectionARIA')}
289-
title={this.props.t('IDEView.AddCollectionTitle')}
290-
previousPath={this.props.ide.previousPath}
291-
actions={<CollectionSearchbar />}
292-
isFixedHeight
293-
>
294-
<AddToCollectionList
295-
projectId={this.props.params.project_id}
296-
username={this.props.params.username}
297-
user={this.props.user}
298-
/>
299-
</Overlay>
300-
)}
301-
{this.props.ide.shareModalVisible && (
302-
<Overlay
303-
title={this.props.t('IDEView.ShareTitle')}
304-
ariaLabel={this.props.t('IDEView.ShareARIA')}
305-
closeOverlay={this.props.closeShareModal}
306-
>
307-
<ShareModal
308-
projectId={this.props.ide.shareModalProjectId}
309-
projectName={this.props.ide.shareModalProjectName}
310-
ownerUsername={this.props.ide.shareModalProjectUsername}
311-
/>
312-
</Overlay>
313-
)}
314-
{this.props.ide.keyboardShortcutVisible && (
315-
<Overlay
316-
title={this.props.t('KeyboardShortcuts.Title')}
317-
ariaLabel={this.props.t('KeyboardShortcuts.Title')}
318-
closeOverlay={this.props.closeKeyboardShortcutModal}
319-
>
320-
<KeyboardShortcutModal />
321-
</Overlay>
322-
)}
323-
{this.props.ide.errorType && (
324-
<Overlay
325-
title={this.props.t('Common.Error')}
326-
ariaLabel={this.props.t('Common.ErrorARIA')}
327-
closeOverlay={this.props.hideErrorModal}
328-
>
329-
<ErrorModal
330-
type={this.props.ide.errorType}
331-
closeModal={this.props.hideErrorModal}
332-
/>
333-
</Overlay>
334-
)}
245+
<IDEOverlays />
335246
</RootPage>
336247
);
337248
}
@@ -397,7 +308,6 @@ IDEView.propTypes = {
397308
autocloseBracketsQuotes: PropTypes.bool.isRequired,
398309
autocompleteHinter: PropTypes.bool.isRequired
399310
}).isRequired,
400-
closePreferences: PropTypes.func.isRequired,
401311
selectedFile: PropTypes.shape({
402312
id: PropTypes.string.isRequired,
403313
content: PropTypes.string.isRequired,
@@ -409,11 +319,8 @@ IDEView.propTypes = {
409319
content: PropTypes.string.isRequired
410320
}).isRequired,
411321
updateFileContent: PropTypes.func.isRequired,
412-
closeShareModal: PropTypes.func.isRequired,
413-
closeKeyboardShortcutModal: PropTypes.func.isRequired,
414322
autosaveProject: PropTypes.func.isRequired,
415323
setPreviousPath: PropTypes.func.isRequired,
416-
hideErrorModal: PropTypes.func.isRequired,
417324
clearPersistedState: PropTypes.func.isRequired,
418325
t: PropTypes.func.isRequired,
419326
isUserOwner: PropTypes.bool.isRequired

0 commit comments

Comments
 (0)