diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx index 43119ccf8..4fbe58f33 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx @@ -2,7 +2,7 @@ import { FC } from "react"; import { observer } from "mobx-react-lite"; -import { useParams, usePathname, useRouter } from "next/navigation"; +import { useParams, usePathname } from "next/navigation"; // ui import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui"; // components @@ -12,11 +12,12 @@ import { PROJECT_ARCHIVES_BREADCRUMB_LIST } from "@/constants/archives"; import { EIssuesStoreType } from "@/constants/issue"; // hooks import { useIssues, useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; export const ProjectArchivesHeader: FC = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); const pathname = usePathname(); const activeTab = pathname.split("/").pop(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx index 5c2340f12..5563debee 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx @@ -1,7 +1,7 @@ "use client"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import useSWR from "swr"; // components import { EmptyState } from "@/components/common"; @@ -14,13 +14,14 @@ import { CycleLayoutRoot } from "@/components/issues/issue-layouts"; import { cn } from "@/helpers/common.helper"; // hooks import { useCycle, useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import useLocalStorage from "@/hooks/use-local-storage"; // assets import emptyCycle from "@/public/empty-state/cycle.svg"; const CycleDetailPage = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, cycleId } = useParams(); // store hooks const { fetchCycleDetails, getCycleById } = useCycle(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx index 94ea42949..95dae2512 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx @@ -3,7 +3,7 @@ import { useCallback, useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // icons import { ArrowRight, PanelRight } from "lucide-react"; // types @@ -33,6 +33,7 @@ import { useIssues, useCommandPalette, } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import useLocalStorage from "@/hooks/use-local-storage"; import { usePlatformOS } from "@/hooks/use-platform-os"; @@ -61,7 +62,7 @@ export const CycleIssuesHeader: React.FC = observer(() => { // states const [analyticsModal, setAnalyticsModal] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, cycleId } = useParams() as { workspaceSlug: string; projectId: string; diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx index 685352c1c..45cc9d416 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx @@ -2,7 +2,7 @@ import { FC } from "react"; import { observer } from "mobx-react-lite"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // ui import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui"; // components @@ -12,10 +12,11 @@ import { CyclesViewHeader } from "@/components/cycles"; import { EUserProjectRoles } from "@/constants/project"; // hooks import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; export const CyclesListHeader: FC = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); // store hooks const { toggleCreateCycleModal } = useCommandPalette(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx index 350a18a6b..6268823d0 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx @@ -1,16 +1,17 @@ "use client"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { X, PenSquare } from "lucide-react"; // components import { PageHead } from "@/components/core"; import { DraftIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/draft-issue-layout-root"; // hooks import { useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; const ProjectDraftIssuesPage = observer(() => { - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); // store const { getProjectById } = useProject(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx index 0ff5757bd..27b875090 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { useTheme } from "next-themes"; import useSWR from "swr"; // ui @@ -14,12 +14,13 @@ import { IssueDetailRoot } from "@/components/issues"; // hooks import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store"; // assets +import { useAppRouter } from "@/hooks/use-app-router"; import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp"; import emptyIssueLight from "@/public/empty-state/search/issues-light.webp"; const IssueDetailsPage = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, issueId } = useParams(); // hooks const { resolvedTheme } = useTheme(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx index ab6d3be7c..641603d45 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx @@ -1,7 +1,7 @@ "use client"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { PanelRight } from "lucide-react"; // ui import { Breadcrumbs, LayersIcon } from "@plane/ui"; @@ -12,10 +12,11 @@ import { IssueDetailQuickActions } from "@/components/issues"; import { cn } from "@/helpers/common.helper"; // hooks import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; export const ProjectIssueDetailsHeader = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, issueId } = useParams(); // store hooks const { currentProjectDetails } = useProject(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx index 06ade9367..fc7492a22 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx @@ -2,7 +2,7 @@ import { useCallback, useState } from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // icons import { Briefcase, Circle, ExternalLink } from "lucide-react"; // types @@ -30,13 +30,14 @@ import { useCommandPalette, } from "@/hooks/store"; import { useIssues } from "@/hooks/store/use-issues"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; export const ProjectIssuesHeader = observer(() => { // states const [analyticsModal, setAnalyticsModal] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string }; // store hooks const { diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx index a89593e07..c504aa645 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx @@ -1,7 +1,7 @@ "use client"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import useSWR from "swr"; // components import { EmptyState } from "@/components/common"; @@ -12,13 +12,14 @@ import { ModuleAnalyticsSidebar } from "@/components/modules"; import { cn } from "@/helpers/common.helper"; // hooks import { useModule, useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import useLocalStorage from "@/hooks/use-local-storage"; // assets import emptyModule from "@/public/empty-state/module.svg"; const ModuleIssuesPage = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, moduleId } = useParams(); // store hooks const { fetchModuleDetails, getModuleById } = useModule(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx index f262ef5fd..63b9ef1ce 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx @@ -3,7 +3,7 @@ import { useCallback, useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // icons import { ArrowRight, PanelRight } from "lucide-react"; // types @@ -33,6 +33,7 @@ import { useIssues, useCommandPalette, } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { useIssuesActions } from "@/hooks/use-issues-actions"; import useLocalStorage from "@/hooks/use-local-storage"; import { usePlatformOS } from "@/hooks/use-platform-os"; @@ -64,7 +65,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => { // states const [analyticsModal, setAnalyticsModal] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, moduleId } = useParams(); // hooks const { isMobile } = usePlatformOS(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx index d87720fea..54d1dda30 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx @@ -1,7 +1,7 @@ "use client"; import { observer } from "mobx-react-lite"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // ui import { Breadcrumbs, Button, DiceIcon } from "@plane/ui"; // components @@ -11,10 +11,11 @@ import { ModuleViewHeader } from "@/components/modules"; import { EUserProjectRoles } from "@/constants/project"; // hooks import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; export const ModulesListHeader: React.FC = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); // store hooks const { toggleCreateModuleModal } = useCommandPalette(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx index 2c8df4618..d5cb11183 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx @@ -3,7 +3,7 @@ import { useRef, useState } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import useSWR from "swr"; // document-editor import { EditorRefApi, useEditorMarkings } from "@plane/document-editor"; @@ -20,6 +20,7 @@ import { PageEditorBody, PageEditorHeaderRoot } from "@/components/pages"; import { cn } from "@/helpers/common.helper"; // hooks import { usePage, useProjectPages } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; const PageDetailsPage = observer(() => { // states @@ -30,7 +31,7 @@ const PageDetailsPage = observer(() => { const editorRef = useRef(null); const readOnlyEditorRef = useRef(null); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, pageId } = useParams(); // store hooks const { createPage, getPageById } = useProjectPages(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx index 5b536108e..b3ac8980f 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx @@ -1,21 +1,21 @@ "use client"; import { observer } from "mobx-react"; -import { useSearchParams } from "next/navigation"; +import { useParams, useSearchParams } from "next/navigation"; // types import { TPageNavigationTabs } from "@plane/types"; // components import { PageHead } from "@/components/core"; import { PagesListRoot, PagesListView } from "@/components/pages"; // hooks -import { useAppRouter, useProject } from "@/hooks/store"; +import { useProject } from "@/hooks/store"; const ProjectPagesPage = observer(() => { // router const searchParams = useSearchParams(); const type = searchParams.get("type"); + const { workspaceSlug, projectId } = useParams(); // store hooks - const { workspaceSlug, projectId } = useAppRouter(); const { getProjectById } = useProject(); // derived values const project = projectId ? getProjectById(projectId.toString()) : undefined; diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx index 49c65b9d3..39b42cef6 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx @@ -2,7 +2,7 @@ import { FC } from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // ui import { Settings } from "lucide-react"; import { Breadcrumbs, CustomMenu } from "@plane/ui"; @@ -12,10 +12,11 @@ import { BreadcrumbLink, Logo } from "@/components/common"; import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project"; // hooks import { useProject, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; export const ProjectSettingHeader: FC = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); // store hooks const { diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx index 169d0b309..378d0439e 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx @@ -1,7 +1,7 @@ "use client"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import useSWR from "swr"; // components import { EmptyState } from "@/components/common"; @@ -10,11 +10,12 @@ import { ProjectViewLayoutRoot } from "@/components/issues"; // hooks import { useProject, useProjectView } from "@/hooks/store"; // assets +import { useAppRouter } from "@/hooks/use-app-router"; import emptyView from "@/public/empty-state/view.svg"; const ProjectViewIssuesPage = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, viewId } = useParams(); // store hooks const { fetchViewDetails, getViewById } = useProjectView(); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx index 0d01696fc..21e0d6b40 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx @@ -2,6 +2,7 @@ import { useCallback, useRef, useState } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { Search, Briefcase, X, ListFilter } from "lucide-react"; // types import { TProjectFilters } from "@plane/types"; @@ -17,17 +18,18 @@ import { EUserWorkspaceRoles } from "@/constants/workspace"; import { cn } from "@/helpers/common.helper"; import { calculateTotalFilters } from "@/helpers/filter.helper"; // hooks -import { useAppRouter, useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store"; +import { useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; export const ProjectsListHeader = observer(() => { + // router + const { workspaceSlug } = useParams(); // states const [isSearchOpen, setIsSearchOpen] = useState(false); // refs const inputRef = useRef(null); // store hooks const { toggleCreateProjectModal } = useCommandPalette(); - const { workspaceSlug } = useAppRouter(); const { setTrackElement } = useEventTracker(); const { membership: { currentWorkspaceRole }, @@ -68,7 +70,7 @@ export const ProjectsListHeader = observer(() => { } } - updateFilters(workspaceSlug, { [key]: newValues }); + updateFilters(workspaceSlug.toString(), { [key]: newValues }); }, [filters, updateFilters, workspaceSlug] ); @@ -144,7 +146,7 @@ export const ProjectsListHeader = observer(() => { value={displayFilters?.order_by} onChange={(val) => { if (!workspaceSlug || val === displayFilters?.order_by) return; - updateDisplayFilters(workspaceSlug, { + updateDisplayFilters(workspaceSlug.toString(), { order_by: val, }); }} @@ -161,7 +163,7 @@ export const ProjectsListHeader = observer(() => { handleFiltersUpdate={handleFilters} handleDisplayFiltersUpdate={(val) => { if (!workspaceSlug) return; - updateDisplayFilters(workspaceSlug, val); + updateDisplayFilters(workspaceSlug.toString(), val); }} memberIds={workspaceMemberIds ?? undefined} /> diff --git a/web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx index b10e8db30..cd8eb9dfe 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx @@ -1,5 +1,6 @@ import { useCallback } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; // icons import { ChevronDown, ListFilter } from "lucide-react"; // types @@ -10,9 +11,11 @@ import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/pr // helpers import { calculateTotalFilters } from "@/helpers/filter.helper"; // hooks -import { useAppRouter, useMember, useProjectFilter } from "@/hooks/store"; +import { useMember, useProjectFilter } from "@/hooks/store"; export const ProjectsListMobileHeader = observer(() => { + // router + const { workspaceSlug } = useParams(); const { currentWorkspaceDisplayFilters: displayFilters, currentWorkspaceFilters: filters, @@ -20,7 +23,6 @@ export const ProjectsListMobileHeader = observer(() => { updateFilters, } = useProjectFilter(); - const { workspaceSlug } = useAppRouter(); const { workspace: { workspaceMemberIds }, @@ -39,7 +41,7 @@ export const ProjectsListMobileHeader = observer(() => { if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } - updateFilters(workspaceSlug, { [key]: newValues }); + updateFilters(workspaceSlug.toString(), { [key]: newValues }); }, [filters, updateFilters, workspaceSlug] ); @@ -52,7 +54,7 @@ export const ProjectsListMobileHeader = observer(() => { value={displayFilters?.order_by} onChange={(val) => { if (!workspaceSlug || val === displayFilters?.order_by) return; - updateDisplayFilters(workspaceSlug, { + updateDisplayFilters(workspaceSlug.toString(), { order_by: val, }); }} @@ -78,7 +80,7 @@ export const ProjectsListMobileHeader = observer(() => { handleFiltersUpdate={handleFilters} handleDisplayFiltersUpdate={(val) => { if (!workspaceSlug) return; - updateDisplayFilters(workspaceSlug, val); + updateDisplayFilters(workspaceSlug.toString(), val); }} memberIds={workspaceMemberIds ?? undefined} /> diff --git a/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx index 68ac3d125..40e7f30a2 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx @@ -2,6 +2,7 @@ import { useCallback } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; // types import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types"; // components @@ -10,11 +11,11 @@ import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project // helpers import { calculateTotalFilters } from "@/helpers/filter.helper"; // hooks -import { useAppRouter, useProject, useProjectFilter, useWorkspace } from "@/hooks/store"; +import { useProject, useProjectFilter, useWorkspace } from "@/hooks/store"; const ProjectsPage = observer(() => { // store - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { currentWorkspace } = useWorkspace(); const { totalProjectIds, filteredProjectIds } = useProject(); const { diff --git a/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx b/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx index d273779fe..4ffa0aff5 100644 --- a/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx +++ b/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx @@ -1,8 +1,11 @@ -import { useParams, usePathname, useRouter } from "next/navigation"; +import { useParams, usePathname } from "next/navigation"; +// constants import { WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace"; +// hooks +import { useAppRouter } from "@/hooks/use-app-router"; export const MobileWorkspaceSettingsTabs = () => { - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); const pathname = usePathname(); return ( diff --git a/web/app/accounts/set-password/page.tsx b/web/app/accounts/set-password/page.tsx index 3dd78cb35..28213adf6 100644 --- a/web/app/accounts/set-password/page.tsx +++ b/web/app/accounts/set-password/page.tsx @@ -4,7 +4,7 @@ import { FormEvent, useEffect, useMemo, useState } from "react"; import { observer } from "mobx-react-lite"; import Image from "next/image"; import Link from "next/link"; -import { useRouter, useSearchParams } from "next/navigation"; +import { useSearchParams } from "next/navigation"; // icons import { useTheme } from "next-themes"; import { Eye, EyeOff } from "lucide-react"; @@ -17,6 +17,7 @@ import { EPageTypes } from "@/helpers/authentication.helper"; import { getPasswordStrength } from "@/helpers/password.helper"; // hooks import { useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // wrappers import { AuthenticationWrapper } from "@/lib/wrappers"; // services @@ -43,7 +44,7 @@ const authService = new AuthService(); const SetPasswordPage = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); // search params const searchParams = useSearchParams(); const email = searchParams.get("email"); diff --git a/web/app/create-workspace/page.tsx b/web/app/create-workspace/page.tsx index f723a4786..1a5625ad6 100644 --- a/web/app/create-workspace/page.tsx +++ b/web/app/create-workspace/page.tsx @@ -4,13 +4,13 @@ import { useState } from "react"; import { observer } from "mobx-react"; import Image from "next/image"; import Link from "next/link"; -import { useRouter } from "next/navigation"; import { useTheme } from "next-themes"; import { IWorkspace } from "@plane/types"; // components import { CreateWorkspaceForm } from "@/components/workspace"; // hooks import { useUser, useUserProfile } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // wrappers import { AuthenticationWrapper } from "@/lib/wrappers"; // images @@ -19,7 +19,7 @@ import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue const CreateWorkspacePage = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { data: currentUser } = useUser(); const { updateUserProfile } = useUserProfile(); diff --git a/web/app/error.tsx b/web/app/error.tsx index 78ade092c..f4b54c74b 100644 --- a/web/app/error.tsx +++ b/web/app/error.tsx @@ -2,7 +2,6 @@ // import { useEffect } from "react"; // import * as Sentry from "@sentry/nextjs"; -// import { useRouter } from "next/navigation"; // services import { Button } from "@plane/ui"; // helpers @@ -24,7 +23,7 @@ import DefaultLayout from "@/layouts/default-layout"; // TODO: adding error sentry logging. // const CustomErrorComponent = ({ error }: props) => { const CustomErrorComponent = () => { - // const router = useRouter(); + // const router = useAppRouter(); // useEffect(() => { // Sentry.captureException(error); diff --git a/web/app/invitations/page.tsx b/web/app/invitations/page.tsx index e050b998d..1fa924e9a 100644 --- a/web/app/invitations/page.tsx +++ b/web/app/invitations/page.tsx @@ -4,7 +4,7 @@ import React, { useState } from "react"; import { observer } from "mobx-react-lite"; import Image from "next/image"; import Link from "next/link"; -import { useRouter } from "next/navigation"; + import { useTheme } from "next-themes"; import useSWR, { mutate } from "swr"; // icons @@ -22,7 +22,9 @@ import { ROLE } from "@/constants/workspace"; // helpers import { truncateText } from "@/helpers/string.helper"; import { getUserRole } from "@/helpers/user.helper"; +// hooks import { useEventTracker, useUser, useUserProfile, useWorkspace } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // services import { AuthenticationWrapper } from "@/lib/wrappers"; // images @@ -38,7 +40,7 @@ const UserInvitationsPage = observer(() => { const [invitationsRespond, setInvitationsRespond] = useState([]); const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { captureEvent, joinWorkspaceMetricGroup } = useEventTracker(); const { data: currentUser } = useUser(); diff --git a/web/app/onboarding/page.tsx b/web/app/onboarding/page.tsx index 91d8749e6..090b2059e 100644 --- a/web/app/onboarding/page.tsx +++ b/web/app/onboarding/page.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import useSWR from "swr"; // types import { TOnboardingSteps, TUserProfile } from "@plane/types"; @@ -16,6 +15,7 @@ import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys"; import { EPageTypes } from "@/helpers/authentication.helper"; // hooks import { useUser, useWorkspace, useUserProfile, useEventTracker } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // wrappers import { AuthenticationWrapper } from "@/lib/wrappers"; // services @@ -34,7 +34,7 @@ const OnboardingPage = observer(() => { const [step, setStep] = useState(null); const [totalSteps, setTotalSteps] = useState(null); // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { captureEvent } = useEventTracker(); const { isLoading: userLoader, data: user, updateCurrentUser } = useUser(); diff --git a/web/app/profile/security/page.tsx b/web/app/profile/security/page.tsx index a404db1c3..2f1d3f048 100644 --- a/web/app/profile/security/page.tsx +++ b/web/app/profile/security/page.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import { Controller, useForm } from "react-hook-form"; import { Eye, EyeOff } from "lucide-react"; // ui @@ -17,6 +16,7 @@ import { authErrorHandler } from "@/helpers/authentication.helper"; import { getPasswordStrength } from "@/helpers/password.helper"; // hooks import { useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // services import { AuthService } from "@/services/auth.service"; import { UserService } from "@/services/user.service"; @@ -49,7 +49,7 @@ const SecurityPage = observer(() => { const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false); const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { data: currentUser } = useUser(); // use form const { diff --git a/web/app/workspace-invitations/page.tsx b/web/app/workspace-invitations/page.tsx index 2c958fdeb..2844713db 100644 --- a/web/app/workspace-invitations/page.tsx +++ b/web/app/workspace-invitations/page.tsx @@ -2,7 +2,7 @@ import React from "react"; import { observer } from "mobx-react"; -import { useRouter, useSearchParams } from "next/navigation"; +import { useSearchParams } from "next/navigation"; import useSWR from "swr"; import { Boxes, Check, Share2, Star, User2, X } from "lucide-react"; // components @@ -14,6 +14,7 @@ import { WORKSPACE_INVITATION } from "@/constants/fetch-keys"; import { EPageTypes } from "@/helpers/authentication.helper"; // hooks import { useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // wrappers import { AuthenticationWrapper } from "@/lib/wrappers"; // services @@ -24,7 +25,7 @@ const workspaceService = new WorkspaceService(); const WorkspaceInvitationPage = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); // query params const searchParams = useSearchParams(); const invitation_id = searchParams.get("invitation_id"); diff --git a/web/core/components/account/auth-forms/auth-root.tsx b/web/core/components/account/auth-forms/auth-root.tsx index 4f3bde94b..d93cad5b5 100644 --- a/web/core/components/account/auth-forms/auth-root.tsx +++ b/web/core/components/account/auth-forms/auth-root.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState } from "react"; import { observer } from "mobx-react"; -import { useRouter, useSearchParams } from "next/navigation"; +import { useSearchParams } from "next/navigation"; import { IEmailCheckData } from "@plane/types"; // components import { @@ -23,6 +23,7 @@ import { } from "@/helpers/authentication.helper"; // hooks import { useInstance } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // services import { AuthService } from "@/services/auth.service"; @@ -34,7 +35,7 @@ type TAuthRoot = { export const AuthRoot: FC = observer((props) => { //router - const router = useRouter(); + const router = useAppRouter(); const searchParams = useSearchParams(); // query params const emailParam = searchParams.get("email"); diff --git a/web/core/components/account/deactivate-account-modal.tsx b/web/core/components/account/deactivate-account-modal.tsx index 27c598636..aa27af466 100644 --- a/web/core/components/account/deactivate-account-modal.tsx +++ b/web/core/components/account/deactivate-account-modal.tsx @@ -1,13 +1,13 @@ "use client"; import React, { useState } from "react"; -import { useRouter } from "next/navigation"; import { Trash2 } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; -// hooks // ui import { Button, TOAST_TYPE, setToast } from "@plane/ui"; +// hooks import { useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { isOpen: boolean; @@ -15,7 +15,7 @@ type Props = { }; export const DeactivateAccountModal: React.FC = (props) => { - const router = useRouter(); + const router = useAppRouter(); const { isOpen, onClose } = props; // hooks const { deactivateAccount, signOut } = useUser(); diff --git a/web/core/components/account/oauth/gitlab-button.tsx b/web/core/components/account/oauth/gitlab-button.tsx index a9ffb01b9..33221a297 100644 --- a/web/core/components/account/oauth/gitlab-button.tsx +++ b/web/core/components/account/oauth/gitlab-button.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; -import { useRouter } from "next/router"; import Image from "next/image"; +import { useSearchParams } from "next/navigation"; import { useTheme } from "next-themes"; // helpers import { API_BASE_URL } from "@/helpers/common.helper"; @@ -12,14 +12,14 @@ export type GitlabOAuthButtonProps = { }; export const GitlabOAuthButton: FC = (props) => { - const { query } = useRouter(); - const { next_path } = query; + const searchParams = useSearchParams(); + const nextPath = searchParams.get("next_path") || undefined; const { text } = props; // hooks const { resolvedTheme } = useTheme(); const handleSignIn = () => { - window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`); + window.location.assign(`${API_BASE_URL}/auth/gitlab/${nextPath ? `?next_path=${nextPath}` : ``}`); }; return ( diff --git a/web/core/components/analytics/custom-analytics/select/y-axis.tsx b/web/core/components/analytics/custom-analytics/select/y-axis.tsx index c9dc57d20..c97521c36 100644 --- a/web/core/components/analytics/custom-analytics/select/y-axis.tsx +++ b/web/core/components/analytics/custom-analytics/select/y-axis.tsx @@ -1,12 +1,13 @@ "use client"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { TYAxisValues } from "@plane/types"; import { CustomSelect } from "@plane/ui"; // constants import { ANALYTICS_Y_AXIS_VALUES } from "@/constants/analytics"; // hooks -import { useAppRouter, useProjectEstimates } from "@/hooks/store"; +import { useProjectEstimates } from "@/hooks/store"; // plane web constants import { EEstimateSystem } from "@/plane-web/constants/estimates"; @@ -17,7 +18,7 @@ type Props = { export const SelectYAxis: React.FC = observer(({ value, onChange }) => { // hooks - const { projectId } = useAppRouter(); + const { projectId } = useParams(); const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates(); const isEstimateEnabled = (analyticsOption: string) => { @@ -25,7 +26,7 @@ export const SelectYAxis: React.FC = observer(({ value, onChange }) => { if ( projectId && currentActiveEstimateId && - areEstimateEnabledByProjectId(projectId) && + areEstimateEnabledByProjectId(projectId.toString()) && estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS ) { return true; diff --git a/web/core/components/command-palette/actions/search-results.tsx b/web/core/components/command-palette/actions/search-results.tsx index 6d779d654..c0916f281 100644 --- a/web/core/components/command-palette/actions/search-results.tsx +++ b/web/core/components/command-palette/actions/search-results.tsx @@ -1,11 +1,12 @@ "use client"; import { Command } from "cmdk"; -import { useRouter } from "next/navigation"; +// types import { IWorkspaceSearchResults } from "@plane/types"; // helpers import { commandGroups } from "@/components/command-palette"; -// types +// hooks +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { closePalette: () => void; @@ -15,7 +16,7 @@ type Props = { export const CommandPaletteSearchResults: React.FC = (props) => { const { closePalette, results } = props; - const router = useRouter(); + const router = useAppRouter(); return ( <> diff --git a/web/core/components/command-palette/actions/workspace-settings-actions.tsx b/web/core/components/command-palette/actions/workspace-settings-actions.tsx index 98a0a720b..9c62fbe7d 100644 --- a/web/core/components/command-palette/actions/workspace-settings-actions.tsx +++ b/web/core/components/command-palette/actions/workspace-settings-actions.tsx @@ -3,10 +3,12 @@ import { Command } from "cmdk"; // hooks import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // constants import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace"; +// hooks import { useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { closePalette: () => void; @@ -15,7 +17,7 @@ type Props = { export const CommandPaletteWorkspaceSettingsActions: React.FC = (props) => { const { closePalette } = props; // router - const router = useRouter(); + const router = useAppRouter(); // router params const { workspaceSlug } = useParams(); // mobx store diff --git a/web/core/components/command-palette/command-modal.tsx b/web/core/components/command-palette/command-modal.tsx index e00af3d30..8c64240fd 100644 --- a/web/core/components/command-palette/command-modal.tsx +++ b/web/core/components/command-palette/command-modal.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"; import { Command } from "cmdk"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import useSWR from "swr"; import { FolderPlus, Search, Settings } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; @@ -26,6 +26,7 @@ import { EmptyState } from "@/components/empty-state"; import { EmptyStateType } from "@/constants/empty-state"; import { ISSUE_DETAILS } from "@/constants/fetch-keys"; import { useCommandPalette, useEventTracker, useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import useDebounce from "@/hooks/use-debounce"; import { usePlatformOS } from "@/hooks/use-platform-os"; // services @@ -68,7 +69,7 @@ export const CommandModal: React.FC = observer(() => { const { setTrackElement } = useEventTracker(); // router - const router = useRouter(); + const router = useAppRouter(); // router params const { workspaceSlug, projectId, issueId } = useParams(); diff --git a/web/core/components/command-palette/command-palette.tsx b/web/core/components/command-palette/command-palette.tsx index 4fe2e4438..c5aa94d83 100644 --- a/web/core/components/command-palette/command-palette.tsx +++ b/web/core/components/command-palette/command-palette.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, FC, useMemo } from "react"; import { observer } from "mobx-react"; -import { useParams, usePathname, useRouter } from "next/navigation"; +import { useParams, usePathname } from "next/navigation"; import useSWR from "swr"; // ui import { TOAST_TYPE, setToast } from "@plane/ui"; @@ -24,6 +24,7 @@ import { EUserWorkspaceRoles } from "@/constants/workspace"; import { copyTextToClipboard } from "@/helpers/string.helper"; // hooks import { useEventTracker, useIssues, useUser, useAppTheme, useCommandPalette } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; // services import { IssueService } from "@/services/issue"; @@ -33,7 +34,7 @@ const issueService = new IssueService(); export const CommandPalette: FC = observer(() => { // router - const router = useRouter(); + const router = useAppRouter(); // router params const { workspaceSlug, projectId, issueId, cycleId, moduleId } = useParams(); // pathname diff --git a/web/core/components/core/list/list-item.tsx b/web/core/components/core/list/list-item.tsx index 179e900d0..1e5a1327a 100644 --- a/web/core/components/core/list/list-item.tsx +++ b/web/core/components/core/list/list-item.tsx @@ -1,10 +1,11 @@ "use client"; import React, { FC } from "react"; -import { useRouter } from "next/navigation"; // ui import { ControlLink, Tooltip } from "@plane/ui"; // helpers import { cn } from "@/helpers/common.helper"; +// hooks +import { useAppRouter } from "@/hooks/use-app-router"; interface IListItemProps { title: string; @@ -34,7 +35,7 @@ export const ListItem: FC = (props) => { } = props; // router - const router = useRouter(); + const router = useAppRouter(); // handlers const handleControlLinkClick = (e: React.MouseEvent) => { diff --git a/web/core/components/cycles/analytics-sidebar/root.tsx b/web/core/components/cycles/analytics-sidebar/root.tsx index 5193d4637..e33f58ecb 100644 --- a/web/core/components/cycles/analytics-sidebar/root.tsx +++ b/web/core/components/cycles/analytics-sidebar/root.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"; import isEmpty from "lodash/isEmpty"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { Controller, useForm } from "react-hook-form"; // icons import { ArchiveRestoreIcon, LinkIcon, Trash2, ChevronRight, CalendarClock, SquareUser } from "lucide-react"; @@ -23,6 +23,7 @@ import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/help import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useEventTracker, useCycle, useUser, useMember, useProjectEstimates } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // plane web constants import { EEstimateSystem } from "@/plane-web/constants/estimates"; // services @@ -49,7 +50,7 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { const [archiveCycleModal, setArchiveCycleModal] = useState(false); const [cycleDeleteModal, setCycleDeleteModal] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); // store hooks const { setTrackElement, captureCycleEvent } = useEventTracker(); diff --git a/web/core/components/cycles/archived-cycles/modal.tsx b/web/core/components/cycles/archived-cycles/modal.tsx index d3ee9ebdf..32c9bbe4f 100644 --- a/web/core/components/cycles/archived-cycles/modal.tsx +++ b/web/core/components/cycles/archived-cycles/modal.tsx @@ -1,12 +1,12 @@ "use client"; import { useState, Fragment } from "react"; -import { useRouter } from "next/navigation"; import { Dialog, Transition } from "@headlessui/react"; // ui import { Button, TOAST_TYPE, setToast } from "@plane/ui"; // hooks import { useCycle } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { workspaceSlug: string; @@ -20,7 +20,7 @@ type Props = { export const ArchiveCycleModal: React.FC = (props) => { const { workspaceSlug, projectId, cycleId, isOpen, handleClose } = props; // router - const router = useRouter(); + const router = useAppRouter(); // states const [isArchiving, setIsArchiving] = useState(false); // store hooks diff --git a/web/core/components/cycles/board/cycles-board-card.tsx b/web/core/components/cycles/board/cycles-board-card.tsx index c16f4826e..ecdb17ccf 100644 --- a/web/core/components/cycles/board/cycles-board-card.tsx +++ b/web/core/components/cycles/board/cycles-board-card.tsx @@ -3,7 +3,7 @@ import { FC, MouseEvent, useRef } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { usePathname, useRouter, useSearchParams } from "next/navigation"; +import { usePathname, useSearchParams } from "next/navigation"; import { CalendarCheck2, CalendarClock, Info, MoveRight } from "lucide-react"; // types import type { TCycleGroups } from "@plane/types"; @@ -21,6 +21,7 @@ import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/dat import { generateQueryParams } from "@/helpers/router.helper"; // hooks import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; export interface ICyclesBoardCard { @@ -34,7 +35,7 @@ export const CyclesBoardCard: FC = observer((props) => { // refs const parentRef = useRef(null); // router - const router = useRouter(); + const router = useAppRouter(); const searchParams = useSearchParams(); const pathname = usePathname(); // store diff --git a/web/core/components/cycles/cycle-peek-overview.tsx b/web/core/components/cycles/cycle-peek-overview.tsx index 9779e8b5d..1bcfbcf03 100644 --- a/web/core/components/cycles/cycle-peek-overview.tsx +++ b/web/core/components/cycles/cycle-peek-overview.tsx @@ -1,9 +1,10 @@ import React, { useEffect } from "react"; import { observer } from "mobx-react"; -import { usePathname, useRouter, useSearchParams } from "next/navigation"; +import { usePathname, useSearchParams } from "next/navigation"; // hooks import { generateQueryParams } from "@/helpers/router.helper"; import { useCycle } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // components import { CycleDetailsSidebar } from "./"; @@ -15,7 +16,7 @@ type Props = { export const CyclePeekOverview: React.FC = observer(({ projectId, workspaceSlug, isArchived = false }) => { // router - const router = useRouter(); + const router = useAppRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); const peekCycle = searchParams.get("peekCycle"); diff --git a/web/core/components/cycles/delete-modal.tsx b/web/core/components/cycles/delete-modal.tsx index 38217719d..63b8cd424 100644 --- a/web/core/components/cycles/delete-modal.tsx +++ b/web/core/components/cycles/delete-modal.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter, useSearchParams } from "next/navigation"; +import { useParams, useSearchParams } from "next/navigation"; // types import { ICycle } from "@plane/types"; // ui @@ -11,6 +11,7 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui"; import { CYCLE_DELETED } from "@/constants/event-tracker"; // hooks import { useEventTracker, useCycle } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; interface ICycleDelete { cycle: ICycle; @@ -28,7 +29,7 @@ export const CycleDeleteModal: React.FC = observer((props) => { const { captureCycleEvent } = useEventTracker(); const { deleteCycle } = useCycle(); // router - const router = useRouter(); + const router = useAppRouter(); const { cycleId } = useParams(); const searchParams = useSearchParams(); const peekCycle = searchParams.get("peekCycle"); diff --git a/web/core/components/cycles/gantt-chart/blocks.tsx b/web/core/components/cycles/gantt-chart/blocks.tsx index 3d312d3fe..4eb57fb68 100644 --- a/web/core/components/cycles/gantt-chart/blocks.tsx +++ b/web/core/components/cycles/gantt-chart/blocks.tsx @@ -2,13 +2,14 @@ import { observer } from "mobx-react"; import Link from "next/link"; -import { useRouter } from "next/navigation"; -// hooks +import { useParams } from "next/navigation"; // ui import { Tooltip, ContrastIcon } from "@plane/ui"; // helpers import { renderFormattedDate } from "@/helpers/date-time.helper"; -import { useAppRouter, useCycle } from "@/hooks/store"; +// hooks +import { useCycle } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { @@ -18,9 +19,9 @@ type Props = { export const CycleGanttBlock: React.FC = observer((props) => { const { cycleId } = props; // router - const router = useRouter(); + const router = useAppRouter(); // store hooks - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { getCycleById } = useCycle(); // derived values const cycleDetails = getCycleById(cycleId); @@ -35,14 +36,16 @@ export const CycleGanttBlock: React.FC = observer((props) => { cycleStatus === "current" ? "#09a953" : cycleStatus === "upcoming" - ? "#f7ae59" - : cycleStatus === "completed" - ? "#3f76ff" - : cycleStatus === "draft" - ? "rgb(var(--color-text-200))" - : "", + ? "#f7ae59" + : cycleStatus === "completed" + ? "#3f76ff" + : cycleStatus === "draft" + ? "rgb(var(--color-text-200))" + : "", }} - onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`)} + onClick={() => + router.push(`/${workspaceSlug.toString()}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`) + } >
= observer((props) => { export const CycleGanttSidebarBlock: React.FC = observer((props) => { const { cycleId } = props; // store hooks - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { getCycleById } = useCycle(); // derived values const cycleDetails = getCycleById(cycleId); @@ -77,7 +80,7 @@ export const CycleGanttSidebarBlock: React.FC = observer((props) => { return ( = observer((props) => { // refs const parentRef = useRef(null); // router - const router = useRouter(); + const router = useAppRouter(); const searchParams = useSearchParams(); const pathname = usePathname(); // hooks diff --git a/web/core/components/cycles/quick-actions.tsx b/web/core/components/cycles/quick-actions.tsx index cea50f716..a84d1e790 100644 --- a/web/core/components/cycles/quick-actions.tsx +++ b/web/core/components/cycles/quick-actions.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; + // icons import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react"; // ui @@ -16,6 +16,7 @@ import { cn } from "@/helpers/common.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useCycle, useEventTracker, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { parentRef: React.RefObject; @@ -27,7 +28,7 @@ type Props = { export const CycleQuickActions: React.FC = observer((props) => { const { parentRef, cycleId, projectId, workspaceSlug } = props; // router - const router = useRouter(); + const router = useAppRouter(); // states const [updateModal, setUpdateModal] = useState(false); const [archiveCycleModal, setArchiveCycleModal] = useState(false); diff --git a/web/core/components/dashboard/home-dashboard-widgets.tsx b/web/core/components/dashboard/home-dashboard-widgets.tsx index a34725f2a..dc31d1cef 100644 --- a/web/core/components/dashboard/home-dashboard-widgets.tsx +++ b/web/core/components/dashboard/home-dashboard-widgets.tsx @@ -1,4 +1,5 @@ import { observer } from "mobx-react-lite"; +import { useParams } from "next/navigation"; // types import { TWidgetKeys } from "@plane/types"; // components @@ -14,7 +15,7 @@ import { WidgetProps, } from "@/components/dashboard"; // hooks -import { useAppRouter, useDashboard } from "@/hooks/store"; +import { useDashboard } from "@/hooks/store"; const WIDGETS_LIST: { [key in TWidgetKeys]: { component: React.FC; fullWidth: boolean }; @@ -30,8 +31,9 @@ const WIDGETS_LIST: { }; export const DashboardWidgets = observer(() => { + // router + const { workspaceSlug } = useParams(); // store hooks - const { workspaceSlug } = useAppRouter(); const { homeDashboardId, homeDashboardWidgets } = useDashboard(); const doesWidgetExist = (widgetKey: TWidgetKeys) => @@ -49,10 +51,11 @@ export const DashboardWidgets = observer(() => { if (widget.fullWidth) return (
- +
); - else return ; + else + return ; })}
); diff --git a/web/core/components/dashboard/widgets/issues-by-priority.tsx b/web/core/components/dashboard/widgets/issues-by-priority.tsx index 34bcae240..c49226e06 100644 --- a/web/core/components/dashboard/widgets/issues-by-priority.tsx +++ b/web/core/components/dashboard/widgets/issues-by-priority.tsx @@ -1,9 +1,8 @@ import { useEffect } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { useRouter } from "next/navigation"; +// types import { TIssuesByPriorityWidgetFilters, TIssuesByPriorityWidgetResponse } from "@plane/types"; -// hooks // components import { DurationFilterDropdown, @@ -11,20 +10,21 @@ import { WidgetLoader, WidgetProps, } from "@/components/dashboard/widgets"; -// helpers -// types -// constants import { IssuesByPriorityGraph } from "@/components/graphs"; +// constants import { EDurationFilters } from "@/constants/dashboard"; +// helpers import { getCustomDates } from "@/helpers/dashboard.helper"; +// hooks import { useDashboard } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; const WIDGET_KEY = "issues_by_priority"; export const IssuesByPriorityWidget: React.FC = observer((props) => { const { dashboardId, workspaceSlug } = props; // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard(); // derived values diff --git a/web/core/components/dashboard/widgets/issues-by-state-group.tsx b/web/core/components/dashboard/widgets/issues-by-state-group.tsx index bfdc7d669..09204b41d 100644 --- a/web/core/components/dashboard/widgets/issues-by-state-group.tsx +++ b/web/core/components/dashboard/widgets/issues-by-state-group.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { useRouter } from "next/navigation"; +// types import { TIssuesByStateGroupsWidgetFilters, TIssuesByStateGroupsWidgetResponse, TStateGroups } from "@plane/types"; -// hooks +// components import { DurationFilterDropdown, IssuesByStateGroupEmptyState, @@ -11,14 +11,14 @@ import { WidgetProps, } from "@/components/dashboard/widgets"; import { PieGraph } from "@/components/ui"; +// constants import { EDurationFilters, STATE_GROUP_GRAPH_COLORS, STATE_GROUP_GRAPH_GRADIENTS } from "@/constants/dashboard"; import { STATE_GROUPS } from "@/constants/state"; -import { getCustomDates } from "@/helpers/dashboard.helper"; -import { useDashboard } from "@/hooks/store"; -// components // helpers -// types -// constants +import { getCustomDates } from "@/helpers/dashboard.helper"; +// hooks +import { useDashboard } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; const WIDGET_KEY = "issues_by_state_groups"; @@ -28,7 +28,7 @@ export const IssuesByStateGroupWidget: React.FC = observer((props) const [defaultStateGroup, setDefaultStateGroup] = useState(null); const [activeStateGroup, setActiveStateGroup] = useState(null); // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard(); // derived values diff --git a/web/core/components/dropdowns/cycle/cycle-options.tsx b/web/core/components/dropdowns/cycle/cycle-options.tsx index 409222442..66d26114c 100644 --- a/web/core/components/dropdowns/cycle/cycle-options.tsx +++ b/web/core/components/dropdowns/cycle/cycle-options.tsx @@ -3,6 +3,7 @@ import { FC, useEffect, useRef, useState } from "react"; import { Placement } from "@popperjs/core"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { usePopper } from "react-popper"; // components import { Check, Search } from "lucide-react"; @@ -12,7 +13,7 @@ import { TCycleGroups } from "@plane/types"; // ui import { ContrastIcon, CycleGroupIcon } from "@plane/ui"; // store hooks -import { useAppRouter, useCycle } from "@/hooks/store"; +import { useCycle } from "@/hooks/store"; // types type DropdownOptions = @@ -37,7 +38,7 @@ export const CycleOptions: FC = observer((props) => { const [popperElement, setPopperElement] = useState(null); const inputRef = useRef(null); // store hooks - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle(); useEffect(() => { @@ -66,7 +67,7 @@ export const CycleOptions: FC = observer((props) => { }); const onOpen = () => { - if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug, projectId); + if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug.toString(), projectId); }; const searchInputKeyDown = (e: React.KeyboardEvent) => { diff --git a/web/core/components/dropdowns/estimate.tsx b/web/core/components/dropdowns/estimate.tsx index 04e8b6d8f..127e18a97 100644 --- a/web/core/components/dropdowns/estimate.tsx +++ b/web/core/components/dropdowns/estimate.tsx @@ -1,5 +1,6 @@ import { Fragment, ReactNode, useRef, useState } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { usePopper } from "react-popper"; import { Check, ChevronDown, Search, Triangle } from "lucide-react"; import { Combobox } from "@headlessui/react"; @@ -7,7 +8,6 @@ import { Combobox } from "@headlessui/react"; import { cn } from "@/helpers/common.helper"; // hooks import { - useAppRouter, useEstimate, useProjectEstimates, // useEstimate @@ -78,9 +78,9 @@ export const EstimateDropdown: React.FC = observer((props) => { }, ], }); + // router + const { workspaceSlug } = useParams(); // store hooks - const { workspaceSlug } = useAppRouter(); - const { currentActiveEstimateId, getProjectEstimates } = useProjectEstimates(); const { estimatePointIds, estimatePointById } = useEstimate( currentActiveEstimateId ? currentActiveEstimateId : undefined @@ -120,7 +120,7 @@ export const EstimateDropdown: React.FC = observer((props) => { const selectedEstimate = value && estimatePointById ? estimatePointById(value) : undefined; const onOpen = async () => { - if (!currentActiveEstimateId && workspaceSlug && projectId) await getProjectEstimates(workspaceSlug, projectId); + if (!currentActiveEstimateId && workspaceSlug && projectId) await getProjectEstimates(workspaceSlug.toString(), projectId); }; const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({ diff --git a/web/core/components/dropdowns/member/member-options.tsx b/web/core/components/dropdowns/member/member-options.tsx index 766d64ffc..360b85f11 100644 --- a/web/core/components/dropdowns/member/member-options.tsx +++ b/web/core/components/dropdowns/member/member-options.tsx @@ -3,13 +3,14 @@ import { useEffect, useRef, useState } from "react"; import { Placement } from "@popperjs/core"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { usePopper } from "react-popper"; import { Check, Search } from "lucide-react"; import { Combobox } from "@headlessui/react"; //components import { Avatar } from "@plane/ui"; //store -import { useUser, useMember, useAppRouter } from "@/hooks/store"; +import { useUser, useMember } from "@/hooks/store"; interface Props { projectId?: string; @@ -26,7 +27,7 @@ export const MemberOptions = observer((props: Props) => { // refs const inputRef = useRef(null); // store hooks - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { getUserDetails, project: { getProjectMemberIds, fetchProjectMembers }, @@ -55,7 +56,7 @@ export const MemberOptions = observer((props: Props) => { const memberIds = projectId ? getProjectMemberIds(projectId) : workspaceMemberIds; const onOpen = () => { - if (!memberIds && workspaceSlug && projectId) fetchProjectMembers(workspaceSlug, projectId); + if (!memberIds && workspaceSlug && projectId) fetchProjectMembers(workspaceSlug.toString(), projectId); }; const searchInputKeyDown = (e: React.KeyboardEvent) => { diff --git a/web/core/components/dropdowns/module/module-options.tsx b/web/core/components/dropdowns/module/module-options.tsx index 688065b05..8ceb94ba8 100644 --- a/web/core/components/dropdowns/module/module-options.tsx +++ b/web/core/components/dropdowns/module/module-options.tsx @@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react"; import { Placement } from "@popperjs/core"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { usePopper } from "react-popper"; import { Check, Search } from "lucide-react"; import { Combobox } from "@headlessui/react"; @@ -10,7 +11,7 @@ import { Combobox } from "@headlessui/react"; import { DiceIcon } from "@plane/ui"; //store import { cn } from "@/helpers/common.helper"; -import { useAppRouter, useModule } from "@/hooks/store"; +import { useModule } from "@/hooks/store"; //hooks //icon //types @@ -39,7 +40,7 @@ export const ModuleOptions = observer((props: Props) => { // refs const inputRef = useRef(null); // store hooks - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { getProjectModuleIds, fetchModules, getModuleById } = useModule(); useEffect(() => { @@ -66,7 +67,7 @@ export const ModuleOptions = observer((props: Props) => { const moduleIds = getProjectModuleIds(projectId); const onOpen = () => { - if (workspaceSlug && !moduleIds) fetchModules(workspaceSlug, projectId); + if (workspaceSlug && !moduleIds) fetchModules(workspaceSlug.toString(), projectId); }; const searchInputKeyDown = (e: React.KeyboardEvent) => { diff --git a/web/core/components/dropdowns/state.tsx b/web/core/components/dropdowns/state.tsx index 179734680..499e7aa7f 100644 --- a/web/core/components/dropdowns/state.tsx +++ b/web/core/components/dropdowns/state.tsx @@ -2,6 +2,7 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { usePopper } from "react-popper"; import { Check, ChevronDown, Search } from "lucide-react"; import { Combobox } from "@headlessui/react"; @@ -10,7 +11,7 @@ import { Spinner, StateGroupIcon } from "@plane/ui"; // helpers import { cn } from "@/helpers/common.helper"; // hooks -import { useAppRouter, useProjectState } from "@/hooks/store"; +import { useProjectState } from "@/hooks/store"; import { useDropdown } from "@/hooks/use-dropdown"; // components import { DropdownButton } from "./buttons"; @@ -73,7 +74,7 @@ export const StateDropdown: React.FC = observer((props) => { ], }); // store hooks - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { fetchProjectStates, getProjectStates, getStateById } = useProjectState(); const statesList = getProjectStates(projectId); const defaultState = statesList?.find((state) => state.default); @@ -98,7 +99,7 @@ export const StateDropdown: React.FC = observer((props) => { const onOpen = async () => { if (!statesList && workspaceSlug && projectId) { setStateLoader(true); - await fetchProjectStates(workspaceSlug, projectId); + await fetchProjectStates(workspaceSlug.toString(), projectId); setStateLoader(false); } }; diff --git a/web/core/components/exporter/export-modal.tsx b/web/core/components/exporter/export-modal.tsx index e7b069275..e8909538e 100644 --- a/web/core/components/exporter/export-modal.tsx +++ b/web/core/components/exporter/export-modal.tsx @@ -2,17 +2,17 @@ import React, { useState } from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { Dialog, Transition } from "@headlessui/react"; +// types import { IUser, IImporterService } from "@plane/types"; -// hooks +// ui import { Button, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui"; - +// hooks import { useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // services import { ProjectExportService } from "@/services/project"; -// ui -// types type Props = { isOpen: boolean; @@ -31,7 +31,7 @@ export const Exporter: React.FC = observer((props) => { const [exportLoading, setExportLoading] = useState(false); const [isSelectOpen, setIsSelectOpen] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); // store hooks const { workspaceProjectIds, getProjectById } = useProject(); diff --git a/web/core/components/exporter/guide.tsx b/web/core/components/exporter/guide.tsx index fc3da6588..fd9414b04 100644 --- a/web/core/components/exporter/guide.tsx +++ b/web/core/components/exporter/guide.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; import Image from "next/image"; import Link from "next/link"; -import { useRouter, useParams, useSearchParams } from "next/navigation"; +import { useParams, useSearchParams } from "next/navigation"; import useSWR, { mutate } from "swr"; // icons import { MoveLeft, MoveRight, RefreshCw } from "lucide-react"; @@ -20,6 +20,7 @@ import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys"; import { EXPORTERS_LIST } from "@/constants/workspace"; // hooks import { useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // services import { IntegrationService } from "@/services/integrations"; @@ -31,7 +32,7 @@ const IntegrationGuide = observer(() => { const per_page = 10; const [cursor, setCursor] = useState(`10:0:0`); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); const searchParams = useSearchParams(); const provider = searchParams.get("provider"); diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx index 91d93819d..59262bc58 100644 --- a/web/core/components/inbox/content/inbox-issue-header.tsx +++ b/web/core/components/inbox/content/inbox-issue-header.tsx @@ -2,7 +2,6 @@ import { FC, useCallback, useEffect, useState } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import { CircleCheck, CircleX, @@ -33,6 +32,7 @@ import { EInboxIssueStatus } from "@/helpers/inbox.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useUser, useProjectInbox, useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // store types import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store"; @@ -60,7 +60,7 @@ export const InboxIssueActionsHeader: FC = observer((p membership: { currentProjectRole }, } = useUser(); - const router = useRouter(); + const router = useAppRouter(); const { getProjectById } = useProject(); const issue = inboxIssue?.issue; diff --git a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx index 9890d09b6..3b757d1c2 100644 --- a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx +++ b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx @@ -2,7 +2,6 @@ import React from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import { CircleCheck, CircleX, @@ -21,6 +20,8 @@ import { InboxIssueStatus } from "@/components/inbox"; import { IssueUpdateStatus } from "@/components/issues"; // helpers import { cn } from "@/helpers/common.helper"; +// hooks +import { useAppRouter } from "@/hooks/use-app-router"; // store types import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store"; @@ -64,7 +65,7 @@ export const InboxIssueActionsMobileHeader: React.FC = observer((props) = isMobileSidebar, setIsMobileSidebar, } = props; - const router = useRouter(); + const router = useAppRouter(); const issue = inboxIssue?.issue; const currentInboxIssueId = issue?.id; diff --git a/web/core/components/inbox/content/issue-properties.tsx b/web/core/components/inbox/content/issue-properties.tsx index d8f47cdb1..2d8dc8a0e 100644 --- a/web/core/components/inbox/content/issue-properties.tsx +++ b/web/core/components/inbox/content/issue-properties.tsx @@ -2,7 +2,6 @@ import React from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react"; import { TInboxDuplicateIssueDetails, TIssue } from "@plane/types"; import { ControlLink, DoubleCircleIcon, Tooltip } from "@plane/ui"; @@ -13,6 +12,7 @@ import { IssueLabel, TIssueOperations } from "@/components/issues"; import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"; // hooks import { useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { workspaceSlug: string; @@ -26,7 +26,7 @@ type Props = { export const InboxIssueContentProperties: React.FC = observer((props) => { const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails } = props; - const router = useRouter(); + const router = useAppRouter(); // store hooks const { currentProjectDetails } = useProject(); diff --git a/web/core/components/inbox/content/root.tsx b/web/core/components/inbox/content/root.tsx index 2dc3bffd1..97ec0d237 100644 --- a/web/core/components/inbox/content/root.tsx +++ b/web/core/components/inbox/content/root.tsx @@ -1,10 +1,13 @@ import { FC, useEffect, useState } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import useSWR from "swr"; +// components import { InboxIssueActionsHeader, InboxIssueMainContent } from "@/components/inbox"; +// constants import { EUserProjectRoles } from "@/constants/project"; +// hooks import { useProjectInbox, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type TInboxContentRoot = { workspaceSlug: string; @@ -17,7 +20,7 @@ type TInboxContentRoot = { export const InboxContentRoot: FC = observer((props) => { const { workspaceSlug, projectId, inboxIssueId, isMobileSidebar, setIsMobileSidebar } = props; /// router - const router = useRouter(); + const router = useAppRouter(); // states const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); // hooks diff --git a/web/core/components/inbox/modals/create-edit-modal/create-root.tsx b/web/core/components/inbox/modals/create-edit-modal/create-root.tsx index 7886158d7..b6456bac1 100644 --- a/web/core/components/inbox/modals/create-edit-modal/create-root.tsx +++ b/web/core/components/inbox/modals/create-edit-modal/create-root.tsx @@ -2,7 +2,7 @@ import { FC, FormEvent, useCallback, useRef, useState } from "react"; import { observer } from "mobx-react"; -import { usePathname, useRouter } from "next/navigation"; +import { usePathname } from "next/navigation"; // editor import { EditorRefApi } from "@plane/rich-text-editor"; // types @@ -20,6 +20,7 @@ import { ISSUE_CREATED } from "@/constants/event-tracker"; import { renderFormattedPayloadDate } from "@/helpers/date-time.helper"; // hooks import { useEventTracker, useProjectInbox, useWorkspace } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import useKeypress from "@/hooks/use-keypress"; type TInboxIssueCreateRoot = { @@ -42,7 +43,7 @@ export const defaultIssueData: Partial = { export const InboxIssueCreateRoot: FC = observer((props) => { const { workspaceSlug, projectId, handleModalClose } = props; - const router = useRouter(); + const router = useAppRouter(); const pathname = usePathname(); // refs const descriptionEditorRef = useRef(null); diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx index 3356bfa99..de6597fc3 100644 --- a/web/core/components/inbox/sidebar/root.tsx +++ b/web/core/components/inbox/sidebar/root.tsx @@ -2,7 +2,6 @@ import { FC, useCallback, useRef, useState } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import { TInboxIssueCurrentTab } from "@plane/types"; import { Loader } from "@plane/ui"; // components @@ -16,6 +15,7 @@ import { cn } from "@/helpers/common.helper"; import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper"; // hooks import { useProject, useProjectInbox } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { useIntersectionObserver } from "@/hooks/use-intersection-observer"; import { useIssuesStore } from "@/hooks/use-issue-layout-store"; @@ -56,7 +56,7 @@ export const InboxSidebar: FC = observer((props) => { issues: { getIssueLoader }, } = useIssuesStore(); - const router = useRouter(); + const router = useAppRouter(); const fetchNextPages = useCallback(() => { if (!workspaceSlug || !projectId) return; diff --git a/web/core/components/integration/github/root.tsx b/web/core/components/integration/github/root.tsx index 812e1dc89..8fa528d8f 100644 --- a/web/core/components/integration/github/root.tsx +++ b/web/core/components/integration/github/root.tsx @@ -1,20 +1,17 @@ "use client"; import React, { useState } from "react"; - import Image from "next/image"; import Link from "next/link"; -import { useParams, useRouter, useSearchParams } from "next/navigation"; - +import { useParams, useSearchParams } from "next/navigation"; import { useForm } from "react-hook-form"; import useSWR, { mutate } from "swr"; - -// react-hook-form -// services -// components import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react"; +// types import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types"; +// ui import { TOAST_TYPE, setToast } from "@plane/ui"; +// components import { GithubImportConfigure, GithubImportData, @@ -22,17 +19,14 @@ import { GithubImportUsers, GithubImportConfirm, } from "@/components/integration"; -// icons -// images +// fetch keys import { APP_INTEGRATIONS, IMPORTER_SERVICES_LIST, WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys"; -import GithubLogo from "@/public/services/github.png"; -import { IntegrationService, GithubIntegrationService } from "@/services/integrations"; // hooks -// components -// icons +import { useAppRouter } from "@/hooks/use-app-router"; // images -// types -// fetch-keys +import GithubLogo from "@/public/services/github.png"; +// services +import { IntegrationService, GithubIntegrationService } from "@/services/integrations"; export type TIntegrationSteps = "import-configure" | "import-data" | "repo-details" | "import-users" | "import-confirm"; export interface IIntegrationData { @@ -93,7 +87,7 @@ export const GithubImporterRoot: React.FC = () => { }); const [users, setUsers] = useState([]); - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); const searchParams = useSearchParams(); const provider = searchParams.get("provider"); diff --git a/web/core/components/integration/jira/root.tsx b/web/core/components/integration/jira/root.tsx index f4109bead..22ba3407d 100644 --- a/web/core/components/integration/jira/root.tsx +++ b/web/core/components/integration/jira/root.tsx @@ -3,21 +3,24 @@ import React, { useState } from "react"; import Image from "next/image"; import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { FormProvider, useForm } from "react-hook-form"; import { mutate } from "swr"; // icons import { ArrowLeft, Check, List, Settings, Users } from "lucide-react"; +// types import { IJiraImporterForm } from "@plane/types"; -// services -// fetch keys -// components +// ui import { Button } from "@plane/ui"; +// fetch keys import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys"; +// hooks +import { useAppRouter } from "@/hooks/use-app-router"; // assets import JiraLogo from "@/public/services/jira.svg"; +// services import { JiraImporterService } from "@/services/integrations"; -// types +// components import { JiraGetImportDetail, JiraProjectDetail, @@ -64,7 +67,7 @@ export const JiraImporterRoot: React.FC = () => { }); const [disableTopBarAfter, setDisableTopBarAfter] = useState(null); - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); const methods = useForm({ diff --git a/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx index b5575901d..59368678a 100644 --- a/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx +++ b/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx @@ -2,7 +2,7 @@ import React, { FC, useState } from "react"; import { observer } from "mobx-react"; -import { usePathname, useRouter } from "next/navigation"; +import { usePathname } from "next/navigation"; import { ArchiveIcon, ArchiveRestoreIcon, LinkIcon, Trash2 } from "lucide-react"; import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; // components @@ -17,6 +17,7 @@ import { cn } from "@/helpers/common.helper"; import { copyTextToClipboard } from "@/helpers/string.helper"; // hooks import { useEventTracker, useIssueDetail, useIssues, useProjectState, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { @@ -34,7 +35,7 @@ export const IssueDetailQuickActions: FC = observer((props) => { const [isRestoring, setIsRestoring] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); // hooks const { diff --git a/web/core/components/issues/issue-detail/root.tsx b/web/core/components/issues/issue-detail/root.tsx index 9c6d0abbe..18255ac49 100644 --- a/web/core/components/issues/issue-detail/root.tsx +++ b/web/core/components/issues/issue-detail/root.tsx @@ -2,7 +2,7 @@ import { FC, useMemo } from "react"; import { observer } from "mobx-react"; -import { usePathname, useRouter } from "next/navigation"; +import { usePathname } from "next/navigation"; // types import { TIssue } from "@plane/types"; // ui @@ -16,6 +16,7 @@ import { EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; // hooks import { useAppTheme, useEventTracker, useIssueDetail, useIssues, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // images import emptyIssue from "@/public/empty-state/issue.svg"; // local components @@ -57,7 +58,7 @@ export type TIssueDetailRoot = { export const IssueDetailRoot: FC = observer((props) => { const { workspaceSlug, projectId, issueId, swrIssueDetails, is_archived = false } = props; // router - const router = useRouter(); + const router = useAppRouter(); const pathname = usePathname(); // hooks const { diff --git a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/web/core/components/issues/issue-layouts/calendar/issue-block.tsx index 31120571a..31d007728 100644 --- a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx +++ b/web/core/components/issues/issue-layouts/calendar/issue-block.tsx @@ -3,13 +3,14 @@ /* eslint-disable react/display-name */ import { useState, useRef, forwardRef } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { MoreHorizontal } from "lucide-react"; import { TIssue } from "@plane/types"; // components import { Tooltip, ControlLink } from "@plane/ui"; // hooks import { cn } from "@/helpers/common.helper"; -import { useAppRouter, useIssueDetail, useProject, useProjectState } from "@/hooks/store"; +import { useIssueDetail, useProject, useProjectState } from "@/hooks/store"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; // helpers // types @@ -31,7 +32,7 @@ export const CalendarIssueBlock = observer( const blockRef = useRef(null); const menuActionRef = useRef(null); // hooks - const { workspaceSlug, projectId } = useAppRouter(); + const { workspaceSlug, projectId } = useParams(); const { getProjectIdentifierById } = useProject(); const { getProjectStates } = useProjectState(); const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); @@ -45,7 +46,7 @@ export const CalendarIssueBlock = observer( issue.project_id && issue.id && !getIsIssuePeeked(issue.id) && - setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); + setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id }); useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); @@ -69,7 +70,7 @@ export const CalendarIssueBlock = observer( return ( handleIssuePeekOverview(issue)} className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400" diff --git a/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx b/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx index 2ed5b8163..f09e621a8 100644 --- a/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx +++ b/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx @@ -1,20 +1,19 @@ import { observer } from "mobx-react-lite"; +import { useParams } from "next/navigation"; // components import { EmptyState } from "@/components/empty-state"; // constants import { EMPTY_STATE_DETAILS } from "@/constants/empty-state"; -// hooks -import { useAppRouter } from "@/hooks/store"; // assets export const ProfileViewEmptyState: React.FC = observer(() => { // store hooks - const { profileViewId } = useAppRouter(); + const { profileViewId } = useParams(); if (!profileViewId) return null; - const emptyStateType = `profile-${profileViewId}`; + const emptyStateType = `profile-${profileViewId.toString()}`; return ; }); diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx index 2256fbdfb..8169b43c8 100644 --- a/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx +++ b/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx @@ -3,11 +3,12 @@ import React, { useMemo, useState } from "react"; import sortBy from "lodash/sortBy"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { TCycleGroups } from "@plane/types"; // components import { Loader, CycleGroupIcon } from "@plane/ui"; import { FilterHeader, FilterOption } from "@/components/issues"; -import { useAppRouter, useCycle } from "@/hooks/store"; +import { useCycle } from "@/hooks/store"; // ui // types @@ -21,14 +22,14 @@ export const FilterCycle: React.FC = observer((props) => { const { appliedFilters, handleUpdate, searchQuery } = props; // hooks - const { projectId } = useAppRouter(); + const { projectId } = useParams(); const { getCycleById, getProjectCycleIds } = useCycle(); // states const [itemsToRender, setItemsToRender] = useState(5); const [previewEnabled, setPreviewEnabled] = useState(true); - const cycleIds = projectId ? getProjectCycleIds(projectId) : undefined; + const cycleIds = projectId ? getProjectCycleIds(projectId.toString()) : undefined; const cycles = cycleIds?.map((projectId) => getCycleById(projectId)!) ?? null; const appliedFiltersCount = appliedFilters?.length ?? 0; diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx index 61ed05a24..07aa0adac 100644 --- a/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx +++ b/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { Search, X } from "lucide-react"; import { IIssueDisplayFilterOptions, IIssueFilterOptions, IIssueLabel, IState } from "@plane/types"; // hooks @@ -19,7 +20,6 @@ import { FilterIssueType, } from "@/components/issues"; import { ILayoutDisplayFiltersOptions } from "@/constants/issue"; -import { useAppRouter } from "@/hooks/store"; // components // types // constants @@ -51,7 +51,7 @@ export const FilterSelection: React.FC = observer((props) => { moduleViewDisabled = false, } = props; // hooks - const { moduleId, cycleId } = useAppRouter(); + const { moduleId, cycleId } = useParams(); // states const [filtersSearchQuery, setFiltersSearchQuery] = useState(""); diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx index 739d1fa29..ea972db03 100644 --- a/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx +++ b/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx @@ -3,10 +3,11 @@ import React, { useMemo, useState } from "react"; import sortBy from "lodash/sortBy"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; // components import { Loader, DiceIcon } from "@plane/ui"; import { FilterHeader, FilterOption } from "@/components/issues"; -import { useAppRouter, useModule } from "@/hooks/store"; +import { useModule } from "@/hooks/store"; // ui type Props = { @@ -18,14 +19,14 @@ type Props = { export const FilterModule: React.FC = observer((props) => { const { appliedFilters, handleUpdate, searchQuery } = props; // hooks - const { projectId } = useAppRouter(); + const { projectId } = useParams(); const { getModuleById, getProjectModuleIds } = useModule(); // states const [itemsToRender, setItemsToRender] = useState(5); const [previewEnabled, setPreviewEnabled] = useState(true); - const moduleIds = projectId ? getProjectModuleIds(projectId) : undefined; - const modules = moduleIds?.map((projectId) => getModuleById(projectId)!) ?? null; + const moduleIds = projectId ? getProjectModuleIds(projectId.toString()) : undefined; + const modules = moduleIds?.map((moduleId) => getModuleById(moduleId)!) ?? null; const appliedFiltersCount = appliedFilters?.length ?? 0; const sortedOptions = useMemo(() => { diff --git a/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/web/core/components/issues/issue-layouts/gantt/blocks.tsx index 459807aab..a0907ad08 100644 --- a/web/core/components/issues/issue-layouts/gantt/blocks.tsx +++ b/web/core/components/issues/issue-layouts/gantt/blocks.tsx @@ -1,12 +1,13 @@ "use client"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; // hooks // ui import { Tooltip, StateGroupIcon, ControlLink } from "@plane/ui"; // helpers import { renderFormattedDate } from "@/helpers/date-time.helper"; -import { useAppRouter, useIssueDetail, useProject, useProjectState } from "@/hooks/store"; +import { useIssueDetail, useProject, useProjectState } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { @@ -15,8 +16,10 @@ type Props = { export const IssueGanttBlock: React.FC = observer((props) => { const { issueId } = props; + // router + const { workspaceSlug: routerWorkspaceSlug } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); // store hooks - const { workspaceSlug } = useAppRouter(); const { getProjectStates } = useProjectState(); const { issue: { getIssueById }, @@ -71,10 +74,12 @@ export const IssueGanttBlock: React.FC = observer((props) => { // rendering issues on gantt sidebar export const IssueGanttSidebarBlock: React.FC = observer((props) => { const { issueId } = props; + // router + const { workspaceSlug: routerWorkspaceSlug } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); // store hooks const { getStateById } = useProjectState(); const { getProjectIdentifierById } = useProject(); - const { workspaceSlug } = useAppRouter(); const { issue: { getIssueById }, setPeekIssue, diff --git a/web/core/components/issues/issue-layouts/kanban/block.tsx b/web/core/components/issues/issue-layouts/kanban/block.tsx index c4c8c0f12..968c20874 100644 --- a/web/core/components/issues/issue-layouts/kanban/block.tsx +++ b/web/core/components/issues/issue-layouts/kanban/block.tsx @@ -4,6 +4,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { observer } from "mobx-react-lite"; +import { useParams } from "next/navigation"; import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types"; // hooks import { ControlLink, DropIndicator, TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; @@ -11,7 +12,7 @@ import RenderIfVisible from "@/components/core/render-if-visible-HOC"; import { HIGHLIGHT_CLASS } from "@/components/issues/issue-layouts/utils"; import { cn } from "@/helpers/common.helper"; // hooks -import { useAppRouter, useIssueDetail, useProject, useKanbanView } from "@/hooks/store"; +import { useIssueDetail, useProject, useKanbanView } from "@/hooks/store"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; import { usePlatformOS } from "@/hooks/use-platform-os"; // components @@ -117,8 +118,10 @@ export const KanbanIssueBlock: React.FC = observer((props) => { } = props; const cardRef = useRef(null); + // router + const { workspaceSlug: routerWorkspaceSlug } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); // hooks - const { workspaceSlug } = useAppRouter(); const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const { isMobile } = usePlatformOS(); diff --git a/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx index de9778377..98a5a4525 100644 --- a/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx +++ b/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx @@ -1,18 +1,20 @@ import { observer } from "mobx-react"; // hooks +import { useParams } from "next/navigation"; import { ProjectIssueQuickActions } from "@/components/issues"; import { EUserProjectRoles } from "@/constants/project"; -import { useAppRouter, useUser } from "@/hooks/store"; +import { useUser } from "@/hooks/store"; // components // types // constants import { BaseKanBanRoot } from "../base-kanban-root"; export const ProfileIssuesKanBanLayout: React.FC = observer(() => { + // router + const { profileViewId } = useParams(); const { membership: { currentWorkspaceAllProjectsRole }, } = useUser(); - const { profileViewId } = useAppRouter(); const canEditPropertiesBasedOnProject = (projectId: string) => { const currentProjectRole = currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId]; @@ -24,7 +26,7 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => { ); }); diff --git a/web/core/components/issues/issue-layouts/list/block.tsx b/web/core/components/issues/issue-layouts/list/block.tsx index d8c091bd2..81b7cb9b0 100644 --- a/web/core/components/issues/issue-layouts/list/block.tsx +++ b/web/core/components/issues/issue-layouts/list/block.tsx @@ -4,6 +4,7 @@ import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { observer } from "mobx-react-lite"; +import { useParams } from "next/navigation"; import { ChevronRight } from "lucide-react"; // types import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types"; @@ -15,7 +16,7 @@ import { IssueProperties } from "@/components/issues/issue-layouts/properties"; // helpers import { cn } from "@/helpers/common.helper"; // hooks -import { useAppRouter, useIssueDetail, useProject } from "@/hooks/store"; +import { useIssueDetail, useProject } from "@/hooks/store"; import { TSelectionHelper } from "@/hooks/use-multiple-select"; import { usePlatformOS } from "@/hooks/use-platform-os"; // types @@ -59,8 +60,11 @@ export const IssueBlock = observer((props: IssueBlockProps) => { } = props; // ref const issueRef = useRef(null); + // router + const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const projectId = routerProjectId?.toString(); // hooks - const { workspaceSlug, projectId } = useAppRouter(); const { getProjectIdentifierById } = useProject(); const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail(); diff --git a/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx index f4249a723..adc4dd309 100644 --- a/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx +++ b/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx @@ -1,21 +1,23 @@ import { FC } from "react"; import { observer } from "mobx-react"; // hooks +import { useParams } from "next/navigation"; import { ProjectIssueQuickActions } from "@/components/issues"; import { EUserProjectRoles } from "@/constants/project"; -import { useAppRouter, useUser } from "@/hooks/store"; +import { useUser } from "@/hooks/store"; // components // types // constants import { BaseListRoot } from "../base-list-root"; export const ProfileIssuesListLayout: FC = observer(() => { + // router + const { profileViewId } = useParams(); + // store const { membership: { currentWorkspaceAllProjectsRole }, } = useUser(); - const { profileViewId } = useAppRouter(); - const canEditPropertiesBasedOnProject = (projectId: string) => { const currentProjectRole = currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId]; @@ -26,7 +28,7 @@ export const ProfileIssuesListLayout: FC = observer(() => { ); }); diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx index eb46a112a..5d3eebea9 100644 --- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx +++ b/web/core/components/issues/issue-layouts/properties/all-properties.tsx @@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react"; import xor from "lodash/xor"; import { observer } from "mobx-react"; -import { useParams, usePathname, useRouter } from "next/navigation"; +import { useParams, usePathname } from "next/navigation"; // icons import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react"; // types @@ -28,6 +28,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper" import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper"; // hooks import { useEventTracker, useLabel, useIssues, useProjectState, useProject, useProjectEstimates } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { useIssueStoreType } from "@/hooks/use-issue-layout-store"; import { usePlatformOS } from "@/hooks/use-platform-os"; // local components @@ -64,7 +65,7 @@ export const IssueProperties: React.FC = observer((props) => { const projectDetails = getProjectById(issue.project_id); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); const pathname = usePathname(); diff --git a/web/core/components/issues/issue-layouts/properties/labels.tsx b/web/core/components/issues/issue-layouts/properties/labels.tsx index 08fccd9e1..403eab3d8 100644 --- a/web/core/components/issues/issue-layouts/properties/labels.tsx +++ b/web/core/components/issues/issue-layouts/properties/labels.tsx @@ -3,6 +3,7 @@ import { Fragment, useEffect, useRef, useState } from "react"; import { Placement } from "@popperjs/core"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { usePopper } from "react-popper"; import { Check, ChevronDown, Search, Tags } from "lucide-react"; import { Combobox } from "@headlessui/react"; @@ -11,7 +12,7 @@ import { IIssueLabel } from "@plane/types"; // ui import { Tooltip } from "@plane/ui"; // hooks -import { useAppRouter, useLabel } from "@/hooks/store"; +import { useLabel } from "@/hooks/store"; import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; import { usePlatformOS } from "@/hooks/use-platform-os"; @@ -50,6 +51,9 @@ export const IssuePropertyLabels: React.FC = observer((pro noLabelBorder = false, placeholderText, } = props; + // router + const { workspaceSlug: routerWorkspaceSlug } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); // states const [query, setQuery] = useState(""); const [isOpen, setIsOpen] = useState(false); @@ -61,7 +65,6 @@ export const IssuePropertyLabels: React.FC = observer((pro const [popperElement, setPopperElement] = useState(null); const [isLoading, setIsLoading] = useState(false); // store hooks - const { workspaceSlug } = useAppRouter(); const { fetchProjectLabels, getProjectLabels } = useLabel(); const { isMobile } = usePlatformOS(); const storeLabels = getProjectLabels(projectId); diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx index 437b74145..87bd1f84d 100644 --- a/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx +++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx @@ -1,12 +1,12 @@ import React from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // types import { TIssue } from "@plane/types"; // helpers import { cn } from "@/helpers/common.helper"; // hooks -import { useAppRouter } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { issue: TIssue; @@ -15,14 +15,14 @@ type Props = { export const SpreadsheetSubIssueColumn: React.FC = observer((props: Props) => { const { issue } = props; // router - const router = useRouter(); + const router = useAppRouter(); // hooks - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); // derived values const subIssueCount = issue?.sub_issues_count ?? 0; const redirectToIssueDetail = () => { - router.push(`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`); + router.push(`/${workspaceSlug.toString()}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`); }; return ( diff --git a/web/core/components/issues/issue-modal/form.tsx b/web/core/components/issues/issue-modal/form.tsx index c22f0831b..a90616357 100644 --- a/web/core/components/issues/issue-modal/form.tsx +++ b/web/core/components/issues/issue-modal/form.tsx @@ -30,14 +30,7 @@ import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper" import { getChangedIssuefields, getDescriptionPlaceholder } from "@/helpers/issue.helper"; import { shouldRenderProject } from "@/helpers/project.helper"; // hooks -import { - useAppRouter, - useProjectEstimates, - useInstance, - useIssueDetail, - useProject, - useWorkspace, -} from "@/hooks/store"; +import { useProjectEstimates, useInstance, useIssueDetail, useProject, useWorkspace } from "@/hooks/store"; import useKeypress from "@/hooks/use-keypress"; import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties"; // services @@ -121,11 +114,10 @@ export const IssueFormRoot: FC = observer((props) => { const editorRef = useRef(null); const submitBtnRef = useRef(null); // router - const { workspaceSlug } = useParams(); + const { workspaceSlug, projectId: routeProjectId } = useParams(); // store hooks const workspaceStore = useWorkspace(); const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string; - const { projectId: routeProjectId } = useAppRouter(); const { config } = useInstance(); const { getProjectById } = useProject(); const { areEstimateEnabledByProjectId } = useProjectEstimates(); diff --git a/web/core/components/issues/issue-modal/modal.tsx b/web/core/components/issues/issue-modal/modal.tsx index e6fa19c2c..c3d4af278 100644 --- a/web/core/components/issues/issue-modal/modal.tsx +++ b/web/core/components/issues/issue-modal/modal.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react"; import { observer } from "mobx-react-lite"; -import { usePathname } from "next/navigation"; +import { useParams, usePathname } from "next/navigation"; // types import type { TIssue } from "@plane/types"; // ui @@ -11,15 +11,7 @@ import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@p import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker"; import { EIssuesStoreType } from "@/constants/issue"; // hooks -import { - useEventTracker, - useCycle, - useIssues, - useModule, - useProject, - useIssueDetail, - useAppRouter, -} from "@/hooks/store"; +import { useEventTracker, useCycle, useIssues, useModule, useProject, useIssueDetail } from "@/hooks/store"; import { useIssuesActions } from "@/hooks/use-issues-actions"; import useLocalStorage from "@/hooks/use-local-storage"; // components @@ -55,7 +47,7 @@ export const CreateUpdateIssueModal: React.FC = observer((prop const [description, setDescription] = useState(undefined); // store hooks const { captureIssueEvent } = useEventTracker(); - const { workspaceSlug, projectId, cycleId, moduleId } = useAppRouter(); + const { workspaceSlug, projectId, cycleId, moduleId } = useParams(); const { workspaceProjectIds } = useProject(); const { fetchCycleDetails } = useCycle(); const { fetchModuleDetails } = useModule(); @@ -79,7 +71,7 @@ export const CreateUpdateIssueModal: React.FC = observer((prop setDescription(data?.description_html || "

