import { useCallback, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-beautiful-dnd import { DropResult } from "react-beautiful-dnd"; // services import issuesService from "services/issues.service"; import userService from "services/user.service"; // hooks import useProfileIssues from "hooks/use-profile-issues"; import useUser from "hooks/use-user"; // components import { AllViews, FiltersList } from "components/core"; import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues"; // helpers import { orderArrayBy } from "helpers/array.helper"; // types import { IIssue, IIssueFilterOptions } from "types"; // fetch-keys import { USER_PROFILE_PROJECT_SEGREGATION, WORKSPACE_LABELS } from "constants/fetch-keys"; export const ProfileIssuesView = () => { // create issue modal const [createIssueModal, setCreateIssueModal] = useState(false); const [preloadedData, setPreloadedData] = useState< (Partial & { actionType: "createIssue" | "edit" | "delete" }) | undefined >(undefined); // update issue modal const [editIssueModal, setEditIssueModal] = useState(false); const [issueToEdit, setIssueToEdit] = useState< (IIssue & { actionType: "edit" | "delete" }) | undefined >(undefined); // delete issue modal const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [issueToDelete, setIssueToDelete] = useState(null); // trash box const [trashBox, setTrashBox] = useState(false); const router = useRouter(); const { workspaceSlug, userId } = router.query; const { user } = useUser(); const { groupedIssues, mutateProfileIssues, issueView, groupByProperty, orderBy, isEmpty, showEmptyGroups, filters, setFilters, properties, params, } = useProfileIssues(workspaceSlug?.toString(), userId?.toString()); const { data: profileData } = useSWR( workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null, workspaceSlug && userId ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString()) : null ); const { data: labels } = useSWR( workspaceSlug && (filters?.labels ?? []).length > 0 ? WORKSPACE_LABELS(workspaceSlug.toString()) : null, workspaceSlug && (filters?.labels ?? []).length > 0 ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null ); const handleDeleteIssue = useCallback( (issue: IIssue) => { setDeleteIssueModal(true); setIssueToDelete(issue); }, [setDeleteIssueModal, setIssueToDelete] ); const handleOnDragEnd = useCallback( async (result: DropResult) => { setTrashBox(false); if (!result.destination || !workspaceSlug || !groupedIssues || groupByProperty !== "priority") return; const { source, destination } = result; if (source.droppableId === destination.droppableId) return; const draggedItem = groupedIssues[source.droppableId][source.index]; if (!draggedItem) return; if (destination.droppableId === "trashBox") handleDeleteIssue(draggedItem); else { const sourceGroup = source.droppableId; const destinationGroup = destination.droppableId; draggedItem[groupByProperty] = destinationGroup; mutateProfileIssues((prevData: any) => { if (!prevData) return prevData; const sourceGroupArray = [...groupedIssues[sourceGroup]]; const destinationGroupArray = [...groupedIssues[destinationGroup]]; sourceGroupArray.splice(source.index, 1); destinationGroupArray.splice(destination.index, 0, draggedItem); return { ...prevData, [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy), [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy), }; }, false); // patch request issuesService .patchIssue( workspaceSlug as string, draggedItem.project, draggedItem.id, { priority: draggedItem.priority, }, user ) .catch(() => mutateProfileIssues()); } }, [ groupByProperty, groupedIssues, handleDeleteIssue, mutateProfileIssues, orderBy, user, workspaceSlug, ] ); const addIssueToGroup = useCallback( (groupTitle: string) => { setCreateIssueModal(true); let preloadedValue: string | string[] = groupTitle; if (groupByProperty === "labels") { if (groupTitle === "None") preloadedValue = []; else preloadedValue = [groupTitle]; } if (groupByProperty) setPreloadedData({ [groupByProperty]: preloadedValue, actionType: "createIssue", }); else setPreloadedData({ actionType: "createIssue" }); }, [setCreateIssueModal, setPreloadedData, groupByProperty] ); const addIssueToDate = useCallback( (date: string) => { setCreateIssueModal(true); setPreloadedData({ target_date: date, actionType: "createIssue", }); }, [setCreateIssueModal, setPreloadedData] ); const makeIssueCopy = useCallback( (issue: IIssue) => { setCreateIssueModal(true); setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" }); }, [setCreateIssueModal, setPreloadedData] ); const handleEditIssue = useCallback( (issue: IIssue) => { setEditIssueModal(true); setIssueToEdit({ ...issue, actionType: "edit", cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null, module: issue.issue_module ? issue.issue_module.module : null, }); }, [setEditIssueModal, setIssueToEdit] ); const handleIssueAction = useCallback( (issue: IIssue, action: "copy" | "edit" | "delete") => { if (action === "copy") makeIssueCopy(issue); else if (action === "edit") handleEditIssue(issue); else if (action === "delete") handleDeleteIssue(issue); }, [makeIssueCopy, handleEditIssue, handleDeleteIssue] ); const filtersToDisplay = { ...filters, assignees: null, created_by: null, subscriber: null }; const nullFilters = Object.keys(filtersToDisplay).filter( (key) => filtersToDisplay[key as keyof IIssueFilterOptions] === null ); const areFiltersApplied = Object.keys(filtersToDisplay).length > 0 && nullFilters.length !== Object.keys(filtersToDisplay).length; return ( <> setCreateIssueModal(false)} prePopulateData={{ ...preloadedData, }} onSubmit={async () => { mutateProfileIssues(); }} /> setEditIssueModal(false)} data={issueToEdit} onSubmit={async () => { mutateProfileIssues(); }} /> setDeleteIssueModal(false)} isOpen={deleteIssueModal} data={issueToDelete} user={user} onSubmit={async () => { mutateProfileIssues(); }} /> {areFiltersApplied && ( <>
setFilters({ labels: null, priority: null, state_group: null, start_date: null, target_date: null, type: null, }) } />
{
} )} ); };