From fd29f8df5c1329feef2c004f1829a4d54d29e7e1 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 17 Jun 2024 17:42:13 +0530
Subject: [PATCH] fix: replace useRouter with useParams (#422)

* fix: replace useRouter with useParams

* fix: replace useRouter with useParams
---
 web/core/components/workspace/plane-badge.tsx      | 6 +++---
 web/ee/components/license/cloud-products-modal.tsx | 8 +++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/web/core/components/workspace/plane-badge.tsx b/web/core/components/workspace/plane-badge.tsx
index cdd0f2f764..e7213b48f8 100644
--- a/web/core/components/workspace/plane-badge.tsx
+++ b/web/core/components/workspace/plane-badge.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { Tooltip, Button, getButtonStyling } from "@plane/ui";
@@ -21,8 +21,8 @@ import packageJson from "package.json";
 const discoService = new DiscoService();
 
 export const PlaneBadge: React.FC = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // params
+  const { workspaceSlug } = useParams();
   // states
   const [isProPlanModalOpen, setIsProPlanModalOpen] = useState(false);
   const [isProPlanDetailsModalOpen, setProPlanDetailsModalOpen] = useState(false);
diff --git a/web/ee/components/license/cloud-products-modal.tsx b/web/ee/components/license/cloud-products-modal.tsx
index 1134ec3495..71e4143f0b 100644
--- a/web/ee/components/license/cloud-products-modal.tsx
+++ b/web/ee/components/license/cloud-products-modal.tsx
@@ -1,10 +1,8 @@
 import { FC, Fragment, useState } from "react";
 import orderBy from "lodash/orderBy";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
-// icons
 import { CheckCircle } from "lucide-react";
-// ui
 import { Dialog, Transition, Tab } from "@headlessui/react";
 // types
 import { IPaymentProduct, IPaymentProductPrice } from "@plane/types";
@@ -47,8 +45,8 @@ export type CloudProductsModalProps = {
 
 export const CloudProductsModal: FC<CloudProductsModalProps> = (props) => {
   const { isOpen, handleClose } = props;
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // params
+  const { workspaceSlug } = useParams();
   // store
   const { captureEvent } = useEventTracker();
   // fetch products