Skip to content

T
Tia-dev
Commit 06f2c78b authored by d.arizona's avatar d.arizona
Browse files
Options

update

parent ead05b18
Show whitespace changes
Inline Side-by-side
Showing with 188 additions and 246 deletions
src/Utils/Index.js
View file @ 06f2c78b
......@@ -82,7 +82,7 @@ const footerStyle = {
padding: "20px",
left: "0",
bottom: "0",
height: "60px",
height: "80px",
width: "100%"
};
......
src/container/Home.js
View file @ 06f2c78b
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>
// );
// }
\ No newline at end of file
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
src/container/Screen404.js 0 → 100644
View file @ 06f2c78b
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 0 → 100644
View file @ 06f2c78b
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
View file @ 06f2c78b
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment