Skip to content

M
mernStack
Commit bb7b63ee authored by Venkaiah Naidu Singamchetty's avatar Venkaiah Naidu Singamchetty
Browse files
Options

user profile

parent 6bcdeeec
Show whitespace changes
Inline Side-by-side
Showing with 25 additions and 16 deletions
src/components/Cart/Cart.tsx
View file @ bb7b63ee
...@@ -10,14 +10,14 @@ const Cart = memo(() => { ...@@ -10,14 +10,14 @@ const Cart = memo(() => {
const cartItems = useSelector((state: RootState) => state.cart.cartItems); const cartItems = useSelector((state: RootState) => state.cart.cartItems);
const user = useSelector((state: RootState) => state.userDetails.userDetails); const user = useSelector((state: RootState) => state.userDetails.userDetails);
const capitalizedUserId = user && user.userId ? user.userId.charAt(0).toUpperCase() + user.userId.slice(1) : null; const capitalizedUserId = user && user.userId ? user.userId.charAt(0).toUpperCase() + user.userId.slice(1) : null;
const [preCartItems,setPreCartItems]=useState(cartItems); // const [preCartItems,setPreCartItems]=useState(cartItems);
useEffect(()=>{ useEffect(()=>{
if(Object.keys(user).length===0){ if(Object.keys(user).length===0){
navigate('/login') navigate('/login')
}else{ }else{
dispatch(fetchCartItems(user.userId)) dispatch(fetchCartItems(user.userId))
} }
},[]) },[cartItems])
const handleCartItems=()=>{ const handleCartItems=()=>{
dispatch(fetchCartItems(user.userId)) dispatch(fetchCartItems(user.userId))
} }
...@@ -25,14 +25,14 @@ const Cart = memo(() => { ...@@ -25,14 +25,14 @@ const Cart = memo(() => {
return ( return (
<div> <div>
<div> <div>
<button type="button" onClick={handleCartItems} className="btn btn-primary mx-2" data-bs-toggle="modal" data-bs-target="#exampleModal"> <button type="button" onClick={handleCartItems} className="btn btn-primary mx-2" data-bs-toggle="modal" data-bs-target="#cartModal">
<span className='bi bi-cart'></span> Cart <span className='bi bi-cart'></span> Cart
</button> </button>
<div className="modal fade" id="exampleModal" tabIndex={-1} aria-labelledby="exampleModalLabel" aria-hidden="true"> <div className="modal fade" id="cartModal" tabIndex={-1} aria-labelledby="cartModalLabel" aria-hidden="true">
<div className="modal-dialog"> <div className="modal-dialog">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalLabel">{capitalizedUserId}'s Cart</h1> <h1 className="modal-title fs-5" id="cartModalLabel">{capitalizedUserId}'s Cart</h1>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
...@@ -57,10 +57,10 @@ const Cart = memo(() => { ...@@ -57,10 +57,10 @@ const Cart = memo(() => {
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="modal-footer"> {/* <div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button> <button type="button" className="btn btn-primary">Save changes</button>
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>
......
src/components/Profile/Profile.tsx
View file @ bb7b63ee
import React, { memo } from 'react'; import React, { memo, useEffect } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { RootState } from '../../reduxstore/store'; import { RootState } from '../../reduxstore/store';
const Profile = memo(() => { const Profile = memo(() => {
const userData = useSelector((state: RootState) => state.userDetails.userDetails); const userData = useSelector((state: RootState) => state.userDetails.userDetails);
useEffect(()=>{console.log(userData)},[userData])
return ( return (
<div> <div>
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#profileModal">
<span className='bi bi-person'></span> <span className='bi bi-person'></span>
</button> </button>
<div className="modal fade" id="exampleModal" tabIndex={-1} aria-labelledby="exampleModalLabel" aria-hidden="true"> <div className="modal fade" id="profileModal" tabIndex={-1} aria-labelledby="profileModalLabel" aria-hidden="true">
<div className="modal-dialog"> <div className="modal-dialog">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <h1 className="modal-title fs-5" id="profileModalLabel">My Profile</h1>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div className="modal-body"> <div className="modal-body d-flex justify-content-center align-items-center">
... {
userData && <div>
<p className='text-center'><span className='bi bi-person fs-1'></span></p>
<p>User : {userData.userId}</p>
<p>Email: {userData.email}</p>
<p>Mobile: {userData.mobile}</p>
</div>
}
</div> </div>
<div className="modal-footer"> {/* <div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button> <button type="button" className="btn btn-primary">Save changes</button>
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>
......
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