import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Controller, useForm } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // ui components import { Button, Loader, ToggleSwitch } from "@plane/ui"; import { Check, CircleDot, Globe2 } from "lucide-react"; import { CustomPopover } from "./popover"; import { IProjectPublishSettings, TProjectPublishViews } from "store/project"; // hooks import useToast from "hooks/use-toast"; // types import { IProject } from "types"; type Props = { isOpen: boolean; project: IProject; onClose: () => void; }; type FormData = { id: string | null; comments: boolean; reactions: boolean; votes: boolean; inbox: string | null; views: TProjectPublishViews[]; }; const defaultValues: FormData = { id: null, comments: false, reactions: false, votes: false, inbox: null, views: ["list", "kanban"], }; const viewOptions: { key: TProjectPublishViews; label: string; }[] = [ { key: "list", label: "List" }, { key: "kanban", label: "Kanban" }, // { key: "calendar", label: "Calendar" }, // { key: "gantt", label: "Gantt" }, // { key: "spreadsheet", label: "Spreadsheet" }, ]; export const PublishProjectModal: React.FC = observer((props) => { const { isOpen, project, onClose } = props; const [isUnpublishing, setIsUnpublishing] = useState(false); const [isUpdateRequired, setIsUpdateRequired] = useState(false); let plane_deploy_url = process.env.NEXT_PUBLIC_DEPLOY_URL; if (typeof window !== "undefined" && !plane_deploy_url) plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces"; const router = useRouter(); const { workspaceSlug } = router.query; const { projectPublish: projectPublishStore } = useMobxStore(); const { setToastAlert } = useToast(); const { control, formState: { isSubmitting }, getValues, handleSubmit, reset, watch, } = useForm({ defaultValues, }); const handleClose = () => { onClose(); setIsUpdateRequired(false); reset({ ...defaultValues }); }; // prefill form with the saved settings if the project is already published useEffect(() => { if ( projectPublishStore.projectPublishSettings && projectPublishStore.projectPublishSettings !== "not-initialized" ) { let userBoards: TProjectPublishViews[] = []; if (projectPublishStore.projectPublishSettings?.views) { const savedViews = projectPublishStore.projectPublishSettings?.views; if (!savedViews) return; if (savedViews.list) userBoards.push("list"); if (savedViews.kanban) userBoards.push("kanban"); if (savedViews.calendar) userBoards.push("calendar"); if (savedViews.gantt) userBoards.push("gantt"); if (savedViews.spreadsheet) userBoards.push("spreadsheet"); userBoards = userBoards && userBoards.length > 0 ? userBoards : ["list"]; } const updatedData = { id: projectPublishStore.projectPublishSettings?.id || null, comments: projectPublishStore.projectPublishSettings?.comments || false, reactions: projectPublishStore.projectPublishSettings?.reactions || false, votes: projectPublishStore.projectPublishSettings?.votes || false, inbox: projectPublishStore.projectPublishSettings?.inbox || null, views: userBoards, }; reset({ ...updatedData }); } }, [reset, projectPublishStore.projectPublishSettings]); // fetch publish settings useEffect(() => { if (!workspaceSlug || !isOpen) return; if (projectPublishStore.projectPublishSettings === "not-initialized") { projectPublishStore.getProjectSettingsAsync(workspaceSlug.toString(), project.id); } }, [isOpen, workspaceSlug, project, projectPublishStore]); const handlePublishProject = async (payload: IProjectPublishSettings) => { if (!workspaceSlug) return; return projectPublishStore .publishProject(workspaceSlug.toString(), project.id, payload) .then((res) => { handleClose(); // window.open(`${plane_deploy_url}/${workspaceSlug}/${project.id}`, "_blank"); return res; }) .catch((err) => err); }; const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => { if (!workspaceSlug) return; await projectPublishStore .updateProjectSettingsAsync(workspaceSlug.toString(), project.id, payload.id ?? "", payload) .then((res) => { setToastAlert({ type: "success", title: "Success!", message: "Publish settings updated successfully!", }); handleClose(); return res; }) .catch((error) => { console.log("error", error); return error; }); }; const handleUnpublishProject = async (publishId: string) => { if (!workspaceSlug || !publishId) return; setIsUnpublishing(true); await projectPublishStore .unPublishProject(workspaceSlug.toString(), project.id, publishId) .then((res) => { handleClose(); return res; }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Something went wrong while unpublishing the project.", }) ) .finally(() => setIsUnpublishing(false)); }; const CopyLinkToClipboard = ({ copy_link }: { copy_link: string }) => { const [status, setStatus] = useState(false); const copyText = () => { navigator.clipboard.writeText(copy_link); setStatus(true); setTimeout(() => { setStatus(false); }, 1000); }; return (
copyText()} > {status ? "Copied" : "Copy Link"}
); }; const handleFormSubmit = async (formData: FormData) => { if (!formData.views || formData.views.length === 0) { setToastAlert({ type: "error", title: "Error!", message: "Please select at least one view layout to publish the project.", }); return; } const payload = { comments: formData.comments, reactions: formData.reactions, votes: formData.votes, inbox: formData.inbox, views: { list: formData.views.includes("list"), kanban: formData.views.includes("kanban"), calendar: formData.views.includes("calendar"), gantt: formData.views.includes("gantt"), spreadsheet: formData.views.includes("spreadsheet"), }, }; if (project.is_deployed) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload }); else await handlePublishProject(payload); }; // check if an update is required or not const checkIfUpdateIsRequired = () => { if (!projectPublishStore.projectPublishSettings || projectPublishStore.projectPublishSettings === "not-initialized") return; const currentSettings = projectPublishStore.projectPublishSettings as IProjectPublishSettings; const newSettings = getValues(); if ( currentSettings.comments !== newSettings.comments || currentSettings.reactions !== newSettings.reactions || currentSettings.votes !== newSettings.votes ) { setIsUpdateRequired(true); return; } let viewCheckFlag = 0; viewOptions.forEach((option) => { if (currentSettings.views[option.key] !== newSettings.views.includes(option.key)) viewCheckFlag++; }); if (viewCheckFlag !== 0) { setIsUpdateRequired(true); return; } setIsUpdateRequired(false); }; return (
{/* heading */}
Publish
{project.is_deployed && ( )}
{/* content */} {projectPublishStore.fetchSettingsLoader ? ( ) : (
{project.is_deployed && ( <>
{`${plane_deploy_url}/${workspaceSlug}/${project.id}`}
This project is live on web
)}
Views
( 0 ? viewOptions .filter((v) => value.includes(v.key)) .map((v) => v.label) .join(", ") : `` } placeholder="Select views" > <> {viewOptions.map((option) => (
{ const _views = value.length > 0 ? value.includes(option.key) ? value.filter((_o: string) => _o !== option.key) : [...value, option.key] : [option.key]; if (_views.length === 0) return; onChange(_views); checkIfUpdateIsRequired(); }} >
{option.label}
{value.length > 0 && value.includes(option.key) && ( )}
))}
)} />
Allow comments
( { onChange(val); checkIfUpdateIsRequired(); }} size="sm" /> )} />
Allow reactions
( { onChange(val); checkIfUpdateIsRequired(); }} size="sm" /> )} />
Allow voting
( { onChange(val); checkIfUpdateIsRequired(); }} size="sm" /> )} />
{/* toggle inbox */} {/*
Allow issue proposals
( )} />
*/}
)} {/* modal handlers */}
Anyone with the link can access
{!projectPublishStore.fetchSettingsLoader && (
{project.is_deployed ? ( <> {isUpdateRequired && ( )} ) : ( )}
)}
); });