[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

web/core/hooks/store/index.ts

@@ -31,5 +31,5 @@ export * from "./user";
 export * from "./use-instance";
 export * from "./use-app-theme";
 export * from "./use-command-palette";
-export * from "./use-app-router";
+export * from "./use-router-params";
 export * from "./estimates";

web/core/hooks/store/use-router-params.ts

@@ -3,8 +3,8 @@ import { useContext } from "react";
 import { StoreContext } from "@/lib/store-context";
 import { IRouterStore } from "@/store/router.store";
 
-export const useAppRouter = (): IRouterStore => {
+export const useRouterParams = (): IRouterStore => {
   const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useAppRouter must be used within StoreProvider");
+  if (context === undefined) throw new Error("useRouterParams must be used within StoreProvider");
   return context.router;
 };

web/core/hooks/use-app-router.tsx

@@ -0,0 +1,6 @@
+// type
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+// router from next-nprogress-bar
+import { useRouter } from "next-nprogress-bar";
+
+export const useAppRouter = (): AppRouterInstance => useRouter();

web/core/hooks/use-issues-actions.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from "react";
 // types
+import { useParams } from "next/navigation";
 import {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
@@ -12,7 +13,7 @@ import {
   TProfileViews,
 } from "@plane/types";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { useAppRouter, useIssues } from "./store";
+import { useIssues } from "./store";
 
 interface IssueActions {
   fetchIssues: (
@@ -67,10 +68,13 @@ export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
 };
 
 const useProjectIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
 
-  const { workspaceSlug, projectId } = useAppRouter();
-
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions) => {
       if (!workspaceSlug || !projectId) return;
@@ -150,8 +154,13 @@ const useProjectIssueActions = () => {
 };
 
 const useCycleIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, cycleId: routerCycleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  const cycleId = routerCycleId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
-  const { workspaceSlug, projectId, cycleId } = useAppRouter();
 
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions, cycleId?: string) => {
@@ -256,10 +265,14 @@ const useCycleIssueActions = () => {
 };
 
 const useModuleIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, moduleId: routerModuleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  const moduleId = routerModuleId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
 
-  const { workspaceSlug, projectId, moduleId } = useAppRouter();
-
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions, moduleId?: string) => {
       if (!workspaceSlug || !projectId || !moduleId) return;
@@ -353,10 +366,13 @@ const useModuleIssueActions = () => {
 };
 
 const useProfileIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, userId: routerUserId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const userId = routerUserId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROFILE);
 
-  const { workspaceSlug, userId } = useAppRouter();
-
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions, viewId?: string) => {
       if (!workspaceSlug || !userId || !viewId) return;
@@ -434,10 +450,14 @@ const useProfileIssueActions = () => {
 };
 
 const useProjectViewIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, viewId: routerViewId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  const viewId = routerViewId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
 
-  const { workspaceSlug, projectId, viewId } = useAppRouter();
-
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions) => {
       if (!workspaceSlug || !projectId) return;
@@ -517,10 +537,13 @@ const useProjectViewIssueActions = () => {
 };
 
 const useDraftIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
 
-  const { workspaceSlug, projectId } = useAppRouter();
-
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions) => {
       if (!workspaceSlug || !projectId) return;
@@ -584,10 +607,13 @@ const useDraftIssueActions = () => {
 };
 
 const useArchivedIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
 
-  const { workspaceSlug, projectId } = useAppRouter();
-
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions) => {
       if (!workspaceSlug || !projectId) return;
@@ -643,9 +669,13 @@ const useArchivedIssueActions = () => {
 };
 
 const useGlobalIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, globalViewId: routerGlobalViewId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const globalViewId = routerGlobalViewId?.toString();
+  // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.GLOBAL);
 
-  const { workspaceSlug, globalViewId } = useAppRouter();
   const fetchIssues = useCallback(
     async (loadType: TLoader, options: IssuePaginationOptions) => {
       if (!workspaceSlug || !globalViewId) return;

web/core/hooks/use-multiple-select.ts

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect, useMemo } from "react";
-// import { useRouter } from "next/navigation";
 // hooks
 import { useMultipleSelectStore } from "@/hooks/store";
 
@@ -34,7 +33,7 @@ export type TSelectionHelper = {
 export const useMultipleSelect = (props: Props) => {
   const { containerRef, disabled, entities } = props;
   // router
-  // const router = useRouter();
+  // const router = useAppRouter();
   // store hooks
   const {
     selectedEntityIds,

web/core/hooks/use-reload-confirmation.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 //TODO: remove temp flag isActive later and use showAlert as the source of truth
 const useReloadConfirmations = (isActive = true) => {
   const [showAlert, setShowAlert] = useState(false);
-  // const router = useRouter();
+  // const router = useAppRouter();
 
   // const handleBeforeUnload = useCallback(
   //   (event: BeforeUnloadEvent) => {