Skip to content

Commit 7a39b32

Browse files
jdollejdolle
authored
fix: input cursor reset for org and project (#7067)
1 parent ae9df6b commit 7a39b32

File tree

3 files changed

+95
-80
lines changed

3 files changed

+95
-80
lines changed

‎.changeset/pretty-toes-laugh.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'hive': patch
3+
---
4+
5+
Fix input cursor reset for org and project

‎packages/web/app/src/pages/organization.tsx‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactElement, useMemo, useRef } from 'react';
1+
import { ChangeEvent, ReactElement, useCallback, useMemo, useRef } from 'react';
22
import { endOfDay, formatISO, startOfDay } from 'date-fns';
33
import * as echarts from 'echarts';
44
import ReactECharts from 'echarts-for-react';
@@ -352,6 +352,46 @@ function OrganizationPageContent(
352352
return <QueryError organizationSlug={props.organizationSlug} error={query.error} />;
353353
}
354354

355+
const onSearchChange = useCallback(
356+
(event: ChangeEvent<HTMLInputElement>) => {
357+
void router.navigate({
358+
search(params) {
359+
return {
360+
...params,
361+
search: event.target.value,
362+
};
363+
},
364+
replace: true,
365+
});
366+
},
367+
[router],
368+
);
369+
370+
const onRequestsValueChange = useCallback(
371+
(value: string) => {
372+
void router.navigate({
373+
search(params) {
374+
return {
375+
...params,
376+
sortBy: value,
377+
};
378+
},
379+
});
380+
},
381+
[router],
382+
);
383+
384+
const onSortClick = useCallback(() => {
385+
void router.navigate({
386+
search(params) {
387+
return {
388+
...params,
389+
sortOrder: props.sortOrder === 'asc' ? 'desc' : 'asc',
390+
};
391+
},
392+
});
393+
}, [router, props.sortOrder]);
394+
355395
return (
356396
<OrganizationLayout
357397
page={Page.Overview}
@@ -372,34 +412,13 @@ function OrganizationPageContent(
372412
<Input
373413
type="search"
374414
placeholder="Search..."
375-
value={props.search}
376-
onChange={event => {
377-
void router.navigate({
378-
search(params) {
379-
return {
380-
...params,
381-
search: event.target.value,
382-
};
383-
},
384-
});
385-
}}
415+
defaultValue={props.search}
416+
onChange={onSearchChange}
386417
className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
387418
/>
388419
</div>
389420
<Separator orientation="vertical" className="mx-4 h-8" />
390-
<Select
391-
value={props.sortBy ?? 'requests'}
392-
onValueChange={value => {
393-
void router.navigate({
394-
search(params) {
395-
return {
396-
...params,
397-
sortBy: value,
398-
};
399-
},
400-
});
401-
}}
402-
>
421+
<Select value={props.sortBy ?? 'requests'} onValueChange={onRequestsValueChange}>
403422
<SelectTrigger className="hover:bg-accent bg-transparent">
404423
{props.sortBy === 'versions'
405424
? 'Schema Versions'
@@ -426,21 +445,7 @@ function OrganizationPageContent(
426445
</SelectItem>
427446
</SelectContent>
428447
</Select>
429-
<Button
430-
className="shrink-0"
431-
variant="outline"
432-
size="icon"
433-
onClick={() => {
434-
void router.navigate({
435-
search(params) {
436-
return {
437-
...params,
438-
sortOrder: props.sortOrder === 'asc' ? 'desc' : 'asc',
439-
};
440-
},
441-
});
442-
}}
443-
>
448+
<Button className="shrink-0" variant="outline" size="icon" onClick={onSortClick}>
444449
{props.sortOrder === 'asc' ? (
445450
<MoveUpIcon className="size-4" />
446451
) : (

‎packages/web/app/src/pages/project.tsx‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactElement, useMemo, useRef } from 'react';
1+
import { ChangeEvent, ReactElement, useCallback, useMemo, useRef } from 'react';
22
import { endOfDay, formatISO, startOfDay } from 'date-fns';
33
import * as echarts from 'echarts';
44
import ReactECharts from 'echarts-for-react';
@@ -314,6 +314,46 @@ const ProjectsPageContent = (
314314
);
315315
}
316316

317+
const onSearchChange = useCallback(
318+
(event: ChangeEvent<HTMLInputElement>) => {
319+
void router.navigate({
320+
search(params) {
321+
return {
322+
...params,
323+
search: event.target.value,
324+
};
325+
},
326+
replace: true,
327+
});
328+
},
329+
[router],
330+
);
331+
332+
const onRequestsValueChange = useCallback(
333+
(value: string) => {
334+
void router.navigate({
335+
search(params) {
336+
return {
337+
...params,
338+
sortBy: value,
339+
};
340+
},
341+
});
342+
},
343+
[router],
344+
);
345+
346+
const onSortClick = useCallback(() => {
347+
void router.navigate({
348+
search(params) {
349+
return {
350+
...params,
351+
sortOrder: props.sortOrder === 'asc' ? 'desc' : 'asc',
352+
};
353+
},
354+
});
355+
}, [router, props.sortOrder]);
356+
317357
return (
318358
<div className="grow">
319359
<div className="flex flex-row items-center justify-between py-6">
@@ -328,34 +368,13 @@ const ProjectsPageContent = (
328368
<Input
329369
type="search"
330370
placeholder="Search..."
331-
value={props.search}
332-
onChange={event => {
333-
void router.navigate({
334-
search(params) {
335-
return {
336-
...params,
337-
search: event.target.value,
338-
};
339-
},
340-
});
341-
}}
371+
defaultValue={props.search}
372+
onChange={onSearchChange}
342373
className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
343374
/>
344375
</div>
345376
<Separator orientation="vertical" className="mx-4 h-8" />
346-
<Select
347-
value={props.sortBy ?? 'requests'}
348-
onValueChange={value => {
349-
void router.navigate({
350-
search(params) {
351-
return {
352-
...params,
353-
sortBy: value,
354-
};
355-
},
356-
});
357-
}}
358-
>
377+
<Select value={props.sortBy ?? 'requests'} onValueChange={onRequestsValueChange}>
359378
<SelectTrigger className="hover:bg-accent bg-transparent">
360379
{props.sortBy === 'versions'
361380
? 'Schema Versions'
@@ -382,21 +401,7 @@ const ProjectsPageContent = (
382401
</SelectItem>
383402
</SelectContent>
384403
</Select>
385-
<Button
386-
className="shrink-0"
387-
variant="outline"
388-
size="icon"
389-
onClick={() => {
390-
void router.navigate({
391-
search(params) {
392-
return {
393-
...params,
394-
sortOrder: props.sortOrder === 'asc' ? 'desc' : 'asc',
395-
};
396-
},
397-
});
398-
}}
399-
>
404+
<Button className="shrink-0" variant="outline" size="icon" onClick={onSortClick}>
400405
{props.sortOrder === 'asc' ? (
401406
<MoveUpIcon className="size-4" />
402407
) : (

0 commit comments

Comments
 (0)