From 5ac0ef6253c1dc141fd01d3367621c1d03881945 Mon Sep 17 00:00:00 2001
From: Obada Khalili <54270856+obadakhalili@users.noreply.github.com>
Date: Sun, 23 Feb 2025 07:47:03 +0200
Subject: [PATCH] Retain previous page's search params (#14176)

---
 web/app/(commonLayout)/apps/Apps.tsx               | 12 +++++++++---
 .../(commonLayout)/apps/hooks/useAppsQueryState.ts | 11 +++++++++--
 web/app/components/header/nav/index.tsx            | 14 +++++++++++---
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx
index 34a28d908e..463e9cf515 100644
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -59,8 +59,8 @@ const Apps = () => {
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: 'all',
   })
-  const { query: { tagIDs = [], keywords = '' }, setQuery } = useAppsQueryState()
-  const [isCreatedByMe, setIsCreatedByMe] = useState(false)
+  const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
+  const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe)
   const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)
   const [searchKeywords, setSearchKeywords] = useState(keywords)
   const setKeywords = useCallback((keywords: string) => {
@@ -126,6 +126,12 @@ const Apps = () => {
     handleTagsUpdate()
   }
 
+  const handleCreatedByMeChange = useCallback(() => {
+    const newValue = !isCreatedByMe
+    setIsCreatedByMe(newValue)
+    setQuery(prev => ({ ...prev, isCreatedByMe: newValue }))
+  }, [isCreatedByMe, setQuery])
+
   return (
     <>
       <div className='sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
@@ -139,7 +145,7 @@ const Apps = () => {
             className='mr-2'
             label={t('app.showMyCreatedAppsOnly')}
             isChecked={isCreatedByMe}
-            onChange={() => setIsCreatedByMe(!isCreatedByMe)}
+            onChange={handleCreatedByMeChange}
           />
           <TagFilter type='app' value={tagFilterValue} onChange={handleTagsChange} />
           <Input
diff --git a/web/app/(commonLayout)/apps/hooks/useAppsQueryState.ts b/web/app/(commonLayout)/apps/hooks/useAppsQueryState.ts
index 7f1f4ba659..dc95a4b702 100644
--- a/web/app/(commonLayout)/apps/hooks/useAppsQueryState.ts
+++ b/web/app/(commonLayout)/apps/hooks/useAppsQueryState.ts
@@ -4,18 +4,20 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 type AppsQuery = {
   tagIDs?: string[]
   keywords?: string
+  isCreatedByMe?: boolean
 }
 
 // Parse the query parameters from the URL search string.
 function parseParams(params: ReadonlyURLSearchParams): AppsQuery {
   const tagIDs = params.get('tagIDs')?.split(';')
   const keywords = params.get('keywords') || undefined
-  return { tagIDs, keywords }
+  const isCreatedByMe = params.get('isCreatedByMe') === 'true'
+  return { tagIDs, keywords, isCreatedByMe }
 }
 
 // Update the URL search string with the given query parameters.
 function updateSearchParams(query: AppsQuery, current: URLSearchParams) {
-  const { tagIDs, keywords } = query || {}
+  const { tagIDs, keywords, isCreatedByMe } = query || {}
 
   if (tagIDs && tagIDs.length > 0)
     current.set('tagIDs', tagIDs.join(';'))
@@ -26,6 +28,11 @@ function updateSearchParams(query: AppsQuery, current: URLSearchParams) {
     current.set('keywords', keywords)
   else
     current.delete('keywords')
+
+  if (isCreatedByMe)
+    current.set('isCreatedByMe', 'true')
+  else
+    current.delete('isCreatedByMe')
 }
 
 function useAppsQueryState() {
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index de98593ddd..b7ee7b6973 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { usePathname, useSearchParams, useSelectedLayoutSegment } from 'next/navigation'
 import type { INavSelectorProps } from './nav-selector'
 import NavSelector from './nav-selector'
 import classNames from '@/utils/classnames'
@@ -35,6 +35,14 @@ const Nav = ({
   const [hovered, setHovered] = useState(false)
   const segment = useSelectedLayoutSegment()
   const isActivated = Array.isArray(activeSegment) ? activeSegment.includes(segment!) : segment === activeSegment
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [linkLastSearchParams, setLinkLastSearchParams] = useState('')
+
+  useEffect(() => {
+    if (pathname === link)
+      setLinkLastSearchParams(searchParams.toString())
+  }, [pathname, searchParams])
 
   return (
     <div className={`
@@ -42,7 +50,7 @@ const Nav = ({
       ${isActivated && 'bg-components-main-nav-nav-button-bg-active shadow-md font-semibold'}
       ${!curNav && !isActivated && 'hover:bg-components-main-nav-nav-button-bg-hover'}
     `}>
-      <Link href={link}>
+      <Link href={link + (linkLastSearchParams && `?${linkLastSearchParams}`)}>
         <div
           onClick={() => setAppDetail()}
           className={classNames(`