nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Recode some parts in search page

Browse source 
Still very messy, I know
This commit is contained in:
Lim Chee Aun 2023-07-14 13:16:41 +08:00
parent 1ef9613358
commit 42633f87ea
1 changed files with 31 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/pages/search.jsx
View file

@ -54,7 +54,7 @@ function Search(props) {
const offsetRef = useRef(0); const offsetRef = useRef(0);
useEffect(() => { useEffect(() => {
offsetRef.current = 0; offsetRef.current = 0;
}, [type]); }, [q, type]);
const scrollableRef = useRef(); const scrollableRef = useRef();
useLayoutEffect(() => { useLayoutEffect(() => {
@ -64,6 +64,16 @@ function Search(props) {
const [statusResults, setStatusResults] = useState([]); const [statusResults, setStatusResults] = useState([]);
const [accountResults, setAccountResults] = useState([]); const [accountResults, setAccountResults] = useState([]);
const [hashtagResults, setHashtagResults] = useState([]); const [hashtagResults, setHashtagResults] = useState([]);
useEffect(() => {
setStatusResults([]);
setAccountResults([]);
setHashtagResults([]);
}, [q]);
const setTypeResultsFunc = {
statuses: setStatusResults,
accounts: setAccountResults,
hashtags: setHashtagResults,
};
function loadResults(firstLoad) { function loadResults(firstLoad) {
setUiState('loading'); setUiState('loading');
@ -87,24 +97,24 @@ function Search(props) {
try { try {
const results = await masto.v2.search(params); const results = await masto.v2.search(params);
console.log(results); console.log(results);
if (type && !firstLoad) { if (type) {
if (type === 'statuses') { if (firstLoad) {
setStatusResults((prev) => [...prev, ...results.statuses]); setTypeResultsFunc[type](results[type]);
} else if (type === 'accounts') { const length = results[type]?.length;
setAccountResults((prev) => [...prev, ...results.accounts]); offsetRef.current = LIMIT;
} else if (type === 'hashtags') { setShowMore(!!length);
setHashtagResults((prev) => [...prev, ...results.hashtags]); } else {
setTypeResultsFunc[type]((prev) => [...prev, ...results[type]]);
const length = results[type]?.length;
offsetRef.current = offsetRef.current + LIMIT;
setShowMore(!!length);
} }
offsetRef.current = offsetRef.current + LIMIT;
setShowMore(!!results[type]?.length);
} else { } else {
setStatusResults(results.statuses); setStatusResults(results.statuses);
setAccountResults(results.accounts); setAccountResults(results.accounts);
setHashtagResults(results.hashtags); setHashtagResults(results.hashtags);
if (type) { offsetRef.current = 0;
offsetRef.current = LIMIT; setShowMore(false);
setShowMore(!!results[type]?.length);
}
} }
setUiState('default'); setUiState('default');
} catch (err) { } catch (err) {
@ -325,11 +335,7 @@ function Search(props) {
<p class="ui-state insignificant">The end.</p> <p class="ui-state insignificant">The end.</p>
) )
) : ( ) : (
!!( uiState === 'loading' && (
hashtagResults.length ||
accountResults.length ||
statusResults.length
) && (
<p class="ui-state"> <p class="ui-state">
<Loader abrupt /> <Loader abrupt />
</p> </p>
@ -357,7 +363,8 @@ const SearchForm = forwardRef((props, ref) => {
const { instance } = api(); const { instance } = api();
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const [searchMenuOpen, setSearchMenuOpen] = useState(false); const [searchMenuOpen, setSearchMenuOpen] = useState(false);
const [query, setQuery] = useState(searchParams.q || ''); const [query, setQuery] = useState(searchParams.get('q') || '');
const type = searchParams.get('type');
const formRef = useRef(null); const formRef = useRef(null);
const searchFieldRef = useRef(null); const searchFieldRef = useRef(null);
@ -378,9 +385,11 @@ const SearchForm = forwardRef((props, ref) => {
e.preventDefault(); e.preventDefault();
if (query) { if (query) {
setSearchParams({ const params = {
q: query, q: query,
}); };
if (type) params.type = type; // Preserve type
setSearchParams(params);
} else { } else {
setSearchParams({}); setSearchParams({});
} }