update

src/Utils/Index.js

@@ -82,7 +82,7 @@ const footerStyle = {
     padding: "20px",
     left: "0",
     bottom: "0",
-    height: "60px",
+    height: "80px",
     width: "100%"
   };
   

src/container/Home.js

-import React, { Component } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
@@ -24,19 +24,17 @@ import {
   Route,
   Link,
   useParams,
-  useRouteMatch,
-  withRouter
+  useRouteMatch
 } from "react-router-dom";
 import Images from '../assets/Images';
 import { FadeMenu, Footer } from '../Utils/Index';
 import Beranda from './Beranda';
-import { Avatar, withStyles, Collapse } from '@material-ui/core';
-import { MenuData, MenuLaporan } from './Menu/MenuData';
-import { StarBorder, ExpandLess, ExpandMore } from '@material-ui/icons';
+import { Avatar } from '@material-ui/core';
+import HomeRoutes from '../router/homeRoutes'
 
 const drawerWidth = 307;
 
-const useStyles = withStyles((theme) => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
   },
@@ -110,59 +108,40 @@ const useStyles = withStyles((theme) => ({
     color: '#fff',
     backgroundColor: 'black',
   },
-  nested: {
-    paddingLeft: theme.spacing(9),
-    fontSize:'12px'
-  },
 }));
 
