mediahub-fe/app/[locale]/(public)/feedback/page.tsx

"use client";

import { Reveal } from "@/components/landing-page/Reveal";
import { error, loading, successCallback } from "@/config/swal";
import { getFeedback, postUserFeedback } from "@/service/landing/landing";
import React, { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import Image from "next/image";

interface RatingProps {
  label: string;
  onRate: (rating: number) => void;
}

const Rating: React.FC<RatingProps> = ({ label, onRate }) => {
  const [selected, setSelected] = useState<number>(0);

  const handleClick = (rating: number) => {
    setSelected(rating);
    onRate(rating);
  };

  return (
    <div className="flex justify-between items-center mb-4">
      <span className="text-gray-800 dark:text-white">{label}</span>
      <div className="flex space-x-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <button
            key={star}
            onClick={() => handleClick(star)}
            className={`text-2xl ${star <= selected ? "text-yellow-500" : "text-gray-300"}`}
          >
            ★
          </button>
        ))}
      </div>
    </div>
  );
};

const FeedbackForm: React.FC = () => {
  const [ratings, setRatings] = useState({
    accessibility: 0,
    appearance: 0,
    content: 0,
  });

  useEffect(() => {
    async function initState() {
      const response = await getFeedback();
      // console.log(response?.data?.data);
      setRatings(response?.data?.data);
    }

    initState();
  }, []);

  type Feedback = {
    feedbackId: any;
    score: any;
  };

  const [userFeedbacks, setUserFeedbacks] = useState<Feedback[]>([]);
  const [hasMounted, setHasMounted] = useState(false);
  const t = useTranslations("LandingPage");

  const handleRatingChange = (id: any, score: any) => {
    const listData = [...userFeedbacks];
    const dataIdx = userFeedbacks.findIndex((o) => o.feedbackId === id);

    // console.log("idx :", dataIdx);
    // console.log("Before :", listData);

    if (dataIdx !== -1) {
      // console.log("update");
      listData[dataIdx].score = score;
    } else {
      const data = {
        feedbackId: id,
        score,
      };

      listData.push(data);
    }

    setUserFeedbacks(listData);
    // console.log("After :", userFeedbacks);
  };
  const handleSubmit = async () => {
    loading();
    // console.log("Save Feedback :", userFeedbacks);
    const response = await postUserFeedback();
    close();
    if (response?.error) {
      error(response?.message);
      return false;
    }

    successCallback("Terima kasih, feedback Anda telah terkirim");
  };
  async function onSubmit() {
    //     loading();
    //     let finalData = {
    //       name: data.name,
    //       email: data.email,
    //       title : data.title,
    //       message: data.title
    //     }
    //     console.log(finalData);
    //     const response = await sendMessage(finalData);
    //     close();
    //     successCallback();
  }

  // Hooks
  useEffect(() => {
    setHasMounted(true);
  }, []);

  // Render
  if (!hasMounted) return null;

  return (
    <Reveal>
      <div className="max-w-6xl flex flex-col mx-auto p-4 lg:p-40 gap-5 ">
        <div className="flex items-center justify-center mb-6">
          {/* <Image
            src="/assets/icons-feedback.png"
            alt="Feedback"
            width={54}
            height={54}
          /> */}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="50"
            height="50"
            viewBox="0 0 16 16"
          >
            <path
              fill="#bc0006"
              d="M9.5 1A1.5 1.5 0 0 0 8 2.5v2a1.5 1.5 0 0 0 1 1.414V7a.5.5 0 0 0 .82.384L11.48 6h2.02A1.5 1.5 0 0 0 15 4.5v-2A1.5 1.5 0 0 0 13.5 1zM9 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2.2a.5.5 0 0 0-.32.116l-.98.816V5.5a.5.5 0 0 0-.5-.5a.5.5 0 0 1-.5-.5zM3 6a2 2 0 1 1 4 0a2 2 0 0 1-4 0m2-1a1 1 0 1 0 0 2a1 1 0 0 0 0-2M2.5 9h5A1.5 1.5 0 0 1 9 10.5c0 1.116-.459 2.01-1.212 2.615C7.047 13.71 6.053 14 5 14s-2.047-.29-2.788-.885C1.46 12.51 1 11.616 1 10.5A1.5 1.5 0 0 1 2.5 9m5 1h-5a.5.5 0 0 0-.5.5c0 .817.325 1.423.838 1.835C3.364 12.757 4.12 13 5 13s1.636-.243 2.162-.665C7.675 11.923 8 11.317 8 10.5a.5.5 0 0 0-.5-.5"
            />
          </svg>
          <h2 className="ml-4 text-[15px] lg:text-[32px] font-bold text-gray-800 dark:text-white">
            {t("userFeedback", { defaultValue: "User Feedback" })}
          </h2>
        </div>
        <div className="text-black dark:text-white">
          <Rating
            label={t("ratings", { defaultValue: "Ratings" })}
            onRate={(rating) => handleRatingChange("accessibility", rating)}
          />
          <Rating
            label={t("ratings2", { defaultValue: "Ratings2" })}
            onRate={(rating) => handleRatingChange("appearance", rating)}
          />
          <Rating
            label={t("ratings3", { defaultValue: "Ratings3" })}
            onRate={(rating) => handleRatingChange("content", rating)}
          />
        </div>
        <div className="flex justify-center">
          <button
            onClick={handleSubmit}
            className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition text-sm lg:text-base"
          >
            {t("send", { defaultValue: "Send" })}
          </button>
        </div>
      </div>
    </Reveal>
  );
};

export default FeedbackForm;