Skip to content

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

update

parent ead05b18
Hide 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 = { ...@@ -82,7 +82,7 @@ const footerStyle = {
padding: "20px", padding: "20px",
left: "0", left: "0",
bottom: "0", bottom: "0",
height: "60px", height: "80px",
width: "100%" width: "100%"
}; };
......
src/container/Home.js
View file @ 06f2c78b
import React, { Component } from 'react'; import React from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles'; import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer'; import Drawer from '@material-ui/core/Drawer';
...@@ -24,19 +24,17 @@ import { ...@@ -24,19 +24,17 @@ import {
Route, Route,
Link, Link,
useParams, useParams,
useRouteMatch, useRouteMatch
withRouter
} from "react-router-dom"; } from "react-router-dom";
import Images from '../assets/Images'; import Images from '../assets/Images';
import { FadeMenu, Footer } from '../Utils/Index'; import { FadeMenu, Footer } from '../Utils/Index';
import Beranda from './Beranda'; import Beranda from './Beranda';
import { Avatar, withStyles, Collapse } from '@material-ui/core'; import { Avatar } from '@material-ui/core';
import { MenuData, MenuLaporan } from './Menu/MenuData'; import HomeRoutes from '../router/homeRoutes'
import { StarBorder, ExpandLess, ExpandMore } from '@material-ui/icons';
const drawerWidth = 307; const drawerWidth = 307;
const useStyles = withStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
display: 'flex', display: 'flex',
}, },
...@@ -110,206 +108,161 @@ const useStyles = withStyles((theme) => ({ ...@@ -110,206 +108,161 @@ const useStyles = withStyles((theme) => ({
color: '#fff', color: '#fff',
backgroundColor: 'black', 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 { const handleDrawerOpen = () => {
constructor(props) { setOpen(true);
super(props);
this.state = {
open: false,
collapse: false
};
}
handleDrawerOpen = () => {
this.setState({
open: true,
});
}; };
handleDrawerClose = () => { const handleDrawerClose = () => {
this.setState({ setOpen(false);
open: false,
});
}; };
handleClick = () => { let { path, url } = useRouteMatch();
this.setState({
collapse: !this.state.collapse
})
}
render() { return (
const { classes } = this.props; <div className={classes.root}>
return ( <CssBaseline />
<div className={classes.root}> <AppBar
<CssBaseline /> position="fixed"
<AppBar className={clsx(classes.appBar, {
position="fixed" [classes.appBarShift]: open,
className={clsx(classes.appBar, { })}
[classes.appBarShift]: this.state.open, >
})} <Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
> <IconButton
<Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}> color="inherit"
<IconButton aria-label="open drawer"
color="inherit" onClick={handleDrawerOpen}
aria-label="open drawer" edge="start"
onClick={this.handleDrawerOpen} className={clsx(classes.menuButton, {
edge="start" [classes.hide]: open,
className={clsx(classes.menuButton, { })}
[classes.hide]: this.state.open, >
})} <MenuIcon />
> </IconButton>
<MenuIcon /> <div style={{ backgroundColor: '#51c6ea', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
</IconButton> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}>
<div style={{ backgroundColor: '#51c6ea', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}> <div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} />
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}> <Typography style={{ color: 'white' }}>Tommy</Typography>
<div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} /> {/* <img src={require('./assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} /> */}
<Typography style={{ color: 'white' }}>Tommy</Typography> <FadeMenu />
{/* <img src={require('./assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} /> */}
<FadeMenu />
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
<img src={Images.search} alt="React Logo" style={{ height: 18, width: 18 }} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
<img src={Images.flagEnglish} alt="React Logo" style={{ height: 32, width: 32 }} />
<Typography style={{ color: 'white' }}>EN</Typography>
</div>
</div> </div>
</Toolbar> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
</AppBar> <img src={Images.search} alt="React Logo" style={{ height: 18, width: 18 }} />
<Drawer </div>
variant="permanent" <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
className={clsx(classes.drawer, { <img src={Images.flagEnglish} alt="React Logo" style={{ height: 32, width: 32 }} />
[classes.drawerOpen]: this.state.open, <Typography style={{ color: 'white' }}>EN</Typography>
[classes.drawerClose]: !this.state.open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open,
}),
}}
>
<div className={classes.toolbarDrawer} style={{
backgroundColor: '#51c6ea',
height: this.state.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>
</div> </div>
{this.state.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>
</div>
}
</div> </div>
<Divider /> </Toolbar>
{this.state.open && </AppBar>
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -15 }}> <Drawer
<div style={{ width: 86, height: 86, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}> variant="permanent"
<div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}> className={clsx(classes.drawer, {
</div> [classes.drawerOpen]: open,
[classes.drawerClose]: !open,
</div> })}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<div className={classes.toolbarDrawer} style={{
backgroundColor: '#51c6ea',
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={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon color={"white"} /> : <ChevronLeftIcon color={"white"} />}
</IconButton>
</div>
{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>
</div> </div>
} }
{/* <List> </div>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( <Divider />
<ListItem button key={text}> {open &&
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon> <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -15 }}>
<ListItemText primary={text} /> <div style={{ width: 86, height: 86, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
</ListItem> <div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
))} </div>
</List>
<Divider /> */} </div>
<List> </div>
{/* {['All mail', 'Trash', 'Spam'].map((text, index) => ( }
<ListItem button key={text}> */} <List>
{/* <ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/rendering`}><InboxIcon /></Link> : <Link to={`${url}/components`}><MailIcon /></Link>}</ListItemIcon> */} {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
{MenuData.map((menu, index) => ( <ListItem button key={text}>
<ListItem <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
button <ListItemText primary={text} />
key={menu.name} </ListItem>
component={props => <Link {...props} to={menu.path} />} ))}
> </List>
<ListItemIcon>{menu.icon}</ListItemIcon> <Divider />
<ListItemText primary={menu.name} style={{ color: '#fff' }} /> <List>
</ListItem> {['All mail', 'Trash', 'Spam'].map((text, index) => (
))} <ListItem button key={text}>
<ListItem button onClick={this.handleClick}> <ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/beranda`}><InboxIcon /></Link> : <Link to={`${url}/screen404`}><MailIcon /></Link>}</ListItemIcon>
<ListItemIcon> <ListItemText primary={text} />
<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> </ListItem>
<Collapse in={this.state.collapse} timeout="auto" unmountOnExit style={{ color: '#fff' }} > ))}
<List component="div" disablePadding> </List>
{MenuLaporan.map((menu, index) => ( </Drawer>
<ListItem <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
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' }} />
</ListItem>
))}
</List>
</Collapse>
{/* <ListItemText primary={text} />
</ListItem>
))} */}
</List>
</Drawer>
{/* <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div> <div>
<div className={classes.toolbar} /> <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> <Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography> <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer> </Footer>
</div> </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>
) </div>
} );
} }
function Topic() {
export default withRouter(useStyles(Home)); // The <Route> that rendered this component has a
// path of `/topics/:topicId`. The `:topicId` portion
// function Topic() { // of the URL indicates a placeholder that we can
// // The <Route> that rendered this component has a // get from `useParams()`.
// // path of `/topics/:topicId`. The `:topicId` portion let { topicId } = useParams();
// // of the URL indicates a placeholder that we can React.useEffect(() => {
// // get from `useParams()`. alert(topicId)
// let { topicId } = useParams(); })
// React.useEffect(() => { return (
// alert(topicId) <div>
// }) <h3>{topicId}</h3>
// return ( </div>
// <div> );
// <h3>{topicId}</h3> }
// </div> \ No newline at end of file
// );
// }
\ 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 { ...@@ -4,13 +4,13 @@ import {
Switch, Switch,
Route, Route,
Link, Link,
useLocation useLocation,
Redirect
} from "react-router-dom"; } from "react-router-dom";
import Home from '../container/Home' import Home from '../container/Home'
import Login from '../container/Login' import Login from '../container/Login'
import Register from '../container/Register' import Register from '../container/Register'
import Profile from '../container/Profile' import Screen404 from '../container/Screen404'
import Beranda from "../container/Beranda";
// This site has 3 pages, all of which are rendered // This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered). // dynamically in the browser (not server rendered).
// //
...@@ -23,64 +23,22 @@ import Beranda from "../container/Beranda"; ...@@ -23,64 +23,22 @@ import Beranda from "../container/Beranda";
export default function BasicExample() { export default function BasicExample() {
return ( return (
<Router> <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> <Switch>
<Route exact path="/" exact component={Login} /> <Route exact path="/">
{/* <Route path="*"> <Redirect
<NoMatch /> to={{
</Route> */} pathname: "/home",
<Route path="/register" exact component={Register}/> // state: { from: location }
}}
<Home> />
<Route path="/home" exact component={Beranda} /> </Route>
<Route path="/profile" exact component={Profile} /> <Route path="/login" component={Login} />
</Home> <Route path="/register" component={Register}/>
<Route path="/home" component={Home} />
<Route path="*">
<Screen404 />
</Route>
</Switch> </Switch>
{/* </div> */}
</Router> </Router>
); );
}
// 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