33.Implement Display user profile

AyaBassi · May 11, 2021 · 2992714 · 2992714
1 parent 96fcc94
commit 2992714
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 11 deletions.
diff --git a/backendserver/routers/userRouter.js b/backendserver/routers/userRouter.js
@@ -55,4 +55,16 @@ userRouter.post(
   })
 );
 
+userRouter.get(
+  "/:id",
+  expressAsyncHandler(async (req, res) => {
+    const user = await User.findById(req.params.id);
+    if (user) {
+      res.send(user);
+    } else {
+      res.status(404).send({ message: "User Not Found!" });
+    }
+  })
+);
+
 export default userRouter;
diff --git a/react_frontend/jsconfig.json b/react_frontend/jsconfig.json
@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "target": "es6"
+    },
+    "exclude": ["node_modules"]
+}
diff --git a/react_frontend/src/App.js b/react_frontend/src/App.js
@@ -12,6 +12,7 @@ import PaymentMethodScreen from "./screens/PaymentMethodScreen";
 import PlaceOrderScreens from "./screens/PlaceOrderScreens";
 import OrderScreen from "./screens/OrderScreen";
 import OrderHistoryScreen from "./screens/OrderHistoryScreen";
+import ProfileScreen from "./screens/ProfileScreen";
 
 function App() {
   const cart = useSelector((state) => state.cart);
@@ -47,6 +48,9 @@ function App() {
                   <i className="fa fa-caret-down"></i>
                 </Link>
                 <ul className="dropdown-content">
+                  <li>
+                    <Link to="/profile">User Profile</Link>
+                  </li>
                   <li>
                     <Link to="/orderhistory">Order History</Link>
                   </li>
@@ -70,6 +74,7 @@ function App() {
           <Route path="/placeorder" component={PlaceOrderScreens}></Route>
           <Route path="/order/:id" component={OrderScreen}></Route>
           <Route path="/orderhistory" component={OrderHistoryScreen}></Route>
+          <Route path="/profile" component={ProfileScreen}></Route>
           <Route path="/" component={HomeScreen} exact></Route>
         </main>
         <footer className="row center">All rights reserved</footer>

diff --git a/react_frontend/src/actions/userActions.js b/react_frontend/src/actions/userActions.js
@@ -1,5 +1,8 @@
-import axios from "axios";
+import Axios from "axios";
 import {
+  USER_DETAILS_FAIL,
+  USER_DETAILS_REQUEST,
+  USER_DETAILS_SUCCESS,
   USER_REGISTER_FAIL,
   USER_REGISTER_REQUEST,
   USER_REGISTER_SUCCESS,
@@ -12,7 +15,7 @@ import {
 export const signin = (email, password) => async (dispatch) => {
   dispatch({ type: USER_SIGNIN_REQUEST, payload: { email, password } });
   try {
-    const { data } = await axios.post("/api/users/signin", { email, password });
+    const { data } = await Axios.post("/api/users/signin", { email, password });
     dispatch({ type: USER_SIGNIN_SUCCESS, payload: data });
     // save user info to locala storage
     localStorage.setItem("userInfo", JSON.stringify(data));
@@ -30,7 +33,7 @@ export const signin = (email, password) => async (dispatch) => {
 export const register = (name, email, password) => async (dispatch) => {
   dispatch({ type: USER_REGISTER_REQUEST, payload: { email, password } });
   try {
-    const { data } = await axios.post("/api/users/register", {
+    const { data } = await Axios.post("/api/users/register", {
       name,
       email,
       password,
@@ -56,3 +59,41 @@ export const signout = () => (dispatch) => {
   localStorage.removeItem("shippingAddress");
   dispatch({ type: USER_SIGNOUT });
 };
+
+// export const detailsUser = (userId) => async (dispatch, getState) => {
+//   dispatch({ type: USER_DETAILS_REQUEST, payload: userId });
+//   const {
+//     userSignin: { userInfo },
+//   } = getState();
+//   try {
+//     const { data } = await Axios.get(`/api/users/${userId}`, {
+//       headers: { Authorization: `Bearer ${userInfo.token}` },
+//     });
+//     dispatch({ type: USER_DETAILS_SUCCESS, payload: data });
+//   } catch (error) {
+//     const message =
+//       error.response && error.response.data.messge
+//         ? error.response.data.messge
+//         : error.message;
+//     dispatch({ type: USER_DETAILS_FAIL, payload: message });
+//   }
+// };
+
+export const detailsUser = (userId) => async (dispatch, getState) => {
+  dispatch({ type: USER_DETAILS_REQUEST, payload: userId });
+  const {
+    userSignin: { userInfo },
+  } = getState();
+  try {
+    const { data } = await Axios.get(`/api/users/${userId}`, {
+      headers: { Authorization: `Bearer ${userInfo.token}` },
+    });
+    dispatch({ type: USER_DETAILS_SUCCESS, payload: data });
+  } catch (error) {
+    const message =
+      error.response && error.response.data.message
+        ? error.response.data.message
+        : error.message;
+    dispatch({ type: USER_DETAILS_FAIL, payload: message });
+  }
+};
diff --git a/react_frontend/src/constants/userConstants.js b/react_frontend/src/constants/userConstants.js
@@ -1,8 +1,12 @@
-export const USER_REGISTER_REQUEST = 'USER_REGISTER_REQUEST';
-export const USER_REGISTER_SUCCESS = 'USER_REGISTER_SUCCESS';
-export const USER_REGISTER_FAIL = 'USER_REGISTER_FAIL';
+export const USER_REGISTER_REQUEST = "USER_REGISTER_REQUEST";
+export const USER_REGISTER_SUCCESS = "USER_REGISTER_SUCCESS";
+export const USER_REGISTER_FAIL = "USER_REGISTER_FAIL";
 
-export const USER_SIGNIN_REQUEST = 'USER_SIGNIN_REQUEST';
-export const USER_SIGNIN_SUCCESS = 'USER_SIGNIN_SUCCESS';
-export const USER_SIGNIN_FAIL = 'USER_SIGNIN_FAIL';
-export const USER_SIGNOUT = 'USER_SIGNOUT';
+export const USER_SIGNIN_REQUEST = "USER_SIGNIN_REQUEST";
+export const USER_SIGNIN_SUCCESS = "USER_SIGNIN_SUCCESS";
+export const USER_SIGNIN_FAIL = "USER_SIGNIN_FAIL";
+export const USER_SIGNOUT = "USER_SIGNOUT";
+
+export const USER_DETAILS_REQUEST = "USER_DETAILS_REQUEST";
+export const USER_DETAILS_SUCCESS = "USER_DETAILS_SUCCESS";
+export const USER_DETAILS_FAIL = "USER_DETAILS_FAIL";
diff --git a/react_frontend/src/reducers/userReducers.js b/react_frontend/src/reducers/userReducers.js
@@ -1,4 +1,7 @@
 import {
+  USER_DETAILS_FAIL,
+  USER_DETAILS_REQUEST,
+  USER_DETAILS_SUCCESS,
   USER_REGISTER_FAIL,
   USER_REGISTER_REQUEST,
   USER_REGISTER_SUCCESS,
@@ -34,4 +37,17 @@ export const userRegisterReducer = (state = {}, action) => {
     default:
       return state;
   }
-};
+};
+
+export const userDetailsReducer = (state = { loading: true }, action) => {
+  switch (action.type) {
+    case USER_DETAILS_REQUEST:
+      return { loading: true };
+    case USER_DETAILS_SUCCESS:
+      return { loading: false, user: action.payload };
+    case USER_DETAILS_FAIL:
+      return { loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
diff --git a/react_frontend/src/screens/ProfileScreen.js b/react_frontend/src/screens/ProfileScreen.js
@@ -0,0 +1,81 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { detailsUser } from "../actions/userActions";
+import LoadingBox from "../components/LoadingBox";
+import MessageBox from "../components/MessageBox";
+
+function ProfileScreen() {
+  const userSignin = useSelector((state) => state.userSignin);
+  const { userInfo } = userSignin;
+  const userDetails = useSelector((state) => state.userDetails);
+  const { loading, error, user } = userDetails;
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(detailsUser(userInfo.id));
+  }, [dispatch, userInfo.id]);
+  const submitHandler = (e) => {
+    e.preventDefault();
+
+  };
+  return (
+    <div>
+      <form className="form" onSubmit={submitHandler}>
+        <div>
+          <h1>User Profile</h1>
+        </div>
+        {loading ? (
+          <LoadingBox></LoadingBox>
+        ) : error ? (
+          <MessageBox variant="danger">{error}</MessageBox>
+        ) : (
+          <>
+            <div>
+              <label htmlFor="name">Name</label>
+              <input
+                id="name"
+                type="text"
+                placeholder="Enter name"
+                value={user.name}
+              ></input>
+            </div>
+            <div>
+              <label htmlFor="email">Email</label>
+              <input
+                id="email"
+                type="email"
+                placeholder="Enter email"
+                value={user.email}
+              ></input>
+            </div>
+            <div>
+              <label htmlFor="password">Password</label>
+              <input
+                id="password"
+                type="password"
+                placeholder="Enter password"
+              ></input>
+            </div>
+            <div>
+              <label htmlFor="confirmPassword">Confirm password</label>
+              <input
+                id="confirmPassword"
+                type="password"
+                placeholder="Enter password again"
+              ></input>
+            </div>
+            <div>
+              <label />
+              <button className="primary" type="submit">
+                Update
+              </button>
+            </div>
+          </>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default ProfileScreen;
diff --git a/react_frontend/src/store.js b/react_frontend/src/store.js
@@ -12,6 +12,7 @@ import {
   productListReducer,
 } from "./reducers/productReducers";
 import {
+  userDetailsReducer,
   userRegisterReducer,
   userSigninReducer,
 } from "./reducers/userReducers";
@@ -44,6 +45,7 @@ const reducer = combineReducers({
   orderDetails: orderDetailsReducer,
   orderPay: orderPayReducer,
   orderMineList: orderMineListReducer,
+  userDetails: userDetailsReducer,
 });
 const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const store = createStore(