Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Customer Feedback Section modified successfully #80

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Customer Feedback Section modified successfully #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5625872
Customer Feedback Section modified successfully
tech-dhawal-03 Oct 4, 2024
1a4dba5
Update src/Components/Cards/FeedbackCard.jsx
tech-dhawal-03 Oct 5, 2024
04f0513
Resolved conflicts
tech-dhawal-03 Oct 6, 2024
6a38ecd
Resloved Conflicts finally
tech-dhawal-03 Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,17 @@
"react-intersection-observer": "^9.13.0",
"react-pageflip": "^2.0.3",
"react-router-dom": "^6.24.1",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1",
RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.4"
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-slick": "^0.23.13",
"@vitejs/plugin-react": "^4.3.1",
"daisyui": "^4.12.12",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.2",
"eslint-plugin-react-hooks": "^4.6.2",
Expand Down
186 changes: 186 additions & 0 deletions src/Components/Cards/FeedbackCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
import { MdStars} from "react-icons/md";
import quote from "../../assets/img/quote.png";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick"




const colors = [
"bg-pink-600",
"bg-yellow-400",
"bg-cyan-400",
"bg-rose-600",
"bg-green-600",
"bg-purple-500",
"bg-amber-400",
"bg-lime-500",
"bg-emerald-600",
"bg-sky-400",
"bg-blue-600"




]

const reviews = [
{
name: "Jane Smith",
review:
"Great games and coffee. The perfect spot to unwind with friends!",
img: "https://randomuser.me/api/portraits/men/51.jpg",
rating: 5,
},
{
name: "Sophia Lee",
review: "Cozy place with a fantastic selection of snacks and games!",
img: "https://randomuser.me/api/portraits/women/90.jpg",
rating: 4,
},
{
name: "Emily Davis",
review: "Friendly staff and delicious food make for a great experience.",
img: "https://randomuser.me/api/portraits/women/63.jpg",
rating: 5,
},
{
name: "Chris Wilson",
review: "Amazing variety of games and excellent drinks to enjoy.",
img: "https://randomuser.me/api/portraits/men/22.jpg",
rating: 5,
},
{
name: "Michael Johnson",
review: "Had a fantastic time with the games and tasty beverages!",
img: "https://randomuser.me/api/portraits/men/85.jpg",
rating: 5,
},
{
name: "Jia Wang",
review: "Loved the games, the ambiance, and the overall vibe here!",
img: "https://randomuser.me/api/portraits/women/61.jpg",
rating: 5,
},
{
name: "Olivia Green",
review:
"Great atmosphere and an excellent selection of board games. Will be back!",
img: "https://randomuser.me/api/portraits/women/72.jpg",
rating: 4,
},
{
name: "Ethan White",
review:
"The vibe is amazing, and the staff is super friendly. Highly recommend!",
img: "https://randomuser.me/api/portraits/men/33.jpg",
rating: 5,
},
tech-dhawal-03 marked this conversation as resolved.
Show resolved Hide resolved
];
Comment on lines +28 to +80
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider dynamic data fetching for reviews

The reviews array contains static, hardcoded data. While this is fine for development or demonstration purposes, in a production environment, it would be more maintainable and scalable to fetch this data dynamically from an API or database. This approach would allow for easier updates to the reviews without modifying the component code.

Consider refactoring this to use a data fetching mechanism. Here's a basic example using React's useEffect hook:

import { useState, useEffect } from 'react';

// Inside your component
const [reviews, setReviews] = useState([]);

useEffect(() => {
  // Replace with your actual API call
  const fetchReviews = async () => {
    const response = await fetch('/api/reviews');
    const data = await response.json();
    setReviews(data);
  };

  fetchReviews();
}, []);

This approach would make the component more flexible and easier to maintain in the long run.




export default function customerFeedback() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Use PascalCase for React component names

The function name customerFeedback should be in PascalCase as it's a React component. This is a widely accepted convention in the React community and improves code readability.

Rename the function to follow the React naming convention:

