From 6a0ee21e7b8d7f0271bb3f9882a3c1971afa4fcf Mon Sep 17 00:00:00 2001 From: meet Date: Mon, 29 Jul 2024 21:17:55 +0530 Subject: [PATCH] Added testimonial via feedback --- backend/src/routes/user/controller.ts | 21 +++++ backend/src/routes/user/route.ts | 5 +- frontend/src/components/TestimonialSlider.tsx | 91 ++++++++++--------- 3 files changed, 73 insertions(+), 44 deletions(-) diff --git a/backend/src/routes/user/controller.ts b/backend/src/routes/user/controller.ts index 14a6e8ee..5e9798b2 100644 --- a/backend/src/routes/user/controller.ts +++ b/backend/src/routes/user/controller.ts @@ -666,4 +666,25 @@ export const createFeedback = async (req: UserAuthRequest, res: Response) => { console.error('Error creating feedback:', error); res.status(500).json({ error: 'An unexpected error occurred!' }); } +}; + +export const getFeedbacks = async (req: Request, res: Response) => { + try { + const feedbacks = await prisma.feedback.findMany({ + include: { + user: { + select: { + id: true, + username: true, + avatar: true, + }, + }, + }, + }); + + res.status(200).json(feedbacks); + } catch (error) { + console.error('Error fetching feedbacks:', error); + res.status(500).json({ error: 'An unexpected error occurred!' }); + } }; \ No newline at end of file diff --git a/backend/src/routes/user/route.ts b/backend/src/routes/user/route.ts index 37316da8..cd71faa3 100644 --- a/backend/src/routes/user/route.ts +++ b/backend/src/routes/user/route.ts @@ -12,7 +12,8 @@ import { userSignupController, verifyOtpController, userProfileUpdate, - createFeedback + createFeedback, + getFeedbacks } from "./controller"; import authMiddleware from "../../middleware/auth"; @@ -44,4 +45,6 @@ userRouter.get('/checkBlockedOrUnblock',authMiddleware,checkingBlockOrUnblock); userRouter.post('/feedback', authMiddleware, createFeedback); +userRouter.get('/getfeedback', getFeedbacks); + export default userRouter; \ No newline at end of file diff --git a/frontend/src/components/TestimonialSlider.tsx b/frontend/src/components/TestimonialSlider.tsx index 603ecb50..b7d84328 100644 --- a/frontend/src/components/TestimonialSlider.tsx +++ b/frontend/src/components/TestimonialSlider.tsx @@ -1,5 +1,8 @@ import React, { useState, useEffect } from 'react'; import bgHero from '../assets/bgHero.png'; +import { IoCaretForwardOutline } from "react-icons/io5"; +import { IoCaretBackOutline } from "react-icons/io5"; +import axios from 'axios'; interface Testimonial { quote: string; @@ -7,46 +10,26 @@ interface Testimonial { image: string; } - -const testimonials: Testimonial[] = [ - { - quote: "StyleShare's Tailwind CSS platform has revolutionized my workflow! With its intuitive utility-first approach, I can create stylish and responsive designs in a fraction of the time.", - author: "Ravi Kiran, Front-end Developer", - image: "https://th.bing.com/th/id/OIP.MnOHsqmDK0x6eSduQ6UjdwHaHa?w=512&h=512&rs=1&pid=ImgDetMain" - }, - { - quote: "I've been using StyleShare's Tailwind CSS platform for my personal projects, and I'm amazed by its flexibility and efficiency. It's truly a game-changer in the world of web development!", - author: "Yash Goyal, Front-end Developer", - image: "https://th.bing.com/th/id/OIP.MnOHsqmDK0x6eSduQ6UjdwHaHa?w=512&h=512&rs=1&pid=ImgDetMain" - }, - { - quote: "Thanks to StyleShare's Tailwind CSS platform, I've been able to speed up my design process significantly. Its modular approach and customizable components have made styling a breeze!", - author: "Manoj Kumar,Front-end Developer", - image: "https://th.bing.com/th/id/OIP.MnOHsqmDK0x6eSduQ6UjdwHaHa?w=512&h=512&rs=1&pid=ImgDetMain" - }, - { - quote: "StyleShare's Tailwind CSS platform has transformed the way I collaborate with my team. Its consistent and scalable design system ensures seamless integration across projects, fostering productivity and creativity", - author: "Surya Teja, Front-end Developer", - image: "https://th.bing.com/th/id/OIP.MnOHsqmDK0x6eSduQ6UjdwHaHa?w=512&h=512&rs=1&pid=ImgDetMain" - }, - { - quote: "I can't imagine working on web projects without StyleShare's Tailwind CSS platform. Its simplicity and power have elevated my skills as a developer and enabled me to deliver top-notch designs to my clients.", - author: "Sivaram, Front-end Developer", - image: "https://th.bing.com/th/id/OIP.MnOHsqmDK0x6eSduQ6UjdwHaHa?w=512&h=512&rs=1&pid=ImgDetMain" - }, - { - quote: "StyleShare's Tailwind CSS platform has transformed the way I collaborate with my team. Its consistent and scalable design system ensures seamless integration across projects, fostering productivity and creativity.", - author: "Bharath, Front-end Developer", - image: "https://th.bing.com/th/id/OIP.MnOHsqmDK0x6eSduQ6UjdwHaHa?w=512&h=512&rs=1&pid=ImgDetMain" - }, -]; +interface Feedback { + id: string; + rating: number; + comment: string; + userId: string; + createdAt: string; + user: { + id: string; + username: string; + avatar: string; + }; +} const TestimonialSlider: React.FC = () => { const [currentIndex, setCurrentIndex] = useState(0); - const [slidesToShow, setSlidesToShow] = useState(3); + const [slidesToShow, setSlidesToShow] = useState(1); const [isHovered, setIsHovered] = useState(false); + const [testimonials, setTestimonials] = useState([]); - useEffect(() => { + useEffect(() => { const updateSlidesToShow = () => { if (window.innerWidth < 768) { setSlidesToShow(1); @@ -68,11 +51,31 @@ const TestimonialSlider: React.FC = () => { if (!isHovered) { intervalId = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + slidesToShow) % testimonials.length); - }, 2000); // Change slide every 3 seconds + }, 2000); // Change slide every 2 seconds } return () => clearInterval(intervalId); - }, [slidesToShow, isHovered]); + }, [slidesToShow, isHovered, testimonials.length]); + + useEffect(() => { + const fetchFeedback = async () => { + try { + const response = await axios.get('/api/v1/user/getfeedback'); + const data: Feedback[] = response.data; + const formattedTestimonials = data.map((feedback) => ({ + quote: feedback.comment, + author: feedback.user.username, + image: feedback.user.avatar, + })); + setTestimonials(formattedTestimonials); + } catch (error) { + console.error('Error fetching feedback:', error); + } + }; + + fetchFeedback(); + }, []); + const goToNext = () => { setCurrentIndex((prevIndex) => (prevIndex + slidesToShow) % testimonials.length); }; @@ -88,10 +91,11 @@ const TestimonialSlider: React.FC = () => { const handleMouseLeave = () => { setIsHovered(false); }; + return (
@@ -101,7 +105,7 @@ const TestimonialSlider: React.FC = () => { className="prev-arrow text-4xl cursor-pointer transform hover:scale-125 transition-transform duration-300" onClick={goToPrevious} > - ◀ +
{testimonials.slice(currentIndex, currentIndex + slidesToShow).map((testimonial, index) => ( @@ -120,7 +124,7 @@ const TestimonialSlider: React.FC = () => { className="next-arrow text-4xl cursor-pointer transform hover:scale-125 transition-transform duration-300" onClick={goToNext} > - ▶ +
@@ -131,8 +135,9 @@ const TestimonialSlider: React.FC = () => { onClick={() => setCurrentIndex(index)} /> ))} -
-
+ + ); }; -export default TestimonialSlider; \ No newline at end of file + +export default TestimonialSlider;