login and menu

package.json

@@ -6,13 +6,15 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "antd": "^4.9.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },

src/App.js

@@ -1,18 +1,36 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { Layout } from 'antd';
+import 'antd/dist/antd.css';
+
 import { NavBar, PrivateRoute } from './components';
 import { Home, ApaKabar, Login } from './pages';
 
+
+const { Header, Footer, Sider, Content } = Layout;
+
 const App = () => {
+  const user = useSelector(state => state.UserReducer.User);
   return (
-    <div>
-			<NavBar/>
-      <Switch>
-        <Route path='/login' component={Login} />
-        <PrivateRoute path={'/apa-kabar'} component={ApaKabar} />
-        <PrivateRoute exact path='/' component={Home}/>  
-      </Switch>
-		</div>
+    <Layout>
+      { user.token !== '' && <Header>Header</Header> }
+
+      <Layout>
+      { user.token !== '' && <Sider><NavBar/></Sider> }
+
+      <Content>
+        <Switch>
+          <Route path='/login' component={Login} />
+          <PrivateRoute path={'/apa-kabar'} component={ApaKabar} />
+          <PrivateRoute exact path='/' component={Home}/>  
+        </Switch>
+      </Content>
+      </Layout>
+
+      { user.token !== '' && <Footer>Footer</Footer> }
+
+    </Layout>
   )
 }
 export default App;

src/components/NavBar/index.js

@@ -1,32 +1,84 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
+import { Menu } from 'antd';
+import {
+	LogoutOutlined,
+	HomeOutlined,
+	TwitterOutlined,
+	GroupOutlined,
+	DatabaseOutlined,
+	SendOutlined,
+} from '@ant-design/icons';
+
 import { actions } from '../../store';
-import StyleNav from './style.js';
+import { Auth } from '../../utils';
+
+const { SubMenu } = Menu;
 
 const App = (props) => {
-	const history = useHistory();
 	const user = useSelector(state => state.UserReducer.User);
+	const history = useHistory();
 	const dispatch = useDispatch();
-	const handleLogout = useCallback(() => {
-		console.log('in logout');
+	const [isLogout, setIsLogout] = useState(false);
+	const logout = useCallback(() => {
 		dispatch(actions.UserAction.Logout());
+		setIsLogout(true);
 	}, [dispatch]);
 
 	useEffect(() => {
-		if (user.token === '') {
-			history.push('/login');
-		}
- 	}, [user.token, history]);
+		if (isLogout) { history.push('/login');}
+	}, [isLogout, history]);
+
 
 	return (
-		<StyleNav className='navbar navbar-light'>
-			<ul className='nav navbar-nav'>
-				<li><Link to='/'>Home</Link></li>
-				<li><Link to='/apa-kabar'>Apa Kabar</Link></li>
-				<li><Link to='#' onClick={handleLogout}>Logout</Link></li>
-			</ul>
-		 </StyleNav>
+		<div style={{ width: '100%', display:"flex" }}>
+			<Menu
+				style={{ width: 256 }}
+				defaultSelectedKeys={['1']}
+				defaultOpenKeys={['sub1']}
+				mode='inline'
+			>
+				{
+					user.token !== '' &&
+					<Menu.Item key="1" icon={<HomeOutlined />}>
+						<Link to='/'>Home</Link>
+					</Menu.Item>
+				}
+
+				{
+					user.token !== '' && Auth.IsAuth(null, 'apa-kabar') &&
+					<Menu.Item key="2" icon={<TwitterOutlined />}>
+						<Link to='/apa-kabar'>Apa Kabar</Link>
+					</Menu.Item>
+				}
+
+				<Menu.Item key="3" icon={<GroupOutlined />}>
+					Group
+				</Menu.Item>
+				<SubMenu key="sub1" icon={<DatabaseOutlined />} title="Master Data">
+					<Menu.Item key="5">User</Menu.Item>
+					<Menu.Item key="6">Menu</Menu.Item>
+					<Menu.Item key="7">Company</Menu.Item>
+					<Menu.Item key="8">Product</Menu.Item>
+				</SubMenu>
+				<SubMenu key="sub2" icon={<SendOutlined />} title="Delivery Order">
+					<Menu.Item key="9">Delivery Order</Menu.Item>
+					<Menu.Item key="10">Surat Jalan</Menu.Item>
+					<SubMenu key="sub3" title="Mutasi">
+						<Menu.Item key="11">Mutasi In</Menu.Item>
+						<Menu.Item key="12">Mutasi Out</Menu.Item>
+					</SubMenu>
+				</SubMenu>
+				{
+					user.token !== '' &&
+					<Menu.Item key="13" icon={<LogoutOutlined />}>
+						<Link to='' onClick={logout}>Logout</Link>
+					</Menu.Item>
+				}
+
+			</Menu>
+		</div>
 	);
 };
 