+export default function MiniDrawer() {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
 
-class Home extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false,
-      collapse: false
-    };
-  }
-
-  handleDrawerOpen = () => {
-    this.setState({
-      open: true,
-    });
+  const handleDrawerOpen = () => {
+    setOpen(true);
   };
 
-  handleDrawerClose = () => {
-    this.setState({
-      open: false,
-    });
+  const handleDrawerClose = () => {
+    setOpen(false);
   };
 
-  handleClick = () => {
-    this.setState({
-      collapse: !this.state.collapse
-    })
-  }
+  let { path, url } = useRouteMatch();
 
-  render() {
-    const { classes } = this.props;
   return (
     <div className={classes.root}>
       <CssBaseline />
       <AppBar
         position="fixed"
         className={clsx(classes.appBar, {
-            [classes.appBarShift]: this.state.open,
+          [classes.appBarShift]: open,
         })}
       >
         <Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
           <IconButton
             color="inherit"
             aria-label="open drawer"
-              onClick={this.handleDrawerOpen}
+            onClick={handleDrawerOpen}
             edge="start"
             className={clsx(classes.menuButton, {
-                [classes.hide]: this.state.open,
+              [classes.hide]: open,
             })}
           >
             <MenuIcon />
@@ -187,35 +166,35 @@ class Home extends Component {
       <Drawer
         variant="permanent"
         className={clsx(classes.drawer, {
-            [classes.drawerOpen]: this.state.open,
-            [classes.drawerClose]: !this.state.open,
+          [classes.drawerOpen]: open,
+          [classes.drawerClose]: !open,
         })}
         classes={{
           paper: clsx({
-              [classes.drawerOpen]: this.state.open,
-              [classes.drawerClose]: !this.state.open,
+            [classes.drawerOpen]: open,
+            [classes.drawerClose]: !open,
           }),
         }}
       >
         <div className={classes.toolbarDrawer} style={{
           backgroundColor: '#51c6ea',
-            height: this.state.open ? 152 : 68
+          height: open ? 152 : 68
         }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
             <img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
-              <IconButton onClick={this.handleDrawerClose}>
-                <ChevronRightIcon color={"white"} />
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === 'rtl' ? <ChevronRightIcon color={"white"} /> : <ChevronLeftIcon color={"white"} />}
             </IconButton>
           </div>
-            {this.state.open &&
+          {open &&
             <div style={{ width: '100%' }}>
-                <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
-                <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10 }}>john@tia.com</Typography>
+              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold'}}>John Doe</Typography>
+              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10}}>john@tia.com</Typography>
             </div>
           }
         </div>
         <Divider />
-          {this.state.open &&
+        {open &&
           <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -15 }}>
             <div style={{ width: 86, height: 86, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
               <div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
@@ -224,7 +203,7 @@ class Home extends Component {
             </div>
           </div>
         }
-          {/* <List>
+        <List>
           {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
             <ListItem button key={text}>
               <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
@@ -232,84 +211,58 @@ class Home extends Component {
             </ListItem>
           ))}
         </List>
-          <Divider /> */}
+        <Divider />
         <List>
-            {/* {['All mail', 'Trash', 'Spam'].map((text, index) => (
-              <ListItem button key={text}> */}
-            {/* <ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/rendering`}><InboxIcon /></Link> : <Link to={`${url}/components`}><MailIcon /></Link>}</ListItemIcon> */}
-            {MenuData.map((menu, index) => (
-              <ListItem
-                button
-                key={menu.name}
-                component={props => <Link {...props} to={menu.path} />}
-              >
-                <ListItemIcon>{menu.icon}</ListItemIcon>
-                <ListItemText primary={menu.name} style={{ color: '#fff' }} />
-              </ListItem>
-            ))}
-            <ListItem button onClick={this.handleClick}>
-              <ListItemIcon>
-                <img src={Images.laporan} style={{ width: 18, height: 18 }} />
-              </ListItemIcon>
-              <ListItemText primary="Laporan" style={{ color: '#fff' }} />
-              {this.state.collapse ? <ExpandLess style={{ fill: 'white' }} /> : <ExpandMore style={{ fill: 'white' }} />}
-            </ListItem>
-            <Collapse in={this.state.collapse} timeout="auto" unmountOnExit style={{ color: '#fff' }} >
-              <List component="div" disablePadding>
-                {MenuLaporan.map((menu, index) => (
-                  <ListItem
-                    button className={classes.nested}
-                    key={menu.name}
-                    component={props => <Link {...props} to={menu.path} />}
-                  >
-                    {/* <ListItemIcon>{menu.icon}</ListItemIcon> */}
-                    <ListItemText primary={menu.name} style={{ color: '#fff', fontSize: '12px' }} />
+          {['All mail', 'Trash', 'Spam'].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/beranda`}><InboxIcon /></Link> : <Link to={`${url}/screen404`}><MailIcon /></Link>}</ListItemIcon>
+              <ListItemText primary={text} />
             </ListItem>
           ))}
         </List>
-            </Collapse>
-            {/* <ListItemText primary={text} />
-              </ListItem>
-            ))} */}
-          </List>
       </Drawer>
-        {/* <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
+      <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
         <div>
           <div className={classes.toolbar} />
-          <Beranda />
+          <Switch>
+            {HomeRoutes.map((route, index) => (
+              // You can render a <Route> in as many places
+              // as you want in your app. It will render along
+              // with any other <Route>s that also match the URL.
+              // So, a sidebar or breadcrumbs or anything else
+              // that requires you to render multiple things
+              // in multiple places at the same URL is nothing
+              // more than multiple <Route>s.
+              <Route
+                key={index}
+                path={route.path}
+                // exact={route.exact}
+                children={<route.main />}
+              />
+            ))}
+          </Switch>
           <Footer>
             <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
           </Footer>
         </div>
 
-      </div> */}
-        <main className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
-          <div className={classes.toolbar} />
-          {this.props.children}
-          <Footer>
-            <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
-          </Footer>
-        </main>
       </div>
-    )
-  }
+    </div>
+  );
 }
 
-
-export default withRouter(useStyles(Home));
-
-// function Topic() {
-//   // The <Route> that rendered this component has a
-//   // path of `/topics/:topicId`. The `:topicId` portion
-//   // of the URL indicates a placeholder that we can
-//   // get from `useParams()`.
-//   let { topicId } = useParams();
-//   React.useEffect(() => {
-//     alert(topicId)
-//   })
-//   return (
-//     <div>
-//       <h3>{topicId}</h3>
-//     </div>
+function Topic() {
+  // The <Route> that rendered this component has a
+  // path of `/topics/:topicId`. The `:topicId` portion
+  // of the URL indicates a placeholder that we can
+  // get from `useParams()`.
+  let { topicId } = useParams();
+  React.useEffect(() => {
+    alert(topicId)
+  })
+  return (
+    <div>
+      <h3>{topicId}</h3>
+    </div>
+  );
+}
\ No newline at end of file
-//   );
-// }
\ No newline at end of file

src/container/Screen404.js

+import React from 'react'
+import {
+  useLocation
+} from "react-router-dom";
+
+export default function NoMatch() {
+  let location = useLocation();
+
+  return (
+    <div>
+      <h3>
+        Link '<code>{location.pathname}</code>' engga ada euy
+      </h3>
+    </div>
+  );
+}
\ No newline at end of file

src/router/homeRoutes.js

+import screen404 from '../container/Screen404'
+import Beranda from '../container/Beranda'
+
+const routes = [
+    {
+      path: "/beranda",
+      main: Beranda
+    },
+    {
+      path: "/screen404",
+      main: screen404
+    },
+  ];
+
+export default routes;
\ No newline at end of file

src/router/index.js

@@ -4,13 +4,13 @@ import {
   Switch,
   Route,
   Link,
-  useLocation
+  useLocation,
+  Redirect
 } from "react-router-dom";
 import Home from '../container/Home'
 import Login from '../container/Login'
 import Register from '../container/Register'
-import Profile from '../container/Profile'
-import Beranda from "../container/Beranda";
+import Screen404 from '../container/Screen404'
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
 //
@@ -23,64 +23,22 @@ import Beranda from "../container/Beranda";
 export default function BasicExample() {
   return (
     <Router>
-      {/* <div>
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/about">About</Link>
-          </li>
-          <li>
-            <Link to="/dashboard">Dashboard</Link>
-          </li>
-        </ul>
-
-        <hr /> */}
-
-      {/*
-          A <Switch> looks through all its children <Route>
-          elements and renders the first one whose path
-          matches the current URL. Use a <Switch> any time
-          you have multiple routes, but you want only one
-          of them to render at a time
-        */}
       <Switch>
-        <Route exact path="/" exact component={Login} />
-        {/* <Route path="*">
-          <NoMatch />
-        </Route> */}
-        <Route path="/register" exact component={Register}/>
-
-        <Home>
-          <Route path="/home" exact component={Beranda} />
-          <Route path="/profile" exact component={Profile} />
-        </Home>
+        <Route exact path="/">
+          <Redirect
+            to={{
+              pathname: "/home",
+              // state: { from: location }
+            }}
+          />
+        </Route>
+        <Route path="/login" component={Login} />
+        <Route path="/register" component={Register}/>
+        <Route path="/home" component={Home} />
+        <Route path="*">
+          <Screen404 />
+        </Route>
       </Switch>
-      {/* </div> */}
     </Router>
   );
 }
\ No newline at end of file
-
-// You can think of these components as "pages"
-// in your app.
-
-// function Home() {
-//   return (
-//     <div>
-//       <h2>Home</h2>
-//     </div>
-//   );
-// }
-
-function NoMatch() {
-  let location = useLocation();
-
-  return (
-    <div>
-      <h3>
-        Link '<code>{location.pathname}</code>' engga ada euy
-      </h3>
-    </div>
-  );
-}
\ No newline at end of file