Skip to content

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

Merge branch 'master' into 'Prashanth' 

# Conflicts:
#   src/index.tsx
parents 9ee61b1c 2675ece7
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 45 deletions
server.js
View file @ 89a8bd87
......@@ -72,7 +72,8 @@ app.post('/registeruser', checkUserIdExists, (req, res) => {
// Get Users endpoint
app.get('/users', (req, res) => {
db.collection('users').find({}, { projection: { _id: false, userId: true, password: true } }).toArray()
// db.collection('users').find({}, { projection: { _id: false, userId: true, password: true } }).toArray()
db.collection('users').find({}, { projection: { _id: false} }).toArray()
.then(result => {
res.send(result);
})
......
src/App.tsx
View file @ 89a8bd87
......@@ -5,6 +5,8 @@ import Login from './components/Login/Login';
import Register from './components/Register/Register';
import Cart from './components/Cart/Cart';
import Profile from './components/Profile/Profile';
import Products from './components/catelog/Products';
import Product from './components/catelog/Product';
import ForgetPasswordForm from './components/ForgetPasswordForm/ForgetPasswordForm';
import { Provider } from 'react-redux';
import store from './reduxstore/store';
......@@ -23,8 +25,9 @@ function App() {
<Route path="/register" Component={Register} />
<Route path="/cart" Component={Cart}/>
<Route path="/profile" Component={Profile}/>
<Route path="/products" Component={Products}/>
<Route path="/forgot-password" Component={ForgetPasswordForm}/>
</Routes>
<Footer/>
</BrowserRouter>
......
src/components/Login/Login.css
View file @ 89a8bd87
.loginsignup{
width:100%;
height: 80vh;
height: 100vh;
background:#fce3fe ;
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.loginsignup-container{
width:580px;
height:600px;
height:max-content;
background: white;
margin: auto;
padding:40px 60px;
......@@ -31,7 +34,7 @@
font-size: 18px;
}
.loginsignup-container button{
width: 580px;
width: 100%;
height: 72px;
color: white;
background:#ff4141;
......
src/components/Login/Login.tsx
View file @ 89a8bd87
......@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
import {useSelector, useDispatch} from 'react-redux'
import { fetchUsers } from '../../reduxstore/usersSlice';
import { RootState } from '../../reduxstore/store';
import { loginUser } from '../../reduxstore/userDetailsslice';
const Login: React.FC = memo(() => {
......@@ -18,12 +19,6 @@ const Login: React.FC = memo(() => {
userId: "",
password: ""
})
// const validateUserID=useCallback(()=>{
// },[values])
// useEffect(()=>{validateUserID()},[values])
useEffect(() => {
dispatch(fetchUsers());
......@@ -35,8 +30,10 @@ const Login: React.FC = memo(() => {
users.map((user)=>{
if(user.userId==values.userId.trim()){
if(user.password==values.password.trim()){
console.log(user.userId)
navigate("/")
// console.log(user)
dispatch(loginUser(user))
navigate("/products")
}
else{
setError(("UserId/Password is incorrect"))
......@@ -56,7 +53,7 @@ const Login: React.FC = memo(() => {
};
return (
<div className='loginsignup'>
<div className='loginsignup py-5'>
<div className='loginsignup-container'>
<h1>Log In</h1>
<form onSubmit={handleSubmit}>
......@@ -81,7 +78,7 @@ const Login: React.FC = memo(() => {
<button type="submit" >Login</button>
</form>
<p className='loginsignup-login'>
<span> <Link to="/forgot-password">Forgot Password</Link></span>
<span>If new user please <Link to="/register">Register</Link></span>
</p>
</div>
......
src/components/Register/Register.css
View file @ 89a8bd87
......@@ -3,12 +3,12 @@ p, div {
}
.wrapper {
height: 97vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(6, 150, 30);
background-color:#fce3fe ;
}
.form-wrapper {
......
src/components/Register/Register.tsx
View file @ 89a8bd87
import React, { memo, useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import './Register.css';
import { useSelector, useDispatch } from 'react-redux'
import { fetchUsers } from '../../reduxstore/usersSlice';
......@@ -10,7 +10,7 @@ const Register = () => {
const navigate = useNavigate()
const dispatch = useDispatch()
const users = useSelector((state: RootState) => state.users.users)
const [userErr, setUserErr] = useState<any|null>(null);
const [userErr, setUserErr] = useState<any | null>(null);
const [enablesubmit, setEnablesubmit] = useState<boolean>(true);
const [values, setValues] = useState<any>({
......@@ -27,7 +27,7 @@ const Register = () => {
setValues({ ...values, [name]: value })
};
const validateUserID =useCallback( () => {
const validateUserID = useCallback(() => {
let errors = {
userIdErr: "",
fnameErr: "",
......@@ -38,49 +38,49 @@ const Register = () => {
};
if (values.userId !== "" && values.userId.length < 5) {
errors.userIdErr= "UserId should have atleast 5 to 10 characters"
errors.userIdErr = "UserId should have atleast 5 to 10 characters"
}
if (values.userId !== "" && values.userId.length >= 5) {
users.map((user) => {
if (user.userId == values.userId.trim()) {
errors.userIdErr= "User ID is already taken"
errors.userIdErr = "User ID is already taken"
} else {
errors.userIdErr= ""
errors.userIdErr = ""
}
})
}
if (values.fname != "" && values.fname.length <= 4) {
errors.fnameErr= "Name should be more than 4 characters"
}else {
errors.fnameErr= ""
errors.fnameErr = "Name should be more than 4 characters"
} else {
errors.fnameErr = ""
}
if (values.lname != "" && values.lname.length <= 4) {
errors.lnameErr= "Last Name should be more than 4 characters"
}else {
errors.lnameErr= ""
errors.lnameErr = "Last Name should be more than 4 characters"
} else {
errors.lnameErr = ""
}
if (values.email !== "") {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(values.email)) {
errors.emailErr="Enter valid email address"
errors.emailErr = "Enter valid email address"
} else {
errors.emailErr=""
errors.emailErr = ""
}
}
if (values.mobile !== "") {
const mobileRegex = /^\d{10}$/;
if (!mobileRegex.test(values.mobile)) {
errors.mobileErr= "Enter valid mobile number"
errors.mobileErr = "Enter valid mobile number"
} else {
errors.mobileErr= ""
errors.mobileErr = ""
}
}
if (values.password !== "") {
const passwordRegex = /^(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,}$/;
if (!passwordRegex.test(values.password)) {
errors.passwordErr= "Password >5 characters and one special character"
errors.passwordErr = "Password >5 characters and one special character"
} else {
errors.passwordErr= ""
errors.passwordErr = ""
}
}
......@@ -97,17 +97,17 @@ const Register = () => {
Object.values(errors).every(error => error === "")
) {
setEnablesubmit(false);
}else {
} else {
setEnablesubmit(true);
}
setUserErr(errors);
},[values])
}, [values])
useEffect(() => {
validateUserID();
}, [values,validateUserID]);
}, [values, validateUserID]);
const handleSubmit = async (e: any) => {
e.preventDefault()
......@@ -128,7 +128,6 @@ const Register = () => {
<div className='form-wrapper'>
<h2>Registration Form</h2>
<form onSubmit={handleSubmit} noValidate={true}>
<table>
<tbody>
<tr>
......@@ -154,7 +153,7 @@ const Register = () => {
<td><input value={values.lname} name='lname' onChange={handleChange} type='text' /></td>
</tr>
{
userErr&& <tr>
userErr && <tr>
<td colSpan={2} style={{ textAlign: "center", color: "red" }}><span>{userErr.lnameErr}</span></td>
</tr>
}
......@@ -186,12 +185,17 @@ const Register = () => {
</tr>
}
<tr>
<td colSpan={2} style={{textAlign:"center"}}><button type='submit' disabled={enablesubmit} style={enablesubmit ? { width: "100px",height:"30px", color: "black", fontWeight: "bolder", backgroundColor: "grey",borderRadius:"50%",boxShadow:"0px 0px 10px",marginTop:"10px"} : {color: "white", backgroundColor: "green",width: "100px",height:"30px",borderRadius:"50%",boxShadow:"0px 0px 20px black",marginTop:"10px" }}>Submit</button></td>
<td colSpan={2} style={{ textAlign: "center" }}><button type='submit' disabled={enablesubmit} style={enablesubmit ? { width: "100px", height: "30px", color: "black", fontWeight: "bolder", backgroundColor: "grey", borderRadius: "10%", boxShadow: "0px 0px 10px", marginTop: "10px" } : { color: "white", backgroundColor: "green", width: "100px", height: "30px", borderRadius: "10%", boxShadow: "0px 0px 20px black", marginTop: "10px" }}>Submit</button></td>
</tr>
</tbody>
</table>
</form>
<div className='d-flex justify-content-end mt-3'>
<span>Already registered <Link to={"/login"}><button className='btn btn-warning'>Sign In</button></Link></span>
</div>
</div>
</div>
);
};
......
src/components/catelog/Product.tsx 0 → 100644
View file @ 89a8bd87
import React, { memo } from 'react';
type ProductType = {
_id:string
id?: string
title: string
price: number
inStock: boolean
description: string
category:string
image:string
rating:{rate:number,count:number}
qty:number
}
type ProductPropsType = {
product: ProductType | null
}
const Product = memo((props: ProductPropsType) => {
console.log(props.product)
const {id,title,description,category,image,rating:{rate,count},qty,price}:ProductType= props.product!;
return (<div className='col-lg-4 col-md-2 col-sm-1 my-2' style={{width: "300px"}}>
<div className="card" >
<img src={image} className="img-fluid" style={{width:"100%",height:"200px"}} alt="..."/>
<div className="card-body" style={{width:"100%",height:"130px",overflowY: "scroll"}}>
<p className="card-title fw-bolder">Title: {title}</p>
<p className="card-text" style={{fontSize:"10px"}}><span className='fw-bold'>Description:</span><br/>{description}</p>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item"><span className='fw-bold'>Category : </span> {category}</li>
<li className="list-group-item">Rating :{rate}/5({count})</li>
<li className="list-group-item">Price :{price}</li>
</ul>
<div className="card-body">
<button className='btn btn-danger w-100'>Add To Cart</button>
</div>
</div>
</div>
);
});
export default Product;
\ No newline at end of file
src/components/catelog/Products.tsx 0 → 100644
View file @ 89a8bd87
import React, { memo, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom';
import { RootState } from '../../reduxstore/store';
import { fetchProducts } from '../../reduxstore/productsSlice';
import Product from './Product';
const Products = memo(() => {
const navigate = useNavigate()
const dispatch=useDispatch()
const products = useSelector((state: RootState) => state.products);
const user = useSelector((state: RootState) => state.userDetails.userDetails)
console.log(products)
useEffect(() => {
if (user !== null) {
const isEmpty = Object.keys(user).length === 0 && user.constructor === Object;
if (isEmpty) {
navigate('/login');
} else {
dispatch(fetchProducts());
}
} else {
navigate('/login');
}
}, [user])
if (products.loading) { return <div className="text-center mt-5">Loading...</div> }
else if(products.error!=="") { return <h1>{products.error}</h1>}
else {
return (
<div className='row d-flex justify-content-evenly bg-dark'>
{
products.products && products.products.map((product) => <Product key={product.id} product={product} />)
}
</div>
);
}
});
export default Products;
\ No newline at end of file
src/reduxstore/store.ts
View file @ 89a8bd87
......@@ -2,17 +2,20 @@ import { configureStore } from '@reduxjs/toolkit'
import cartReducer,{CartStateType} from './cartSlice'
import productsReducer,{ProductsStateType} from './productsSlice'
import usersReducer,{UsersStateType} from './usersSlice'
import userDetailsslice,{UserDetailsType} from './userDetailsslice'
export type RootState= {
products:ProductsStateType;
cart: CartStateType;
users: UsersStateType;
userDetails:UserDetailsType
}
const store=configureStore({
reducer:{
products:productsReducer,
cart: cartReducer,
users: usersReducer
users: usersReducer,
userDetails:userDetailsslice
},
})
......
src/reduxstore/userDetailsslice.ts
View file @ 89a8bd87
import { createSlice } from "@reduxjs/toolkit"
type UserDetailsType={
userDetails:any[]|null
export type UserDetailsType={
userDetails:{}|null
}
const initialState:UserDetailsType={
userDetails:[],
userDetails:{},
}
const userDetailsSlice=createSlice({
......
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