interface changed

package.json

@@ -12,9 +12,11 @@
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.3",
     "graphql-request": "^4.3.0",
+    "html-to-image": "^1.11.11",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
+    "react-qr-code": "^2.0.14",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -2,12 +2,14 @@ import { lazy, Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
 import NavBar from "./Components/NavBar";
 const Home = lazy(() => import("./Pages/Home"));
+const LoginSignUp = lazy(() => import("./Pages/LoginSignUp"));
 const LogIn = lazy(() => import("./Pages/Login"));
+const SignUp = lazy(() => import("./Pages/SignUp"));
+const ProFile = lazy(() => import("./Pages/Profile"));
 const QRcode = lazy(() => import("./Pages/QRcode"));
 const FollowTheStory = lazy(() => import("./Pages/FollowTheStory"));
 const Resources = lazy(() => import("./Pages/Resources"));
-const SignUp = lazy(() => import("./Pages/SignUp"));
-const LoginSignUp = lazy(() => import("./Pages/LoginSignUp"));
+const WishList = lazy(() => import("./Pages/WishList"));
 const ProductDetails = lazy(() => import("./Pages/ProductDetails"));
 const NoMatch = lazy(() => import("./Components/NoMatch"));
 
@@ -18,12 +20,13 @@ const App = () => {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/loginsignup" element={<LoginSignUp />} />
+          <Route path="/login" element={<LogIn />} />
           <Route path="/signup" element={<SignUp />} />
+          <Route path="/profile" element={<ProFile />} />
           <Route path="/resources" element={<Resources />} />
           <Route path="/followthestory" element={<FollowTheStory />} />
-
-          <Route path="/login" element={<LogIn />} />
           <Route path="/qrcode" element={<QRcode />} />
+          <Route path="/wishlist" element={<WishList />} />
           <Route path="/products/:slug" element={<ProductDetails />} />
           <Route path="*" element={<NoMatch />} />
         </Routes>

src/Components/NoMatch.js

@@ -1,16 +1,18 @@
-import React from 'react';
+import React from "react";
 
 const NoMatch = () => {
-	return (
-		<div>
-			<div className="container">
-				<div className="error-page">
-					<h1 className="error-code">404</h1>
-					<p className="error-text">Page not found</p>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="container">
+      <div className="banner-container">
+        <div className="banner">
+          <div className="error-page">
+            <h1 className="error-code">404</h1>
+            <p className="error-text">Page not found</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default NoMatch;

src/Pages/FollowTheStory.jsx

@@ -41,7 +41,7 @@ const Login = () => {
   }, [slug]);
 
   return (
-    <div className="container" style={{ marginTop: "100px" }}>
+    <div className="container">
       <div className="banner-container">
         <div className="banner">
           <div className="first-container">

src/Pages/Home.jsx

@@ -6,7 +6,7 @@ import "../Styles/Label.css";
 
 const Home = () => {
   return (
-    <div className="container" style={{ marginTop: "100px" }}>
+    <div className="container">
       <div className="banner-container">
         <div className="banner">
           <div style={{ padding: "0 0 1% 60%" }}>
@@ -49,16 +49,18 @@ const Home = () => {
               </div>
               <div></div>
               <div className="grid-item">
-                <Button
-                  variant="contained"
-                  className="ButtonStyle"
-                  style={{
-                    backgroundImage:
-                      "linear-gradient(#615F5F 10%, #615F5F 50%, #2b2a2a 90%)",
-                  }}
-                >
-                  Contained
-                </Button>
+                <Link to="/followthestory">
+                  <Button
+                    variant="contained"
+                    className="ButtonStyle"
+                    style={{
+                      backgroundImage:
+                        "linear-gradient(#615F5F 10%, #615F5F 50%, #2b2a2a 90%)",
+                    }}
+                  >
+                    WishList
+                  </Button>
+                </Link>
               </div>
             </div>
             <div className="grid-story">

src/Pages/Login.jsx

@@ -9,39 +9,47 @@ import "../Styles/TextAreaCustom.css";
 import "../Styles/Label.css";
 
 const Login = () => {
-  const [product, setProduct] = useState([]);
-  const navigate = useNavigate();
-  const { slug } = useParams();
+  const [shelter, setShelter] = useState();
+
+  const [email, setEmail] = useState();
 
-  useEffect(() => {
-    const fetchProduct = async () => {
-      const { cocktail } = await request(
-        "https://api-us-east-1.graphcms.com/v2/cl4ji8xe34tjp01yrexjifxnw/master",
-        `
-			{ 
-				cocktail(where: {slug: "${slug}"}) {
-					category
-					info
-					ingredients
-					instructions
-					image {
-						url
-					 }
-					name
-
-				 }
-			}
-		 `
-      );
+  const [password, setPassword] = useState();
 
-      setProduct(cocktail);
-    };
+  const [password2, setPassword2] = useState();
+
+  const navigate = useNavigate();
+  const { slug } = useParams();
 
-    fetchProduct();
-  }, [slug]);
+  const handleChange = (e) => {
+    fetch("http://localhost:8000/api/auth/signup", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        shelter,
+        email,
+        password,
+        password2,
+      }),
+    })
+      .then((res) => {
+        res.json().then((data) => {
+          console.log(data.message);
+          if (data.status === 200) {
+            navigate("/login"); //====================== ??????====================//
+          } else {
+            alert(data.message);
+          }
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
 
   return (
-    <div className="container" style={{ marginTop: "100px" }}>
+    <div className="container">
       <div className="banner-container">
         <div className="banner">
           <div className="first-container">
@@ -55,35 +63,59 @@ const Login = () => {
               Log In
             </p>
             <p className="label-start">Creat email and password!</p>
+            <input
+              type="text"
+              className="TextAreaCustom"
+              placeholder="Address of shelter"
+              value={shelter}
+              onChange={(e) => {
+                setShelter(e.target.value);
+              }}
+              style={{ height: "50px", marginTop: "20px" }}
+            ></input>
             <input
               type="email"
               className="TextAreaCustom"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+              }}
               style={{ height: "50px", marginTop: "20px" }}
             ></input>
             <input
               type="password"
               className="TextAreaCustom"
+              placeholder="password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+              }}
               style={{ height: "50px", marginTop: "20px" }}
             ></input>
             <input
               type="password"
               className="TextAreaCustom"
+              placeholder="Retype password"
+              value={password2}
+              onChange={(e) => {
+                setPassword2(e.target.value);
+              }}
               style={{ height: "50px", marginTop: "20px" }}
             ></input>
             <div className="grid-story">
-              <Link to="/loginsignup">
-                <Button
-                  variant="contained"
-                  className="ButtonStyle"
-                  style={{
-                    width: "100%",
-                    backgroundImage:
-                      "linear-gradient(#879DC7 10%, #194DB2 50%, #194DB2 79%)",
-                  }}
-                >
-                  Continue
-                </Button>
-              </Link>
+              <Button
+                variant="contained"
+                className="ButtonStyle"
+                onClick={handleChange()}
+                style={{
+                  width: "100%",
+                  backgroundImage:
+                    "linear-gradient(#879DC7 10%, #194DB2 50%, #194DB2 79%)",
+                }}
+              >
+                Continue
+              </Button>
             </div>
           </div>
         </div>

src/Pages/LoginSignUp.jsx

@@ -42,7 +42,7 @@ const LoginSignup = () => {
   }, [slug]);
 
   return (
-    <div className="container" style={{ marginTop: "100px" }}>
+    <div className="container">
       <div className="banner-container">
         <div className="banner">
           <div className="first-container">