Merge pull request #25 from jinsoolim/tutorial

tutorial routes and styles

Author: diegovazquezny

app/electron/main.js

@@ -55,6 +55,7 @@ async function createWindow() {
     // full screen
     width: 1920,
     height: 1080,
+    minWidth: 980,
     // window title
     title: `ReacType`,
     // the browser window will not display initially as it's loading
@@ -403,6 +404,7 @@ ipcMain.on('tutorial', event => {
   const tutorial = new BrowserWindow({
     width: 800,
     height: 600,
+    minWidth: 661,
     title: 'Tutorial',
     webPreferences: {
       nodeIntegration: false,

app/electron/menu.js

@@ -18,6 +18,7 @@ var MenuBuilder = function(mainWindow, appName) {
     const tutorial = new BrowserWindow({
       width: 1224,
       height: 1024,
+      minWidth: 661,
       title: 'Tutorial',
       webPreferences: {
         nodeIntegration: false,

app/src/components/left/HTMLPanel.tsx

@@ -6,11 +6,19 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const HTMLPanel = (): JSX.Element => {
   const classes = useStyles();
+  const [state, dispatch] = useContext(StateContext);
+
+  let startingID = 0;
+  for (let i = 0; i < state.HTMLTypes.length; i+=1) {
+    if (state.HTMLTypes[i].id >= startingID) {
+      startingID = state.HTMLTypes[i].id;
+    }
+  }
+  startingID += 1;
 
   const [tag, setTag] = useState('');
   const [name, setName] = useState('');
-  const [currentID, setCurrentID] = useState(12);
-  const [state, dispatch] = useContext(StateContext);
+  const [currentID, setCurrentID] = useState(startingID);
   const [errorMsg, setErrorMsg] = useState('');
   const [errorStatus, setErrorStatus] = useState(false);
 
@@ -81,14 +89,8 @@ const HTMLPanel = (): JSX.Element => {
       type: 'ADD ELEMENT',
       payload: newElement
     });
-    let nextID = 0;
-    for (let i = 0; i < state.HTMLTypes.length; i+=1) {
-      if (state.HTMLTypes[i].id > nextID) {
-        nextID = state.HTMLTypes.id;
-      }
-    }
-    nextID += 1;
-    setCurrentID(nextID);
+
+    setCurrentID(currentID + 1);
     setTag('');
     setName('');
   };

app/src/index.js

@@ -39,7 +39,7 @@ ReactDOM.render(
       <Route exact path="/signup" component={SignUp} />
       <PrivateRoute exact path="/" component={App} />
       <Route exact path="/tutorial" component={Tutorial}/>
-      <Route exact path="/tutorialPage/:learn" component={TutorialPage} value={'test'} />
+      <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
     </Switch>
   </Router>,
   document.getElementById('app')

app/src/tutorial/Canvas.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 // Left-hand portion of the app, where component options are displayed
 
-const Canvas: React.FC<RouteComponentProps> = () => {
+const Canvas: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
   return (
     <div>
       Canvas
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
     </div>
   );
 };
 
-export default withRouter(Canvas);
+export default Canvas;
 

app/src/tutorial/CodePreview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 // Left-hand portion of the app, where component options are displayed
 
-const CodePreview: React.FC<RouteComponentProps> = () => {
+const CodePreview: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
   return (
     <div>
       CodePreview
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
     </div>
   );
 };
 
-export default withRouter(CodePreview);
+export default CodePreview;
 

app/src/tutorial/ComponentTree.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -19,35 +19,10 @@ import re_comps from '../../../resources/tree_tutorial_images/re_comps.png';
 
 // Left-hand portion of the app, where component options are displayed
 
-const ComponentTree: React.FC<RouteComponentProps> = () => {
-  const body = document.querySelector('body');
-  body.style.overflowY = 'auto';
-  const useStyles = makeStyles({
-    title: {
-      color: '#14151f',
-      fontSize: 54
-    },
-    text: {
-      color: '#2e2f3e',
-      fontSize: 24
-    },
-    wrapper: {
-      margin: '30px 30px 30px 30px',
-      width: 'auto'
-    },
-    img: {
-      borderRadius: '3px',
-      // alignSelf: 'center'
-    },
-    imgWrapper: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      // border: '1px solid black',
-      width: 'auto'
-    }
-  });
-  const classes = useStyles();
+const ComponentTree: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
   return (
     <div className={classes.wrapper}>
       <h1 className={classes.title}>React Component Tree</h1>
@@ -65,7 +40,7 @@ const ComponentTree: React.FC<RouteComponentProps> = () => {
       <div className={classes.imgWrapper}>
         {/* <img className={classes.img} src={re_comps}></img> */}
         <img className={classes.img} src={tree3}></img>
-      </div>  
+      </div>
       <p className={classes.text}>HTML elements are shown by their tag name.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={tree4}></img>
@@ -74,11 +49,8 @@ const ComponentTree: React.FC<RouteComponentProps> = () => {
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={tree5}></img>
       </div>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
     </div>
   );
 };
 
-export default withRouter(ComponentTree);
+export default ComponentTree;

app/src/tutorial/Customization.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 // Left-hand portion of the app, where component options are displayed
 
-const Customization: React.FC<RouteComponentProps> = () => {
+const Customization: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
   return (
     <div>
       Customization
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
     </div>
   );
 };
 
-export default withRouter(Customization);
+export default Customization;
 

app/src/tutorial/HtmlElements.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -8,19 +9,32 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 // Left-hand portion of the app, where component options are displayed
 
-const HtmlElements: React.FC<RouteComponentProps> = () => {
+const HtmlElements: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
+  // useEffect(() => {
+  // }, [match.params.learn])
+
   return (
-    <div>
-      HtmlElements
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>HtmlElements</h1>
+      <p className={classes.text}>ReacType has default elements to help get you started.<br/>
+      You can drag and drop elements into the <span className={classes.notLink} onClick={() => setPage('Canvas')} >Canvas</span> to create a React Component with HTML Elements.</p>
+      <h2>Custom Elements</h2>
+      <p className={classes.text}>You can create new custom elements to better suit your needs.<br/>
+      Click <a href="">here</a> for a link to more HTML tags that you can add.<br/>
+      "Tag" should be the HTML tag you are creating and "Tag Name" should be something that makes it easy to remember what this tag is/does.</p>
+      <h2>Delete Buttons</h2>
+      <p className={classes.text}>Delete buttons that you don't need.</p>
+      <h2>Persisting Elements</h2>
+      <p className={classes.text}>Saving the project (available only to users) will allow you to save custom elements that you created. However, when opening a new project, only the tags saved for each specific project will show up again.<br/>
+      In order to save custom tags across multiple projects, we recommend creating custom tags first, then saving multiple projects with the custom tags. This will allow access to custom tags across multiple projects.</p>
+      <h2>Customization</h2>
+      <p className={classes.text}>Add attributes to elements in the generated code in the code preview. When making changes/editing the code, please make sure not to add anymore components/elements to the canvas. This should be the final step before exporting your project. Please see <span className={classes.notLink} onClick={() => setPage('Code_Preview')}>Code Preview</span> for more details on when/how to make changes to your code in ReacType.</p>
     </div>
   );
 };
 
-export default withRouter(HtmlElements);
+export default HtmlElements;
 

app/src/tutorial/Pages.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 // Left-hand portion of the app, where component options are displayed
 
-const Pages: React.FC<RouteComponentProps> = () => {
+const Pages: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
   return (
     <div>
       Pages
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
     </div>
   );
 };
 
-export default withRouter(Pages);
+export default Pages;
 

app/src/tutorial/ReusableComponents.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 // Left-hand portion of the app, where component options are displayed
 
-const ReusableComponents: React.FC<RouteComponentProps> = () => {
+const ReusableComponents: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
   return (
     <div>
       ReusableComponents
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
     </div>
   );
 };
 
-export default withRouter(ReusableComponents);
+export default ReusableComponents;
 

app/src/tutorial/RouteLinks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 // Left-hand portion of the app, where component options are displayed
 
-const RouteLinks: React.FC<RouteComponentProps> = () => {
+const RouteLinks: React.FC<{
+  classes: any;
+  setPage: Function;
+}> = ({ classes, setPage }) => {
   return (
     <div>
       RouteLinks
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
-      <Link to={`/tutorial`}>
-        <button>Tutorial</button>
-      </Link>
     </div>
   );
 };
 
-export default withRouter(RouteLinks);
+export default RouteLinks;