☘️ [Frontend] Integrate Get Testimonials API with frontend (#1041)

* Integrate Get Testimonials API with frontend * Updated Testimonial.jsx --------- Co-authored-by: kajol <[email protected]>
HITK-TECH-Community · Jun 11, 2024 · 66c50b2 · 66c50b2
1 parent ce35ae3
commit 66c50b2
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 138 deletions.
diff --git a/frontend/src/pages/Home/components/Testimonials/Testimonials.jsx b/frontend/src/pages/Home/components/Testimonials/Testimonials.jsx
@@ -5,16 +5,36 @@ import {
   FaStarHalf,
   FaStar,
 } from "react-icons/fa";
-import testimonials from "./testimonials";
 import style from "./testimonial.module.scss";
+import { SimpleToast } from "../../../../components/util/Toast";
+import Loader from "../../../../components/util/Loader"; 
+import { getTestimonials } from "../../../../service/Testimonial";
+import { hideToast } from "../../../../service/toastService";
 
-export function Testimonials(props) {
-  let dark = props.theme;
+export function Testimonials({ theme }) {
+  const [testimonials, setTestimonials] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isSmallScreen, setIsSmallScreen] = useState(false);
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
+  const [isLoading, setIsLoading] = useState(true); 
   const itemsPerPage = isSmallScreen ? 1 : 3;
 
+  const handleCloseToast = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    hideToast(setToast);
+  };
+
   useEffect(() => {
+    getTestimonials(setTestimonials, setToast).then(() => {
+      setIsLoading(false);
+    });
+
     const checkScreenSize = () => {
       setIsSmallScreen(window.innerWidth < 768);
     };
@@ -30,9 +50,7 @@ export function Testimonials(props) {
   };
 
   const handlePrev = () => {
-    setCurrentIndex(
-      (prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length
-    );
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length);
   };
 
   const getVisibleTestimonials = () => {
@@ -65,92 +83,76 @@ export function Testimonials(props) {
   };
 
   return (
-    <div className={`${style["main"]}`}>
-      <div
-        className={dark ? `${style["heading-dark"]}` : `${style["heading"]}`}
-      >
-        What Our Users Say
-      </div>
-      <div className={`${style["center"]}`}>
-        <div
-          className={
-            dark
-              ? `${style["dash"]} ${style["dash-dark"]}`
-              : `${style["dash"]} ${style["dash-light"]}`
-          }
-        ></div>
+    <div className={style.main}> 
+      <div className={theme ? style["heading-dark"] : style.heading}>
+          What Our Users Say
       </div>
-      <div className={`${style["testimonials-container"]}`}>
-        <div className={`${style["testimonials-slide-left"]}`}>
-          <button
-            onClick={handlePrev}
-            className={dark ? `${style["button-dark"]}` : `${style["button"]}`}
-          >
-            <FaChevronLeft size={35} />
-          </button>
+        <div className={style.center}>
+          <div className={theme ? `${style.dash} ${style["dash-dark"]}` : `${style.dash} ${style["dash-light"]}`}></div>
         </div>
-        <div className={`${style["testimonials"]}`}>
-          <div className={`${style["testimonialss"]}`}>
-            {getVisibleTestimonials().map((testimonial, index) => (
-              <div key={index} className={`${style["testimonial"]}`}>
-                <div
-                  className={
-                    dark
-                      ? `${style["testimoniall-dark"]}`
-                      : `${style["testimoniall"]}`
-                  }
-                >
-                  <div className={`${style["testimonial-top"]}`}>
-                    <img
-                      src={testimonial.image}
-                      alt={testimonial.name}
-                      className={`${style["testimonial-img"]}`}
-                    />
-                    <div>
-                      <p
-                        className={
-                          dark
-                            ? `${style["testimonial-name-dark"]}`
-                            : `${style["testimonial-name"]}`
-                        }
-                      >
-                        {testimonial.name}
-                      </p>
-                      <p
-                        className={
-                          dark
-                            ? `${style["testimonial-position-dark"]}`
-                            : `${style["testimonial-position"]}`
-                        }
-                      >
-                        {testimonial.position}, {testimonial.company}
-                      </p>
-                      <div className={`${style["stars"]}`}>
-                        {renderStars(testimonial.rating)}
+          {isLoading ? ( 
+            <Loader />
+          ) : (
+            <>
+          <div className={style["testimonials-container"]}>
+            <div className={style["testimonials-slide-left"]}>
+              <button
+                onClick={handlePrev}
+                className={theme ? style["button-dark"] : style.button}
+              >
+                <FaChevronLeft size={35} />
+              </button>
+            </div>
+            <div className={style.testimonials}>
+              <div className={style.testimonialss}>
+                {getVisibleTestimonials().map((testimonial, index) => (
+                  <div key={index} className={style.testimonial}>
+                    <div className={theme ? style["testimoniall-dark"] : style["testimoniall"]}>
+                      <div className={style["testimonial-top"]}>
+                        <img
+                          src={testimonial.image}
+                          alt={testimonial.name}
+                          className={style["testimonial-img"]}
+                        />
+                        <div>
+                          <p className={theme ? style["testimonial-name-dark"] : style["testimonial-name"]}>
+                            {testimonial.name}
+                          </p>
+                          <p className={theme ? style["testimonial-position-dark"] : style["testimonial-position"]}>
+                            {testimonial.position}, {testimonial.company}
+                          </p>
+                          <div className={style.stars}>
+                            {renderStars(testimonial.rating)}
+                          </div>
+                        </div>
                       </div>
+                      <p className={theme ? style["content-dark"] : style.content}>
+                        {testimonial.text}
+                      </p>
                     </div>
                   </div>
-                  <p
-                    className={
-                      dark ? `${style["content-dark"]}` : `${style["content"]}`
-                    }
-                  >
-                    {testimonial.text}
-                  </p>
-                </div>
+                ))}
               </div>
-            ))}
+            </div>
+            <div className={style["testimonials-slide-right"]}>
+              <button
+                onClick={handleNext}
+                className={theme ? style["button-dark"] : style.button}
+              >
+                <FaChevronRight size={35} />
+              </button>
+            </div>
           </div>
-        </div>
-        <div className={`${style["testimonials-slide-right"]}`}>
-          <button
-            onClick={handleNext}
-            className={dark ? `${style["button-dark"]}` : `${style["button"]}`}
-          >
-            <FaChevronRight size={35} />
-          </button>
-        </div>
-      </div>
+          {toast.toastStatus && (
+            <SimpleToast
+              open={toast.toastStatus}
+              message={toast.toastMessage}
+              handleCloseToast={handleCloseToast}
+              severity={toast.toastType}
+            />
+          )}
+        </>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/Home/components/Testimonials/testimonial.module.scss b/frontend/src/pages/Home/components/Testimonials/testimonial.module.scss
@@ -26,15 +26,15 @@
   font-weight: bold;
   color: black;
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 .heading-dark {
   font-size: xx-large;
   font-weight: bold;
   color: #69a9dd;
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 @media screen and (max-width: 768px) {
@@ -57,7 +57,7 @@
   width: 250px;
   height: 5px;
   border-radius: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 .dash-light {

diff --git a/frontend/src/pages/Home/components/Testimonials/testimonials.js b/frontend/src/pages/Home/components/Testimonials/testimonials.js
diff --git a/frontend/src/service/Testimonial.jsx b/frontend/src/service/Testimonial.jsx
@@ -0,0 +1,25 @@
+import { END_POINT } from "../config/api";
+import { showToast } from "./toastService";
+
+export async function getTestimonials(setTestimonials, setToast) {
+  try {
+    const response = await fetch(`${END_POINT}/testimonials/getTestimonials`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      setTestimonials(data);
+      // we won't be showing the success message for this as it looks wierd on the home page.
+    } else {
+      showToast(setToast, "Failed to fetch testimonials.", "error");
+    }
+  } catch (err) {
+    console.error("Network Error:", err);
+    showToast(setToast, "Network Error", "error");
+  }
+};
+