viewing userlist

JaberHPranto · Jul 10, 2021 · 49b49cb · 49b49cb
1 parent 8f5d467
commit 49b49cb
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 12 deletions.
diff --git a/client/src/components/Ecommerce/Header.js b/client/src/components/Ecommerce/Header.js
@@ -48,7 +48,20 @@ function Header() {
                                 <LinkContainer to="/login">
                                     <Nav.Link><i className="fas fa-user"></i>Sign In</Nav.Link>
                                 </LinkContainer>                                  
-                            )}                
+                            )}
+                            {userInfo && userInfo.user.isAdmin && (
+                                <NavDropdown title='Admin' id="admin" variant="success">
+                                    <LinkContainer to="/admin/userlist">
+                                        <NavDropdown.Item >Users</NavDropdown.Item>
+                                    </LinkContainer>
+                                    <LinkContainer to="/admin/productlist">
+                                        <NavDropdown.Item >Products</NavDropdown.Item>
+                                    </LinkContainer>
+                                    <LinkContainer to="/admin/orderlist">
+                                        <NavDropdown.Item >Orders</NavDropdown.Item>
+                                    </LinkContainer>              
+                                </NavDropdown> 
+                            )}
                     </Nav>
 
                 </Navbar.Collapse>

diff --git a/client/src/components/Ecommerce/Screen/PlaceOrderScreen.js b/client/src/components/Ecommerce/Screen/PlaceOrderScreen.js
@@ -13,7 +13,7 @@ const PlaceOrderScreen = ({ history }) => {
   const cart = useSelector((state) => state.cart);
 
   const orderCreate = useSelector((state) => state.orderCreate);
-  const { order, success, error } = orderCreate;
+  const { error } = orderCreate;
 
   // useEffect(() => {
   //   if (success) {

diff --git a/client/src/components/Ecommerce/Screen/UserList.js b/client/src/components/Ecommerce/Screen/UserList.js
@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react'
+import { Button, Table } from 'react-bootstrap'
+import { useDispatch, useSelector } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
+import { getUserList } from '../../../redux/actions/userActions'
+import Loader from '../Loader'
+import Message from '../Message'
+
+function UserList() {
+
+    const dispatch = useDispatch()
+    const userList = useSelector(state => state.userList)
+
+    const { loading, error, users } = userList
+
+    useEffect(() => {
+        dispatch(getUserList())
+    }, [dispatch])
+
+    const handleDelete = () => {
+        console.log('deleted')
+    }
+
+    return (
+        <>
+            {loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message> : (
+                <>
+                <h1>All Users</h1>
+                <Table striped bordered hover>   
+                    <thead>
+                        <tr>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th>Email</th>
+                        <th>Admin</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {users.map(user=>(
+                            <tr key={user._id}>
+                                <td>{user._id}</td>
+                                <td>{user.name}</td>
+                                <td>
+                                    <a href={`mailto:${user.email}`}>{user.email}</a>
+                                </td>
+                                <td>
+                                    {user.isAdmin ?
+                                        <i className="fas fa-check" style={{ color: 'green' }}></i>:
+                                        <i className="fas fa-times" style={{ color: 'red' }}></i>
+                                    }
+                                </td>
+                                <td>
+                                    <LinkContainer to={`users/${user._id}/edit`}>
+                                        <Button ><i className='fas fa-edit'></i></Button>
+                                    </LinkContainer>
+                                </td>
+                                <td>
+                                    <Button variant='light' onClick={handleDelete}><i className='fas fa-trash'></i></Button>
+                                </td>                                
+                            </tr>
+                        ))}
+                    </tbody>    
+                </Table>        
+            </>
+            )}
+        </>    
+    )
+}
+
+export default UserList
diff --git a/client/src/constants/userConstants.js b/client/src/constants/userConstants.js
@@ -16,3 +16,7 @@ export const USER_PROFILE_UPDATE_REQUEST = "USER_PROFILE_UPDATE_REQUEST"
 export const USER_PROFILE_UPDATE_SUCCESS = "USER_PROFILE_UPDATE_SUCCESS"
 export const USER_PROFILE_UPDATE_FAIL = "USER_PROFILE_UPDATE_FAIL"
 export const USER_PROFILE_UPDATE_RESET = "USER_PROFILE_UPDATE_RESET"
+
+export const USER_LIST_REQUEST = "USER_LIST_REQUEST"
+export const USER_LIST_SUCCESS = "USER_LIST_SUCCESS"
+export const USER_LIST_FAIL = "USER_LIST_FAIL"
diff --git a/client/src/pages/EcommercePage.js b/client/src/pages/EcommercePage.js
@@ -14,6 +14,7 @@ import ProductScreen from '../components/Ecommerce/Screen/ProductScreen';
 import ProfileScreen from '../components/Ecommerce/Screen/ProfileScreen';
 import RegisterScreen from '../components/Ecommerce/Screen/RegisterScreen';
 import ShippingScreen from "../components/Ecommerce/Screen/ShippingScreen";
+import UserList from "../components/Ecommerce/Screen/UserList";
 import '../styles/ecommerce.css';
 
 function EcommercePage() {
@@ -31,6 +32,7 @@ function EcommercePage() {
           <Route path="/forget-password" component={ForgetPasswordScreen} />
           <Route path="/reset-password/:resetToken" component={PasswordResetScreen} />
           <Route path="/profile" component={ProfileScreen} />
+          <Route path="/admin/userlist" component={UserList} />
           <Route path="/product/:id" component={ProductScreen} />
           <Route path="/cart/:id?" component={CartScreen} />
           <Route path="/shipping" component={ShippingScreen} />

diff --git a/client/src/redux/actions/userActions.js b/client/src/redux/actions/userActions.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { USER_DETAILS_FAIL, USER_DETAILS_REQUEST, USER_DETAILS_SUCCESS, USER_LOGIN_FAIL, USER_LOGIN_REQUEST, USER_LOGIN_SUCCESS, USER_LOGOUT, USER_PROFILE_UPDATE_FAIL, USER_PROFILE_UPDATE_REQUEST, USER_PROFILE_UPDATE_SUCCESS, USER_REGISTER_FAIL, USER_REGISTER_REQUEST, USER_REGISTER_SUCCESS } from '../../constants/userConstants'
+import { USER_DETAILS_FAIL, USER_DETAILS_REQUEST, USER_DETAILS_SUCCESS, USER_LIST_FAIL, USER_LIST_REQUEST, USER_LIST_SUCCESS, USER_LOGIN_FAIL, USER_LOGIN_REQUEST, USER_LOGIN_SUCCESS, USER_LOGOUT, USER_PROFILE_UPDATE_FAIL, USER_PROFILE_UPDATE_REQUEST, USER_PROFILE_UPDATE_SUCCESS, USER_REGISTER_FAIL, USER_REGISTER_REQUEST, USER_REGISTER_SUCCESS } from '../../constants/userConstants'
 
 export const login = (email,password) => async (dispatch) => {
 
@@ -175,4 +175,40 @@ export const updateUserProfile = (user) => async (dispatch,getState) => {
 
     }
 
+}
+
+export const getUserList = () => async (dispatch,getState) => {
+
+    try {
+        dispatch({
+            type:USER_LIST_REQUEST
+        })
+
+        const { userLogin: { userInfo } } = getState()
+
+
+        const config = {
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${userInfo.token}`
+            }
+        }
+
+        const { data } = await axios.get(`/api/users`,config)
+
+        dispatch({
+            type: USER_LIST_SUCCESS,
+            payload:data
+        })
+
+    } catch (error) {
+        console.log(error);
+        dispatch({
+            type: USER_LIST_FAIL,
+            payload: error.response && error.response.data.message ? error.response.data.message : error.message
+
+        })
+
+    }
+
 }
diff --git a/client/src/redux/reducers/userReducers.js b/client/src/redux/reducers/userReducers.js
@@ -1,4 +1,4 @@
-import { USER_DETAILS_FAIL, USER_DETAILS_REQUEST, USER_DETAILS_SUCCESS, USER_LOGIN_FAIL, USER_LOGIN_REQUEST, USER_LOGIN_SUCCESS, USER_LOGOUT, USER_PROFILE_UPDATE_FAIL, USER_PROFILE_UPDATE_REQUEST, USER_PROFILE_UPDATE_SUCCESS, USER_REGISTER_FAIL, USER_REGISTER_REQUEST, USER_REGISTER_SUCCESS } from "../../constants/userConstants"
+import { USER_DETAILS_FAIL, USER_DETAILS_REQUEST, USER_DETAILS_SUCCESS, USER_LIST_FAIL, USER_LIST_REQUEST, USER_LIST_SUCCESS, USER_LOGIN_FAIL, USER_LOGIN_REQUEST, USER_LOGIN_SUCCESS, USER_LOGOUT, USER_PROFILE_UPDATE_FAIL, USER_PROFILE_UPDATE_REQUEST, USER_PROFILE_UPDATE_SUCCESS, USER_REGISTER_FAIL, USER_REGISTER_REQUEST, USER_REGISTER_SUCCESS } from "../../constants/userConstants"
 
 
 export const userLoginReducer = (state = {}, action) => {
@@ -65,6 +65,22 @@ export const userProfileUpdateReducer = (state = {}, action) => {
         case USER_PROFILE_UPDATE_FAIL:
             return { loading: false, error: action.payload }
 
+        default:
+            return state
+    }
+}
+
+export const userListReducer = (state = { users: [] }, action) => {
+    switch (action.type) {
+        case USER_LIST_REQUEST:
+            return { ...state,loading: true }
+
+        case USER_LIST_SUCCESS:
+            return { loading: false, users: action.payload }
+
+        case USER_LIST_FAIL:
+            return { loading: false, error: action.payload }
+
         default:
             return state
     }

diff --git a/client/src/store.js b/client/src/store.js
@@ -2,18 +2,17 @@ import { applyMiddleware, combineReducers, createStore } from "redux";
 import { composeWithDevTools } from "redux-devtools-extension";
 import thunk from "redux-thunk";
 import { cartReducer } from "./redux/reducers/cartReducers";
+import { orderCreateReducer } from "./redux/reducers/orderReducers";
 import {
   productCreateReviewReducer,
   productDetailsReducer,
-  productListReducer,
+  productListReducer
 } from "./redux/reducers/productReducers";
 import {
-  userDetailsReducer,
-  userLoginReducer,
+  userDetailsReducer, userListReducer, userLoginReducer,
   userProfileUpdateReducer,
-  userRegisterReducer,
+  userRegisterReducer
 } from "./redux/reducers/userReducers";
-import { orderCreateReducer } from "./redux/reducers/orderReducers";
 
 const reducer = combineReducers({
   productList: productListReducer,
@@ -23,6 +22,7 @@ const reducer = combineReducers({
   userRegister: userRegisterReducer,
   userDetails: userDetailsReducer,
   userProfileUpdate: userProfileUpdateReducer,
+  userList: userListReducer,
   productCreateReview: productCreateReviewReducer,
   orderCreate: orderCreateReducer,
 });
@@ -37,6 +37,7 @@ const userInfoFromStorage = localStorage.getItem("userInfo")
 const shippingAddressFromStorage = localStorage.getItem("shippingAddress")
   ? JSON.parse(localStorage.getItem("shippingAddress"))
   : {};
+
 const initialState = {
   cart: {
     cartItems: cartItemsFromStorage,

diff --git a/server/middlewares/authMiddleware.js b/server/middlewares/authMiddleware.js
@@ -20,9 +20,6 @@ const isLoggedIn = async (req, res, next) => {
             req.userId = decodedData?.sub
         }
 
-        console.log(req.userId);
-        console.log(req.user);
-
         next()
     } catch (error) {
         console.log(error);