created search system

sksabbirhossain · Sep 11, 2023 · 54b6648 · 54b6648
1 parent e9f5056
commit 54b6648
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 132 deletions.
diff --git a/src/pages/User/Order/Order.js b/src/pages/User/Order/Order.js
@@ -1,16 +1,66 @@
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
-import React from "react";
+import React, { useState } from "react";
+import { Form } from "../../../components/common/Form/Form";
+import { FormInput } from "../../../components/common/FormInput/FormInput";
 import { PaymentCkeckoutForm } from "./PaymentCkeckoutForm";
 
 const stripePromise = loadStripe(process.env.REACT_APP_PUBLISHABLE_KEY);
 
 export const Order = () => {
-  console.log("change")
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [number, setNumber] = useState("");
+  const [address, setAddress] = useState("");
+  const shippingInfo = {
+    name,
+    email,
+    number,
+    address,
+  };
   return (
     <div className="container mx-auto my-5 flex justify-center px-2 sm:px-0">
+      <Form>
+        <h2 className="text-2xl pb-4">Shpping Details</h2>
+        <FormInput
+          label="Your Name"
+          type="text"
+          name="name"
+          placeholder="Enter your name here"
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <FormInput
+          label="Your Email"
+          type="email"
+          name="email"
+          placeholder="Enter your email here"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <FormInput
+          label="Your Phone Number"
+          type="number"
+          name="number"
+          placeholder="Enter your phone number here"
+          required
+          value={number}
+          onChange={(e) => setNumber(e.target.value)}
+        />
+        <FormInput
+          label="Your Address"
+          type="text"
+          name="adress"
+          placeholder="Enter your adress here"
+          required
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+        />
+      </Form>
       <Elements stripe={stripePromise}>
-        <PaymentCkeckoutForm />
+        <PaymentCkeckoutForm shippingInfo={shippingInfo} />
       </Elements>
     </div>
   );

diff --git a/src/pages/User/Order/PaymentCkeckoutForm.js b/src/pages/User/Order/PaymentCkeckoutForm.js
@@ -1,144 +1,52 @@
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Button } from "../../../components/common/Button/Button";
 import { Form } from "../../../components/common/Form/Form";
