From 99ae14defad544152326130e6741f1b0074176a8 Mon Sep 17 00:00:00 2001
From: Siddharth Tiwari <siddharthtiwarikreplind@gmail.com>
Date: Thu, 15 Feb 2024 18:23:12 +0530
Subject: [PATCH] chore: use URL func to create url

---
 apps/pay/components/Memo/index.tsx            | 43 ++++++++++--------
 apps/pay/components/ParsePOSPayment/index.tsx | 44 ++++++++++++-------
 2 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/apps/pay/components/Memo/index.tsx b/apps/pay/components/Memo/index.tsx
index 2276dc9ce26..4a23b621bd5 100644
--- a/apps/pay/components/Memo/index.tsx
+++ b/apps/pay/components/Memo/index.tsx
@@ -7,8 +7,6 @@ import { ACTIONS, ACTION_TYPE } from "../../app/reducer"
 
 import styles from "./memo.module.css"
 
-import { extractSearchParams } from "@/utils/utils"
-
 interface Props {
   state: React.ComponentState
   dispatch: React.Dispatch<ACTION_TYPE>
@@ -17,30 +15,37 @@ interface Props {
 const Memo = ({ state, dispatch }: Props) => {
   const searchParams = useSearchParams()
   const { username } = useParams()
-  const { amount, sats, unit, memo, display } = extractSearchParams(searchParams)
+  const amount = searchParams.get("amount") || "0"
+  const sats = searchParams.get("sats") || "0"
+  const display = searchParams.get("display") || "USD"
+  const memo = searchParams.get("memo") || ""
 
+  const unit = searchParams.get("unit")
   const [openModal, setOpenModal] = React.useState<boolean>(false)
   const [note, setNote] = React.useState<string>(memo?.toString() || "")
 
   const handleSetMemo = () => {
     if (unit === "SAT" || unit === "CENT") {
-      window.history.pushState(
-        {},
-        "",
-        `${username}?${new URLSearchParams({
-          amount: amount,
-          sats: sats,
-          unit: unit,
-          memo: note,
-          display,
-        }).toString()}`,
-      )
+      const params = new URLSearchParams({
+        amount,
+        sats,
+        unit,
+        memo: note,
+        display,
+      })
+
+      const currentUrl = new URL(window.location.toString())
+      currentUrl.search = params.toString()
+      window.history.pushState({}, "", currentUrl.toString())
     } else {
-      window.history.pushState(
-        {},
-        "",
-        `${username}?${new URLSearchParams({ memo: note, display }).toString()}`,
-      )
+      const params = new URLSearchParams({
+        memo: note,
+        display,
+      })
+
+      const currentUrl = new URL(window.location.toString())
+      currentUrl.search = params.toString()
+      window.history.pushState({}, "", currentUrl.toString())
     }
     handleClose()
   }
diff --git a/apps/pay/components/ParsePOSPayment/index.tsx b/apps/pay/components/ParsePOSPayment/index.tsx
index ef423ead325..82920da076c 100644
--- a/apps/pay/components/ParsePOSPayment/index.tsx
+++ b/apps/pay/components/ParsePOSPayment/index.tsx
@@ -103,15 +103,19 @@ function ParsePayment({
       username: initialUsername,
     }
     if (initialQuery !== newQuery) {
-      const newUrl = `${username}?${new URLSearchParams({
+      const params = new URLSearchParams({
         amount: initialAmount,
         sats: initialSats,
         unit: initialUnit,
         memo: memo ?? "",
         display: initialDisplay,
         currency: defaultWalletCurrency,
-      }).toString()}`
-      router.replace(newUrl, {
+      })
+      const newUrl = new URL(window.location.toString())
+      newUrl.pathname = `/${username}`
+      newUrl.search = params.toString()
+
+      router.replace(newUrl.toString(), {
         scroll: true,
       })
     }
@@ -144,16 +148,19 @@ function ParsePayment({
   const toggleCurrency = () => {
     const newUnit = unit === AmountUnit.Sat ? AmountUnit.Cent : AmountUnit.Sat
     prevUnit.current = (unit as AmountUnit) || AmountUnit.Cent
-    router.replace(
-      `${username}?${new URLSearchParams({
-        currency: defaultWalletCurrency,
-        unit: newUnit,
-        memo,
-        display,
-        amount,
-        sats,
-      }).toString()}`,
-    )
+    const params = new URLSearchParams({
+      currency: defaultWalletCurrency,
+      unit: newUnit,
+      memo,
+      display,
+      amount,
+      sats,
+    })
+
+    const newUrl = new URL(window.location.toString())
+    newUrl.pathname = `/${username}`
+    newUrl.search = params.toString()
+    router.replace(newUrl.toString())
   }
 
   // Update Params From Current Amount
@@ -200,14 +207,17 @@ function ParsePayment({
       amount: amt,
       sats: satsAmt,
       currency: defaultWalletCurrency,
-      unit: unit,
-      memo: memo,
-      display: display,
+      unit,
+      memo,
+      display,
     }
 
     const initialQuery = extractSearchParams(searchParams)
     if (initialQuery !== newQuery && !skipRouterPush) {
-      router.replace(`${username}?${new URLSearchParams(newQuery).toString()}`)
+      const newUrl = new URL(window.location.toString())
+      newUrl.pathname = `/${username}`
+      newUrl.search = new URLSearchParams(newQuery).toString()
+      router.replace(newUrl.toString())
     }
   }
   // eslint-disable-next-line react-hooks/exhaustive-deps