"); return; } - const response = await fetchIssue(workspaceSlug, projectId, issueId, isDraft ? "DRAFT" : "DEFAULT"); + const response = await fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId, isDraft ? "DRAFT" : "DEFAULT"); if (response) setDescription(response?.description_html || "

"); }; @@ -104,7 +96,7 @@ export const CreateUpdateIssueModal: React.FC = observer((prop // if data is not present, set active project to the project // in the url. This has the least priority. if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProjectId) - setActiveProjectId(projectId ?? workspaceProjectIds?.[0]); + setActiveProjectId(projectId.toString() ?? workspaceProjectIds?.[0]); // clearing up the description state when we leave the component return () => setDescription(undefined); @@ -113,15 +105,15 @@ export const CreateUpdateIssueModal: React.FC = observer((prop const addIssueToCycle = async (issue: TIssue, cycleId: string) => { if (!workspaceSlug || !issue.project_id) return; - await issues.addIssueToCycle(workspaceSlug, issue.project_id, cycleId, [issue.id]); - fetchCycleDetails(workspaceSlug, issue.project_id, cycleId); + await issues.addIssueToCycle(workspaceSlug.toString(), issue.project_id, cycleId, [issue.id]); + fetchCycleDetails(workspaceSlug.toString(), issue.project_id, cycleId); }; const addIssueToModule = async (issue: TIssue, moduleIds: string[]) => { if (!workspaceSlug || !activeProjectId) return; - await issues.changeModulesInIssue(workspaceSlug, activeProjectId, issue.id, moduleIds, []); - moduleIds.forEach((moduleId) => fetchModuleDetails(workspaceSlug, activeProjectId, moduleId)); + await issues.changeModulesInIssue(workspaceSlug.toString(), activeProjectId, issue.id, moduleIds, []); + moduleIds.forEach((moduleId) => fetchModuleDetails(workspaceSlug.toString(), activeProjectId, moduleId)); }; const handleCreateMoreToggleChange = (value: boolean) => { @@ -133,7 +125,7 @@ export const CreateUpdateIssueModal: React.FC = observer((prop // updating the current edited issue data in the local storage let draftIssues = localStorageDraftIssues ? localStorageDraftIssues : {}; if (workspaceSlug) { - draftIssues = { ...draftIssues, [workspaceSlug]: changesMade }; + draftIssues = { ...draftIssues, [workspaceSlug.toString()]: changesMade }; setLocalStorageDraftIssue(draftIssues); } } @@ -151,7 +143,7 @@ export const CreateUpdateIssueModal: React.FC = observer((prop try { const response = is_draft_issue - ? await draftIssues.createIssue(workspaceSlug, payload.project_id, payload) + ? await draftIssues.createIssue(workspaceSlug.toString(), payload.project_id, payload) : createIssue && (await createIssue(payload.project_id, payload)); if (!response) throw new Error(); @@ -193,7 +185,7 @@ export const CreateUpdateIssueModal: React.FC = observer((prop try { isDraft - ? await draftIssues.updateIssue(workspaceSlug, payload.project_id, data.id, payload) + ? await draftIssues.updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload) : updateIssue && (await updateIssue(payload.project_id, data.id, payload)); setToast({ @@ -249,8 +241,8 @@ export const CreateUpdateIssueModal: React.FC = observer((prop data={{ ...data, description_html: description, - cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null, - module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null, + cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId.toString() : null, + module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId.toString()] : null, }} issueTitleRef={issueTitleRef} onChange={handleFormChange} @@ -267,8 +259,8 @@ export const CreateUpdateIssueModal: React.FC = observer((prop data={{ ...data, description_html: description, - cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null, - module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null, + cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId.toString() : null, + module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId.toString()] : null, }} onClose={() => handleClose(false)} isCreateMoreToggleEnabled={createMore} diff --git a/web/core/components/modules/analytics-sidebar/root.tsx b/web/core/components/modules/analytics-sidebar/root.tsx index 66c85d4b4..9d30461be 100644 --- a/web/core/components/modules/analytics-sidebar/root.tsx +++ b/web/core/components/modules/analytics-sidebar/root.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { Controller, useForm } from "react-hook-form"; import { ArchiveRestoreIcon, @@ -47,6 +47,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper" import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useModule, useUser, useEventTracker, useProjectEstimates } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // plane web constants import { EEstimateSystem } from "@/plane-web/constants/estimates"; @@ -73,7 +74,7 @@ export const ModuleAnalyticsSidebar: React.FC = observer((props) => { const [moduleLinkModal, setModuleLinkModal] = useState(false); const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState(null); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); // store hooks diff --git a/web/core/components/modules/archived-modules/modal.tsx b/web/core/components/modules/archived-modules/modal.tsx index 3cc7a60c4..f7c5e5856 100644 --- a/web/core/components/modules/archived-modules/modal.tsx +++ b/web/core/components/modules/archived-modules/modal.tsx @@ -1,12 +1,12 @@ "use client"; import { useState, Fragment } from "react"; -import { useRouter } from "next/navigation"; import { Dialog, Transition } from "@headlessui/react"; // ui import { Button, TOAST_TYPE, setToast } from "@plane/ui"; // hooks import { useModule } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { workspaceSlug: string; @@ -20,7 +20,7 @@ type Props = { export const ArchiveModuleModal: React.FC = (props) => { const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props; // router - const router = useRouter(); + const router = useAppRouter(); // states const [isArchiving, setIsArchiving] = useState(false); // store hooks diff --git a/web/core/components/modules/delete-module-modal.tsx b/web/core/components/modules/delete-module-modal.tsx index 955a23458..fb9e18398 100644 --- a/web/core/components/modules/delete-module-modal.tsx +++ b/web/core/components/modules/delete-module-modal.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // types import type { IModule } from "@plane/types"; // ui @@ -11,6 +11,7 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui"; import { MODULE_DELETED } from "@/constants/event-tracker"; // hooks import { useEventTracker, useModule } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { data: IModule; @@ -23,7 +24,7 @@ export const DeleteModuleModal: React.FC = observer((props) => { // states const [isDeleteLoading, setIsDeleteLoading] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId, moduleId, peekModule } = useParams(); // store hooks const { captureModuleEvent } = useEventTracker(); diff --git a/web/core/components/modules/gantt-chart/blocks.tsx b/web/core/components/modules/gantt-chart/blocks.tsx index 788b360db..946b31398 100644 --- a/web/core/components/modules/gantt-chart/blocks.tsx +++ b/web/core/components/modules/gantt-chart/blocks.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; import Link from "next/link"; -import { useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // hooks // ui import { Tooltip, ModuleStatusIcon } from "@plane/ui"; @@ -10,7 +10,8 @@ import { Tooltip, ModuleStatusIcon } from "@plane/ui"; import { MODULE_STATUS } from "@/constants/module"; import { renderFormattedDate } from "@/helpers/date-time.helper"; // constants -import { useAppRouter, useModule } from "@/hooks/store"; +import { useModule } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { @@ -20,9 +21,9 @@ type Props = { export const ModuleGanttBlock: React.FC = observer((props) => { const { moduleId } = props; // router - const router = useRouter(); + const router = useAppRouter(); + const { workspaceSlug } = useParams(); // store hooks - const { workspaceSlug } = useAppRouter(); const { getModuleById } = useModule(); // derived values const moduleDetails = getModuleById(moduleId); @@ -34,7 +35,7 @@ export const ModuleGanttBlock: React.FC = observer((props) => { className="relative flex h-full w-full items-center rounded" style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color }} onClick={() => - router.push(`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`) + router.push(`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`) } >
@@ -59,8 +60,8 @@ export const ModuleGanttBlock: React.FC = observer((props) => { export const ModuleGanttSidebarBlock: React.FC = observer((props) => { const { moduleId } = props; + const { workspaceSlug } = useParams(); // store hooks - const { workspaceSlug } = useAppRouter(); const { getModuleById } = useModule(); // derived values const moduleDetails = getModuleById(moduleId); @@ -68,7 +69,7 @@ export const ModuleGanttSidebarBlock: React.FC = observer((props) => { return ( diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx index e80af8166..cdd28cdab 100644 --- a/web/core/components/modules/module-card-item.tsx +++ b/web/core/components/modules/module-card-item.tsx @@ -3,7 +3,7 @@ import React, { useRef } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; -import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react"; // ui import { LayersIcon, Tooltip, setPromiseToast } from "@plane/ui"; @@ -20,6 +20,7 @@ import { getDate, renderFormattedDate } from "@/helpers/date-time.helper"; import { generateQueryParams } from "@/helpers/router.helper"; // hooks import { useEventTracker, useMember, useModule, useProjectEstimates, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; // plane web constants import { EEstimateSystem } from "@/plane-web/constants/estimates"; @@ -33,7 +34,7 @@ export const ModuleCardItem: React.FC = observer((props) => { // refs const parentRef = useRef(null); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); const searchParams = useSearchParams(); const pathname = usePathname(); diff --git a/web/core/components/modules/module-list-item.tsx b/web/core/components/modules/module-list-item.tsx index ddbfad897..73b443ecb 100644 --- a/web/core/components/modules/module-list-item.tsx +++ b/web/core/components/modules/module-list-item.tsx @@ -2,7 +2,7 @@ import React, { useRef } from "react"; import { observer } from "mobx-react-lite"; -import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; // icons import { Check, Info } from "lucide-react"; // ui @@ -13,7 +13,8 @@ import { ModuleListItemAction } from "@/components/modules"; // helpers import { generateQueryParams } from "@/helpers/router.helper"; // hooks -import { useAppRouter, useModule, useProjectEstimates } from "@/hooks/store"; +import { useModule, useProjectEstimates } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; // plane web constants import { EEstimateSystem } from "@/plane-web/constants/estimates"; @@ -27,14 +28,13 @@ export const ModuleListItem: React.FC = observer((props) => { // refs const parentRef = useRef(null); // router - const router = useRouter(); - const { workspaceSlug } = useParams(); + const router = useAppRouter(); + const { workspaceSlug, projectId } = useParams(); const searchParams = useSearchParams(); const pathname = usePathname(); // store hooks const { getModuleById } = useModule(); const { isMobile } = usePlatformOS(); - const { projectId } = useAppRouter(); const { currentActiveEstimateId, areEstimateEnabledByProjectId, estimateById } = useProjectEstimates(); // derived values @@ -50,7 +50,7 @@ export const ModuleListItem: React.FC = observer((props) => { const isEstimateEnabled = projectId && currentActiveEstimateId && - areEstimateEnabledByProjectId(projectId) && + areEstimateEnabledByProjectId(projectId?.toString()) && estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS; const completionPercentage = isEstimateEnabled diff --git a/web/core/components/modules/module-peek-overview.tsx b/web/core/components/modules/module-peek-overview.tsx index 106856d7d..02fb85747 100644 --- a/web/core/components/modules/module-peek-overview.tsx +++ b/web/core/components/modules/module-peek-overview.tsx @@ -1,9 +1,10 @@ import React, { useEffect } from "react"; import { observer } from "mobx-react"; -import { usePathname, useRouter, useSearchParams } from "next/navigation"; +import { usePathname, useSearchParams } from "next/navigation"; // hooks import { generateQueryParams } from "@/helpers/router.helper"; import { useModule } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // components import { ModuleAnalyticsSidebar } from "./"; @@ -15,7 +16,7 @@ type Props = { export const ModulePeekOverview: React.FC = observer(({ projectId, workspaceSlug, isArchived = false }) => { // router - const router = useRouter(); + const router = useAppRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); const peekModule = searchParams.get("peekModule"); diff --git a/web/core/components/modules/quick-actions.tsx b/web/core/components/modules/quick-actions.tsx index ab4c59a88..c68b55826 100644 --- a/web/core/components/modules/quick-actions.tsx +++ b/web/core/components/modules/quick-actions.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; + // icons import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react"; // ui @@ -16,6 +16,7 @@ import { cn } from "@/helpers/common.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useModule, useEventTracker, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { parentRef: React.RefObject; @@ -27,7 +28,7 @@ type Props = { export const ModuleQuickActions: React.FC = observer((props) => { const { parentRef, moduleId, projectId, workspaceSlug } = props; // router - const router = useRouter(); + const router = useAppRouter(); // states const [editModal, setEditModal] = useState(false); const [archiveModuleModal, setArchiveModuleModal] = useState(false); diff --git a/web/core/components/onboarding/switch-account-modal.tsx b/web/core/components/onboarding/switch-account-modal.tsx index 0b6fb670a..c4c36fe36 100644 --- a/web/core/components/onboarding/switch-account-modal.tsx +++ b/web/core/components/onboarding/switch-account-modal.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useState } from "react"; -import { useRouter } from "next/navigation"; + import { useTheme } from "next-themes"; import { ArrowRightLeft } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; @@ -9,6 +9,7 @@ import { Dialog, Transition } from "@headlessui/react"; import { Button, TOAST_TYPE, setToast } from "@plane/ui"; // hooks import { useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { isOpen: boolean; @@ -20,7 +21,7 @@ export const SwitchAccountModal: React.FC = (props) => { // states const [switchingAccount, setSwitchingAccount] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { data: userData, signOut } = useUser(); diff --git a/web/core/components/page-views/workspace-dashboard.tsx b/web/core/components/page-views/workspace-dashboard.tsx index f25a1ffef..e41a1c0bb 100644 --- a/web/core/components/page-views/workspace-dashboard.tsx +++ b/web/core/components/page-views/workspace-dashboard.tsx @@ -1,5 +1,6 @@ import { useEffect } from "react"; import { observer } from "mobx-react-lite"; +import { useParams } from "next/navigation"; // components import { DashboardWidgets } from "@/components/dashboard"; import { EmptyState } from "@/components/empty-state"; @@ -12,15 +13,7 @@ import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker"; // helpers import { cn } from "@/helpers/common.helper"; // hooks -import { - useCommandPalette, - useAppRouter, - useUserProfile, - useEventTracker, - useDashboard, - useProject, - useUser, -} from "@/hooks/store"; +import { useCommandPalette, useUserProfile, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store"; import useSize from "@/hooks/use-window-size"; export const WorkspaceDashboardView = observer(() => { @@ -30,7 +23,7 @@ export const WorkspaceDashboardView = observer(() => { setTrackElement, } = useEventTracker(); const { toggleCreateProjectModal } = useCommandPalette(); - const { workspaceSlug } = useAppRouter(); + const { workspaceSlug } = useParams(); const { data: currentUser } = useUser(); const { data: currentUserProfile, updateTourCompleted } = useUserProfile(); const { captureEvent } = useEventTracker(); @@ -56,7 +49,7 @@ export const WorkspaceDashboardView = observer(() => { useEffect(() => { if (!workspaceSlug) return; - fetchHomeDashboardWidgets(workspaceSlug); + fetchHomeDashboardWidgets(workspaceSlug?.toString()); }, [fetchHomeDashboardWidgets, workspaceSlug]); // TODO: refactor loader implementation diff --git a/web/core/components/pages/editor/header/options-dropdown.tsx b/web/core/components/pages/editor/header/options-dropdown.tsx index 934c9739b..67a477e8b 100644 --- a/web/core/components/pages/editor/header/options-dropdown.tsx +++ b/web/core/components/pages/editor/header/options-dropdown.tsx @@ -1,6 +1,7 @@ "use client"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucide-react"; // document editor import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor"; @@ -9,7 +10,6 @@ import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@pl // helpers import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper"; // hooks -import { useAppRouter } from "@/hooks/store"; import { usePageFilters } from "@/hooks/use-page-filters"; // store import { IPage } from "@/store/pages/page"; @@ -36,7 +36,7 @@ export const PageOptionsDropdown: React.FC = observer((props) => { restore, } = page; // store hooks - const { workspaceSlug, projectId } = useAppRouter(); + const { workspaceSlug, projectId } = useParams(); // page filters const { isFullWidth, handleFullWidth } = usePageFilters(); const handleArchivePage = async () => @@ -102,7 +102,7 @@ export const PageOptionsDropdown: React.FC = observer((props) => { { key: "copy-page-link", action: () => { - copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${id}`).then(() => + copyUrlToClipboard(`${workspaceSlug?.toString()}/projects/${projectId?.toString()}/pages/${id}`).then(() => setToast({ type: TOAST_TYPE.SUCCESS, title: "Success!", diff --git a/web/core/components/pages/modals/create-page-modal.tsx b/web/core/components/pages/modals/create-page-modal.tsx index 9a02fda94..dad404557 100644 --- a/web/core/components/pages/modals/create-page-modal.tsx +++ b/web/core/components/pages/modals/create-page-modal.tsx @@ -1,5 +1,5 @@ import { FC, useEffect, useState } from "react"; -import { useRouter } from "next/navigation"; + // types import { TPage } from "@plane/types"; // ui @@ -11,6 +11,7 @@ import { PAGE_CREATED } from "@/constants/event-tracker"; import { EPageAccess } from "@/constants/page"; // hooks import { useProjectPages, useEventTracker } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { workspaceSlug: string; @@ -30,7 +31,7 @@ export const CreatePageModal: FC = (props) => { logo_props: undefined, }); // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { createPage } = useProjectPages(); const { capturePageEvent } = useEventTracker(); diff --git a/web/core/components/project/card.tsx b/web/core/components/project/card.tsx index e4782bf64..d35b5835d 100644 --- a/web/core/components/project/card.tsx +++ b/web/core/components/project/card.tsx @@ -3,7 +3,7 @@ import React, { useRef, useState } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Settings, Trash2, UserPlus } from "lucide-react"; // types import type { IProject } from "@plane/types"; @@ -31,6 +31,7 @@ import { renderFormattedDate } from "@/helpers/date-time.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { @@ -46,7 +47,7 @@ export const ProjectCard: React.FC = observer((props) => { // refs const projectCardRef = useRef(null); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); // store hooks const { addProjectToFavorites, removeProjectFromFavorites } = useProject(); diff --git a/web/core/components/project/delete-project-modal.tsx b/web/core/components/project/delete-project-modal.tsx index d50c617f6..7e046be85 100644 --- a/web/core/components/project/delete-project-modal.tsx +++ b/web/core/components/project/delete-project-modal.tsx @@ -1,18 +1,19 @@ "use client"; import React from "react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { Controller, useForm } from "react-hook-form"; import { AlertTriangle } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; -import type { IProject } from "@plane/types"; -// hooks -import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui"; -import { PROJECT_DELETED } from "@/constants/event-tracker"; -import { useEventTracker, useProject } from "@/hooks/store"; -// ui // types +import type { IProject } from "@plane/types"; +// ui +import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui"; // constants +import { PROJECT_DELETED } from "@/constants/event-tracker"; +// hooks +import { useEventTracker, useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type DeleteProjectModal = { isOpen: boolean; @@ -31,7 +32,7 @@ export const DeleteProjectModal: React.FC = (props) => { const { captureProjectEvent } = useEventTracker(); const { deleteProject } = useProject(); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); // form info const { diff --git a/web/core/components/project/join-project-modal.tsx b/web/core/components/project/join-project-modal.tsx index 223ac2d58..7109b174a 100644 --- a/web/core/components/project/join-project-modal.tsx +++ b/web/core/components/project/join-project-modal.tsx @@ -1,14 +1,15 @@ "use client"; import { useState, Fragment } from "react"; -import { useRouter } from "next/navigation"; + import { Transition, Dialog } from "@headlessui/react"; -import type { IProject } from "@plane/types"; -// hooks -import { Button } from "@plane/ui"; -import { useProject, useUser } from "@/hooks/store"; -// ui // types +import type { IProject } from "@plane/types"; +// ui +import { Button } from "@plane/ui"; +// hooks +import { useProject, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; // type type TJoinProjectModalProps = { @@ -28,7 +29,7 @@ export const JoinProjectModal: React.FC = (props) => { } = useUser(); const { fetchProjects } = useProject(); // router - const router = useRouter(); + const router = useAppRouter(); const handleJoin = () => { setIsJoiningLoading(true); diff --git a/web/core/components/project/leave-project-modal.tsx b/web/core/components/project/leave-project-modal.tsx index 75207799c..788dbd492 100644 --- a/web/core/components/project/leave-project-modal.tsx +++ b/web/core/components/project/leave-project-modal.tsx @@ -2,12 +2,12 @@ import { FC, Fragment } from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; import { Controller, useForm } from "react-hook-form"; // headless ui import { AlertTriangleIcon } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; -// icons +// types import { IProject } from "@plane/types"; // ui import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui"; @@ -15,7 +15,7 @@ import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui"; import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker"; // hooks import { useEventTracker, useUser } from "@/hooks/store"; -// types +import { useAppRouter } from "@/hooks/use-app-router"; type FormData = { projectName: string; @@ -36,7 +36,7 @@ export interface ILeaveProjectModal { export const LeaveProjectModal: FC = observer((props) => { const { project, isOpen, onClose } = props; // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); // store hooks const { captureEvent } = useEventTracker(); diff --git a/web/core/components/project/member-list-item.tsx b/web/core/components/project/member-list-item.tsx index 69750747e..59e295bd7 100644 --- a/web/core/components/project/member-list-item.tsx +++ b/web/core/components/project/member-list-item.tsx @@ -3,7 +3,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // icons import { ChevronDown, Dot, XCircle } from "lucide-react"; // ui @@ -16,6 +16,7 @@ import { EUserProjectRoles } from "@/constants/project"; import { ROLE } from "@/constants/workspace"; // hooks import { useEventTracker, useMember, useProject, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { @@ -27,7 +28,7 @@ export const ProjectMemberListItem: React.FC = observer((props) => { // states const [removeMemberModal, setRemoveMemberModal] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug, projectId } = useParams(); // store hooks const { diff --git a/web/core/components/project/settings/archive-project/archive-restore-modal.tsx b/web/core/components/project/settings/archive-project/archive-restore-modal.tsx index f7ab1b288..969a7205b 100644 --- a/web/core/components/project/settings/archive-project/archive-restore-modal.tsx +++ b/web/core/components/project/settings/archive-project/archive-restore-modal.tsx @@ -1,12 +1,12 @@ "use client"; import { useState, Fragment } from "react"; -import { useRouter } from "next/navigation"; import { Dialog, Transition } from "@headlessui/react"; // ui import { Button, TOAST_TYPE, setToast } from "@plane/ui"; // hooks import { useProject } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { workspaceSlug: string; @@ -20,7 +20,7 @@ type Props = { export const ArchiveRestoreProjectModal: React.FC = (props) => { const { workspaceSlug, projectId, isOpen, onClose, archive } = props; // router - const router = useRouter(); + const router = useAppRouter(); // states const [isLoading, setIsLoading] = useState(false); // store hooks diff --git a/web/core/components/web-hooks/delete-webhook-modal.tsx b/web/core/components/web-hooks/delete-webhook-modal.tsx index eda3123b3..615c50f68 100644 --- a/web/core/components/web-hooks/delete-webhook-modal.tsx +++ b/web/core/components/web-hooks/delete-webhook-modal.tsx @@ -1,11 +1,12 @@ "use client"; import React, { FC, useState } from "react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // ui import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui"; // hooks import { useWebhook } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; interface IDeleteWebhook { isOpen: boolean; @@ -17,7 +18,7 @@ export const DeleteWebhookModal: FC = (props) => { // states const [isDeleting, setIsDeleting] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { removeWebhook } = useWebhook(); diff --git a/web/core/components/workspace/create-workspace-form.tsx b/web/core/components/workspace/create-workspace-form.tsx index e01ab20a4..c293c43b0 100644 --- a/web/core/components/workspace/create-workspace-form.tsx +++ b/web/core/components/workspace/create-workspace-form.tsx @@ -2,8 +2,8 @@ import { Dispatch, SetStateAction, useEffect, useState, FC } from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import { Controller, useForm } from "react-hook-form"; +// types import { IWorkspace } from "@plane/types"; // ui import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui"; @@ -12,8 +12,8 @@ import { WORKSPACE_CREATED } from "@/constants/event-tracker"; import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@/constants/workspace"; // hooks import { useEventTracker, useWorkspace } from "@/hooks/store"; -// ui -// types +import { useAppRouter } from "@/hooks/use-app-router"; +// services import { WorkspaceService } from "@/services/workspace.service"; type Props = { @@ -48,7 +48,7 @@ export const CreateWorkspaceForm: FC = observer((props) => { const [slugError, setSlugError] = useState(false); const [invalidSlug, setInvalidSlug] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { captureWorkspaceEvent } = useEventTracker(); const { createWorkspace } = useWorkspace(); diff --git a/web/core/components/workspace/delete-workspace-modal.tsx b/web/core/components/workspace/delete-workspace-modal.tsx index 991457a65..3d893a687 100644 --- a/web/core/components/workspace/delete-workspace-modal.tsx +++ b/web/core/components/workspace/delete-workspace-modal.tsx @@ -2,10 +2,10 @@ import React from "react"; import { observer } from "mobx-react"; -import { useRouter } from "next/navigation"; import { Controller, useForm } from "react-hook-form"; import { AlertTriangle } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; +// types import type { IWorkspace } from "@plane/types"; // ui import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui"; @@ -13,7 +13,7 @@ import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui"; import { WORKSPACE_DELETED } from "@/constants/event-tracker"; // hooks import { useEventTracker, useWorkspace } from "@/hooks/store"; -// types +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { isOpen: boolean; @@ -29,7 +29,7 @@ const defaultValues = { export const DeleteWorkspaceModal: React.FC = observer((props) => { const { isOpen, data, onClose } = props; // router - const router = useRouter(); + const router = useAppRouter(); // store hooks const { captureWorkspaceEvent } = useEventTracker(); const { deleteWorkspace } = useWorkspace(); diff --git a/web/core/components/workspace/settings/members-list-item.tsx b/web/core/components/workspace/settings/members-list-item.tsx index d70d87b98..ef37b9a2b 100644 --- a/web/core/components/workspace/settings/members-list-item.tsx +++ b/web/core/components/workspace/settings/members-list-item.tsx @@ -3,7 +3,7 @@ import { FC, useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // lucide icons import { ChevronDown, Dot, XCircle } from "lucide-react"; // ui @@ -15,6 +15,7 @@ import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker"; import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace"; // hooks import { useEventTracker, useMember, useUser } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { @@ -26,7 +27,7 @@ export const WorkspaceMembersListItem: FC = observer((props) => { // states const [removeMemberModal, setRemoveMemberModal] = useState(false); // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); // store hooks const { diff --git a/web/core/components/workspace/sidebar-quick-action.tsx b/web/core/components/workspace/sidebar-quick-action.tsx index 2b15dbf5f..7e7f23333 100644 --- a/web/core/components/workspace/sidebar-quick-action.tsx +++ b/web/core/components/workspace/sidebar-quick-action.tsx @@ -1,5 +1,6 @@ import { useRef, useState } from "react"; import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; import { ChevronUp, PenSquare, Search } from "lucide-react"; // types import { TIssue } from "@plane/types"; @@ -9,16 +10,18 @@ import { CreateUpdateIssueModal } from "@/components/issues"; import { EIssuesStoreType } from "@/constants/issue"; import { EUserWorkspaceRoles } from "@/constants/workspace"; // hooks -import { useAppRouter, useAppTheme, useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store"; +import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store"; import useLocalStorage from "@/hooks/use-local-storage"; export const WorkspaceSidebarQuickAction = observer(() => { + // router + const { workspaceSlug: routerWorkspaceSlug } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); // states const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false); // store hooks const { toggleCreateIssueModal, toggleCommandPaletteModal } = useCommandPalette(); const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme(); - const { workspaceSlug } = useAppRouter(); const { setTrackElement } = useEventTracker(); const { joinedProjectIds } = useProject(); const { diff --git a/web/core/components/workspace/views/modal.tsx b/web/core/components/workspace/views/modal.tsx index 88fee2839..7a4b6cc8f 100644 --- a/web/core/components/workspace/views/modal.tsx +++ b/web/core/components/workspace/views/modal.tsx @@ -2,7 +2,7 @@ import React from "react"; import { observer } from "mobx-react"; -import { useParams, useRouter } from "next/navigation"; +import { useParams } from "next/navigation"; // types import { IWorkspaceView } from "@plane/types"; // ui @@ -13,6 +13,7 @@ import { WorkspaceViewForm } from "@/components/workspace"; import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker"; // store hooks import { useEventTracker, useGlobalView } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type Props = { data?: IWorkspaceView; @@ -24,7 +25,7 @@ type Props = { export const CreateUpdateWorkspaceViewModal: React.FC = observer((props) => { const { isOpen, onClose, data, preLoadedData } = props; // router - const router = useRouter(); + const router = useAppRouter(); const { workspaceSlug } = useParams(); // store hooks const { createGlobalView, updateGlobalView } = useGlobalView(); diff --git a/web/core/hooks/store/index.ts b/web/core/hooks/store/index.ts index d48217099..0b02ae670 100644 --- a/web/core/hooks/store/index.ts +++ b/web/core/hooks/store/index.ts @@ -31,5 +31,5 @@ export * from "./user"; export * from "./use-instance"; export * from "./use-app-theme"; export * from "./use-command-palette"; -export * from "./use-app-router"; +export * from "./use-router-params"; export * from "./estimates"; diff --git a/web/core/hooks/store/use-app-router.ts b/web/core/hooks/store/use-router-params.ts similarity index 59% rename from web/core/hooks/store/use-app-router.ts rename to web/core/hooks/store/use-router-params.ts index b01b0d1f0..062134ace 100644 --- a/web/core/hooks/store/use-app-router.ts +++ b/web/core/hooks/store/use-router-params.ts @@ -3,8 +3,8 @@ import { useContext } from "react"; import { StoreContext } from "@/lib/store-context"; import { IRouterStore } from "@/store/router.store"; -export const useAppRouter = (): IRouterStore => { +export const useRouterParams = (): IRouterStore => { const context = useContext(StoreContext); - if (context === undefined) throw new Error("useAppRouter must be used within StoreProvider"); + if (context === undefined) throw new Error("useRouterParams must be used within StoreProvider"); return context.router; }; diff --git a/web/core/hooks/use-app-router.tsx b/web/core/hooks/use-app-router.tsx new file mode 100644 index 000000000..783658e9f --- /dev/null +++ b/web/core/hooks/use-app-router.tsx @@ -0,0 +1,6 @@ +// type +import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime"; +// router from next-nprogress-bar +import { useRouter } from "next-nprogress-bar"; + +export const useAppRouter = (): AppRouterInstance => useRouter(); diff --git a/web/core/hooks/use-issues-actions.tsx b/web/core/hooks/use-issues-actions.tsx index 62c776e6f..2ea3df51e 100644 --- a/web/core/hooks/use-issues-actions.tsx +++ b/web/core/hooks/use-issues-actions.tsx @@ -1,5 +1,6 @@ import { useCallback, useMemo } from "react"; // types +import { useParams } from "next/navigation"; import { IIssueDisplayFilterOptions, IIssueDisplayProperties, @@ -12,7 +13,7 @@ import { TProfileViews, } from "@plane/types"; import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue"; -import { useAppRouter, useIssues } from "./store"; +import { useIssues } from "./store"; interface IssueActions { fetchIssues: ( @@ -67,10 +68,13 @@ export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => { }; const useProjectIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const projectId = routerProjectId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT); - const { workspaceSlug, projectId } = useAppRouter(); - const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions) => { if (!workspaceSlug || !projectId) return; @@ -150,8 +154,13 @@ const useProjectIssueActions = () => { }; const useCycleIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, cycleId: routerCycleId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const projectId = routerProjectId?.toString(); + const cycleId = routerCycleId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE); - const { workspaceSlug, projectId, cycleId } = useAppRouter(); const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions, cycleId?: string) => { @@ -256,10 +265,14 @@ const useCycleIssueActions = () => { }; const useModuleIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, moduleId: routerModuleId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const projectId = routerProjectId?.toString(); + const moduleId = routerModuleId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE); - const { workspaceSlug, projectId, moduleId } = useAppRouter(); - const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions, moduleId?: string) => { if (!workspaceSlug || !projectId || !moduleId) return; @@ -353,10 +366,13 @@ const useModuleIssueActions = () => { }; const useProfileIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, userId: routerUserId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const userId = routerUserId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROFILE); - const { workspaceSlug, userId } = useAppRouter(); - const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions, viewId?: string) => { if (!workspaceSlug || !userId || !viewId) return; @@ -434,10 +450,14 @@ const useProfileIssueActions = () => { }; const useProjectViewIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, viewId: routerViewId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const projectId = routerProjectId?.toString(); + const viewId = routerViewId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW); - const { workspaceSlug, projectId, viewId } = useAppRouter(); - const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions) => { if (!workspaceSlug || !projectId) return; @@ -517,10 +537,13 @@ const useProjectViewIssueActions = () => { }; const useDraftIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const projectId = routerProjectId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT); - const { workspaceSlug, projectId } = useAppRouter(); - const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions) => { if (!workspaceSlug || !projectId) return; @@ -584,10 +607,13 @@ const useDraftIssueActions = () => { }; const useArchivedIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const projectId = routerProjectId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED); - const { workspaceSlug, projectId } = useAppRouter(); - const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions) => { if (!workspaceSlug || !projectId) return; @@ -643,9 +669,13 @@ const useArchivedIssueActions = () => { }; const useGlobalIssueActions = () => { + // router + const { workspaceSlug: routerWorkspaceSlug, globalViewId: routerGlobalViewId } = useParams(); + const workspaceSlug = routerWorkspaceSlug?.toString(); + const globalViewId = routerGlobalViewId?.toString(); + // store hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.GLOBAL); - const { workspaceSlug, globalViewId } = useAppRouter(); const fetchIssues = useCallback( async (loadType: TLoader, options: IssuePaginationOptions) => { if (!workspaceSlug || !globalViewId) return; diff --git a/web/core/hooks/use-multiple-select.ts b/web/core/hooks/use-multiple-select.ts index b985a19dd..278304c4f 100644 --- a/web/core/hooks/use-multiple-select.ts +++ b/web/core/hooks/use-multiple-select.ts @@ -1,7 +1,6 @@ "use client"; import { useCallback, useEffect, useMemo } from "react"; -// import { useRouter } from "next/navigation"; // hooks import { useMultipleSelectStore } from "@/hooks/store"; @@ -34,7 +33,7 @@ export type TSelectionHelper = { export const useMultipleSelect = (props: Props) => { const { containerRef, disabled, entities } = props; // router - // const router = useRouter(); + // const router = useAppRouter(); // store hooks const { selectedEntityIds, diff --git a/web/core/hooks/use-reload-confirmation.tsx b/web/core/hooks/use-reload-confirmation.tsx index b491120a7..1591574d0 100644 --- a/web/core/hooks/use-reload-confirmation.tsx +++ b/web/core/hooks/use-reload-confirmation.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; //TODO: remove temp flag isActive later and use showAlert as the source of truth const useReloadConfirmations = (isActive = true) => { const [showAlert, setShowAlert] = useState(false); - // const router = useRouter(); + // const router = useAppRouter(); // const handleBeforeUnload = useCallback( // (event: BeforeUnloadEvent) => { diff --git a/web/core/lib/posthog-provider.tsx b/web/core/lib/posthog-provider.tsx index c17d647c3..ff509f2b8 100644 --- a/web/core/lib/posthog-provider.tsx +++ b/web/core/lib/posthog-provider.tsx @@ -1,6 +1,5 @@ import { FC, ReactNode, useEffect } from "react"; import { observer } from "mobx-react"; -// import { useRouter } from "next/navigation"; import posthog from "posthog-js"; import { PostHogProvider as PHProvider } from "posthog-js/react"; // constants @@ -23,7 +22,7 @@ const PostHogProvider: FC = observer((props) => { } = useUser(); const { currentWorkspace } = useWorkspace(); // router - // const router = useRouter(); + // const router = useAppRouter(); useEffect(() => { if (user) { diff --git a/web/core/lib/wrappers/authentication-wrapper.tsx b/web/core/lib/wrappers/authentication-wrapper.tsx index 6b0d793d3..34c493b46 100644 --- a/web/core/lib/wrappers/authentication-wrapper.tsx +++ b/web/core/lib/wrappers/authentication-wrapper.tsx @@ -2,7 +2,7 @@ import { FC, ReactNode } from "react"; import { observer } from "mobx-react"; -import { useRouter, useSearchParams, usePathname } from "next/navigation"; +import { useSearchParams, usePathname } from "next/navigation"; import useSWR from "swr"; // components import { LogoSpinner } from "@/components/common"; @@ -10,6 +10,7 @@ import { LogoSpinner } from "@/components/common"; import { EPageTypes } from "@/helpers/authentication.helper"; // hooks import { useUser, useUserProfile, useUserSettings, useWorkspace } from "@/hooks/store"; +import { useAppRouter } from "@/hooks/use-app-router"; type TPageType = EPageTypes; @@ -25,7 +26,7 @@ const isValidURL = (url: string): boolean => { export const AuthenticationWrapper: FC = observer((props) => { const pathname = usePathname(); - const router = useRouter(); + const router = useAppRouter(); const searchParams = useSearchParams(); const nextPath = searchParams.get("next_path"); // props diff --git a/web/core/lib/wrappers/store-wrapper.tsx b/web/core/lib/wrappers/store-wrapper.tsx index e035f56ec..c65ebebfb 100644 --- a/web/core/lib/wrappers/store-wrapper.tsx +++ b/web/core/lib/wrappers/store-wrapper.tsx @@ -5,7 +5,7 @@ import { useTheme } from "next-themes"; // helpers import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper"; // hooks -import { useAppRouter, useAppTheme, useUserProfile } from "@/hooks/store"; +import { useRouterParams, useAppTheme, useUserProfile } from "@/hooks/store"; type TStoreWrapper = { children: ReactNode; @@ -18,7 +18,7 @@ const StoreWrapper: FC = observer((props) => { // router const params = useParams(); // store hooks - const { setQuery } = useAppRouter(); + const { setQuery } = useRouterParams(); const { sidebarCollapsed, toggleSidebar } = useAppTheme(); const { data: userProfile } = useUserProfile(); // states