import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // mobx import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // hooks import useUser from "hooks/use-user"; // components import { DeleteIssueModal, FullScreenPeekView, SidePeekView } from "components/issues"; // types import { IIssue } from "types"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; type Props = { handleMutation?: () => void; projectId: string; readOnly: boolean; workspaceSlug: string; }; export type TPeekOverviewModes = "side" | "modal" | "full"; export const IssuePeekOverview: React.FC = observer(({ handleMutation, projectId, readOnly, workspaceSlug }) => { const [isSidePeekOpen, setIsSidePeekOpen] = useState(false); const [isModalPeekOpen, setIsModalPeekOpen] = useState(false); const [peekOverviewMode, setPeekOverviewMode] = useState("side"); const [deleteIssueModal, setDeleteIssueModal] = useState(false); const router = useRouter(); const { peekIssue } = router.query; const { issueDetail: issueDetailStore } = useMobxStore(); const { deleteIssue, fetchIssueDetails, issues, updateIssue } = issueDetailStore; const issue = issues[peekIssue?.toString() ?? ""]; const { user } = useUser(); const handleClose = () => { const { query } = router; delete query.peekIssue; router.push({ pathname: router.pathname, query: { ...query }, }); }; const handleUpdateIssue = async (formData: Partial) => { if (!issue || !user) return; await updateIssue(workspaceSlug, projectId, issue.id, formData, user); mutate(PROJECT_ISSUES_ACTIVITY(issue.id)); if (handleMutation) handleMutation(); }; const handleDeleteIssue = async () => { if (!issue || !user) return; await deleteIssue(workspaceSlug, projectId, issue.id, user); if (handleMutation) handleMutation(); handleClose(); }; useEffect(() => { if (!peekIssue) return; fetchIssueDetails(workspaceSlug, projectId, peekIssue.toString()); }, [fetchIssueDetails, peekIssue, projectId, workspaceSlug]); useEffect(() => { if (peekIssue) { if (peekOverviewMode === "side") { setIsSidePeekOpen(true); setIsModalPeekOpen(false); } else { setIsModalPeekOpen(true); setIsSidePeekOpen(false); } } else { setIsSidePeekOpen(false); setIsModalPeekOpen(false); } }, [peekIssue, peekOverviewMode]); return ( <> setDeleteIssueModal(false)} data={issue ? { ...issue } : null} onSubmit={handleDeleteIssue} user={user} />
setDeleteIssueModal(true)} handleUpdateIssue={handleUpdateIssue} issue={issue} mode={peekOverviewMode} readOnly={readOnly} setMode={(mode) => setPeekOverviewMode(mode)} workspaceSlug={workspaceSlug} />
{peekOverviewMode === "modal" && ( setDeleteIssueModal(true)} handleUpdateIssue={handleUpdateIssue} issue={issue} mode={peekOverviewMode} readOnly={readOnly} setMode={(mode) => setPeekOverviewMode(mode)} workspaceSlug={workspaceSlug} /> )} {peekOverviewMode === "full" && ( setDeleteIssueModal(true)} handleUpdateIssue={handleUpdateIssue} issue={issue} mode={peekOverviewMode} readOnly={readOnly} setMode={(mode) => setPeekOverviewMode(mode)} workspaceSlug={workspaceSlug} /> )}
); });