🚧 add MobileSketchView screen to /mobile/preview

Author: ghalestrilo

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -39,6 +39,19 @@ const Content = styled.div`
   margin-top: ${remSize(16)};
 `;
 
+const Icon = styled.a`
+  > svg {
+    fill: ${textColor};
+    color: ${textColor};
+    margin-left: ${remSize(16)};
+  }
+`;
+
+const IconLinkWrapper = styled(Link)`
+  width: 3rem;
+  margin-right: 1.25rem;
+  margin-left: none;
+`;
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
@@ -54,9 +67,9 @@ const IDEViewMobile = (props) => {
   return (
     <Screen>
       <Header>
-        <Link to="/" style={{ width: '3rem', marginRight: '1.25rem' }}>
-          <CloseIcon viewBox="20 21 60 60" aria-hidden="true" aria-label="close header" />
-        </Link>
+        <IconLinkWrapper to="/" aria-label="Return to original editor">
+          <CloseIcon viewBox="20 21 60 60" />
+        </IconLinkWrapper>
         <div>
           <h2>{project.name}</h2>
           <h3>{selectedFile.name}</h3>

client/modules/Mobile/MobileSketchView.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+import Header from '../../components/mobile/Header';
+import Screen from '../../components/mobile/MobileScreen';
+
+const MobileSketchView = (props) => {
+  const [overlay, setOverlay] = useState(null);
+  return (
+    <Screen>
+      <Header>
+        {/* <IconLinkWrapper to="/mobile" aria-label="Return to original editor">
+        <CloseIcon viewBox="20 21 60 60" />
+      </IconLinkWrapper> */}
+        <div>
+          <h2>Hello</h2>
+          {/* <h3>{selectedFile.name}</h3> */}
+        </div>
+
+        {/* <div style={{ marginLeft: '2rem' }}>
+          <IconButton onClick={() => setOverlay('preferences')}>
+            <PreferencesIcon focusable="false" aria-hidden="true" />
+          </IconButton>
+          <IconButton onClick={() => setOverlay('runSketch')}>
+            <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
+          </IconButton>
+        </div> */}
+      </Header>
+    </Screen>);
+};
+export default MobileSketchView;

client/routes.jsx

@@ -1,8 +1,9 @@
-import { Route, IndexRoute } from 'react-router';
+import { Route, IndexRoute, Router, Switch, useRouteMatch } from 'react-router';
 import React from 'react';
 import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
 import IDEViewMobile from './modules/IDE/pages/IDEViewMobile';
+import MobileSketchView from './modules/Mobile/MobileSketchView';
 import FullView from './modules/IDE/pages/FullView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
@@ -50,8 +51,9 @@ const routes = store => (
     <Route path="/:username/collections/create" component={DashboardView} />
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
-    <Route path="/mobile" component={IDEViewMobile} />
 
+    <Route path="/mobile" component={IDEViewMobile} />
+    <Route path="/mobile/preview" component={MobileSketchView} />
   </Route>
 );
 

server/routes/server.routes.js

@@ -118,6 +118,14 @@ if (process.env.MOBILE_ENABLED) {
   router.get('/mobile', (req, res) => {
     res.send(renderIndex());
   });
+
+  router.get('/mobile/preview', (req, res) => {
+    res.send(renderIndex());
+  });
+
+  router.get('/mobile/*', (req, res) => {
+    res.send(renderIndex());
+  });
 }
 
 router.get('/:username/collections/create', (req, res) => {