From 42633f87ea8e85d0d0d0a306764aa3bc1c237d49 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 14 Jul 2023 13:16:41 +0800
Subject: [PATCH] Recode some parts in search page

Still very messy, I know
---
 src/pages/search.jsx | 53 ++++++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 22 deletions(-)

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