Skip to content

Commit d17ce3c

Browse files
ghalestriloghalestrilo
committed
👌 make views only responsible if MOBILE_ENABLED=true
1 parent af2185f commit d17ce3c

File tree

4 files changed

+100
-113
lines changed

4 files changed

+100
-113
lines changed

‎client/modules/User/components/ResponsiveForm.jsx

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
44
import { remSize } from '../../../theme';
55

66

7-
const ResponsiveFormWrapper = styled.div`
7+
const ResponsiveForm = styled.div`
88
.form-container__content {
99
width: unset !important;
1010
padding-top: ${remSize(16)};
@@ -42,23 +42,4 @@ const ResponsiveFormWrapper = styled.div`
4242
}
4343
`;
4444

45-
const ResponsiveForm = props =>
46-
(props.mobile === true
47-
? (
48-
<ResponsiveFormWrapper>
49-
{props.children}
50-
</ResponsiveFormWrapper>
51-
52-
)
53-
: props.children);
54-
55-
ResponsiveForm.propTypes = {
56-
mobile: PropTypes.bool,
57-
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
58-
};
59-
ResponsiveForm.defaultProps = {
60-
mobile: false,
61-
children: []
62-
};
63-
6445
export default ResponsiveForm;

‎client/modules/User/pages/LoginView.jsx

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,40 +28,36 @@ class LoginView extends React.Component {
2828
}
2929

3030
render() {
31-
const isMobile = () => (window.innerWidth < 770);
3231
if (this.props.user.authenticated) {
3332
this.gotoHomePage();
3433
return null;
3534
}
36-
// TODO: mobile currently forced to true
3735
return (
38-
<ResponsiveForm mobile={isMobile() || this.props.mobile}>
39-
<div className="login">
40-
<Nav layout="dashboard" />
41-
<main className="form-container">
42-
<Helmet>
43-
<title>{this.props.t('LoginView.Title')}</title>
44-
</Helmet>
45-
<div className="form-container__content">
46-
<h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
47-
<LoginForm {...this.props} />
48-
<h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
49-
<div className="form-container__stack">
50-
<SocialAuthButton service={SocialAuthButton.services.github} />
51-
<SocialAuthButton service={SocialAuthButton.services.google} />
52-
</div>
53-
<p className="form__navigation-options">
54-
{this.props.t('LoginView.DontHaveAccount')}
55-
<Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
56-
</p>
57-
<p className="form__navigation-options">
58-
{this.props.t('LoginView.ForgotPassword')}
59-
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
60-
</p>
36+
<div className="login">
37+
<Nav layout="dashboard" />
38+
<main className="form-container">
39+
<Helmet>
40+
<title>{this.props.t('LoginView.Title')}</title>
41+
</Helmet>
42+
<div className="form-container__content">
43+
<h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
44+
<LoginForm {...this.props} />
45+
<h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
46+
<div className="form-container__stack">
47+
<SocialAuthButton service={SocialAuthButton.services.github} />
48+
<SocialAuthButton service={SocialAuthButton.services.google} />
6149
</div>
62-
</main>
63-
</div>
64-
</ResponsiveForm>
50+
<p className="form__navigation-options">
51+
{this.props.t('LoginView.DontHaveAccount')}
52+
<Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
53+
</p>
54+
<p className="form__navigation-options">
55+
{this.props.t('LoginView.ForgotPassword')}
56+
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
57+
</p>
58+
</div>
59+
</main>
60+
</div>
6561
);
6662
}
6763
}
@@ -85,14 +81,12 @@ LoginView.propTypes = {
8581
authenticated: PropTypes.bool
8682
}),
8783
t: PropTypes.func.isRequired,
88-
mobile: PropTypes.bool
8984
};
9085

9186
LoginView.defaultProps = {
9287
user: {
9388
authenticated: false
9489
},
95-
mobile: false
9690
};
9791