-import { FormInput } from "../../../components/common/FormInput/FormInput";
-
-export const PaymentCkeckoutForm = () => {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [number, setNumber] = useState("");
-  const [address, setAddress] = useState("");
 
+export const PaymentCkeckoutForm = ({ shippingInfo }) => {
   const stripe = useStripe();
   const elements = useElements();
 
-  const [clientSecret, setClientSecret] = useState("");
-
-  useEffect(() => {
-    // Create PaymentIntent as soon as the page loads
-    fetch("http://localhost:5000/api/payment/create-payment-intent", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ items: [{ id: "xl-tshirt" }], amount: 10 }),
-    })
-      .then((res) => res.json())
-      .then((data) => setClientSecret(data.clientSecret));  
-  }, []);
-
-  console.log(clientSecret);
-
-  const handleSubmit = async (event) => {
+  const handleSubmit = async (e) => {
     // Block native form submission.
-    event.preventDefault();
+    e.preventDefault();
 
     if (!stripe || !elements) {
       return;
     }
 
-    const card = elements.getElement(CardElement);
-
-    if (card == null) {
-      return;
-    }
-
-    try {
-      const { error, paymentMethod } = await stripe.createPaymentMethod({
-        type: "card",
-        card,
-      });
-
-      if (error) {
-        console.error("[error]", error);
-        // Display an error message to the user
-      } else {
-        console.log("[PaymentMethod]", paymentMethod);
-
-        // Now confirm the payment using the clientSecret
-        const { paymentIntent, error: confirmError } =
-          await stripe.confirmCardPayment(clientSecret, {
-            payment_method: {
-              card: card,
-              billing_details: {
-                name: "sabbir",
-              },
-            },
-          });
-
-        if (confirmError) {
-          console.error("[confirmError]", confirmError);
-          // Display an error message to the user
-        } else {
-          console.log("[paymentIntent]", paymentIntent);
-          // Payment successful, you can redirect or show a success message
+    // Handle payment submission here using Stripe API
+    const { token, error } = await stripe.createToken(
+      elements.getElement(CardElement)
+    );
+
+    if (error) {
+      console.error(error);
+    } else {
+      // Send the token to your server for payment processing and saving the shipping info
+      const response = await fetch(
+        "http://localhost:5000/api/payment/create-payment-intent",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ token, shippingInfo }),
         }
-      }
-    } catch (err) {
-      console.error("An unexpected error occurred:", err);
-      // Display a general error message to the user
+      );
+      // Handle the server response here
+
+      console.log(response);
+      alert("success");
     }
   };
 
   return (
     <Form onSubmit={handleSubmit}>
       <div className="">
-        <h2 className="text-2xl pb-4">Shpping Details</h2>
-        <FormInput
-          label="Your Name"
-          type="text"
-          name="name"
-          placeholder="Enter your name here"
-          required
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <FormInput
-          label="Your Email"
-          type="email"
-          name="email"
-          placeholder="Enter your email here"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <FormInput
-          label="Your Phone Number"
-          type="number"
-          name="number"
-          placeholder="Enter your phone number here"
-          required
-          value={number}
-          onChange={(e) => setNumber(e.target.value)}
-        />
-        <FormInput
-          label="Your Address"
-          type="text"
-          name="adress"
-          placeholder="Enter your adress here"
-          required
-          value={address}
-          onChange={(e) => setAddress(e.target.value)}
-        />
-
         <h2 className="text-2xl pb-4">Payment Details</h2>
-        {/* <PaymentElement /> */}
-        <CardElement
-          options={{
-            style: {
-              base: {
-                fontSize: "16px",
-                color: "#424770",
-                "::placeholder": {
-                  color: "#aab7c4",
-                },
-              },
-              invalid: {
-                color: "#9e2146",
-              },
-            },
-          }}
-        />
-        <Button name="Payment" />
+        <CardElement />
+        <Button type="submit" name="Pay Now" />
       </div>
     </Form>
   );

diff --git a/src/pages/User/Search/Search.js b/src/pages/User/Search/Search.js
@@ -1,5 +1,8 @@
 import React from "react";
 import { useSearchParams } from "react-router-dom";
+import { ProductCardSkeleton } from "../../../components/ui/ProductCardSkeleton";
+import { ContainerHeader } from "../../../components/user/ContainerHeader";
+import { ProductCard } from "../../../components/user/ProductCard";
 import { useSearchProductQuery } from "../../../features/product/productApi";
 
 export const Search = () => {
@@ -10,17 +13,40 @@ export const Search = () => {
     useSearchProductQuery(searchKey) || {};
 
   const { data: products } = data || {};
+  // decide what to render
+  let content;
+
+  if (isLoading)
+    content = (
+      <>
+        <ProductCardSkeleton /> <ProductCardSkeleton /> <ProductCardSkeleton />
+        <ProductCardSkeleton /> <ProductCardSkeleton />
+      </>
+    );
+
+  if (!isLoading && isError)
+    content = (
+      <h3 className=" uppercase font-medium text-red-600">
+        something went wrong!
+      </h3>
+    );
+
+  if (!isError && !isLoading && isSuccess && products?.length === 0)
+    content = (
+      <p className="text-center uppercase font-medium">No Product found!</p>
+    );
+
+  if (!isError && !isLoading && products?.length > 0)
+    content = products.map((proudct) => (
+      <ProductCard key={proudct._id} product={proudct} />
+    ));
 
-  console.log(products);
   return (
-    <div className="container mx-auto my-5">
-      <h2 className="text-3xl">{searchKey}</h2>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima velit
-        nemo modi suscipit exercitationem ab provident sapiente numquam quos?
-        Illo nobis molestiae a architecto sed consequatur tempora ut vero
-        adipisci?
-      </p>
+    <div className="container mx-auto ">
+      <ContainerHeader title="Search products" />
+      <div className=" mb-7 grid gird-cols-1 justify-center xs:justify-start xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-2 gap-y-5">
+        {content}
+      </div>
     </div>
   );
 };