import { useEffect } from "react"; import { useRouter } from "next/router"; import Image from "next/image"; import { mutate } from "swr"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // react-circular-progressbar import { CircularProgressbar } from "react-circular-progressbar"; import "react-circular-progressbar/dist/styles.css"; // icons import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline"; import { CycleSidebarStatusSelect } from "components/project/cycles"; // ui import { Loader, CustomDatePicker } from "components/ui"; // hooks import useToast from "hooks/use-toast"; // services import cyclesService from "services/cycles.service"; // components import { SidebarProgressStats } from "components/core"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; import { renderShortNumericDateFormat } from "helpers/date-time.helper"; // types import { CycleIssueResponse, ICycle, IIssue } from "types"; // fetch-keys import { CYCLE_DETAILS } from "constants/fetch-keys"; type Props = { issues: IIssue[]; cycle: ICycle | undefined; isOpen: boolean; cycleIssues: CycleIssueResponse[]; }; const CycleDetailSidebar: React.FC = ({ issues, cycle, isOpen, cycleIssues }) => { const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query; const { setToastAlert } = useToast(); const defaultValues: Partial = { start_date: new Date().toString(), end_date: new Date().toString(), status: cycle?.status, }; const groupedIssues = { backlog: [], unstarted: [], started: [], cancelled: [], completed: [], ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"), }; const { reset, watch, control } = useForm({ defaultValues, }); const submitChanges = (data: Partial) => { if (!workspaceSlug || !projectId || !cycleId) return; mutate( CYCLE_DETAILS(cycleId as string), (prevData) => ({ ...(prevData as ICycle), ...data }), false ); cyclesService .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data) .then((res) => { console.log(res); mutate(CYCLE_DETAILS(cycleId as string)); }) .catch((e) => { console.log(e); }); }; useEffect(() => { if (cycle) reset({ ...cycle, }); }, [cycle, reset]); return (
{cycle ? ( <>
{cycle.status}
{renderShortNumericDateFormat(`${cycle.start_date}`) ? renderShortNumericDateFormat(`${cycle.start_date}`) : "N/A"}{" "} -{" "} {renderShortNumericDateFormat(`${cycle.end_date}`) ? renderShortNumericDateFormat(`${cycle.end_date}`) : "N/A"}

{cycle.name}

Owned by

{cycle.owned_by && (cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
{cycle.owned_by?.first_name}
) : (
{cycle.owned_by?.first_name && cycle.owned_by.first_name !== "" ? cycle.owned_by.first_name.charAt(0) : cycle.owned_by?.email.charAt(0)}
))} {cycle.owned_by.first_name !== "" ? cycle.owned_by.first_name : cycle.owned_by.email}

Progress

{groupedIssues.completed.length}/{cycleIssues?.length}

Start date

( submitChanges({ start_date: val, }) } isClearable={false} /> )} />

End date

( submitChanges({ end_date: val, }) } isClearable={false} /> )} />
) : (
)}
); }; export default CycleDetailSidebar;