9892
export default withTranslation()(reduxForm({

‎client/modules/User/pages/SignupView.jsx

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import SocialAuthButton from '../components/SocialAuthButton';
1313
import Nav from '../../../components/Nav';
1414
import ResponsiveForm from '../components/ResponsiveForm';
1515

16-
const isMobile = () => (window.innerWidth < 770);
1716

1817
class SignupView extends React.Component {
1918
gotoHomePage = () => {
@@ -26,29 +25,27 @@ class SignupView extends React.Component {
2625
return null;
2726
}
2827
return (
29-
<ResponsiveForm mobile={isMobile() || this.props.mobile}>
30-
<div className="signup">
31-
<Nav layout="dashboard" />
32-
<main className="form-container">
33-
<Helmet>
34-
<title>{this.props.t('SignupView.Title')}</title>
35-
</Helmet>
36-
<div className="form-container__content">
37-
<h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
38-
<SignupForm {...this.props} />
39-
<h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
40-
<div className="form-container__stack">
41-
<SocialAuthButton service={SocialAuthButton.services.github} />
42-
<SocialAuthButton service={SocialAuthButton.services.google} />
43-
</div>
44-
<p className="form__navigation-options">
45-
{this.props.t('SignupView.AlreadyHave')}
46-
<Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
47-
</p>
28+
<div className="signup">
29+
<Nav layout="dashboard" />
30+
<main className="form-container">
31+
<Helmet>
32+
<title>{this.props.t('SignupView.Title')}</title>
33+
</Helmet>
34+
<div className="form-container__content">
35+
<h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
36+
<SignupForm {...this.props} />
37+
<h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
38+
<div className="form-container__stack">
39+
<SocialAuthButton service={SocialAuthButton.services.github} />
40+
<SocialAuthButton service={SocialAuthButton.services.google} />
4841
</div>
49-
</main>
50-
</div>
51-
</ResponsiveForm>
42+
<p className="form__navigation-options">
43+
{this.props.t('SignupView.AlreadyHave')}
44+
<Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
45+
</p>
46+
</div>
47+
</main>
48+
</div>
5249
);
5350
}
5451
}
@@ -116,14 +113,12 @@ SignupView.propTypes = {
116113
authenticated: PropTypes.bool
117114
}),
118115
t: PropTypes.func.isRequired,
119-
mobile: PropTypes.bool
120116
};
121117

122118
SignupView.defaultProps = {
123119
user: {
124120
authenticated: false
125121
},
126-
mobile: false
127122
};
128123

129124
export default withTranslation()(reduxForm({

‎client/routes.jsx

Lines changed: 55 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,31 @@ import MobileDashboardView from './modules/Mobile/MobileDashboardView';
2222
import { getUser } from './modules/User/actions';
2323
import { stopSketch } from './modules/IDE/actions/ide';
2424
import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
25+
import ResponsiveForm from './modules/User/components/ResponsiveForm';
2526

2627
const checkAuth = (store) => {
2728
store.dispatch(getUser());
2829
};
2930

30-
const mobileFirst = (MobileComponent, Fallback, store) => props => (
31+
const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true);
32+
33+
/** createMobileFirst: Receives the store, and creates a function that chooses between two components,
34+
* aimed at mobile and desktop resolutions, respectively.
35+
* The created function returns a Component (props => jsx)
36+
*/
37+
const createMobileFirst = store => (MobileComponent, Fallback) => props => (
3138
<MediaQuery minDeviceWidth={770}>
32-
{matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop))
39+
{matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled()))
3340
? <Fallback {...props} />
3441
: <MobileComponent {...props} />)}
3542
</MediaQuery>);
3643

44+
const responsiveForm = DesktopComponent => props => (
45+
<ResponsiveForm>
46+
<DesktopComponent {...props} />
47+
</ResponsiveForm>
48+
);
49+
3750
// TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
3851
const onRouteChange = (store) => {
3952
const path = window.location.pathname;
@@ -42,41 +55,45 @@ const onRouteChange = (store) => {
4255
store.dispatch(stopSketch());
4356
};
4457

45-
const routes = store => (
46-
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
47-
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
48-
49-
<Route path="/login" component={userIsNotAuthenticated(LoginView)} />
50-
<Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
51-
<Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
52-
<Route path="/verify" component={EmailVerificationView} />
53-
<Route
54-
path="/reset-password/:reset_password_token"
55-
component={NewPasswordView}
56-
/>
57-
<Route path="/projects/:project_id" component={IDEView} />
58-
<Route path="/:username/full/:project_id" component={FullView} />
59-
<Route path="/full/:project_id" component={FullView} />
60-
61-
<Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
62-
<Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
63-
<Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
64-
<Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
65-
<Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
66-
67-
<Route path="/:username/collections/create" component={DashboardView} />
68-
<Route path="/:username/collections/:collection_id" component={CollectionView} />
69-
70-
<Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
71-
<Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
72-
<Route path="/account" component={userIsAuthenticated(AccountView)} />
73-
<Route path="/about" component={IDEView} />
74-
75-
{/* Mobile-only Routes */}
76-
<Route path="/preview" component={MobileSketchView} />
77-
<Route path="/preferences" component={MobilePreferences} />
78-
79-
</Route>
80-
);
58+
const routes = (store) => {
59+
const mobileFirst = createMobileFirst(store);
60+
61+
return (
62+
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
63+
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
64+
65+
<Route path="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} />
66+
<Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
67+
<Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
68+
<Route path="/verify" component={EmailVerificationView} />
69+
<Route
70+
path="/reset-password/:reset_password_token"
71+
component={NewPasswordView}
72+
/>
73+
<Route path="/projects/:project_id" component={IDEView} />
74+
<Route path="/:username/full/:project_id" component={FullView} />
75+
<Route path="/full/:project_id" component={FullView} />
76+
77+
<Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
78+
<Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
79+
<Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
80+
<Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
81+
<Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
82+
83+
<Route path="/:username/collections/create" component={DashboardView} />
84+
<Route path="/:username/collections/:collection_id" component={CollectionView} />
85+
86+
<Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
87+
<Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
88+
<Route path="/account" component={userIsAuthenticated(AccountView)} />
89+
<Route path="/about" component={IDEView} />
90+
91+
{/* Mobile-only Routes */}
92+
<Route path="/preview" component={MobileSketchView} />
93+
<Route path="/preferences" component={MobilePreferences} />
94+
95+
</Route>
96+
);
97+
};
8198

8299
export default routes;

0 commit comments

Comments
 (0)