src/constant/App.js

@@ -0,0 +1,8 @@
+const App = {
+  API: {
+    URL: 'https://localhost'
+  }
+ };
+
+ export default App;
+

src/constant/images.js

@@ -0,0 +1,9 @@
+const logo =  require('../assets/images/logo.png');
+const loginBg = require('../assets/images/loginBg.png');
+
+const Images = {
+  logo,
+  loginBg
+};
+
+export default Images; 

src/constant/index.js

@@ -0,0 +1,4 @@
+import Images from './images';
+import App from './App';
+
+export { Images, App };

src/index.js

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import store, { persistor } from './store';
 import App from './App';
-import './latihan.css';
+// import './latihan.css';
 
 ReactDOM.render(
   <Provider store={store}>

src/pages/Login/index.js

@@ -1,34 +1,95 @@
-import { useEffect, useCallback } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useEffect, useCallback, useState } from 'react';
+import { useHistory, useLocation, Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
+import { Row, Col, Form, Input, Button } from 'antd';
 import { actions } from '../../store';
-
-// import { FakeAuth } from '../../components';
+import { Images } from '../../constant';
+import { ImgBg, DivLogoContainer, DivForm } from './style';
 
 const App = () => {
   const history = useHistory();
   const user = useSelector(state => state.UserReducer.User);
   const dispatch = useDispatch();
 	const { state } = useLocation();
 	const { from } = state || { from: { pathname: '/' } };
-
-  const login = useCallback(() => {
-    dispatch(actions.UserAction.Login);
-  }, [dispatch]);
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const login = useCallback((event) => {
+    event.preventDefault();
+    dispatch(actions.UserAction.Login({username, password}));
+  }, [dispatch, password, username]);
 
   useEffect(() => {
     if (user.token !== '') {
       history.push(from); 
     }
   }, 
   [user.token, from, history]);
+
+  const onChangeUsername = useCallback((event) => {
+    setUsername(event.target.value);
+   }, []);
+
+   const onChangePassword = useCallback((event) => {
+    setPassword(event.target.value);
+   }, []);
+
 
   return (
-    <div>
-      <h1>Login</h1>
-      <p>You must log in to view the page at {from.pathname}</p>
-      <button onClick={login}>Login</button>
-    </div>);
+  <Row>
+    <Col span={12}>
+      <ImgBg src={ Images.loginBg.default } alt='erp' />
+      <DivLogoContainer>
+        <img src={ Images.logo.default } alt='logo'/>
+      </DivLogoContainer>
+    </Col>
+
+    <Col span={12}>
+      <DivForm>
+        <Form name='basic'>
+          <h3>Aplikasi ERP Lion Head Corp</h3>
+          <div className='input-form'>
+            <label>Username</label>
+            <Form.Item
+              name='username'
+              rules={ [{
+                required: true,
+                message: 'Silahkan isi username!',
+              }] }
+            >
+              <Input value={username} onChange={onChangeUsername} className='base-input' />
+            </Form.Item>
+          </div>
+
+          <div className='input-form'>
+            <label>Password</label>
+            <Form.Item
+              name='password'
+              rules={ [{
+                required: true,
+                message: 'Silahkan isi password!',
+              },] }
+                    >
+              <Input.Password value={password} onChange={onChangePassword} />
+            </Form.Item>
+          </div>
+
+          <div className='footer-form'>
+            <Form.Item>
+              <Button type='primary' htmlType='submit' onClick={ login }>Login</Button>
+            </Form.Item>
+
+            <Form.Item>
+              <Link to=''>Lupa Password ?</Link>
+            </Form.Item>
+          </div>
+        </Form>
+      </DivForm>
+    </Col>
+  </Row>
+  );
 }
 
 export default App;