binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1634] dev: update application router to support n-progress. (#4846)

Browse source 
* [WEB-1634] dev: update application router to support n-progress.

* chore: update app router initilization logic.

* fix: lint errors
This commit is contained in:
Prateek Shourya 2024-06-18 11:35:20 +05:30 • committed by GitHub
parent 10e67144a0
commit 6828d33c3f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
111 changed files with 480 additions and 374 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
View file

@ -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;

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
View file

@ -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 {

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
View file

@ -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();

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
View file

@ -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<EditorRefApi>(null);
const readOnlyEditorRef = useRef<EditorRefApi>(null);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug, projectId, pageId } = useParams();
// store hooks
const { createPage, getPageById } = useProjectPages();

6
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
View file

@ -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;

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
View file

@ -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 {

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
View file

@ -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();

12
web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx
View file

@ -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<HTMLInputElement>(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}
/>

12
web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx
View file

@ -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}
/>

5
web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx
View file

@ -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 {

7
web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx
View file

@ -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 (

5
web/app/accounts/set-password/page.tsx
View file

@ -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");

4
web/app/create-workspace/page.tsx
View file

@ -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();

3
web/app/error.tsx
View file

@ -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);

6
web/app/invitations/page.tsx
View file

@ -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<string[]>([]);
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { captureEvent, joinWorkspaceMetricGroup } = useEventTracker();
const { data: currentUser } = useUser();

4
web/app/onboarding/page.tsx
View file

@ -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<EOnboardingSteps | null>(null);
const [totalSteps, setTotalSteps] = useState<number | null>(null);
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { captureEvent } = useEventTracker();
const { isLoading: userLoader, data: user, updateCurrentUser } = useUser();

4
web/app/profile/security/page.tsx
View file

@ -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 {

5
web/app/workspace-invitations/page.tsx
View file

@ -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");

5
web/core/components/account/auth-forms/auth-root.tsx
View file

@ -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<TAuthRoot> = observer((props) => {
//router
const router = useRouter();
const router = useAppRouter();
const searchParams = useSearchParams();
// query params
const emailParam = searchParams.get("email");

6
web/core/components/account/deactivate-account-modal.tsx
View file

@ -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> = (props) => {
const router = useRouter();
const router = useAppRouter();
const { isOpen, onClose } = props;
// hooks
const { deactivateAccount, signOut } = useUser();

8
web/core/components/account/oauth/gitlab-button.tsx
View file

@ -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<GitlabOAuthButtonProps> = (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 (

7
web/core/components/analytics/custom-analytics/select/y-axis.tsx
View file

@ -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<Props> = 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<Props> = observer(({ value, onChange }) => {
if (
projectId &&
currentActiveEstimateId &&
areEstimateEnabledByProjectId(projectId) &&
areEstimateEnabledByProjectId(projectId.toString()) &&
estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS
) {
return true;

7
web/core/components/command-palette/actions/search-results.tsx
View file

@ -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> = (props) => {
const { closePalette, results } = props;
const router = useRouter();
const router = useAppRouter();
return (
<>

6
web/core/components/command-palette/actions/workspace-settings-actions.tsx
View file

@ -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> = (props) => {
const { closePalette } = props;
// router
const router = useRouter();
const router = useAppRouter();
// router params
const { workspaceSlug } = useParams();
// mobx store

5
web/core/components/command-palette/command-modal.tsx
View file

@ -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();

5
web/core/components/command-palette/command-palette.tsx
View file

@ -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

5
web/core/components/core/list/list-item.tsx
View file

@ -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<IListItemProps> = (props) => {
} = props;
// router
const router = useRouter();
const router = useAppRouter();
// handlers
const handleControlLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {

5
web/core/components/cycles/analytics-sidebar/root.tsx
View file

@ -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<Props> = 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();

4
web/core/components/cycles/archived-cycles/modal.tsx
View file

@ -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> = (props) => {
const { workspaceSlug, projectId, cycleId, isOpen, handleClose } = props;
// router
const router = useRouter();
const router = useAppRouter();
// states
const [isArchiving, setIsArchiving] = useState(false);
// store hooks

5
web/core/components/cycles/board/cycles-board-card.tsx
View file

@ -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<ICyclesBoardCard> = observer((props) => {
// refs
const parentRef = useRef(null);
// router
const router = useRouter();
const router = useAppRouter();
const searchParams = useSearchParams();
const pathname = usePathname();
// store

5
web/core/components/cycles/cycle-peek-overview.tsx
View file

@ -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<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
// router
const router = useRouter();
const router = useAppRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const peekCycle = searchParams.get("peekCycle");

5
web/core/components/cycles/delete-modal.tsx
View file

@ -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<ICycleDelete> = 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");

31
web/core/components/cycles/gantt-chart/blocks.tsx
View file

@ -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<Props> = 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<Props> = 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}`)
}
>
<div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
<Tooltip
@ -67,7 +70,7 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
export const CycleGanttSidebarBlock: React.FC<Props> = 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<Props> = observer((props) => {
return (
<Link
className="relative flex h-full w-full items-center gap-2"
href={`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
href={`/${workspaceSlug.toString()}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
draggable={false}
>
<ContrastIcon

5
web/core/components/cycles/list/cycles-list-item.tsx
View file

@ -2,7 +2,7 @@
import { FC, MouseEvent, useRef } from "react";
import { observer } from "mobx-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { usePathname, useSearchParams } from "next/navigation";
// icons
import { Check, Info } from "lucide-react";
// types
@ -16,6 +16,7 @@ import { CycleListItemAction } from "@/components/cycles/list";
import { generateQueryParams } from "@/helpers/router.helper";
// hooks
import { useCycle } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
import { usePlatformOS } from "@/hooks/use-platform-os";
type TCyclesListItem = {
@ -34,7 +35,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
// refs
const parentRef = useRef(null);
// router
const router = useRouter();
const router = useAppRouter();
const searchParams = useSearchParams();
const pathname = usePathname();
// hooks

5
web/core/components/cycles/quick-actions.tsx
View file

@ -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<HTMLElement>;
@ -27,7 +28,7 @@ type Props = {
export const CycleQuickActions: React.FC<Props> = 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);

11
web/core/components/dashboard/home-dashboard-widgets.tsx
View file

@ -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<WidgetProps>; 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 (
<div key={key} className="lg:col-span-2">
<WidgetComponent dashboardId={homeDashboardId} workspaceSlug={workspaceSlug} />
<WidgetComponent dashboardId={homeDashboardId} workspaceSlug={workspaceSlug.toString()} />
</div>
);
else return <WidgetComponent key={key} dashboardId={homeDashboardId} workspaceSlug={workspaceSlug} />;
else
return <WidgetComponent key={key} dashboardId={homeDashboardId} workspaceSlug={workspaceSlug.toString()} />;
})}
</div>
);

12
web/core/components/dashboard/widgets/issues-by-priority.tsx
View file

@ -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<WidgetProps> = observer((props) => {
const { dashboardId, workspaceSlug } = props;
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
// derived values

16
web/core/components/dashboard/widgets/issues-by-state-group.tsx
View file

@ -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<WidgetProps> = observer((props)
const [defaultStateGroup, setDefaultStateGroup] = useState<TStateGroups | null>(null);
const [activeStateGroup, setActiveStateGroup] = useState<TStateGroups | null>(null);
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
// derived values

7
web/core/components/dropdowns/cycle/cycle-options.tsx
View file

@ -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<CycleOptionsProps> = observer((props) => {
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);
// store hooks
const { workspaceSlug } = useAppRouter();
const { workspaceSlug } = useParams();
const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle();
useEffect(() => {
@ -66,7 +67,7 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
});
const onOpen = () => {
if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug, projectId);
if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug.toString(), projectId);
};
const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

8
web/core/components/dropdowns/estimate.tsx
View file

@ -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<Props> = 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<Props> = 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({

7
web/core/components/dropdowns/member/member-options.tsx
View file

@ -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<HTMLInputElement | null>(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<HTMLInputElement>) => {

7
web/core/components/dropdowns/module/module-options.tsx
View file

@ -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<HTMLInputElement | null>(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<HTMLInputElement>) => {

7
web/core/components/dropdowns/state.tsx
View file

@ -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<Props> = 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<Props> = observer((props) => {
const onOpen = async () => {
if (!statesList && workspaceSlug && projectId) {
setStateLoader(true);
await fetchProjectStates(workspaceSlug, projectId);
await fetchProjectStates(workspaceSlug.toString(), projectId);
setStateLoader(false);
}
};

12
web/core/components/exporter/export-modal.tsx
View file

@ -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<Props> = 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();

5
web/core/components/exporter/guide.tsx
View file

@ -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<string | undefined>(`10:0:0`);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug } = useParams();
const searchParams = useSearchParams();
const provider = searchParams.get("provider");

4
web/core/components/inbox/content/inbox-issue-header.tsx
View file

@ -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<TInboxIssueActionsHeader> = observer((p
membership: { currentProjectRole },
} = useUser();
const router = useRouter();
const router = useAppRouter();
const { getProjectById } = useProject();
const issue = inboxIssue?.issue;

5
web/core/components/inbox/content/inbox-issue-mobile-header.tsx
View file

@ -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<Props> = observer((props) =
isMobileSidebar,
setIsMobileSidebar,
} = props;
const router = useRouter();
const router = useAppRouter();
const issue = inboxIssue?.issue;
const currentInboxIssueId = issue?.id;

4
web/core/components/inbox/content/issue-properties.tsx
View file

@ -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<Props> = observer((props) => {
const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails } = props;
const router = useRouter();
const router = useAppRouter();
// store hooks
const { currentProjectDetails } = useProject();

7
web/core/components/inbox/content/root.tsx
View file

@ -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<TInboxContentRoot> = 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

5
web/core/components/inbox/modals/create-edit-modal/create-root.tsx
View file

@ -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<TIssue> = {
export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props) => {
const { workspaceSlug, projectId, handleModalClose } = props;
const router = useRouter();
const router = useAppRouter();
const pathname = usePathname();
// refs
const descriptionEditorRef = useRef<EditorRefApi>(null);

4
web/core/components/inbox/sidebar/root.tsx
View file

@ -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<IInboxSidebarProps> = observer((props) => {
issues: { getIssueLoader },
} = useIssuesStore();
const router = useRouter();
const router = useAppRouter();
const fetchNextPages = useCallback(() => {
if (!workspaceSlug || !projectId) return;

26
web/core/components/integration/github/root.tsx
View file

@ -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<IUserDetails[]>([]);
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug } = useParams();
const searchParams = useSearchParams();
const provider = searchParams.get("provider");

15
web/core/components/integration/jira/root.tsx
View file

@ -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<TJiraIntegrationSteps | null>(null);
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug } = useParams();
const methods = useForm<IJiraImporterForm>({

5
web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
View file

@ -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<Props> = observer((props) => {
const [isRestoring, setIsRestoring] = useState(false);
// router
const router = useRouter();
const router = useAppRouter();
// hooks
const {

5
web/core/components/issues/issue-detail/root.tsx
View file

@ -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<TIssueDetailRoot> = observer((props) => {
const { workspaceSlug, projectId, issueId, swrIssueDetails, is_archived = false } = props;
// router
const router = useRouter();
const router = useAppRouter();
const pathname = usePathname();
// hooks
const {

9
web/core/components/issues/issue-layouts/calendar/issue-block.tsx
View file

@ -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<HTMLDivElement | null>(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 (
<ControlLink
id={`issue-${issue.id}`}
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
href={`/${workspaceSlug.toString()}/projects/${projectId.toString()}/issues/${issue.id}`}
target="_blank"
onClick={() => 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"

7
web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
View file

@ -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 <EmptyState type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS} size="sm" />;
});

7
web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
View file

@ -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<Props> = 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;

4
web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
View file

@ -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<Props> = observer((props) => {
moduleViewDisabled = false,
} = props;
// hooks
const { moduleId, cycleId } = useAppRouter();
const { moduleId, cycleId } = useParams();
// states
const [filtersSearchQuery, setFiltersSearchQuery] = useState("");

9
web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
View file

@ -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<Props> = 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(() => {

11
web/core/components/issues/issue-layouts/gantt/blocks.tsx
View file

@ -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<Props> = 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<Props> = observer((props) => {
// rendering issues on gantt sidebar
export const IssueGanttSidebarBlock: React.FC<Props> = 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,

7
web/core/components/issues/issue-layouts/kanban/block.tsx
View file

@ -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<IssueBlockProps> = observer((props) => {
} = props;
const cardRef = useRef<HTMLAnchorElement | null>(null);
// router
const { workspaceSlug: routerWorkspaceSlug } = useParams();
const workspaceSlug = routerWorkspaceSlug?.toString();
// hooks
const { workspaceSlug } = useAppRouter();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
const { isMobile } = usePlatformOS();

8
web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
View file

@ -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(() => {
<BaseKanBanRoot
QuickActions={ProjectIssueQuickActions}
canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
viewId={profileViewId}
viewId={profileViewId.toString()}
/>
);
});

8
web/core/components/issues/issue-layouts/list/block.tsx
View file

@ -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<HTMLDivElement | null>(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();

10
web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
View file

@ -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(() => {
<BaseListRoot
QuickActions={ProjectIssueQuickActions}
canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
viewId={profileViewId}
viewId={profileViewId.toString()}
/>
);
});

5
web/core/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -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<IIssueProperties> = observer((props) => {
const projectDetails = getProjectById(issue.project_id);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug, projectId } = useParams();
const pathname = usePathname();

7
web/core/components/issues/issue-layouts/properties/labels.tsx
View file

@ -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<IIssuePropertyLabels> = 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<IIssuePropertyLabels> = observer((pro
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
// store hooks
const { workspaceSlug } = useAppRouter();
const { fetchProjectLabels, getProjectLabels } = useLabel();
const { isMobile } = usePlatformOS();
const storeLabels = getProjectLabels(projectId);

10
web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
View file

@ -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<Props> = 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 (

12
web/core/components/issues/issue-modal/form.tsx
View file

@ -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<IssueFormProps> = observer((props) => {
const editorRef = useRef<EditorRefApi>(null);
const submitBtnRef = useRef<HTMLButtonElement | null>(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();

40
web/core/components/issues/issue-modal/modal.tsx
View file

@ -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<IssuesModalProps> = observer((prop
const [description, setDescription] = useState<string | undefined>(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<IssuesModalProps> = observer((prop
setDescription(data?.description_html || "<p></p>");
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 || "<p></p>");
};
@ -104,7 +96,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = 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<IssuesModalProps> = 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<IssuesModalProps> = 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<IssuesModalProps> = 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<IssuesModalProps> = 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<IssuesModalProps> = 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<IssuesModalProps> = 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}

5
web/core/components/modules/analytics-sidebar/root.tsx
View file

@ -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<Props> = observer((props) => {
const [moduleLinkModal, setModuleLinkModal] = useState(false);
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug, projectId } = useParams();
// store hooks

4
web/core/components/modules/archived-modules/modal.tsx
View file

@ -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> = (props) => {
const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props;
// router
const router = useRouter();
const router = useAppRouter();
// states
const [isArchiving, setIsArchiving] = useState(false);
// store hooks

5
web/core/components/modules/delete-module-modal.tsx
View file

@ -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<Props> = 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();

15
web/core/components/modules/gantt-chart/blocks.tsx
View file

@ -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<Props> = 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<Props> = 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}`)
}
>
<div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
@ -59,8 +60,8 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
export const ModuleGanttSidebarBlock: React.FC<Props> = 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<Props> = observer((props) => {
return (
<Link
className="relative flex h-full w-full items-center gap-2"
href={`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
href={`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
draggable={false}
>
<ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />

5
web/core/components/modules/module-card-item.tsx
View file

@ -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<Props> = observer((props) => {
// refs
const parentRef = useRef(null);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug, projectId } = useParams();
const searchParams = useSearchParams();
const pathname = usePathname();

12
web/core/components/modules/module-list-item.tsx
View file

@ -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<Props> = 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<Props> = observer((props) => {
const isEstimateEnabled =
projectId &&
currentActiveEstimateId &&
areEstimateEnabledByProjectId(projectId) &&
areEstimateEnabledByProjectId(projectId?.toString()) &&
estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS;
const completionPercentage = isEstimateEnabled

5
web/core/components/modules/module-peek-overview.tsx
View file

@ -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<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
// router
const router = useRouter();
const router = useAppRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const peekModule = searchParams.get("peekModule");

5
web/core/components/modules/quick-actions.tsx
View file

@ -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<HTMLDivElement>;
@ -27,7 +28,7 @@ type Props = {
export const ModuleQuickActions: React.FC<Props> = 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);

5
web/core/components/onboarding/switch-account-modal.tsx
View file

@ -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> = (props) => {
// states
const [switchingAccount, setSwitchingAccount] = useState(false);
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { data: userData, signOut } = useUser();

15
web/core/components/page-views/workspace-dashboard.tsx
View file

@ -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

6
web/core/components/pages/editor/header/options-dropdown.tsx
View file

@ -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<Props> = 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<Props> = 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!",

5
web/core/components/pages/modals/create-page-modal.tsx
View file

@ -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> = (props) => {
logo_props: undefined,
});
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { createPage } = useProjectPages();
const { capturePageEvent } = useEventTracker();

5
web/core/components/project/card.tsx
View file

@ -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<Props> = observer((props) => {
// refs
const projectCardRef = useRef(null);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug } = useParams();
// store hooks
const { addProjectToFavorites, removeProjectFromFavorites } = useProject();

17
web/core/components/project/delete-project-modal.tsx
View file

@ -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<DeleteProjectModal> = (props) => {
const { captureProjectEvent } = useEventTracker();
const { deleteProject } = useProject();
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug, projectId } = useParams();
// form info
const {

15
web/core/components/project/join-project-modal.tsx
View file

@ -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<TJoinProjectModalProps> = (props) => {
} = useUser();
const { fetchProjects } = useProject();
// router
const router = useRouter();
const router = useAppRouter();
const handleJoin = () => {
setIsJoiningLoading(true);

8
web/core/components/project/leave-project-modal.tsx
View file

@ -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<ILeaveProjectModal> = observer((props) => {
const { project, isOpen, onClose } = props;
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug } = useParams();
// store hooks
const { captureEvent } = useEventTracker();

5
web/core/components/project/member-list-item.tsx
View file

@ -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<Props> = observer((props) => {
// states
const [removeMemberModal, setRemoveMemberModal] = useState(false);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug, projectId } = useParams();
// store hooks
const {

4
web/core/components/project/settings/archive-project/archive-restore-modal.tsx
View file

@ -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> = (props) => {
const { workspaceSlug, projectId, isOpen, onClose, archive } = props;
// router
const router = useRouter();
const router = useAppRouter();
// states
const [isLoading, setIsLoading] = useState(false);
// store hooks

5
web/core/components/web-hooks/delete-webhook-modal.tsx
View file

@ -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<IDeleteWebhook> = (props) => {
// states
const [isDeleting, setIsDeleting] = useState(false);
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { removeWebhook } = useWebhook();

8
web/core/components/workspace/create-workspace-form.tsx
View file

@ -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<Props> = 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();

6
web/core/components/workspace/delete-workspace-modal.tsx
View file

@ -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<Props> = observer((props) => {
const { isOpen, data, onClose } = props;
// router
const router = useRouter();
const router = useAppRouter();
// store hooks
const { captureWorkspaceEvent } = useEventTracker();
const { deleteWorkspace } = useWorkspace();

5
web/core/components/workspace/settings/members-list-item.tsx
View file

@ -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<Props> = observer((props) => {
// states
const [removeMemberModal, setRemoveMemberModal] = useState(false);
// router
const router = useRouter();
const router = useAppRouter();
const { workspaceSlug } = useParams();
// store hooks
const {

Some files were not shown because too many files have changed in this diff Show more