this repo has no description
Recode some parts in search page
Still very messy, I know
+31
-22
+31
-22
src/pages/search.jsx
+31
-22
src/pages/search.jsx
···
54
54
const offsetRef = useRef(0);
55
55
useEffect(() => {
56
56
offsetRef.current = 0;
57
-
}, [type]);
57
+
}, [q, type]);
58
58
59
59
const scrollableRef = useRef();
60
60
useLayoutEffect(() => {
···
64
64
const [statusResults, setStatusResults] = useState([]);
65
65
const [accountResults, setAccountResults] = useState([]);
66
66
const [hashtagResults, setHashtagResults] = useState([]);
67
+
useEffect(() => {
68
+
setStatusResults([]);
69
+
setAccountResults([]);
70
+
setHashtagResults([]);
71
+
}, [q]);
72
+
const setTypeResultsFunc = {
73
+
statuses: setStatusResults,
74
+
accounts: setAccountResults,
75
+
hashtags: setHashtagResults,
76
+
};
67
77
68
78
function loadResults(firstLoad) {
69
79
setUiState('loading');
···
87
97
try {
88
98
const results = await masto.v2.search(params);
89
99
console.log(results);
90
-
if (type && !firstLoad) {
91
-
if (type === 'statuses') {
92
-
setStatusResults((prev) => [...prev, ...results.statuses]);
93
-
} else if (type === 'accounts') {
94
-
setAccountResults((prev) => [...prev, ...results.accounts]);
95
-
} else if (type === 'hashtags') {
96
-
setHashtagResults((prev) => [...prev, ...results.hashtags]);
100
+
if (type) {
101
+
if (firstLoad) {
102
+
setTypeResultsFunc[type](results[type]);
103
+
const length = results[type]?.length;
104
+
offsetRef.current = LIMIT;
105
+
setShowMore(!!length);
106
+
} else {
107
+
setTypeResultsFunc[type]((prev) => [...prev, ...results[type]]);
108
+
const length = results[type]?.length;
109
+
offsetRef.current = offsetRef.current + LIMIT;
110
+
setShowMore(!!length);
97
111
}
98
-
offsetRef.current = offsetRef.current + LIMIT;
99
-
setShowMore(!!results[type]?.length);
100
112
} else {
101
113
setStatusResults(results.statuses);
102
114
setAccountResults(results.accounts);
103
115
setHashtagResults(results.hashtags);
104
-
if (type) {
105
-
offsetRef.current = LIMIT;
106
-
setShowMore(!!results[type]?.length);
107
-
}
116
+
offsetRef.current = 0;
117
+
setShowMore(false);
108
118
}
109
119
setUiState('default');
110
120
} catch (err) {
···
325
335
<p class="ui-state insignificant">The end.</p>
326
336
)
327
337
) : (
328
-
!!(
329
-
hashtagResults.length ||
330
-
accountResults.length ||
331
-
statusResults.length
332
-
) && (
338
+
uiState === 'loading' && (
333
339
<p class="ui-state">
334
340
<Loader abrupt />
335
341
</p>
···
357
363
const { instance } = api();
358
364
const [searchParams, setSearchParams] = useSearchParams();
359
365
const [searchMenuOpen, setSearchMenuOpen] = useState(false);
360
-
const [query, setQuery] = useState(searchParams.q || '');
366
+
const [query, setQuery] = useState(searchParams.get('q') || '');
367
+
const type = searchParams.get('type');
361
368
const formRef = useRef(null);
362
369
363
370
const searchFieldRef = useRef(null);
···
378
385
e.preventDefault();
379
386
380
387
if (query) {
381
-
setSearchParams({
388
+
const params = {
382
389
q: query,
383
-
});
390
+
};
391
+
if (type) params.type = type; // Preserve type
392
+
setSearchParams(params);
384
393
} else {
385
394
setSearchParams({});
386
395
}