Skip to content

Commit 167bbe8

Browse files
ghalestriloghalestrilo
committed
✨ Navigation to Settings Screen
1 parent b27ee57 commit 167bbe8

File tree

5 files changed

+61
-113
lines changed

5 files changed

+61
-113
lines changed

‎client/components/mobile/MobileScreen.jsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
const Screen = ({ children }) => (
5-
<div className="fullscreen-preview">
4+
const Screen = ({ children, fullscreen }) => (
5+
<div className={fullscreen && 'fullscreen-preview'}>
66
{children}
77
</div>
88
);
9+
10+
Screen.defaultProps = {
11+
fullscreen: false
12+
};
13+
914
Screen.propTypes = {
10-
children: PropTypes.node.isRequired
15+
children: PropTypes.node.isRequired,
16+
fullscreen: PropTypes.bool
1117
};
1218

1319
export default Screen;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable */
21
import React from 'react';
32
import PropTypes from 'prop-types';
43
import styled from 'styled-components';
@@ -50,7 +49,7 @@ const MobileIDEView = (props) => {
5049
const [overlay, setOverlay] = useState(null);
5150

5251
return (
53-
<Screen>
52+
<Screen fullscreen>
5453
<Header>
5554
<IconLinkWrapper to="/" aria-label="Return to original editor">
5655
<ExitIcon />

‎client/modules/Mobile/MobilePreferences.jsx

Lines changed: 49 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import React, { useEffect } from 'react';
22
import { bindActionCreators } from 'redux';
33
import { connect } from 'react-redux';
4-
import { Link } from 'react-router';
4+
import { Link, withRouter } from 'react-router';
55
import PropTypes from 'prop-types';
66
import styled from 'styled-components';
7+
8+
import * as PreferencesActions from '../IDE/actions/preferences';
9+
import * as IdeActions from '../IDE/actions/ide';
10+
711
import Screen from '../../components/mobile/MobileScreen';
812
import Header from '../../components/mobile/Header';
913
import { ExitIcon } from '../../common/icons';
1014
import { remSize } from '../../theme';
11-
import * as PreferencesActions from '../IDE/actions/preferences';
12-
import * as IdeActions from '../IDE/actions/ide';
1315

1416
const IconLinkWrapper = styled(Link)`
1517
width: 3rem;
@@ -22,57 +24,25 @@ const Content = styled.div`
2224
margin-top: ${remSize(68)};
2325
`;
2426

25-
/*
26-
<div className="preference">
27-
<h4 className="preference__title">Word Wrap</h4>
28-
<div className="preference__options">
29-
<input
30-
type="radio"
31-
onChange={() => this.props.setLinewrap(true)}
32-
aria-label="linewrap on"
33-
name="linewrap"
34-
id="linewrap-on"
35-
className="preference__radio-button"
36-
value="On"
37-
checked={this.props.linewrap}
38-
/>
39-
<label htmlFor="linewrap-on" className="preference__option">On</label>
40-
<input
41-
type="radio"
42-
onChange={() => this.props.setLinewrap(false)}
43-
aria-label="linewrap off"
44-
name="linewrap"
45-
id="linewrap-off"
46-
className="preference__radio-button"
47-
value="Off"
48-
checked={!this.props.linewrap}
49-
/>
50-
<label htmlFor="linewrap-off" className="preference__option">Off</label>
51-
</div>
52-
</div>
53-
*/
54-
5527
const Selector = ({
56-
title, value, onSelect, ariaLabel, name, id, options,
28+
title, value, onSelect, options,
5729
}) => (
5830
<div className="preference">
5931
<h4 className="preference__title">{title}</h4>
6032
{options.map(option => (
61-
<div className="preference__options">
33+
<div className="preference__options" key={option.id}>
6234
<input
6335
type="radio"
64-
6536
onChange={() => onSelect(option.value)}
66-
aria-label={ariaLabel}
67-
name={name}
68-
id={id}
37+
aria-label={option.ariaLabel}
38+
name={option.name}
39+
id={option.id}
6940
className="preference__radio-button"
7041
value={option.value}
7142
checked={value === option.value}
7243
/>
73-
<label htmlFor={id} className="preference__option">{option.label}</label>
44+
<label htmlFor={option.id} className="preference__option">{option.label}</label>
7445
</div>))}
75-
7646
</div>
7747
);
7848

@@ -82,12 +52,14 @@ Selector.defaultProps = {
8252

8353
Selector.propTypes = {
8454
title: PropTypes.string.isRequired,
85-
value: PropTypes.string.isRequired,
86-
options: PropTypes.arrayOf(PropTypes.string),
87-
ariaLabel: PropTypes.string.isRequired,
88-
name: PropTypes.string.isRequired,
89-
id: PropTypes.string.isRequired,
90-
onSelect: PropTypes.string.isRequired,
55+
value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
56+
options: PropTypes.arrayOf(PropTypes.shape({
57+
id: PropTypes.string,
58+
name: PropTypes.string,
59+
label: PropTypes.string,
60+
ariaLabel: PropTypes.string,
61+
})),
62+
onSelect: PropTypes.func.isRequired,
9163
};
9264

9365
const SettingsHeader = styled(Header)`
@@ -96,11 +68,13 @@ const SettingsHeader = styled(Header)`
9668

9769

9870
const MobilePreferences = (props) => {
99-
const { setTheme } = props;
71+
const { setTheme, setAutosave, setLinewrap } = props;
72+
const { theme, autosave, linewrap } = props;
73+
10074
const preferences = [
10175
{
10276
title: 'Theme',
103-
value: 'light',
77+
value: theme,
10478
options: [
10579
{
10680
value: 'light', label: 'light', ariaLabel: 'light theme on', name: 'light theme', id: 'light-theme-on'
@@ -112,44 +86,55 @@ const MobilePreferences = (props) => {
11286
value: 'contrast', label: 'contrast', ariaLabel: 'contrast theme on', name: 'contrast theme', id: 'contrast-theme-on'
11387
}
11488
],
115-
onSelect: setTheme // setTheme
89+
onSelect: x => setTheme(x) // setTheme
11690
},
11791

11892
{
11993
title: 'Autosave',
120-
value: true,
94+
value: autosave,
12195
options: [
12296
{
123-
value: 'On', label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on'
97+
value: true, label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on'
12498
},
12599
{
126-
value: 'Off', label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off'
100+
value: false, label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off'
127101
},
128102
],
129-
onSelect: () => {} // setAutosave
103+
onSelect: x => setAutosave(x) // setAutosave
104+
},
105+
106+
{
107+
title: 'Word Wrap',
108+
value: linewrap,
109+
options: [
110+
{
111+
value: true, label: 'On', ariaLabel: 'linewrap on', name: 'linewrap', id: 'linewrap-on'
112+
},
113+
{
114+
value: false, label: 'Off', ariaLabel: 'linewrap off', name: 'linewrap', id: 'linewrap-off'
115+
},
116+
],
117+
onSelect: x => setLinewrap(x)
130118
}
131119
];
132120

133-
useEffect(() => { });
121+
// useEffect(() => { });
134122

135123
return (
136124
<Screen>
137125
<SettingsHeader>
138-
<div>
139-
<h1>Settings</h1>
140-
</div>
126+
<h1>Settings</h1>
141127

142128
<div style={{ marginLeft: '2rem' }}>
143-
144-
<IconLinkWrapper to="/mobile" aria-label="Return to original editor">
129+
<IconLinkWrapper to="/mobile" aria-label="Return to ide view">
145130
<ExitIcon />
146131
</IconLinkWrapper>
147-
</div>
148132

133+
</div>
149134
</SettingsHeader>
150135
<section className="preferences">
151136
<Content>
152-
{ preferences.map(option => <Selector {...option} />) }
137+
{ preferences.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
153138
</Content>
154139
</section>
155140
</Screen>);
@@ -176,52 +161,10 @@ MobilePreferences.propTypes = {
176161
setTextOutput: PropTypes.func.isRequired,
177162
setGridOutput: PropTypes.func.isRequired,
178163
setSoundOutput: PropTypes.func.isRequired,
179-
180-
181-
preferences: PropTypes.shape({
182-
fontSize: PropTypes.number.isRequired,
183-
autosave: PropTypes.bool.isRequired,
184-
linewrap: PropTypes.bool.isRequired,
185-
lineNumbers: PropTypes.bool.isRequired,
186-
lintWarning: PropTypes.bool.isRequired,
187-
textOutput: PropTypes.bool.isRequired,
188-
gridOutput: PropTypes.bool.isRequired,
189-
soundOutput: PropTypes.bool.isRequired,
190-
theme: PropTypes.string.isRequired,
191-
autorefreshIdeActions: PropTypes.bool.isRequired
192-
}).isRequired,
193-
194-
ide: PropTypes.shape({
195-
isPlaying: PropTypes.bool.isRequired,
196-
isAccessibleOutputPlaying: PropTypes.bool.isRequired,
197-
consoleEvent: PropTypes.array,
198-
modalIsVisible: PropTypes.bool.isRequired,
199-
sidebarIsExpanded: PropTypes.bool.isRequired,
200-
consoleIsExpanded: PropTypes.bool.isRequired,
201-
preferencesIsVisible: PropTypes.bool.isRequired,
202-
projectOptionsVisible: PropTypes.bool.isRequired,
203-
newFolderModalVisible: PropTypes.bool.isRequired,
204-
shareModalVisible: PropTypes.bool.isRequired,
205-
shareModalProjectId: PropTypes.string.isRequired,
206-
shareModalProjectName: PropTypes.string.isRequired,
207-
shareModalProjectUsername: PropTypes.string.isRequired,
208-
editorOptionsVisible: PropTypes.bool.isRequired,
209-
keyboardShortcutVisible: PropTypes.bool.isRequired,
210-
unsavedChanges: PropTypes.bool.isRequired,
211-
infiniteLoop: PropTypes.bool.isRequired,
212-
previewIsRefreshing: PropTypes.bool.isRequired,
213-
infiniteLoopMessage: PropTypes.string.isRequired,
214-
projectSavedTime: PropTypes.string,
215-
previousPath: PropTypes.string.isRequired,
216-
justOpenedProject: PropTypes.bool.isRequired,
217-
errorType: PropTypes.string,
218-
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
219-
uploadFileModalVisible: PropTypes.bool.isRequired
220-
}).isRequired,
221164
};
222165

223166
const mapStateToProps = state => ({
224-
preferences: state.preferences,
167+
...state.preferences,
225168
});
226169

227170
const mapDispatchToProps = dispatch => bindActionCreators({
@@ -230,4 +173,4 @@ const mapDispatchToProps = dispatch => bindActionCreators({
230173
}, dispatch);
231174

232175

233-
export default connect(mapStateToProps, mapDispatchToProps)(MobilePreferences);
176+
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobilePreferences));

‎client/modules/Mobile/MobileSketchView.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const MobileSketchView = (props) => {
5959
});
6060

6161
return (
62-
<Screen>
62+
<Screen fullscreen>
6363
<Header>
6464
<IconLinkWrapper to="/mobile" aria-label="Return to original editor">
6565
<ExitIcon viewBox="0 0 16 16" />

‎server/routes/server.routes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ if (process.env.MOBILE_ENABLED) {
123123
res.send(renderIndex());
124124
});
125125

126-
router.get('/mobile/*', (req, res) => {
126+
router.get('/mobile/preferences', (req, res) => {
127127
res.send(renderIndex());
128128
});
129129
}

0 commit comments

Comments
 (0)