import React, { useState, useCallback, useEffect } from "react"; // next import { useRouter } from "next/router"; // swr import { mutate } from "swr"; // react hook form import { SubmitHandler, useForm } from "react-hook-form"; // headless ui import { Combobox, Dialog, Transition } from "@headlessui/react"; // services import issuesServices from "lib/services/issues.services"; // hooks import useUser from "lib/hooks/useUser"; import useTheme from "lib/hooks/useTheme"; import useToast from "lib/hooks/useToast"; // icons import { FolderIcon, RectangleStackIcon, ClipboardDocumentListIcon, MagnifyingGlassIcon, } from "@heroicons/react/24/outline"; // components import ShortcutsModal from "components/command-palette/shortcuts"; import CreateProjectModal from "components/project/CreateProjectModal"; import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal"; // ui import { Button } from "ui"; // types import { IIssue, IssueResponse } from "types"; // fetch keys import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; // constants import { classNames, copyTextToClipboard } from "constants/common"; type FormInput = { issue_ids: string[]; cycleId: string; }; const CommandPalette: React.FC = () => { const [query, setQuery] = useState(""); const [isPaletteOpen, setIsPaletteOpen] = useState(false); const [isIssueModalOpen, setIsIssueModalOpen] = useState(false); const [isProjectModalOpen, setIsProjectModalOpen] = useState(false); const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false); const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false); const { activeWorkspace, activeProject, issues } = useUser(); const router = useRouter(); const { toggleCollapsed } = useTheme(); const { setToastAlert } = useToast(); const filteredIssues: IIssue[] = query === "" ? issues?.results ?? [] : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? []; const { register, handleSubmit, reset } = useForm(); const quickActions = [ { name: "Add new issue...", icon: RectangleStackIcon, shortcut: "I", onClick: () => { setIsIssueModalOpen(true); }, }, { name: "Add new project...", icon: ClipboardDocumentListIcon, shortcut: "P", onClick: () => { setIsProjectModalOpen(true); }, }, ]; const handleCommandPaletteClose = () => { setIsPaletteOpen(false); setQuery(""); reset(); }; const handleKeyDown = useCallback( (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key === "/") { e.preventDefault(); setIsPaletteOpen(true); } else if ((e.ctrlKey || e.metaKey) && e.key === "i") { e.preventDefault(); setIsIssueModalOpen(true); } else if ((e.ctrlKey || e.metaKey) && e.key === "p") { e.preventDefault(); setIsProjectModalOpen(true); } else if ((e.ctrlKey || e.metaKey) && e.key === "b") { e.preventDefault(); toggleCollapsed(); } else if ((e.ctrlKey || e.metaKey) && e.key === "h") { e.preventDefault(); setIsShortcutsModalOpen(true); } else if ((e.ctrlKey || e.metaKey) && e.key === "q") { e.preventDefault(); setIsCreateCycleModalOpen(true); } else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") { e.preventDefault(); if (!router.query.issueId) return; const url = new URL(window.location.href); copyTextToClipboard(url.href) .then(() => { setToastAlert({ type: "success", title: "Copied to clipboard", }); }) .catch(() => { setToastAlert({ type: "error", title: "Some error occurred", }); }); } }, [toggleCollapsed, setToastAlert, router] ); const handleDelete: SubmitHandler = (data) => { if (!data.issue_ids || data.issue_ids.length === 0) { setToastAlert({ title: "Error", type: "error", message: "Please select atleast one issue", }); return; } if (activeWorkspace && activeProject) { issuesServices .bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data) .then((res) => { setToastAlert({ title: "Success", type: "success", message: res.message, }); mutate( PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id), (prevData) => { return { ...(prevData as IssueResponse), count: (prevData?.results ?? []).filter( (p) => !data.issue_ids.some((id) => p.id === id) ).length, results: (prevData?.results ?? []).filter( (p) => !data.issue_ids.some((id) => p.id === id) ), }; }, false ); }) .catch((e) => { console.log(e); }); } }; useEffect(() => { document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); }, [handleKeyDown]); return ( <> {activeProject && ( )} setQuery("")} appear >
{filteredIssues.length > 0 && ( <>
  • {query === "" && (

    Issues

    )}
      {filteredIssues.map((issue) => ( classNames( "flex items-center justify-between cursor-pointer select-none rounded-md px-3 py-2", active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" ) } > {({ active }) => ( <>
      {activeProject?.identifier}-{issue.sequence_id} {issue.name}
      {active && ( )} )}
      ))}
  • )} {query === "" && (
  • Quick actions

      {quickActions.map((action) => ( classNames( "flex cursor-default select-none items-center rounded-md px-3 py-2", active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" ) } > {({ active }) => ( <> ))}
  • )}
    {query !== "" && filteredIssues.length === 0 && (
    )}
    ); }; export default CommandPalette;