1
- import React , { useMemo , useState } from "react" ;
1
+ import React , { useMemo , useRef , useState } from "react" ;
2
2
import styled , { css } from "styled-components" ;
3
3
4
4
import Skeleton from "react-loading-skeleton" ;
5
- import { useNavigate , useParams } from "react-router-dom" ;
5
+ import { useNavigate , useParams , useSearchParams } from "react-router-dom" ;
6
6
import { useDebounce } from "react-use" ;
7
-
8
7
import { Searchbar , DropdownCascader } from "@kleros/ui-components-library" ;
9
8
10
9
import { isEmpty , isUndefined } from "utils/index" ;
@@ -39,6 +38,7 @@ const SearchBarContainer = styled.div`
39
38
const StyledSearchbar = styled ( Searchbar ) `
40
39
flex: 1;
41
40
flex-basis: 310px;
41
+
42
42
input {
43
43
font-size: 16px;
44
44
height: 45px;
@@ -53,16 +53,25 @@ const Search: React.FC = () => {
53
53
const decodedFilter = decodeURIFilter ( filter ?? "all" ) ;
54
54
const { id : searchValue , ...filterObject } = decodedFilter ;
55
55
const [ search , setSearch ] = useState ( searchValue ?? "" ) ;
56
+ const initialRenderRef = useRef ( true ) ;
56
57
const navigate = useNavigate ( ) ;
58
+ const [ searchParams ] = useSearchParams ( ) ;
59
+
57
60
useDebounce (
58
61
( ) => {
62
+ if ( initialRenderRef . current && isEmpty ( search ) ) {
63
+ initialRenderRef . current = false ;
64
+ return ;
65
+ }
66
+ initialRenderRef . current = false ;
59
67
const newFilters = isEmpty ( search ) ? { ...filterObject } : { ...filterObject , id : search } ;
60
68
const encodedFilter = encodeURIFilter ( newFilters ) ;
61
- navigate ( `${ location } /${ page } /${ order } /${ encodedFilter } ` ) ;
69
+ navigate ( `${ location } /${ page } /${ order } /${ encodedFilter } ? ${ searchParams . toString ( ) } ` ) ;
62
70
} ,
63
71
500 ,
64
72
[ search ]
65
73
) ;
74
+
66
75
const { data : courtTreeData } = useCourtTree ( ) ;
67
76
const items = useMemo ( ( ) => {
68
77
if ( ! isUndefined ( courtTreeData ) ) {
@@ -82,14 +91,15 @@ const Search: React.FC = () => {
82
91
onSelect = { ( value ) => {
83
92
const { court : _ , ...filterWithoutCourt } = decodedFilter ;
84
93
const newFilter = value === "all" ? filterWithoutCourt : { ...decodedFilter , court : value . toString ( ) } ;
85
- navigate ( `${ location } /${ page } /${ order } /${ encodeURIFilter ( newFilter ) } ` ) ;
94
+ navigate ( `${ location } /${ page } /${ order } /${ encodeURIFilter ( newFilter ) } ? ${ searchParams . toString ( ) } ` ) ;
86
95
} }
87
96
/>
88
97
) : (
89
98
< Skeleton width = { 240 } height = { 42 } />
90
99
) }
91
100
< SearchBarContainer >
92
101
< StyledSearchbar
102
+ dir = "auto"
93
103
type = "text"
94
104
placeholder = "Search By ID"
95
105
value = { search }
0 commit comments