Skip to content

Commit

Permalink
Added Profile page and tooltip to sidebar icon
Browse files Browse the repository at this point in the history
  • Loading branch information
redoC-A2k committed Jun 22, 2023
1 parent 1902490 commit b0ecbf9
Show file tree
Hide file tree
Showing 12 changed files with 189 additions and 50 deletions.
9 changes: 5 additions & 4 deletions client/src/App.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect} from 'react';
import Header from './components/Header';
// import AdminSignin from "./screens/adminSifnin.jsx";
import Home from './screens/Home';
import { Route, Switch, withRouter} from "react-router-dom";
import AdminPage from "./screens/AdminPage";
// import AdminPage from "./screens/AdminPage";
import PasswordReset from "./screens/PasswordReset"
import Product from "./screens/Product";
import Cart from "./components/Cart";
import Cart from "./screens/Cart";
import UserAdminAuth from "./screens/UserAdminAuth.jsx";
import "./index.css";
import Footer from './components/Footer';
import Toast from './components/Toast';
import ErrorPage from './screens/ErrorPage';
import Loader from './components/Loader';
import Profile from './screens/Profile';

function App(props) {
useEffect(()=>{
Expand All @@ -34,6 +34,7 @@ function App(props) {
<Route exact path="/auth" component={UserAdminAuth} />
{/*<Route exact path="/addproduct" component={AdminPage} />*/}
<Route exact path="/user/cart" component={Cart} />
<Route exact path="/user/profile" component={Profile} />
<Route exact path="/product/:productId" component={Product} />
<Route exact path="/" component={Home} />
<Route exact path="/user/:userId/:token" component={PasswordReset} />
Expand Down
6 changes: 0 additions & 6 deletions client/src/components/Actions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,6 @@ export default function Actions (props) {
<CtaButton solid id="buynow" onClick={handleBuyNow}><span className="fa-solid fa-bag-shopping icon"></span><span className='text'>Buy Now</span></CtaButton>
<CtaButton id="addtocart" onClick={handleAddCart}><span className="fa-solid fa-cart-shopping icon"></span><span className='text'>Add to Cart</span></CtaButton>
</div>
{/* <div>
<span className="fa-solid fa-cart-shopping"></span>
<br></br>
<span className="test"></span>
</div> */}
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ function Navbar(props){
<section id="navbar">
<div className="sidebar-icon">
<i className="fa-solid fa-bars" onClick={handleBarsIcon}></i>
{history.location.pathname==='/'?<></>:<span className="mytooltip">Go To homepage for filtering products</span>}
</div>

<h1 className="brand"><Link to="/">CovidMart</Link><img src={process.env.PUBLIC_URL+"/assets/images/CovidMart logo no background.png"} alt="logo" /> </h1>
Expand Down
68 changes: 40 additions & 28 deletions client/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,39 @@ section.slidebar div.body div.sbaritem div.sbaraccordion div.body.visible{
}

}

/* -------- Tooltip ------ */
div span.mytooltip{
position: absolute;
font-size: 1.6rem;
display: flex;
background-color: rgb(var(--primary-grey));
opacity: 0;
z-index: -2;
box-shadow: 0px 0px 2px 1px black;
height: min-content;
padding: 0.2rem 0.5rem;
border-radius: 5px;
margin:0 auto;
align-items: center;
}
div span.mytooltip::before{
content: "";
position: absolute;
display: inline-block;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-right: 5px solid black;
left:-10px
}

div i:not(.mytooltip):hover ~ span.mytooltip,
div span:not(.mytooltip):hover ~ span.mytooltip{
opacity: 1;
z-index: 1;
}

/* ############ Main Section ############ */

/* filter bar */
Expand Down Expand Up @@ -795,6 +828,7 @@ section.slidebar div.body div.sbaritem div.sbaraccordion div.body.visible{
#header #navbar > div.sidebar-icon {
text-align: center;
margin-right: auto;
position: relative;
}
#header #navbar > div.wrap-search-user {
/* width: 20%; */
Expand All @@ -807,7 +841,7 @@ section.slidebar div.body div.sbaritem div.sbaraccordion div.body.visible{
#header #navbar > div.wrap-search-user input {
font-size: 2rem;
margin: auto 0;
max-width: 50%;
max-width: 15.9rem;
margin-right: 0.1rem;
border: 0;
transition: 0.2s all;
Expand Down Expand Up @@ -1268,34 +1302,7 @@ section.slidebar div.body div.sbaritem div.sbaraccordion div.body.visible{
}

#actions div.rating div span.mytooltip{
position: absolute;
right: 0;
display: flex;
background-color: rgb(var(--primary-grey));
opacity: 0;
z-index: -2;
box-shadow: 0px 0px 2px 1px black;
height: min-content;
padding: 0.2rem 0.5rem;
border-radius: 5px;
margin:0 auto;
align-items: center;
}
#actions div.rating div span.mytooltip::before{
content: "";
position: absolute;
display: inline-block;
width: 0px;
left: 0;
height: 0px;
border: 5px solid transparent;
border-right: 5px solid black;
left:-10px
}

#actions div.rating div span.star-icon:hover ~ span.mytooltip{
opacity: 1;
z-index: 1;
}

#actions div.btndiv {
Expand Down Expand Up @@ -1420,6 +1427,11 @@ section.slidebar div.body div.sbaritem div.sbaraccordion div.body.visible{
margin: 0 auto;
}

/* ------ Profile ------ */
#profile{

}

/* ------- Footer -----*/
#footer{
background-color: rgba(var(--primary-white),1);
Expand Down
4 changes: 3 additions & 1 deletion client/src/redux/ActionCreators/fetchUserdata.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ export const fetchUserdata = (userId) =>{
fetch(`${process.env.REACT_APP_BACKEND}/getUserdata`,{
method:"post",
headers:{
"Content-Type":"application/json"
"Content-Type":"application/json",
authorization: "Bearer "+localStorage.getItem("jwt")

},
body:JSON.stringify({
userId:userId
Expand Down
2 changes: 1 addition & 1 deletion client/src/redux/ActionCreators/filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export const applyFilter = (price, category) => {
fetch(`${process.env.REACT_APP_BACKEND}/filter`, {
method: "post",
headers: {
authorization: "Bearer " + localStorage.getItem("jwt"),
"Content-Type": "application/json",
authorization: "Bearer " + localStorage.getItem("jwt"),
},
body: JSON.stringify({
price: price,
Expand Down
15 changes: 10 additions & 5 deletions client/src/components/Cart.jsx → client/src/screens/Cart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,23 @@ import React, { useState } from 'react'
import { useEffect } from 'react';
import { connect } from "react-redux";
import { deleteProductFromCart, updateProductInCart } from '../redux/ActionCreators/cart'
import {fetchUserdata} from '../redux/ActionCreators/fetchUserdata'
import { fetchcart } from '../redux/ActionCreators/cart';
import { Link } from 'react-router-dom/cjs/react-router-dom';
import CtaButton from './CtaButton';
import {showLoader,hideLoader} from "utility"
import CtaButton from '../components/CtaButton';
import {showLoader} from "utility"
import {showInfoToast,showErrorToast} from "toast"


const mapStateToProps = state => {
return { mycart: state.cart }
return { mycart: state.cart , userdata: state.user}
}
const mapDispatchToProps = dispatch => {
return {
fetchcart: (setPrice) => { dispatch(fetchcart(setPrice)) },
deleteProductFromCart: (userId, productId, setPrice) => { dispatch(deleteProductFromCart(userId, productId, setPrice)) },
updateProductInCart: (userId, productId, quantity, setPrice) =>{ dispatch(updateProductInCart(userId, productId, quantity, setPrice))}
updateProductInCart: (userId, productId, quantity, setPrice) =>{ dispatch(updateProductInCart(userId, productId, quantity, setPrice))},
fetchUserdata: (userId) => { dispatch(fetchUserdata(userId)) }
}
}
function Cart(props) {
Expand All @@ -28,12 +31,12 @@ function Cart(props) {
useEffect(()=>{
showLoader()
props.fetchcart(setPrice)
props.fetchUserdata(localStorage.getItem("userId"))
//razorpay script loading
const script = document.createElement("script");
script.src = "https://checkout.razorpay.com/v1/checkout.js";
script.async = true;
document.body.appendChild(script);

},[])


Expand Down Expand Up @@ -153,7 +156,9 @@ function Cart(props) {
<div className='row w-100' style={{ justifyContent: "center" }}>
<CtaButton solid onClick={() => {
console.log(totalprice)
if(props.userdata.address!=="")
openPayModal(totalprice, fetchcart, setPrice)
else showErrorToast("Update your address in profile")
}}><span className='fa-solid fa-indian-rupee-sign icon'></span><span className='text'>pay</span></CtaButton>
</div>
</div>):
Expand Down
2 changes: 1 addition & 1 deletion client/src/screens/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { applyFilter } from '../redux/ActionCreators/filter'
import { connect } from "react-redux";
import Card from "../components/Card";
import { showInfoToast,showErrorToast } from 'toast';
import { showErrorToast } from 'toast';
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

Expand Down
2 changes: 0 additions & 2 deletions client/src/screens/Product.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,8 @@ function Product(props){
let productId=props.location.pathname.split("/")[2];

useEffect(()=>{
// props.fetchCart();
props.fetchAProduct(productId)
props.fetchUserdata(localStorage.getItem("userId"))
// console.log(props.location.pathname)
showLoader()
},[props.location.pathname])

Expand Down
101 changes: 101 additions & 0 deletions client/src/screens/Profile.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React, { useEffect, useState } from "react";
import CtaButton from "../components/CtaButton";
import {fetchUserdata} from '../redux/ActionCreators/fetchUserdata'
import { connect } from "react-redux";
import {showLoader,hideLoader} from "utility"
import {showInfoToast,showErrorToast} from "toast"

const mapStateToProps = state => {
return { userdata: state.user }
}
const mapDispatchToProps = dispatch => {
return {
fetchUserdata: (userId) => { dispatch(fetchUserdata(userId)) }
}
}

function Profile(props){
const [name, setName] = useState("")
const [address, setAddress] = useState("")
useEffect(()=>{
if(props.userdata===null){
props.fetchUserdata(localStorage.getItem("userId"))
showLoader()
}

},[])
function handleSubmit(event){
event.preventDefault();
showLoader()
let namefield = document.querySelector("#profile form.myform #name")
let addressfield = document.querySelector("#profile form.myform #address")
if(name==="")
setName(props.userdata.name)
if(address==="")
setAddress(props.userdata.address)
console.log("name=",name,"address=",address)

fetch(`${process.env.REACT_APP_BACKEND}/user/updateProfile`,{
method:"put",
headers:{
"Content-Type":"application/json",
authorization: "Bearer "+localStorage.getItem("jwt")
},
body:JSON.stringify({
userId:localStorage.getItem("userId"),
name:name,
address:address
})
}).then(res => res.json())
.then(response =>{
hideLoader()
if(response.error)
showErrorToast(response.error)
else showInfoToast(response.message)
})
}
if(props.userdata!==null){
hideLoader()
return (<section id='profile'>
<form onSubmit={handleSubmit} className="myform" >
<fieldset>
<input
type="text"
autoComplete="off"
placeholder="Name"
id="name"
name="name"
onChange={(e) => { setName(e.target.value) }}
defaultValue={props.userdata.name}
required
/>
<label htmlFor="name">Name</label>
</fieldset>
<fieldset>
<input
type="text"
autoComplete="off"
placeholder="Address"
id="address"
name="address"
defaultValue={props.userdata.address}
onChange={(e) => { setAddress(e.target.value) }}
required
/>
<label htmlFor="address">Address</label>
</fieldset>
<CtaButton
solid
type="submit"
>
<span className={`fa-solid fa-pen icon`}></span>
<span className={`text`}>Update</span>
</CtaButton>
</form>
</section>)
}

else return <></>
}

export default connect(mapStateToProps,mapDispatchToProps)(Profile);
3 changes: 3 additions & 0 deletions server/models/userModel.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const userSchema = new mongoose.Schema({
type: String,
required: true,
},
address: {
type: String,
},
cart: [
{
_id: false,
Expand Down
Loading

0 comments on commit b0ecbf9

Please sign in to comment.