import React, { useState } from "react"; // next import { useRouter } from "next/router"; // react-beautiful-dnd import { Draggable } from "react-beautiful-dnd"; // component import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import { SingleCalendarIssue } from "./single-issue"; import { CalendarInlineCreateIssueForm } from "./inline-create-issue-form"; // icons import { PlusSmallIcon } from "@heroicons/react/24/outline"; // helper import { formatDate } from "helpers/calendar.helper"; // types import { ICurrentUserResponse, IIssue } from "types"; type Props = { handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void; index: number; date: { date: string; issues: IIssue[]; }; addIssueToDate: (date: string) => void; showWeekEnds: boolean; user: ICurrentUserResponse | undefined; isNotAllowed: boolean; }; export const SingleCalendarDate: React.FC = (props) => { const { handleIssueAction, date, index, showWeekEnds, user, isNotAllowed } = props; const router = useRouter(); const { cycleId, moduleId } = router.query; const [showAllIssues, setShowAllIssues] = useState(false); const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false); const [formPosition, setFormPosition] = useState({ x: 0, y: 0 }); const totalIssues = date.issues.length; return ( {(provided) => (
<> {formatDate(new Date(date.date), "d")} {totalIssues > 0 && date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => ( {(provided, snapshot) => ( handleIssueAction(issue, "edit")} handleDeleteIssue={() => handleIssueAction(issue, "delete")} user={user} isNotAllowed={isNotAllowed} /> )} ))} setIsCreateIssueFormOpen(false)} prePopulatedData={{ target_date: date.date, ...(cycleId && { cycle: cycleId.toString() }), ...(moduleId && { module: moduleId.toString() }), }} /> {totalIssues > 4 && ( )}
{provided.placeholder}
)}
); };