import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; // 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 { FullScreenPeekView, SidePeekView } from "components/issues"; // types import { IIssue } from "types"; 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 router = useRouter(); const { peekIssue } = router.query; const { issues: issuesStore } = useMobxStore(); const { deleteIssue, getIssueById, issues, updateIssue } = issuesStore; 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); handleMutation(); }; const handleDeleteIssue = async () => { if (!issue || !user) return; await deleteIssue(workspaceSlug, projectId, issue.id, user); handleMutation(); handleClose(); }; useEffect(() => { if (!peekIssue) return; getIssueById(workspaceSlug, projectId, peekIssue.toString()); }, [getIssueById, peekIssue, projectId, workspaceSlug]); useEffect(() => { if (peekIssue) { if (peekOverviewMode === "side") { setIsSidePeekOpen(true); setIsModalPeekOpen(false); } else { setIsModalPeekOpen(true); setIsSidePeekOpen(false); } } else { console.log("Triggered"); setIsSidePeekOpen(false); setIsModalPeekOpen(false); } }, [peekIssue, peekOverviewMode]); return ( <>
setPeekOverviewMode(mode)} workspaceSlug={workspaceSlug} />
{peekOverviewMode === "modal" && ( setPeekOverviewMode(mode)} workspaceSlug={workspaceSlug} /> )} {peekOverviewMode === "full" && ( setPeekOverviewMode(mode)} workspaceSlug={workspaceSlug} /> )}
); } );