Update controllers, models, routes, and frontend components

- Updated backend controllers (`auth.controller.js`, `comments.controller.js`, `playlists.controller.js`, `songs.controller.js`, `users.controller.js`) with new logic and bug fixes.
- Modified backend models (`comment.model.js`, `song.model.js`, `user.model.js`) for improved data handling and added new properties.
- Updated backend routes (`comments.route.js`, `songs.route.js`, `users.route.js`) to reflect the latest API changes.
- Made changes to backend server initialization in `server.js`.
- Enhanced helper functions in `helpers.js` to improve utility methods.
- Updated package dependencies (`package.json`, `package-lock.json`).
- Refactored frontend components for better UI and functionality (`Navbar/RightContent.jsx`, `SingleSongCard.jsx`, `TrackList.jsx`, `UserView/index.jsx`, `LoggedInHomePage.jsx`, `SignUpPage.jsx`, `FeedPage.jsx`, `StorePage.jsx`, `authStore.js`).
- Removed unnecessary component `CommentSection.jsx` from `src/pages/feed`.
- Added new untracked files for orders and Paypal integration (`order.controller.js`, `order.model.js`, `order.route.js`, `paypal.js`).
- Updated `HomeSlider` component and other minor improvements.

Changes include various updates for backend APIs, frontend UI components, and improvements to state management and routing.

Author: JunCodera1

frontend/package-lock.json

@@ -52,13 +52,16 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.28.0",
+    "react-slick": "^0.30.2",
     "react-toastify": "^10.0.6",
     "recharts": "^2.13.3",
     "routes": "^2.1.0",
     "sass": "^1.80.4",
+    "slick-carousel": "^1.8.1",
     "stripe": "^17.3.1",
     "styled-components": "^6.1.13",
     "stylis-plugin-rtl": "^2.1.1",
+    "swiper": "^11.1.15",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "ws": "^8.18.0",

frontend/package.json

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import { FaComment, FaPaperPlane } from "react-icons/fa";
+import {
+  makeUnAuthenticatedPOSTRequest,
+  makeUnAuthenticatedGETRequest,
+} from "@/utils/serverHelper";
+
+export default function CommentSection({ trackId, userId }) {
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState("");
+
+  useEffect(() => {
+    fetchComments();
+  }, [trackId]);
+
+  const fetchComments = async () => {
+    try {
+      const response = await makeUnAuthenticatedGETRequest(
+        `/song/get/comments/${trackId}`
+      );
+      if (response.error) {
+        console.error("Error fetching comments:", response.error);
+        return;
+      }
+      setComments(response.comments);
+    } catch (error) {
+      console.error("Error fetching comments:", error);
+    }
+  };
+
+  const handleAddComment = async (e) => {
+    e.preventDefault();
+    if (!newComment.trim()) return;
+
+    try {
+      const response = await makeUnAuthenticatedPOSTRequest(
+        "/song/post/comment",
+        {
+          trackId,
+          userId,
+          text: newComment,
+        }
+      );
+
+      if (response.error) {
+        console.error("Error adding comment:", response.error);
+        return;
+      }
+
+      setComments((prevComments) => [response.comment, ...prevComments]);
+      setNewComment("");
+    } catch (error) {
+      console.error("Error adding comment:", error);
+    }
+  };
+
+  return (
+    <div className="mt-6">
+      <h3 className="text-lg font-semibold mb-4">Comments</h3>
+      <div className="space-y-4 mb-4">
+        {comments.map((comment) => (
+          <div key={comment._id} className="bg-gray-100 rounded-lg p-3">
+            <p className="font-semibold">{comment.user.username}</p>
+            <p>{comment.text}</p>
+            <p className="text-xs text-gray-500 mt-1">
+              {new Date(comment.createdAt).toLocaleString()}
+            </p>
+          </div>
+        ))}
+      </div>
+      <form onSubmit={handleAddComment} className="flex items-center">
+        <input
+          type="text"
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          placeholder="Add a comment..."
+          className="flex-grow border rounded-l-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500"
+        />
+        <button
+          type="submit"
+          className="bg-orange-500 text-white rounded-r-lg px-4 py-2 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500"
+        >
+          <FaPaperPlane />
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/src/components/CommentSection.jsx

@@ -0,0 +1,22 @@
+const Card = ({ title, description, imgUrl, onClick }) => {
+  return (
+    <div
+      className="bg-black bg-opacity-40 p-4 rounded-lg cursor-pointer transform w-60 transition duration-300 ease-in-out hover:scale-105 hover:shadow-xl"
+      onClick={onClick} // Thêm sự kiện onClick để gọi hàm phát nhạc
+    >
+      <div className="pb-4 pt-2 relative">
+        <img
+          className="w-full h-60 object-cover rounded-md"
+          src={imgUrl}
+          alt={title}
+        />
+      </div>
+      <div className="text-white font-semibold py-3 text-xl hover:underline">
+        {title}
+      </div>
+      <div className="text-gray-300 text-sm hover:underline">{description}</div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/components/HomeSlider/Card.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+const HomeSlider = () => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 3000,
+  };
+
+  const slides = [
+    {
+      id: 1,
+      image:
+        "https://ss-images.saostar.vn/2018/08/31/3582800/ava-usuk-ngang-copy.jpg",
+      alt: "Slide 1",
+    },
+    {
+      id: 2,
+      image:
+        "https://www.shutterstock.com/shutterstock/videos/3438942789/thumb/1.jpg?ip=x480",
+      alt: "Slide 2",
+    },
+    {
+      id: 3,
+      image:
+        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhaO4J3W42OsDi5jhvpfdqF8RGvWkvoUdXbA&s",
+      alt: "Slide 3",
+    },
+  ];
+
+  return (
+    <div className="w-full max-w-4xl mx-auto mb-8">
+      <Slider {...settings}>
+        {slides.map((slide) => (
+          <div key={slide.id} className="outline-none">
+            <img
+              src={slide.image}
+              alt={slide.alt}
+              className="w-full h-auto object-cover rounded-lg"
+            />
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+export default HomeSlider;