Implement Dynamic Likes for Service Cards (#369)

* Toast added on service page * enable like option on services page
Open-Code-Crafters · Oct 28, 2024 · c8cc644 · c8cc644
1 parent edc698d
commit c8cc644
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "@hookform/resolvers": "^3.8.0",
     "@mui/icons-material": "^5.16.0",
     "@mui/lab": "^5.0.0-alpha.171",
-    "@mui/material": "^5.16.7",
+    "@mui/material": "^6.1.5",
     "@mui/system": "^6.1.2",
     "@mui/x-date-pickers": "^7.9.0",
     "aos": "^3.0.0-beta.6",

diff --git a/src/App.jsx b/src/App.jsx
@@ -37,7 +37,7 @@ import { BlogProvider } from "../context/blogContext.jsx";
 function App() {
   const [mode, setMode] = useState("light");
   const [textcolor, settextcolor] = useState("black");
-
+    
   let toggleMode = () => {
     if (mode === "light") {
       setMode("dark");

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -9,6 +9,7 @@ import {
   Modal,
 } from "@mui/material";
 import { Link as RouterLink } from "react-router-dom";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faXTwitter } from "@fortawesome/free-brands-svg-icons";
 import {
   FaFacebookF,
@@ -122,7 +123,7 @@ const Footer = () => {
 
         {/* Social Media Icons */}
         <Grid item xs={12} sx={{ textAlign: "center", mt: 2 }}>
-          {[ 
+          {[
             { Icon: FaFacebookF, url: "https://www.facebook.com" },
             { Icon: FaTelegramPlane, url: "https://web.telegram.org" },
             { Icon: FaLinkedinIn, url: "https://www.linkedin.com" },
@@ -143,7 +144,7 @@ const Footer = () => {
                 "&:hover": { color: "#fff" },
               }}
             >
-              <Icon fontSize="inherit" />
+              <FontAwesomeIcon icon={Icon} fontSize="inherit" />
             </IconButton>
           ))}
         </Grid>

diff --git a/src/styles/Services.css b/src/styles/Services.css
@@ -93,6 +93,7 @@
   display: flex;
   align-items: center;
   font-size: 0.9em;
+  cursor: pointer;
 }
 
 /* Modal Styles */
@@ -138,4 +139,5 @@
   --card-bg-color: #ffffff;
   --button-bg-color: #007bff;
   --button-hover-bg-color: #0056b3;
-}
+}
+
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -1,4 +1,6 @@
-import { Grid, Typography, Box } from "@mui/material";
+import React from 'react';
+import { Box, Grid, IconButton, Typography } from '@mui/material'; // Example MUI imports
+
 import homeImg1 from "../assets/home/homeImg1.jpg";
 import "../styles/shared.css";
 import homeImg2 from "../assets/home/homeImg2.avif";

diff --git a/src/views/Services.jsx b/src/views/Services.jsx
@@ -5,12 +5,24 @@ import { toast, ToastContainer } from "react-toastify";
 const Services = ({ mode, textcolor }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const [currentService, setCurrentService] = useState("");
+  const [like, setLike] = useState({
+    PersonalTraining: false,
+    NutritionalCounseling: false,
+    OnlineVirtualTraining: false,
+  });
 
   const handleOpenModal = (service) => {
     setCurrentService(service);
     setModalOpen(true);
   };
 
+  const handleLikeClick = (serviceName) => {
+    setLike((prev) => ({
+      ...prev,
+      [serviceName.replace(" ", "")]: !prev[serviceName.replace(" ", "")],
+    }));
+  };
+
   const handleCloseModal = () => {
     setModalOpen(false);
     setCurrentService("");
@@ -44,7 +56,7 @@ const Services = ({ mode, textcolor }) => {
       imageUrl:
         "https://d2wvwvig0d1mx7.cloudfront.net/data/org/26275/media/img/source/edit/3262615_edit.webp",
       views: 262,
-      likes: 40,
+      baseLikes: 40,
     },
     {
       name: "Nutritional Counseling",
@@ -53,7 +65,7 @@ const Services = ({ mode, textcolor }) => {
       imageUrl:
         "https://dvm0q8ak413bh.cloudfront.net/data/org/26275/media/img/source/edit/2936524_edit.webp",
       views: 205,
-      likes: 37,
+      baseLikes: 37,
     },
     {
       name: "Online Virtual Training",
@@ -62,18 +74,21 @@ const Services = ({ mode, textcolor }) => {
       imageUrl:
         "https://dvm0q8ak413bh.cloudfront.net/data/org/26275/media/img/source/edit/2942210_edit.webp",
       views: 237,
-      likes: 46,
+      baseLikes: 46,
     },
   ];
 
   return (
     <>
       <div className={`service-grid ${mode}`}>
         {services.map((service, index) => (
-          <div className="service-card" key={service.name}
+          <div
+            className="service-card"
+            key={service.name}
             data-aos="fade-up"
             data-aos-delay={index * 200}
-            data-aos-duration="1200">
+            data-aos-duration="1200"
+          >
             <img src={service.imageUrl} alt={service.name} />
             <h2>{service.name}</h2>
             <p>{service.description}</p>
@@ -82,7 +97,14 @@ const Services = ({ mode, textcolor }) => {
             </button>
             <div className="stats">
               <span className="views">👁️ Views: {service.views}</span>
-              <span className="likes">❤️ Likes: {service.likes}</span>
+
+              <span
+                className={`likes ${like[service.name.replace(" ", "")] ? "liked" : ""}`}
+                onClick={() => handleLikeClick(service.name)}
+              >
+                ❤️ {like[service.name.replace(" ", "")] ? "Liked" : "Like"}:{" "}
+                {like[service.name.replace(" ", "")] ? service.baseLikes + 1 : service.baseLikes}
+              </span>
             </div>
           </div>
         ))}
@@ -105,7 +127,7 @@ const Services = ({ mode, textcolor }) => {
               <p style={styles.modalText}>
                 Fill out the form below, and we’ll be in touch shortly.
               </p>
-              <form onSubmit={(e) => handleSendMessage(e)}>
+              <form onSubmit={handleSendMessage}>
                 <input
                   type="text"
                   placeholder="Your Name"