r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

👌 make views only responsible if MOBILE_ENABLED=true

Browse source
This commit is contained in:
ghalestrilo 2020-08-21 17:03:04 -03:00
parent af2185f524
commit d17ce3ccc2
4 changed files with 94 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
client/modules/User/components/ResponsiveForm.jsx
View file

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { remSize } from '../../../theme'; import { remSize } from '../../../theme';
const ResponsiveFormWrapper = styled.div` const ResponsiveForm = styled.div`
.form-container__content { .form-container__content {
width: unset !important; width: unset !important;
padding-top: ${remSize(16)}; padding-top: ${remSize(16)};
@ -42,23 +42,4 @@ const ResponsiveFormWrapper = styled.div`
} }
`; `;
const ResponsiveForm = props =>
(props.mobile === true
? (
<ResponsiveFormWrapper>
{props.children}
</ResponsiveFormWrapper>
)
: props.children);
ResponsiveForm.propTypes = {
mobile: PropTypes.bool,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
};
ResponsiveForm.defaultProps = {
mobile: false,
children: []
};
export default ResponsiveForm; export default ResponsiveForm;

54
client/modules/User/pages/LoginView.jsx
View file

@ -28,40 +28,36 @@ class LoginView extends React.Component {
} }
render() { render() {
const isMobile = () => (window.innerWidth < 770);
if (this.props.user.authenticated) { if (this.props.user.authenticated) {
this.gotoHomePage(); this.gotoHomePage();
return null; return null;
} }
// TODO: mobile currently forced to true
return ( return (
<ResponsiveForm mobile={isMobile() || this.props.mobile}> <div className="login">
<div className="login"> <Nav layout="dashboard" />
<Nav layout="dashboard" /> <main className="form-container">
<main className="form-container"> <Helmet>
<Helmet> <title>{this.props.t('LoginView.Title')}</title>
<title>{this.props.t('LoginView.Title')}</title> </Helmet>
</Helmet> <div className="form-container__content">
<div className="form-container__content"> <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
<h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2> <LoginForm {...this.props} />
<LoginForm {...this.props} /> <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
<h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2> <div className="form-container__stack">
<div className="form-container__stack"> <SocialAuthButton service={SocialAuthButton.services.github} />
<SocialAuthButton service={SocialAuthButton.services.github} /> <SocialAuthButton service={SocialAuthButton.services.google} />
<SocialAuthButton service={SocialAuthButton.services.google} />
</div>
<p className="form__navigation-options">
{this.props.t('LoginView.DontHaveAccount')}
<Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
</p>
<p className="form__navigation-options">
{this.props.t('LoginView.ForgotPassword')}
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
</p>
</div> </div>
</main> <p className="form__navigation-options">
</div> {this.props.t('LoginView.DontHaveAccount')}
</ResponsiveForm> <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
</p>
<p className="form__navigation-options">
{this.props.t('LoginView.ForgotPassword')}
<Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
</p>
</div>
</main>
</div>
); );
} }
} }
@ -85,14 +81,12 @@ LoginView.propTypes = {
authenticated: PropTypes.bool authenticated: PropTypes.bool
}), }),
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
mobile: PropTypes.bool
}; };
LoginView.defaultProps = { LoginView.defaultProps = {
user: { user: {
authenticated: false authenticated: false
}, },
mobile: false
}; };
export default withTranslation()(reduxForm({ export default withTranslation()(reduxForm({

45
client/modules/User/pages/SignupView.jsx
View file

@ -13,7 +13,6 @@ import SocialAuthButton from '../components/SocialAuthButton';
import Nav from '../../../components/Nav'; import Nav from '../../../components/Nav';
import ResponsiveForm from '../components/ResponsiveForm'; import ResponsiveForm from '../components/ResponsiveForm';
const isMobile = () => (window.innerWidth < 770);
class SignupView extends React.Component { class SignupView extends React.Component {
gotoHomePage = () => { gotoHomePage = () => {
@ -26,29 +25,27 @@ class SignupView extends React.Component {
return null; return null;
} }
return ( return (
<ResponsiveForm mobile={isMobile() || this.props.mobile}> <div className="signup">
<div className="signup"> <Nav layout="dashboard" />
<Nav layout="dashboard" /> <main className="form-container">
<main className="form-container"> <Helmet>
<Helmet> <title>{this.props.t('SignupView.Title')}</title>
<title>{this.props.t('SignupView.Title')}</title> </Helmet>
</Helmet> <div className="form-container__content">
<div className="form-container__content"> <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
<h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2> <SignupForm {...this.props} />
<SignupForm {...this.props} /> <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
<h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2> <div className="form-container__stack">
<div className="form-container__stack"> <SocialAuthButton service={SocialAuthButton.services.github} />
<SocialAuthButton service={SocialAuthButton.services.github} /> <SocialAuthButton service={SocialAuthButton.services.google} />
<SocialAuthButton service={SocialAuthButton.services.google} />
</div>
<p className="form__navigation-options">
{this.props.t('SignupView.AlreadyHave')}
<Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
</p>
</div> </div>
</main> <p className="form__navigation-options">
</div> {this.props.t('SignupView.AlreadyHave')}
</ResponsiveForm> <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
</p>
</div>
</main>
</div>
); );
} }
} }
@ -116,14 +113,12 @@ SignupView.propTypes = {
authenticated: PropTypes.bool authenticated: PropTypes.bool
}), }),
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
mobile: PropTypes.bool
}; };
SignupView.defaultProps = { SignupView.defaultProps = {
user: { user: {
authenticated: false authenticated: false
}, },
mobile: false
}; };
export default withTranslation()(reduxForm({ export default withTranslation()(reduxForm({

81
client/routes.jsx
View file

@ -22,18 +22,31 @@ import MobileDashboardView from './modules/Mobile/MobileDashboardView';
import { getUser } from './modules/User/actions'; import { getUser } from './modules/User/actions';
import { stopSketch } from './modules/IDE/actions/ide'; import { stopSketch } from './modules/IDE/actions/ide';
import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth'; import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
import ResponsiveForm from './modules/User/components/ResponsiveForm';
const checkAuth = (store) => { const checkAuth = (store) => {
store.dispatch(getUser()); store.dispatch(getUser());
}; };
const mobileFirst = (MobileComponent, Fallback, store) => props => ( const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true);
/** createMobileFirst: Receives the store, and creates a function that chooses between two components,
* aimed at mobile and desktop resolutions, respectively.
* The created function returns a Component (props => jsx)
*/
const createMobileFirst = store => (MobileComponent, Fallback) => props => (
<MediaQuery minDeviceWidth={770}> <MediaQuery minDeviceWidth={770}>
{matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop)) {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled()))
? <Fallback {...props} /> ? <Fallback {...props} />
: <MobileComponent {...props} />)} : <MobileComponent {...props} />)}
</MediaQuery>); </MediaQuery>);
const responsiveForm = DesktopComponent => props => (
<ResponsiveForm>
<DesktopComponent {...props} />
</ResponsiveForm>
);
// TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called // TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
const onRouteChange = (store) => { const onRouteChange = (store) => {
const path = window.location.pathname; const path = window.location.pathname;
@ -42,41 +55,45 @@ const onRouteChange = (store) => {
store.dispatch(stopSketch()); store.dispatch(stopSketch());
}; };
const routes = store => ( const routes = (store) => {
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}> const mobileFirst = createMobileFirst(store);
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
<Route path="/login" component={userIsNotAuthenticated(LoginView)} /> return (
<Route path="/signup" component={userIsNotAuthenticated(SignupView)} /> <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
<Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} /> <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
<Route path="/verify" component={EmailVerificationView} />
<Route
path="/reset-password/:reset_password_token"
component={NewPasswordView}
/>
<Route path="/projects/:project_id" component={IDEView} />
<Route path="/:username/full/:project_id" component={FullView} />
<Route path="/full/:project_id" component={FullView} />
<Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} /> <Route path="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} />
<Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} /> <Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
<Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} /> <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
<Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} /> <Route path="/verify" component={EmailVerificationView} />
<Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} /> <Route
path="/reset-password/:reset_password_token"
component={NewPasswordView}
/>
<Route path="/projects/:project_id" component={IDEView} />
<Route path="/:username/full/:project_id" component={FullView} />
<Route path="/full/:project_id" component={FullView} />
<Route path="/:username/collections/create" component={DashboardView} /> <Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
<Route path="/:username/collections/:collection_id" component={CollectionView} /> <Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
<Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
<Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
<Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
<Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} /> <Route path="/:username/collections/create" component={DashboardView} />
<Route path="/assets" component={createRedirectWithUsername('/:username/assets')} /> <Route path="/:username/collections/:collection_id" component={CollectionView} />
<Route path="/account" component={userIsAuthenticated(AccountView)} />
<Route path="/about" component={IDEView} />
{/* Mobile-only Routes */} <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
<Route path="/preview" component={MobileSketchView} /> <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
<Route path="/preferences" component={MobilePreferences} /> <Route path="/account" component={userIsAuthenticated(AccountView)} />
<Route path="/about" component={IDEView} />
</Route> {/* Mobile-only Routes */}
); <Route path="/preview" component={MobileSketchView} />
<Route path="/preferences" component={MobilePreferences} />
</Route>
);
};
export default routes; export default routes;