tutorial routes work

Author: john lim

app/src/index.js

@@ -7,7 +7,7 @@ import Cookies from 'js-cookie';
 import SignIn from './components/login/SignIn.tsx';
 import SignUp from './components/login/SignUp.tsx';
 import Tutorial from './tutorial/Tutorial.tsx';
-import TutorialPage from './tutorial/TutorialPages.tsx';
+import TutorialPage from './tutorial/TutorialPage.tsx';
 
 
 import {
@@ -17,6 +17,7 @@ import {
   Switch,
 } from 'react-router-dom';
 
+
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
@@ -38,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" component={TutorialPage} />
+      <Route exact path="/tutorialPage/:learn" component={TutorialPage} value={'test'} />
     </Switch>
   </Router>,
   document.getElementById('app')

app/src/tutorial/Tutorial.tsx

@@ -19,7 +19,7 @@ import StyleIcon from '@material-ui/icons/Style';
 import ColorLensIcon from '@material-ui/icons/ColorLens';
 
 
-export const PageContext = createContext({ page: null, setPage: null});
+export const PageContext = createContext('');
 
 const useStyles = makeStyles({
   root: {
@@ -121,12 +121,12 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
   const cards = topics.map((topic, i) => {
     return (
       <div key={`k${i}`} className={classes.cardWrapper}>
-        <Link to={'/tutorialPages'} style={{ textDecoration: 'none' }} >
+        <Link to={`/tutorialPage/${topic}`} style={{ textDecoration: 'none' }} >
           <Card className={classes.root} variant="elevation">
             <CardContent>
               <Typography className={classes.title}>{topic}</Typography>
             </CardContent>
-            <CardActions className={classes.cardActions}>
+            <CardActions className={classes.cardActions} onClick={() => setPage(topic)}>
                 {icons[i]}
             </CardActions>
           </Card>
@@ -136,12 +136,10 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
   });
 
   return (
-    <PageContext.Provider value={{ page, setPage }} >
-      <Container maxWidth="xl" className={classes.container}>
-        <h1 className={classes.pageTitle}>ReacType Tutorial</h1>
-        <div className={classes.wrapper}>{cards}</div>
-      </Container>
-    </PageContext.Provider>
+    <Container maxWidth="xl" className={classes.container}>
+      <h1 className={classes.pageTitle}>ReacType Tutorial</h1>
+      <div className={classes.wrapper}>{cards}</div>
+    </Container>
   );
 };
 

app/src/tutorial/TutorialPage.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 import Pages from './Pages';
 import Customization from './Customization';
@@ -10,14 +11,27 @@ import ComponentTree from './ComponentTree';
 import HTMLElements from './HtmlElements';
 import CodePreview from './CodePreview';
 
-import { PageContext } from './Tutorial';
+const useStyles = makeStyles({
+  tutorial_page: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  main_tutorial: {
+    flexGrow: 2
+  },
+  sidebar: {
+    flexGrow: 1
+  }
+})
 
-const TutorialPage: React.FC<RouteComponentProps> = () => {
-  const { page, setPage } = useContext(PageContext);
+const TutorialPage: React.FC<RouteComponentProps> = (props) => {
+  const classes = useStyles();
+  const [page, setPage] = useState(props.match.params.learn);
 
   return (
-    <div>
-      <div className="main-tutorial">
+    <div className={classes.tutorial_page}>
+      <div className={classes.main_tutorial}>
         {page === 'Pages' && <Pages/>}
         {page === 'Route Links' && <RouteLinks/>}
         {page === 'Code Preview' && <CodePreview/>}
@@ -28,9 +42,9 @@ const TutorialPage: React.FC<RouteComponentProps> = () => {
         {page === 'Styling' && <Styling/>}
         {page === 'Customization' && <Customization/>}
       </div>
-      <div className="sidebar">
+      <div className={classes.sidebar}>
         <Link to={`/tutorial`}>
-          <button>Tutorial Main</button>
+          <button>Tutorial Home</button>
         </Link>
         <ul>
           <li onClick={() => setPage('Pages')}>Pages</li>