forked from
pds.ls/pdsls
atmosphere explorer
optimize search in car explorer
+29
-9
+29
-9
src/views/car/explore.tsx
+29
-9
src/views/car/explore.tsx
···
5
5
import { fromStream, isCommit } from "@atcute/repo";
6
6
import * as TID from "@atcute/tid";
7
7
import { Title } from "@solidjs/meta";
8
-
import { createEffect, createMemo, createSignal, For, Match, Show, Switch } from "solid-js";
8
+
import {
9
+
createEffect,
10
+
createMemo,
11
+
createSignal,
12
+
For,
13
+
Match,
14
+
Show,
15
+
Switch,
16
+
untrack,
17
+
} from "solid-js";
9
18
import { Button } from "../../components/button.jsx";
10
19
import { Favicon } from "../../components/favicon.jsx";
11
20
import { JSONValue } from "../../components/json.jsx";
···
13
22
import { isTouchDevice } from "../../layout.jsx";
14
23
import { didDocCache, resolveDidDoc } from "../../utils/api.js";
15
24
import { localDateFromTimestamp } from "../../utils/date.js";
25
+
import { createDebouncedValue } from "../../utils/hooks/debounced.js";
16
26
import { createDropHandler, createFileChangeHandler, handleDragOver } from "./file-handlers.js";
17
27
import {
18
28
type Archive,
···
424
434
onRoute: (view: View) => void;
425
435
}) => {
426
436
const [filter, setFilter] = createSignal("");
437
+
const debouncedFilter = createDebouncedValue(filter, 150);
427
438
const [displayCount, setDisplayCount] = createSignal(RECORDS_PER_PAGE);
428
439
429
440
// Sort entries by TID timestamp (most recent first), non-TID entries go to the end
···
441
452
});
442
453
});
443
454
455
+
const searchableEntries = createMemo(() => {
456
+
return sortedEntries().map((entry) => ({
457
+
entry,
458
+
searchText: JSON.stringify(entry.record).toLowerCase(),
459
+
}));
460
+
});
461
+
444
462
const filteredEntries = createMemo(() => {
445
-
const f = filter().toLowerCase().trim();
463
+
const f = debouncedFilter().toLowerCase().trim();
446
464
if (!f) return sortedEntries();
447
-
return sortedEntries().filter((entry) =>
448
-
JSON.stringify(entry.record).toLowerCase().includes(f),
449
-
);
465
+
return searchableEntries()
466
+
.filter(({ searchText }) => searchText.includes(f))
467
+
.map(({ entry }) => entry);
468
+
});
469
+
470
+
createEffect(() => {
471
+
debouncedFilter();
472
+
untrack(() => setDisplayCount(RECORDS_PER_PAGE));
450
473
});
451
474
452
475
const displayedEntries = createMemo(() => {
···
475
498
<TextInput
476
499
placeholder="Filter records"
477
500
value={filter()}
478
-
onInput={(e) => {
479
-
setFilter(e.currentTarget.value);
480
-
setDisplayCount(RECORDS_PER_PAGE);
481
-
}}
501
+
onInput={(e) => setFilter(e.currentTarget.value)}
482
502
class="grow text-sm"
483
503
/>
484
504