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

* [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

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

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

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;

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

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

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

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

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 {

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

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

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

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

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;

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 {

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