fix: issue peekoverview handled state and query parameters handlers (#4475)

space/components/issues/board-views/list/block.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 // components
 import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
 import { IssueBlockLabels } from "@/components/issues/board-views/block-labels";
@@ -21,8 +21,12 @@ type IssueListBlockProps = {
 
 export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
   const { workspaceSlug, projectId, issue } = props;
-  const { board, states, priority, labels } = useParams<any>();
   const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
   // store
   const { project } = useProject();
   const { setPeekId } = useIssueDetails();
@@ -31,12 +35,12 @@ export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
 
   const handleBlockClick = () => {
     setPeekId(issue.id);
-    const params: any = { board: board, peekId: issue.id };
-    if (states && states.length > 0) params.states = states;
-    if (priority && priority.length > 0) params.priority = priority;
-    if (labels && labels.length > 0) params.labels = labels;
-    router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
-    // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
+    let queryParams: any = { board: board, peekId: issue.id };
+    if (priority && priority.length > 0) queryParams = { ...queryParams, priority: priority };
+    if (state && state.length > 0) queryParams = { ...queryParams, state: state };
+    if (labels && labels.length > 0) queryParams = { ...queryParams, labels: labels };
+    queryParams = new URLSearchParams(queryParams).toString();
+    router.push(`/${workspaceSlug}/${projectId}?${queryParams}`);
   };
 
   return (

space/components/issues/peek-overview/layout.tsx

@@ -1,16 +1,29 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { FC, Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-// headless ui
+import { useRouter, useSearchParams } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
 // components
 import { FullScreenPeekView, SidePeekView } from "@/components/issues/peek-overview";
 // store
 import { useIssue, useIssueDetails } from "@/hooks/store";
 
-export const IssuePeekOverview: React.FC = observer((props: any) => {
-  const { workspaceSlug, projectId, peekId, board, priority, states, labels } = props;
+type TIssuePeekOverview = {
+  workspaceSlug: string;
+  projectId: string;
+  peekId: string;
+};
+
+export const IssuePeekOverview: FC<TIssuePeekOverview> = observer((props) => {
+  const { workspaceSlug, projectId, peekId } = props;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
   // states
   const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
   const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
@@ -30,13 +43,12 @@ export const IssuePeekOverview: React.FC = observer((props: any) => {
 
   const handleClose = () => {
     issueDetailStore.setPeekId(null);
-
-    const params: any = { board: board };
-    if (states && states.length > 0) params.states = states;
-    if (priority && priority.length > 0) params.priority = priority;
-    if (labels && labels.length > 0) params.labels = labels;
-    // TODO: fix this redirection
-    // router.push( encodeURI(`/${workspaceSlug?.toString()}/${projectId}`, )  { pathname: `/${workspaceSlug?.toString()}/${projectId}`, query: { ...params } });
+    let queryParams: any = { board: board };
+    if (priority && priority.length > 0) queryParams = { ...queryParams, priority: priority };
+    if (state && state.length > 0) queryParams = { ...queryParams, state: state };
+    if (labels && labels.length > 0) queryParams = { ...queryParams, labels: labels };
+    queryParams = new URLSearchParams(queryParams).toString();
+    router.push(`/${workspaceSlug}/${projectId}?${queryParams}`);
   };
 
   useEffect(() => {
@@ -56,10 +68,10 @@ export const IssuePeekOverview: React.FC = observer((props: any) => {
 
   return (
     <>
-      <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
+      <Transition.Root appear show={isSidePeekOpen} as={Fragment}>
         <Dialog as="div" onClose={handleClose}>
           <Transition.Child
-            as={React.Fragment}
+            as={Fragment}
             enter="transition-transform duration-300"
             enterFrom="translate-x-full"
             enterTo="translate-x-0"
@@ -78,10 +90,10 @@ export const IssuePeekOverview: React.FC = observer((props: any) => {
           </Transition.Child>
         </Dialog>
       </Transition.Root>
-      <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
+      <Transition.Root appear show={isModalPeekOpen} as={Fragment}>
         <Dialog as="div" onClose={handleClose}>
           <Transition.Child
-            as={React.Fragment}
+            as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
             enterTo="opacity-100"
@@ -92,7 +104,7 @@ export const IssuePeekOverview: React.FC = observer((props: any) => {
             <div className="fixed inset-0 z-20 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
           <Transition.Child
-            as={React.Fragment}
+            as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
             enterTo="opacity-100"

space/components/views/project-details.tsx

@@ -69,7 +69,9 @@ export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props)
 
   return (
     <div className="relative h-full w-full overflow-hidden">
-      {workspaceSlug && <IssuePeekOverview />}
+      {workspaceSlug && projectId && peekId && (
+        <IssuePeekOverview workspaceSlug={workspaceSlug} projectId={projectId} peekId={peekId} />
+      )}
 
       {loader && !issues ? (
         <div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>