import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { Disclosure, Transition } from "@headlessui/react"; // hooks import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline"; import useIssuesProperties from "hooks/use-issue-properties"; import useIssueView from "hooks/use-issue-view"; // services import stateService from "services/state.service"; import workspaceService from "services/workspace.service"; // ui import { Spinner } from "components/ui"; // components import { CreateUpdateIssueModal } from "components/issues/modal"; import SingleListIssue from "components/common/list-view/single-issue"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; // types import { IIssue, IWorkspaceMember, UserAuth } from "types"; // fetch-keys import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // types type Props = { issues: IIssue[]; handleEditIssue: (issue: IIssue) => void; userAuth: UserAuth; }; const ListView: React.FC = ({ issues, handleEditIssue, userAuth }) => { const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false); const [preloadedData, setPreloadedData] = useState< (Partial & { actionType: "createIssue" | "edit" | "delete" }) | undefined >(undefined); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues); const { data: states } = useSWR( workspaceSlug && projectId ? STATE_LIST(projectId as string) : null, workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null ); const { data: people } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null ); const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string); if (issueView !== "list") return <>; return ( <> setIsCreateIssuesModalOpen(false)} prePopulateData={{ ...preloadedData, }} />
{Object.keys(groupedByIssues).map((singleGroup) => ( {({ open }) => (
{selectedGroup !== null ? (

{singleGroup === null || singleGroup === "null" ? selectedGroup === "priority" && "No priority" : selectedGroup === "created_by" ? people?.find((p) => p.member.id === singleGroup)?.member ?.first_name ?? "Loading..." : addSpaceIfCamelCase(singleGroup)}

) : (

All Issues

)}

{groupedByIssues[singleGroup as keyof IIssue].length}

{groupedByIssues[singleGroup] ? ( groupedByIssues[singleGroup].length > 0 ? ( groupedByIssues[singleGroup].map((issue: IIssue) => { const assignees = [ ...(issue?.assignees_list ?? []), ...(issue?.assignees ?? []), ]?.map((assignee) => { const tempPerson = people?.find( (p) => p.member.id === assignee )?.member; return tempPerson; }); return ( handleEditIssue(issue)} userAuth={userAuth} /> ); }) ) : (

No issues.

) ) : (
)}
)}
))}
); }; export default ListView;