From c8cc644cf4fd43025d519632adcbe0a0ca38bae0 Mon Sep 17 00:00:00 2001
From: Akshad_gujarkar <142382794+akshadgujarkar@users.noreply.github.com>
Date: Tue, 29 Oct 2024 01:05:52 +0530
Subject: [PATCH] Implement Dynamic Likes for Service Cards (#369)
* Toast added on service page
* enable like option on services page
---
package.json | 2 +-
src/App.jsx | 2 +-
src/components/Footer.jsx | 5 +++--
src/styles/Services.css | 4 +++-
src/views/Home.jsx | 4 +++-
src/views/Services.jsx | 36 +++++++++++++++++++++++++++++-------
6 files changed, 40 insertions(+), 13 deletions(-)
diff --git a/package.json b/package.json
index 3c76c08..47d957a 100644
--- 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
index 3089e36..2d18973 100644
--- 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
index 504f465..f1b3e2c 100644
--- 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 */}
- {[
+ {[
{ 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" },
}}
>
-
+
))}
diff --git a/src/styles/Services.css b/src/styles/Services.css
index d8fe1cc..b4af3a7 100644
--- 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;
-}
\ No newline at end of file
+}
+
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 14400a0..72093f8 100644
--- 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
index 24b24ff..8402ca1 100644
--- 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,7 +74,7 @@ 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,
},
];
@@ -70,10 +82,13 @@ const Services = ({ mode, textcolor }) => {
<>
{services.map((service, index) => (
-
+ data-aos-duration="1200"
+ >
{service.name}
{service.description}
@@ -82,7 +97,14 @@ const Services = ({ mode, textcolor }) => {
👁️ Views: {service.views}
- ❤️ Likes: {service.likes}
+
+ handleLikeClick(service.name)}
+ >
+ ❤️ {like[service.name.replace(" ", "")] ? "Liked" : "Like"}:{" "}
+ {like[service.name.replace(" ", "")] ? service.baseLikes + 1 : service.baseLikes}
+
))}
@@ -105,7 +127,7 @@ const Services = ({ mode, textcolor }) => {
Fill out the form below, and we’ll be in touch shortly.
-