trying to give ux into menubar

erwinwahyura · Aug 15, 2017 · e527d9c · e527d9c
1 parent 651c8a8
commit e527d9c
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 11 deletions.
diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -107,3 +107,20 @@ export const saveResultAbsent = (objAbsent) => {
     }).catch(err => console.log(err))
   }
 }
+
+// START UNTUK WARNA SAAT DI KLIK DI MENU BAR
+export const takeAbsentSTATUS = (isaktive) => {
+  return {
+    type: 'GET_STATUS_TAKE_ABSENT',
+    payload: isaktive
+  }
+}
+
+export const addNewStudentSTATUS = (isaktive) => {
+  return {
+    type: 'GET_STATUS_ADD_NEW_STUDENT',
+    payload: isaktive
+  }
+}
+
+// END MENUBAR
diff --git a/client/src/components/MenuBar.js b/client/src/components/MenuBar.js
@@ -3,27 +3,45 @@ import React from 'react'
 import {
   Link
 } from 'react-router-dom'
+import { connect } from 'react-redux'
 
+import { takeAbsentSTATUS, addNewStudentSTATUS } from '../actions'
 
-const MenuBar = () => {
+const MenuBar = (props) => {
   return (
     <div className="menubar">
       <div>
         <div className="tabs is-centered">
           <ul>
-            <li className="is-active"><Link to="/home">Take Absent</Link></li>
-            <li><Link to="/data-absent">Data Absent</Link></li>
-            <li><Link to="/create-new-student">Add New Student</Link></li>
-            <li><Link to="/create-new-absent">Add New Absent</Link></li>
-            <li><Link to="/new-class">Create New Class</Link></li>
-            <li><Link to="/data-student">Data Student</Link></li>
-            <li><Link to="/my-profile">My Profile</Link></li>
-            <li><Link to="/log-out" >Log Out</Link></li>
+            <li className={props.takeAbsent}><Link to="/home" onClick={(e) => props.takeAbsentSTATUS('is-active')}>Take Absent</Link></li>
+            <li className={props.statusMenuBar}><Link to="/data-absent" onClick={(e) => props.takeAbsentSTATUS('is-active')}>Data Absent</Link></li>
+            <li className={props.addNewStudent}><Link to="/create-new-student" onClick={(e) => props.addNewStudentSTATUS('is-active')}>Add New Student</Link></li>
+            <li className={props.statusMenuBar}><Link to="/create-new-absent">Add New Absent</Link></li>
+            <li className={props.statusMenuBar}><Link to="/new-class">Create New Class</Link></li>
+            <li className={props.statusMenuBar}><Link to="/data-student">Data Student</Link></li>
+            <li className={props.statusMenuBar}><Link to="/my-profile">My Profile</Link></li>
+            <li className={props.statusMenuBar}><Link to="/log-out" >Log Out</Link></li>
           </ul>
         </div>
       </div>
     </div>
   )
 }
 
-export default MenuBar
+const mapStateToProps = (state) => {
+  return {
+    takeAbsent: state.Flag.takeAbsent,
+    addNewStudent: state.Flag.addNewStudent
+
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    takeAbsentSTATUS: (isaktive) => dispatch(takeAbsentSTATUS(isaktive)),
+    addNewStudentSTATUS: (isaktive) => dispatch(addNewStudentSTATUS(isaktive))
+  }
+}
+
+// export default MenuBar
+export default connect(mapStateToProps, mapDispatchToProps)(MenuBar)
diff --git a/client/src/reducers/absenReducer.js b/client/src/reducers/absenReducer.js
@@ -4,7 +4,14 @@ const initialState = {
   imageToCompare: "",
   pertemuan: "",
   rawResult: [],
-  moodData: []
+  moodData: [],
+  takeAbsent: '',
+  dataAbsent: '',
+  addNewStudent: '',
+  addNewAbsent: '',
+  addNewClass: '',
+  dataStudent: '',
+  dataStudent: ''
 }
 
 export default (state=initialState, action) => {
@@ -13,6 +20,10 @@ export default (state=initialState, action) => {
       return {...state, Flag: action.payload}
     case 'GET_FLAG_SIGNUP':
       return {...state, Flag: action.payload}
+    case "GET_STATUS_TAKE_ABSENT":
+      return {...state, takeAbsent: action.payload}
+    case "GET_STATUS_ADD_NEW_STUDENT":
+      return {...state, addNewStudent: action.payload}
     case 'SET_ABSENT_TO_CHECK':
       return {...state, absentToCheck: action.payload}
     case 'SET_IMAGE_TO_COMPARE':