-export default function customerFeedback() {
+export default function CustomerFeedback() {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export default function customerFeedback() {
export default function CustomerFeedback() {


const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
cssEase: "linear",
};

function getRandomColor(colorsArray) {
const randomIndex = Math.floor(Math.random() * colorsArray.length);
return colorsArray[randomIndex];
}
Comment on lines +97 to +100
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

Optimize function placement and ensure consistent card colors

The getRandomColor function is defined inside the component, which means it will be recreated on every render. This is unnecessary and can be optimized.

Additionally, calling this function within the .map() method (as seen on line 149) causes the colors of the review cards to change on every render, leading to an inconsistent user experience.

To address both issues:

  1. Move the getRandomColor function outside the component:
const getRandomColor = (colorsArray) => {
  const randomIndex = Math.floor(Math.random() * colorsArray.length);
  return colorsArray[randomIndex];
};

export default function CustomerFeedback() {
  // ... rest of the component
}
  1. Assign colors to reviews once, either when fetching data or in a useMemo hook:
import { useMemo } from 'react';

export default function CustomerFeedback() {
  const reviewsWithColors = useMemo(() => {
    return reviews.map(review => ({
      ...review,
      color: getRandomColor(colors)
    }));
  }, []);

  // Use reviewsWithColors instead of reviews in your render method
  // ...
}

This ensures each review maintains its color across renders while optimizing the function placement.



return (



<div className=" bg-[#004D43] min-h-[50vh] mt-10 flex flex-row items-center justify-center relative rounded-3xl mx-20 mb-10 md:min-h-[80vh]">
<div className="hidden flex-col -top-16 absolute left-10 gap-10 md:flex ">
<div className="flex bg-yellow-400 w-[150px] h-[150px] p-1 rounded-full">
<img src={quote}
alt="double_quote"
className="w-full h-full object-contain"
/>


</div >

<div className="flex text-5xl font-extrabold text-white mt-3 ">
What Our {<br />} Customer Say
</div>
Comment on lines +118 to +120
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

Improve text content and accessibility

The heading "What Our Customer Say" has a grammatical error and uses <br /> tags for layout, which is not ideal for accessibility and responsiveness.

Correct the grammar and improve the markup:

-<div className="flex text-5xl font-extrabold text-white mt-3 ">
-    What Our {<br />} Customer Say
-</div>
+<h2 className="text-5xl font-extrabold text-white mt-3 leading-tight">
+    What Our Customers Say
+</h2>

This change corrects the grammar, uses a semantic h2 tag, and relies on CSS for text wrapping.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="flex text-5xl font-extrabold text-white mt-3 ">
What Our {<br />} Customer Say
</div>
<h2 className="text-5xl font-extrabold text-white mt-3 leading-tight">
What Our Customers Say
</h2>


<div className="container mx-auto p-4">
<div className="text-2xl text-yellow-300 text-wrap text-justify ">
Here’s what our Valued Customers
{<br />}
said about their experiences with us.
{<br />}
Their testimonials reflect the joy and
{<br />}
connection fostered within our walls,
{<br />}
showcasing the vibrant community we
{<br />}
have built.


</div>
Comment on lines +123 to +137
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance readability and responsiveness of the description text

The description text uses multiple <br /> tags for line breaks, which is not ideal for responsiveness and maintainability.

Refactor the text to use proper paragraph styling:

<p className="text-2xl text-yellow-300 text-justify max-w-md mx-auto">
  Here's what our Valued Customers say about their experiences with us. 
  Their testimonials reflect the joy and connection fostered within our walls, 
  showcasing the vibrant community we have built.
</p>

This approach allows the text to wrap naturally based on the container width, improving responsiveness.

</div>



</div>



<div className="absolute -top-24 -right-16 ">
<Slider {...settings} className="carousel rounded-box w-[840px] gap-10 h-[550px] overflow-hidden hover:scale-105 ">
{reviews.map((review, index) => {
const shade = getRandomColor(colors);
return (
<div key={review.id || index} className={`carousel-item transition-opacity duration-1000 ease-in-out`}>
RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved
<div className={`card glass w-96 ${shade} lg:min-h-[550px]`}>
<figure>
<img
src={review.img}
alt={`Profile of ${review.name}`}
className="rounded-full m-10 scale-125 hover:transition-transform hover:scale-150"
/>
</figure>
<div className="card-body bg-white border-4 border-black border-solid m-5 rounded-lg hover:bg-yellow-400 transition duration-300 scale-105">
<h2 className="card-title justify-center my-2 scale-150">
{Array(review.rating)
.fill()
.map((_, i) => (
<MdStars key={i} className="text-[#004D43]" />
))}
</h2>
<p className="justify-center text-xl text-justify mt-4 h-full">{review.review}</p>
<h1 className="text-2xl text-center">~{review.name}</h1>
</div>
</div>
</div>
);
})}
</Slider>
</div>
Comment on lines +147 to +176
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

Improve accessibility and responsive design of the Slider component

The current implementation of the Slider component has some accessibility and responsive design issues:

  1. The alt text for profile images is not very descriptive.
  2. The color contrast between text and background might not be sufficient in all cases.
  3. The responsive behavior could be improved for smaller screens.

Here are some improvements:

  1. Enhance the alt text for profile images:
-alt={`Profile of ${review.name}`}
+alt={`${review.name}, who gave a ${review.rating}-star review`}
  1. Ensure sufficient color contrast:
// Add this utility function
const ensureContrast = (bgColor, lightText, darkText) => {
  // Implement a function to check contrast and return appropriate text color
  // This is a simplified example
  return ['bg-yellow-400', 'bg-lime-500'].includes(bgColor) ? darkText : lightText;
};

// In your JSX
<div className={`card-body ${ensureContrast(shade, 'text-white', 'text-gray-900')} ...`}>
  1. Improve responsive design:
-<Slider {...settings} className="carousel rounded-box w-[840px] gap-10 h-[550px] overflow-hidden hover:scale-105  ">
+<Slider {...settings} className="carousel rounded-box w-full max-w-[840px] gap-4 md:gap-10 h-auto md:h-[550px] overflow-hidden hover:scale-105">

These changes will enhance the accessibility and responsiveness of your component.

</div>
)







}
Comment on lines +1 to +186
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Overall component review and suggestions for improvement

The CustomerFeedback component is feature-rich and provides a good user experience. However, there are several areas where it can be improved:

  1. Performance Optimization: Consider using React's useMemo or useCallback hooks to memoize expensive computations or callback functions.

  2. Code Organization: Extract sub-components for better maintainability. For example, you could create a separate ReviewCard component.

  3. Prop Types: Add PropTypes or TypeScript types to improve code reliability and self-documentation.

  4. Error Handling: Implement error boundaries and fallback UI for potential issues (e.g., failed data fetching).

  5. Accessibility: Ensure all interactive elements are keyboard accessible and have appropriate ARIA attributes.

  6. Internationalization: Prepare the component for potential future translations by using a translation library or at least extracting all text content into constants.

Here's a basic example of how you might start refactoring:

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
// ... other imports

const ReviewCard = ({ review, color }) => (
  // ... card JSX
);

ReviewCard.propTypes = {
  review: PropTypes.shape({
    name: PropTypes.string.isRequired,
    review: PropTypes.string.isRequired,
    img: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired,
  }).isRequired,
  color: PropTypes.string.isRequired,
};

const CustomerFeedback = ({ reviews }) => {
  const reviewsWithColors = useMemo(() => (
    reviews.map(review => ({
      ...review,
      color: getRandomColor(colors),
    }))
  ), [reviews]);

  // ... rest of the component logic

  return (
    // ... main JSX structure
    <Slider {...settings}>
      {reviewsWithColors.map((review) => (
        <ReviewCard key={review.id} review={review} color={review.color} />
      ))}
    </Slider>
    // ... closing tags
  );
};

CustomerFeedback.propTypes = {
  reviews: PropTypes.arrayOf(PropTypes.shape({
    // ... shape of a review object
  })).isRequired,
};

export default CustomerFeedback;

These changes will significantly improve the component's maintainability, performance, and robustness.

150 changes: 21 additions & 129 deletions src/Components/ui/ReviewCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1,32 @@
import { useState } from "react";
import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";
import FeedbackCard from "../Cards/FeedbackCard";


const ReviewCarousel = () => {
const reviews = [
{
name: "Jane Smith",
review:
"Great games and coffee. The perfect spot to unwind with friends!",
img: "https://randomuser.me/api/portraits/men/51.jpg",
rating: 5,
},
{
name: "Sophia Lee",
review: "Cozy place with a fantastic selection of snacks and games!",
img: "https://randomuser.me/api/portraits/women/90.jpg",
rating: 4,
},
{
name: "Emily Davis",
review: "Friendly staff and delicious food make for a great experience.",
img: "https://randomuser.me/api/portraits/women/63.jpg",
rating: 5,
},
{
name: "Chris Wilson",
review: "Amazing variety of games and excellent drinks to enjoy.",
img: "https://randomuser.me/api/portraits/men/22.jpg",
rating: 5,
},
{
name: "Michael Johnson",
review: "Had a fantastic time with the games and tasty beverages!",
img: "https://randomuser.me/api/portraits/men/85.jpg",
rating: 5,
},
{
name: "Jia Wang",
review: "Loved the games, the ambiance, and the overall vibe here!",
img: "https://randomuser.me/api/portraits/women/61.jpg",
rating: 5,
},
{
name: "Olivia Green",
review:
"Great atmosphere and an excellent selection of board games. Will be back!",
img: "https://randomuser.me/api/portraits/women/72.jpg",
rating: 4,
},
{
name: "Ethan White",
review:
"The vibe is amazing, and the staff is super friendly. Highly recommend!",
img: "https://randomuser.me/api/portraits/men/33.jpg",
rating: 5,
},
];

const [currentIndex, setCurrentIndex] = useState(0);

const nextSlide = () => {
setCurrentIndex((prevIndex) =>
prevIndex === reviews.length - 4 ? 0 : prevIndex + 1
);
};

const prevSlide = () => {
setCurrentIndex((prevIndex) =>
prevIndex === 0 ? reviews.length - 4 : prevIndex - 1
);
};

RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved


return (
<div className="mb-20">
<div className="items-center flex justify-center mb-10">
<h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43]">
Customer Feedback
<div className="items-center flex justify-center mb-10 mt-10">
<h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43] mt-4 mb-20">
Testimonials
</h1>
</div>

<div className="bg-[#004D43] min-h-[50vh] p-4 md:p-20 items-center justify-center flex relative ">
<div className="w-full max-w-7xl md:overflow-hidden overflow-x-auto ">
<div
className="flex transition-transform duration-300 ease-in-out"
style={{
transform: `translateX(-${currentIndex * (100 / 4)}%)`,
width: `${reviews.length * (100 / 4)}%`,
}}
>
{reviews.map((review, index) => (
<div
key={index}
className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2 "
>
<div className="relative h-[40vh] md:h-[35vh] p-4 rounded-xl md:w-full w-[42vh] bg-amber-200 z-10 overflow-hidden">
<div className="items-center flex flex-col justify-center mb-3">
<img
src={review.img}
alt=""
className="rounded-full h-20 w-20"
/>
<h1 className="text-xl font-semibold">{review.name}</h1>
<div className="flex">
{Array(review.rating)
.fill()
.map((_, i) => (
<MdStars key={i} className="text-[#004D43]" />
))}
</div>
</div>
<p className="text-center text-lg leading-6 tracking-wide mt-4 ">
{review.review}
</p>
</div>
</div>
))}
</div>
</div>
{reviews.length > 4 && (
<>
<button
onClick={prevSlide}
className=" hidden md:block absolute left-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
>
<MdArrowBackIos className="text-[#004D43]" />
</button>
<button
onClick={nextSlide}
className=" hidden md:block absolute right-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
>
<MdArrowForwardIos className="text-[#004D43]" />
</button>
</>
)}
</div>
</div>


<FeedbackCard />

</div>








);
};
RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved

export default ReviewCarousel;
export default ReviewCarousel;
Binary file added src/assets/img/quote.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 11 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,15 @@ export default {
},
},
},
plugins: [],

plugins : [
require('daisyui')
],

daisyui: {
themes: [],
},
RamakrushnaBiswal marked this conversation as resolved.
Show resolved Hide resolved



}