code refactored

swatimoluguri · May 17, 2024 · 6cb92c2 · 6cb92c2
1 parent d657fe5
commit 6cb92c2
Show file tree

Hide file tree

Showing 15 changed files with 212 additions and 216 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/client/src/components/Checkout/Cart.js b/client/src/components/Checkout/Cart.js
@@ -18,6 +18,7 @@ const Cart = () => {
   const cart = useSelector((store) => store.cart);
   const navigate = useNavigate();
   const user = useSelector((store) => store.user);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   const cartTotalAmt = useMemo(() => {
     return cart.cart.items.reduce((acc, item) => {
@@ -41,42 +42,58 @@ const Cart = () => {
     item.id = id;
     item.updateType = "reduce";
     dispatch(updateItem(item));
-    if (user?.user?.username?.length > 0)
-      await axios.post("/server/reduce-cart", {
+    if (user?.user?.username?.length > 0) {
+      const token = user.user.token;
+      await axios.post(`${apiUrl}/reduce-cart`, {
         id,
+        token,
       });
+    }
   }
 
   async function handleAddCount(id) {
     let item = {};
     item.id = id;
     item.updateType = "add";
     dispatch(updateItem(item));
-    if (user?.user?.username?.length > 0)
-      await axios.post("/server/increase-cart", {
+    if (user?.user?.username?.length > 0) {
+      const token = user.user.token;
+      await axios.post(`${apiUrl}/increase-cart`, {
         id,
+        token,
       });
+    }
   }
 
   async function handleDelete(id) {
     dispatch(deleteItem(id));
-    if (user?.user?.username?.length > 0)
-      await axios.post("/server/delete-cart", {
+    if (user?.user?.username?.length > 0) {
+      const token = user.user.token;
+      await axios.post(`${apiUrl}/delete-cart`, {
         id,
+        token,
       });
+    }
   }
 
   async function handleClearCart() {
     dispatch(clearCart());
-    if (user?.user?.username?.length > 0) await axios.get("/server/clear-cart");
+    if (user?.user?.username?.length > 0) {
+      const token = user.user.token;
+      await axios.post(`${apiUrl}/clear-cart`, {
+        token,
+      });
+    }
   }
 
   async function handleCheckout() {
+    const token = user.user.token;
     const {
       data: { id },
-    } = await axios.post("/server/checkout", {
+    } = await axios.post(`${apiUrl}/checkout`, {
       cart,
       amount: cartTotal,
+      token,
     });
 
     var options = {
@@ -88,7 +105,7 @@ const Cart = () => {
       image:
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRY7zpT4pHNb8LZfnaP0xI7FYTkiZaYfPUhEaV1scVsQ&s",
       order_id: id,
-      callback_url: "/server/checkout/payment-verification",
+      callback_url: `${apiUrl}/checkout/payment-verification`,
       prefill: {
         name: "Gaurav Kumar",
         email: "[email protected]",
@@ -180,7 +197,9 @@ const Cart = () => {
                 ))}
               </tbody>
             </table>
-            <div className="text-red-500 text-right mt-4 text-sm">Max Quantity for each product is 5</div>
+            <div className="text-red-500 text-right mt-4 text-sm">
+              Max Quantity for each product is 5
+            </div>
             <div className="flex items-center justify-between mt-10">
               <div>
                 <Link to="/products">
@@ -201,24 +220,26 @@ const Cart = () => {
             <p className="text-lg font-semibold">Order Summary</p>
             <hr className="my-4" />
             <table className="w-full">
-              <tr>
-                <th className="text-left p-2">Items</th>
-                <td className="text-right p-2">{cartItems}</td>
-              </tr>
-              <tr>
-                <th className="text-left p-2">Sub Total</th>
-                <td className="text-right p-2">
-                  ₹
-                  {cart.cart.items.reduce((acc, item) => {
-                    acc += Math.round(item.price * 84) * item.count;
-                    return acc;
-                  }, 0)}
-                </td>
-              </tr>
-              <tr>
-                <th className="text-left p-2">Shipping</th>
-                <td className="text-green-400 text-right p-2">Free</td>
-              </tr>
+              <tbody>
+                <tr>
+                  <th className="text-left p-2">Items</th>
+                  <td className="text-right p-2">{cartItems}</td>
+                </tr>
+                <tr>
+                  <th className="text-left p-2">Sub Total</th>
+                  <td className="text-right p-2">
+                    ₹
+                    {cart.cart.items.reduce((acc, item) => {
+                      acc += Math.round(item.price * 84) * item.count;
+                      return acc;
+                    }, 0)}
+                  </td>
+                </tr>
+                <tr>
+                  <th className="text-left p-2">Shipping</th>
+                  <td className="text-green-400 text-right p-2">Free</td>
+                </tr>
+              </tbody>
             </table>
             <hr className="my-4" />
             <div className="flex justify-between p-4">

diff --git a/client/src/components/Checkout/Success.js b/client/src/components/Checkout/Success.js
@@ -13,14 +13,15 @@ const Success = () => {
   const dispatch = useDispatch();
   const location = useLocation();
   const [order, setOrder] = useState(null);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
     const paymentId = queryParams.get("payment_id");
     const fetchData = async () => {
       try {
         dispatch(clearCart());
-        const response = await axios.post("/server/order-details", {
+        const response = await axios.post(`${apiUrl}/order-details`, {
           paymentId,
         });
         const givenDate = new Date(response.data.result.order_date);

diff --git a/client/src/components/Contact/About.js b/client/src/components/Contact/About.js
@@ -54,7 +54,7 @@ const About = () => {
       <Heading text="Our team" heading="Meet:" highlight="Our Team" />
       <div className="flex gap-4 flex-wrap justify-around">
         {cards.map((item) => (
-          <div className="bg-gray-50 rounded-lg p-4">
+          <div key={item.name} className="bg-gray-50 rounded-lg p-4">
             <div className="h-60 w-60 lg:h-96 lg:w-96">
               <img
                 className="h-full w-full object-cover rounded-lg"

diff --git a/client/src/components/Contact/Contact.js b/client/src/components/Contact/Contact.js
@@ -13,6 +13,7 @@ const Contact = () => {
     message: "",
   });
   const [enquiry, setEnquiry] = useState(null);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -24,7 +25,7 @@ const Contact = () => {
 
   const handleContactUs = async (e) => {
     e.preventDefault();
-    const response = await axios.post("/server/contact-us", {
+    const response = await axios.post(`${apiUrl}/contact-us`, {
       formData,
     });
     if (response.status === 200) {
@@ -63,7 +64,7 @@ const Contact = () => {
             <form onSubmit={handleContactUs}>
               <div className="flex gap-4 mt-6 w-full justify-between">
                 <div className="flex-col w-1/2">
-                  <label className="font-bold" for="name">
+                  <label className="font-bold" htmlFor="name">
                     Your Name <sup>*</sup>
                   </label>
                   <input
@@ -76,7 +77,7 @@ const Contact = () => {
                   />
                 </div>
                 <div className="flex-col w-1/2">
-                  <label className="font-bold" for="email">
+                  <label className="font-bold" htmlFor="email">
                     Email <sup>*</sup>
                   </label>
                   <input
@@ -90,7 +91,7 @@ const Contact = () => {
                 </div>
               </div>
               <div className="w-full">
-                <label className="font-bold w-full" for="subject">
+                <label className="font-bold w-full" htmlFor="subject">
                   Subject <sup>*</sup>
                 </label>
                 <input
@@ -103,7 +104,7 @@ const Contact = () => {
                 />
               </div>
               <div>
-                <label className="font-bold w-full" for="message">
+                <label className="font-bold w-full" htmlFor="message">
                   Your Message <sup>*</sup>
                 </label>
                 <textarea
@@ -163,9 +164,9 @@ const Contact = () => {
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d669.0547157050926!2d79.12829866533423!3d18.44988308890282!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bccd8decd62d78f%3A0xfaaf8ec24fa783d6!2sSVJC%20Girls%20Jr.%20College!5e0!3m2!1sen!2sin!4v1715335905158!5m2!1sen!2sin"
         width="1920"
         height="600"
-        allowfullscreen=""
+        allowFullScreen=""
         loading="lazy"
-        referrerpolicy="no-referrer-when-downgrade"
+        referrerPolicy="no-referrer-when-downgrade"
       ></iframe>
       </div>
       <DetailsStrip />

diff --git a/client/src/components/Homepage/FaqAccordion.js b/client/src/components/Homepage/FaqAccordion.js
@@ -5,12 +5,13 @@ import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
 const FaqAccordion = () => {
   const [faqs, setFaqs] = useState([]);
   const [visibleAnswerId, setVisibleAnswerId] = useState(null);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   useEffect(() => {
     fetchFaqs();
   }, []);
   const fetchFaqs = () => {
-    fetch("http://localhost:3000/faqs")
+    fetch(`${apiUrl}/faqs`)
       .then((response) => response.json())
       .then((result) => {
         setFaqs(result);

diff --git a/client/src/components/Homepage/Newsletter.js b/client/src/components/Homepage/Newsletter.js
@@ -7,6 +7,7 @@ const Newsletter = () => {
   const [email, setEmail] = useState("");
   const [isValidEmail, setIsValidEmail] = useState(false);
   const [isSubscribed, setIsSubscribed] = useState(false);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   const validateEmail = (inputValue) => {
     if (inputValue) {
@@ -28,7 +29,7 @@ const Newsletter = () => {
   const handleNewsletter = async (e) => {
     e.preventDefault();
 
-    const response = await axios.post("/server/newsletter", {
+    const response = await axios.post(`${apiUrl}/newsletter`, {
       email,
     });
     if (response.status === 200) {

diff --git a/client/src/components/Product/ProductView.js b/client/src/components/Product/ProductView.js
@@ -23,6 +23,7 @@ const ProductView = () => {
   const dispatch = useDispatch();
   const [loading, setLoading] = useState(true);
   const user = useSelector((store) => store.user);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   useEffect(() => {
     fetchProduct(productId);
@@ -40,7 +41,8 @@ const ProductView = () => {
   }, [productId]);
 
   const fetchProduct = (productId) => {
-    fetch("/server/products/" + productId)
+    const apiUrl = process.env.REACT_APP_API_URL || "";
+    fetch(`${apiUrl}/products/${productId}`)
       .then((res) => res.json())
       .then((result) => {
         setProduct(result);
@@ -64,9 +66,13 @@ const ProductView = () => {
     item.count = count;
     dispatch(addItem(item));
     if (user?.user?.username?.length > 0) {
-      await axios.post("/server/add-cart", {
-        item,
-      });
+      const token=user.user.token;
+      await axios.post(
+        `${apiUrl}/add-cart`,
+        {
+          item,token
+        }
+      );
     }
   }
 

diff --git a/client/src/components/User/ForgotPassword.js b/client/src/components/User/ForgotPassword.js
@@ -1,6 +1,5 @@
 import Clothes from "../../assets/clothes.jpg";
 import Heading from "../Partials/Heading";
-import { Link } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
 import axios from "axios";
 import bcrypt from "bcryptjs";
@@ -33,6 +32,7 @@ const ForgotPassword = () => {
   const [otp, setOtp] = useState(new Array(length).fill(""));
   const inputRefs = useRef([]);
   const navigate = useNavigate();
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   useEffect(() => {
     if (inputRefs.current[0]) {
@@ -76,7 +76,7 @@ const ForgotPassword = () => {
   const handleSendMail = async (e) => {
     e.preventDefault();
     await axios
-      .post("/server/send-mail", {
+      .post(`${apiUrl}/send-mail`, {
         email,
       })
       .then((response) => {
@@ -113,7 +113,7 @@ const ForgotPassword = () => {
 
   const onOtpSubmit = async (otp) => {
     await axios
-      .post("/server/verify-otp", {
+      .post(`${apiUrl}/verify-otp`, {
         otp,
         email,
       })
@@ -174,7 +174,7 @@ const ForgotPassword = () => {
       setError(null);
       const hashedPassword = await bcrypt.hash(newPassword, 10);
       await axios
-        .post("/server/change-password", {
+        .post(`${apiUrl}/change-password`, {
           newPassword: hashedPassword,
           email,
         })

diff --git a/client/src/components/User/GoogleAuth .js b/client/src/components/User/GoogleAuth .js
diff --git a/client/src/components/User/SignIn.js b/client/src/components/User/SignIn.js
@@ -19,6 +19,7 @@ const SignIn = () => {
   const dispatch = useDispatch();
   const user = useSelector((store) => store.user);
   const cart = useSelector((store) => store.cart);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -37,7 +38,7 @@ const SignIn = () => {
       return;
     }
     await axios
-      .post("/server/sign-in", {
+      .post(`${apiUrl}/sign-in`, {
         formData,
         cart,
       })

diff --git a/client/src/components/User/Signup.js b/client/src/components/User/Signup.js
@@ -28,6 +28,7 @@ const Signup = () => {
   const dispatch = useDispatch();
   const user = useSelector((store) => store.user);
   const cart = useSelector((store) => store.cart);
+  const apiUrl = process.env.REACT_APP_API_URL || "";
 
   useEffect(() => {
     if (user?.user?.username?.length > 0) navigate("/");
@@ -81,7 +82,7 @@ const Signup = () => {
       password: hashedPassword,
     };
     await axios
-      .post("/server/sign-up", {
+      .post(`${apiUrl}/sign-up`, {
         formData: userData,
         cart,
       })