import React from "react"; import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; // swr import useSWR from "swr"; // services import cyclesService from "services/cycles.service"; // hooks import useToast from "hooks/use-toast"; // ui import { Button, CustomMenu } from "components/ui"; // icons import { CalendarDaysIcon } from "@heroicons/react/20/solid"; import { UserIcon } from "@heroicons/react/24/outline"; import { CyclesIcon } from "components/icons"; // helpers import { renderShortNumericDateFormat } from "helpers/date-time.helper"; import { groupBy } from "helpers/array.helper"; import { copyTextToClipboard } from "helpers/string.helper"; // types import { CycleIssueResponse, ICycle } from "types"; // fetch-keys import { CYCLE_ISSUES } from "constants/fetch-keys"; type TSingleStatProps = { cycle: ICycle; handleEditCycle: () => void; handleDeleteCycle: () => void; }; const stateGroupColours: { [key: string]: string; } = { backlog: "#3f76ff", unstarted: "#ff9e9e", started: "#d687ff", cancelled: "#ff5353", completed: "#096e8d", }; export const SingleCycleCard: React.FC = (props) => { const { cycle, handleEditCycle, handleDeleteCycle } = props; const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { data: cycleIssues } = useSWR( workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES(cycle.id as string) : null, workspaceSlug && projectId && cycle.id ? () => cyclesService.getCycleIssues(workspaceSlug as string, projectId as string, cycle.id) : null ); const endDate = new Date(cycle.end_date ?? ""); const startDate = new Date(cycle.start_date ?? ""); const groupedIssues = { backlog: [], unstarted: [], started: [], cancelled: [], completed: [], ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"), }; const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`) .then(() => { setToastAlert({ type: "success", title: "Cycle link copied to clipboard", }); }) .catch(() => { setToastAlert({ type: "error", title: "Some error occurred", }); }); }; return ( <>

{cycle.name}

Copy cycle link Edit cycle Delete cycle permanently
Cycle dates
{renderShortNumericDateFormat(startDate)} - {renderShortNumericDateFormat(endDate)}
Created by
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( {cycle.owned_by.first_name} ) : ( {cycle.owned_by.first_name.charAt(0)} )} {cycle.owned_by.first_name}

PROGRESS

{Object.keys(groupedIssues).map((group) => (
{group}
{groupedIssues[group].length}{" "} -{" "} {cycleIssues && cycleIssues.length > 0 ? `${Math.round( (groupedIssues[group].length / cycleIssues.length) * 100 )}%` : "0%"}
))}
); };