Skip to content

Commit a847e3f

Browse files
dewanshDTdewanshDT
committed
merge lindapaiste:refactor/ide-overlays
2 parents 9181989 + d721a13 commit a847e3f

File tree

2 files changed

+132
-97
lines changed

2 files changed

+132
-97
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: 6 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,11 @@ 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 IDEKeyHandlers from '../components/IDEKeyHandlers';
10+
import IDEOverlays from '../components/IDEOverlays';
1111
import Sidebar from '../components/Sidebar';
1212
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';
13+
import Toolbar from '../components/Header/Toolbar';
14+
import Nav from '../components/Header/Nav';
2015
import Console from '../components/Console';
2116
import Toast from '../components/Toast';
2217
import * as FileActions from '../actions/files';
@@ -27,15 +22,11 @@ import * as PreferencesActions from '../actions/preferences';
2722
import * as UserActions from '../../User/actions';
2823
import * as ConsoleActions from '../actions/console';
2924
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';
35-
import { selectActiveFile } from '../selectors/files';
3625
import { getIsUserOwner } from '../selectors/users';
3726
import RootPage from '../../../components/RootPage';
3827
import Header from '../components/Header';
28+
import { selectActiveFile } from '../selectors/files';
29+
import IDEKeyHandlers from '../components/IDEKeyHandlers';
3930

4031
function getTitle(props) {
4132
const { id } = props.project;
@@ -184,15 +175,6 @@ class IDEView extends React.Component {
184175
key={this.props.project.id}
185176
/>
186177
</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-
)}
196178
<main className="editor-preview-container">
197179
<SplitPane
198180
split="vertical"
@@ -262,76 +244,7 @@ class IDEView extends React.Component {
262244
</SplitPane>
263245
</SplitPane>
264246
</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-
)}
247+
<IDEOverlays />
335248
</RootPage>
336249
);
337250
}
@@ -397,7 +310,6 @@ IDEView.propTypes = {
397310
autocloseBracketsQuotes: PropTypes.bool.isRequired,
398311
autocompleteHinter: PropTypes.bool.isRequired
399312
}).isRequired,
400-
closePreferences: PropTypes.func.isRequired,
401313
selectedFile: PropTypes.shape({
402314
id: PropTypes.string.isRequired,
403315
content: PropTypes.string.isRequired,
@@ -409,11 +321,8 @@ IDEView.propTypes = {
409321
content: PropTypes.string.isRequired
410322
}).isRequired,
411323
updateFileContent: PropTypes.func.isRequired,
412-
closeShareModal: PropTypes.func.isRequired,
413-
closeKeyboardShortcutModal: PropTypes.func.isRequired,
414324
autosaveProject: PropTypes.func.isRequired,
415325
setPreviousPath: PropTypes.func.isRequired,
416-
hideErrorModal: PropTypes.func.isRequired,
417326
clearPersistedState: PropTypes.func.isRequired,
418327
t: PropTypes.func.isRequired,
419328
isUserOwner: PropTypes.bool.isRequired

0 commit comments

Comments
 (0)