import { useRef, useState } from "react"; import { observer } from "mobx-react-lite"; import { ChevronUp, PenSquare, Search } from "lucide-react"; // hooks import { useApplication, useEventTracker, useUser } from "hooks/store"; import useLocalStorage from "hooks/use-local-storage"; // components import { CreateUpdateDraftIssueModal } from "components/issues"; // constants import { EUserWorkspaceRoles } from "constants/workspace"; import { EIssuesStoreType } from "constants/issue"; export const WorkspaceSidebarQuickAction = observer(() => { // states const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false); const { theme: themeStore, commandPalette: commandPaletteStore } = useApplication(); const { setTrackElement } = useEventTracker(); const { membership: { currentWorkspaceRole }, } = useUser(); const { storedValue, clearValue } = useLocalStorage("draftedIssue", JSON.stringify({})); //useState control for displaying draft issue button instead of group hover const [isDraftButtonOpen, setIsDraftButtonOpen] = useState(false); const timeoutRef = useRef(); const isSidebarCollapsed = themeStore.sidebarCollapsed; const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER; const onMouseEnter = () => { //if renet before timout clear the timeout timeoutRef?.current && clearTimeout(timeoutRef.current); setIsDraftButtonOpen(true); }; const onMouseLeave = () => { timeoutRef.current = setTimeout(() => { setIsDraftButtonOpen(false); }, 300); }; return ( <> setIsDraftIssueModalOpen(false)} prePopulateData={storedValue ? JSON.parse(storedValue) : {}} onSubmit={() => { localStorage.removeItem("draftedIssue"); clearValue(); }} fieldsToShow={["all"]} />
{isAuthorizedUser && (
{storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && ( <>
)}
)}
); });