diff --git a/web/core/components/command-palette/command-modal.tsx b/web/core/components/command-palette/command-modal.tsx index e58c7f9c160..f6e3b24da33 100644 --- a/web/core/components/command-palette/command-modal.tsx +++ b/web/core/components/command-palette/command-modal.tsx @@ -26,12 +26,17 @@ import { CommandPaletteWorkspaceSettingsActions, } from "@/components/command-palette"; import { SimpleEmptyState } from "@/components/empty-state"; -// fetch-keys -import { ISSUE_DETAILS } from "@/constants/fetch-keys"; // helpers import { getTabIndex } from "@/helpers/tab-indices.helper"; // hooks -import { useCommandPalette, useEventTracker, useProject, useUser, useUserPermissions } from "@/hooks/store"; +import { + useCommandPalette, + useEventTracker, + useIssueDetail, + useProject, + useUser, + useUserPermissions, +} from "@/hooks/store"; import { useAppRouter } from "@/hooks/use-app-router"; import useDebounce from "@/hooks/use-debounce"; import { usePlatformOS } from "@/hooks/use-platform-os"; @@ -40,16 +45,13 @@ import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path"; import { IssueIdentifier } from "@/plane-web/components/issues"; // plane web services import { WorkspaceService } from "@/plane-web/services"; -// services -import { IssueService } from "@/services/issue"; const workspaceService = new WorkspaceService(); -const issueService = new IssueService(); export const CommandModal: React.FC = observer(() => { // router const router = useAppRouter(); - const { workspaceSlug, projectId, issueId } = useParams(); + const { workspaceSlug, workItem } = useParams(); // states const [placeholder, setPlaceholder] = useState("Type a command or search..."); const [resultsCount, setResultsCount] = useState(0); @@ -65,6 +67,7 @@ export const CommandModal: React.FC = observer(() => { // plane hooks const { t } = useTranslation(); // hooks + const { fetchIssueWithIdentifier } = useIssueDetail(); const { workspaceProjectIds } = useProject(); const { platform, isMobile } = usePlatformOS(); const { canPerformAnyCreateAction } = useUser(); @@ -72,7 +75,20 @@ export const CommandModal: React.FC = observer(() => { useCommandPalette(); const { allowPermissions } = useUserPermissions(); const { setTrackElement } = useEventTracker(); + + const projectIdentifier = workItem?.toString().split("-")[0]; + const sequence_id = workItem?.toString().split("-")[1]; + + const { data: issueDetails } = useSWR( + workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null, + workspaceSlug && workItem + ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id) + : null + ); + // derived values + const issueId = issueDetails?.id; + const projectId = issueDetails?.project_id; const page = pages[pages.length - 1]; const debouncedSearchTerm = useDebounce(searchTerm, 500); const { baseTabIndex } = getTabIndex(undefined, isMobile); @@ -82,14 +98,6 @@ export const CommandModal: React.FC = observer(() => { ); const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/search" }); - // TODO: update this to mobx store - const { data: issueDetails } = useSWR( - workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId.toString()) : null, - workspaceSlug && projectId && issueId - ? () => issueService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString()) - : null - ); - useEffect(() => { if (issueDetails && isCommandPaletteOpen) { setSearchInIssue(true);