Merge pull request #2 from sameer550/route-added

Route added

BabyShop/babyshop/package.json

@@ -6,11 +6,12 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.25.0",
     "bootstrap": "^5.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.1.1",
-    "react-scripts": "5.0.0",
+    "react-scripts": "^5.0.0",
     "web-vitals": "^2.1.2"
   },
   "scripts": {

BabyShop/babyshop/src/App.js

@@ -1,18 +1,11 @@
 import "./App.css";
 import React from "react";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
-import Home from "./Features/Home";
-import Login from "./Features/Login";
-import { Route, Routes, Routes as Switch } from "react-router-dom";
+import NewRouter from "./Features/Routes";
+import { BrowserRouter } from "react-router-dom";
 import Signup from "./Features/signup";
 function App() {
-  return (
-    <Switch>
-      <Route exact path="/" element={<Home />} />
-      <Route exact path="/login" element={<Login />} />
-      <Route exact path="/signup" element={<Signup />} />
-    </Switch>
-  );
+  return <NewRouter />;
 }
 
 export default App;

BabyShop/babyshop/src/Features/Home/index.js

@@ -14,6 +14,7 @@ import Feature2 from "../../assets/img/jacket.jpg";
 import Foot from "../../components/footer";
 import Card from "../../components/Card";
 import Divider from "../../components/divider";
+import Clothes from "../../components/Clothes";
 import { useState } from "react";
 //import { useNavigate } from "react-router-dom";
 const Home = () => {
@@ -39,14 +40,14 @@ const Home = () => {
   ]);
   const [featureProducts, setfeaturesProduct] = useState([
     {
-      id: 1,
+      id: 4,
       imgSrc: Feature1,
       name: "BOYS SWEATSHIRT HAVE A NICE NAVY",
       price: 1000,
       discount: 800,
     },
     {
-      id: 2,
+      id: 5,
       imgSrc: Feature2,
       name: "GIRLS SWEATSHIRT HAVE A NICE NAVY",
       price: 2000,
@@ -99,28 +100,28 @@ const Home = () => {
   return (
     <div>
       <Nav />
+
       <img src={Sale} alt="logo" width={"100%"} />
+      <Clothes />
       <Divider />
+
       <div className="container">
         <div className="row">
-          {featureProducts.map(
-            ({ id, imgSrc, desc, price, discount, name }) => {
-              return (
-                <div className="col-3">
-                  <div className="my-2 px-1">
-                    <Card
-                      key={id}
-                      imgSrc={imgSrc}
-                      // name={desc}
-                      price={price}
-                      discount={discount}
-                      name={name}
-                    />
-                  </div>
+          {featureProducts.map(({ id, imgSrc, price, discount, name }) => {
+            return (
+              <div className="col-3">
+                <div className="my-2 px-1">
+                  <Card
+                    key={id}
+                    imgSrc={imgSrc}
+                    price={price}
+                    discount={discount}
+                    name={name}
+                  />
                 </div>
-              );
-            }
-          )}
+              </div>
+            );
+          })}
         </div>
       </div>
       <Divider />

BabyShop/babyshop/src/Features/Login/index.js

@@ -5,12 +5,16 @@ import Nav from "../../components/nabvar";
 import { useNavigate } from "react-router-dom";
 import Button from "../../components/button";
 import Foot from "../../components/footer";
+import axios from "axios";
+
 const Login = () => {
+  const [resp, setResp] = useState(true);
   const navigate = useNavigate();
   const [userDetails, setUserDetails] = useState({
-    userEmail: "",
-    userpassword: "",
+    email: "",
+    password: "",
   });
+
   const [formErrors, setFormErrors] = useState({});
   const saveUserDetails = (e) => {
     const { name, value } = e.target;
@@ -20,49 +24,82 @@ const Login = () => {
   };
   const validate = (values) => {
     const errors = {};
-    const regex = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
-    if (!values.userEmail) {
-      errors.userEmail = "Email address is required!";
-    } else if (!values.userEmail.match(regex)) {
-      errors.userEmail = "Email address is not valid!";
+    if (!values.email) {
+      errors.email = "Email address is required!";
     }
-    if (!values.userpassword) {
-      errors.userpassword = "Password is required!";
-    } else if (values.userpassword.length < 4) {
-      errors.userpassword = "Password must be more 4 characters";
-    } else if (values.userpassword.length > 10) {
-      errors.userpassword = "Password cannot be exceed more than 10 characters";
+    if (!values.password) {
+      errors.password = "Password is required!";
     }
     return errors;
   };
   const buttonClick = () => {
     setFormErrors(validate(userDetails));
-    let email = userDetails.userEmail;
-    let password = userDetails.userpassword;
-    const obj = JSON.parse(localStorage.getItem("dataUser"));
-    obj.map(({ userEmail, userpassword, firstName, lastName }) => {
-      if (email === userEmail) {
-        if (password === userpassword) {
-          localStorage.setItem(
-            "loginUser",
-            JSON.stringify({ email, name: firstName + " " + lastName })
-          );
+    let email = userDetails.email;
+    let password = userDetails.password;
+
+    // const obj = JSON.parse(localStorage.getItem("dataUser"));
+    console.log("userDetail", userDetails);
+    if (email == "" || password == "") {
+      alert("please filled fields");
+    } else {
+      localStorage.setItem("userLogin", { email });
+      axios
+        .setItem()
+        .get(
+          `http://localhost:4000/api/v1/users?email=${email}&&password=${password}`
+        )
+        .then((response) => {
+          console.log("Response", response);
           navigate("/");
-        } else {
-          alert("Password is incorrect");
-        }
-      } else {
-        alert("Email is incorrect");
-      }
-    });
+        })
+        .catch((err, response) => {
+          console.log("error", err);
+          if (response.status(404)) {
+            alert("Sorry email or id not found");
+          }
+        });
+    }
+
+    // fetch("http://localhost:4000/api/v1/users",{
+    //   method:"GET",
+    //   body:JSON.stringify(userDetails)
+    // }).then((response)=>{
+    //   console.log("reponse",response)
+    // }
+    // ).catch((err)=>{
+    //       console.log("error",err)
+    //   })
+    //   obj.map(({ email, userpassword, firstName, lastName }) => {
+    //     if (email === email) {
+    //       if (password === userpassword) {
+    //         localStorage.setItem(
+    //           "loginUser",
+    //           JSON.stringify({el, name: firstName + " " + lastName })
+    //         );
+    //         navigate("/");
+    //         setIsLogin(true);
+    //       } else {
+    //         setIsLogin(false);
+    //       }
+    //     } else {
+    //       setIsn(false);
+    //     }
+    //   });
+    //   if (isLogin === false) {
+    //     alert("Email or password nound");
+    //   }
   };
   useEffect(() => {
     if (localStorage.getItem("loginUser") !== null) {
       console.log("Log In");
       navigate("/");
     }
   }, []);
-
+  // useEffect((chk) => {
+  //   if (chk) {
+  //     alert("hellow");
+  //   }
+  // });
   return (
     <>
       <Nav />
@@ -77,21 +114,21 @@ const Login = () => {
                     type="text"
                     placeholder="Email"
                     id="email"
-                    name="userEmail"
+                    name="email"
                     onChange={saveUserDetails}
                   />
-                  <p className="error-message">{formErrors.userEmail}</p>
+                  <p className="error-message">{formErrors.email}</p>
                 </div>
 
                 <div className="forms-inputs mb-4">
                   <input
                     type="password"
                     placeholder="Password"
                     id="password"
-                    name="userpassword"
+                    name="password"
                     onChange={saveUserDetails}
                   />
-                  <p className="error-message">{formErrors.userpassword}</p>
+                  <p className="error-message">{formErrors.password}</p>
                 </div>
 
                 <div className="mb-3">

BabyShop/babyshop/src/Features/NotFound/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./style.css";
+import NotFoundimg from "../../assets/img/pagenotfound.png";
+
+const NotFound = () => {
+  return (
+    <div>
+      <img className="notFound" src={NotFoundimg} alt="PageNotFound"></img>
+    </div>
+  );
+};
+
+export default NotFound;

BabyShop/babyshop/src/Features/NotFound/style.css

@@ -0,0 +1,4 @@
+.notFound {
+  width: 100%;
+  height: 100vh;
+}

BabyShop/babyshop/src/Features/Routes/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Home from "../Home";
+import NotFound from "../NotFound";
+import {
+  Route,
+  Routes as Switch,
+  BrowserRouter,
+  Navigate,
+} from "react-router-dom";
+import { routeConfig } from "../Routes/routeConfig";
+const NewRouter = () => {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/" element={<Home />} />
+        <Route path="*" element={<NotFound />} />
+        {routeConfig.map(({ path, Component }, index) => {
+          if (!localStorage.getItem("loginUser")) {
+            return <Route path="/" element={<Navigate replace to="/" />} />;
+          }
+          return (
+            <Route path={path} key={index} element={<Component />}></Route>
+          );
+        })}
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default NewRouter;

BabyShop/babyshop/src/Features/Routes/routeConfig.js

@@ -0,0 +1,14 @@
+import Login from "../Login";
+import Signup from "../signup";
+export const routeConfig = [
+  {
+    path: "login",
+    name: "user login",
+    Component: Login,
+  },
+  {
+    path: "signup",
+    name: "user signup",
+    Component: Signup,
+  },
+];