2024-03-26 03:25:06 +01:00
|
|
|
import { ReviewSegment } from "@/types/review";
|
2024-02-27 17:05:28 +01:00
|
|
|
import { Button } from "../ui/button";
|
|
|
|
import { LuRefreshCcw } from "react-icons/lu";
|
2024-03-26 03:25:06 +01:00
|
|
|
import { MutableRefObject, useMemo } from "react";
|
2024-02-27 17:05:28 +01:00
|
|
|
|
|
|
|
type NewReviewDataProps = {
|
|
|
|
className: string;
|
|
|
|
contentRef: MutableRefObject<HTMLDivElement | null>;
|
2024-03-26 03:25:06 +01:00
|
|
|
reviewItems?: ReviewSegment[] | null;
|
|
|
|
itemsToReview?: number;
|
2024-02-27 17:05:28 +01:00
|
|
|
pullLatestData: () => void;
|
|
|
|
};
|
|
|
|
export default function NewReviewData({
|
|
|
|
className,
|
|
|
|
contentRef,
|
2024-03-26 03:25:06 +01:00
|
|
|
reviewItems,
|
|
|
|
itemsToReview,
|
2024-02-27 17:05:28 +01:00
|
|
|
pullLatestData,
|
|
|
|
}: NewReviewDataProps) {
|
2024-03-26 03:25:06 +01:00
|
|
|
const hasUpdate = useMemo(() => {
|
|
|
|
if (!reviewItems || !itemsToReview) {
|
|
|
|
return false;
|
2024-02-27 17:05:28 +01:00
|
|
|
}
|
|
|
|
|
2024-03-26 03:25:06 +01:00
|
|
|
return reviewItems.length != itemsToReview;
|
|
|
|
}, [reviewItems, itemsToReview]);
|
2024-02-27 17:05:28 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={className}>
|
2024-03-21 15:00:04 +01:00
|
|
|
<div className="flex justify-center items-center mr-[65px] md:mr-[115px] pointer-events-auto">
|
2024-02-27 17:05:28 +01:00
|
|
|
<Button
|
|
|
|
className={`${
|
|
|
|
hasUpdate
|
|
|
|
? "animate-in slide-in-from-top duration-500"
|
|
|
|
: "invisible"
|
|
|
|
} text-center mt-5 mx-auto bg-gray-400 text-white`}
|
|
|
|
variant="secondary"
|
|
|
|
onClick={() => {
|
|
|
|
pullLatestData();
|
|
|
|
if (contentRef.current) {
|
|
|
|
contentRef.current.scrollTo({
|
|
|
|
top: 0,
|
|
|
|
behavior: "smooth",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<LuRefreshCcw className="w-4 h-4 mr-2" />
|
|
|
|
New Items To Review
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|