Merge pull request #1471 from AletheiaFact/fix-load-search-overlay

fix: Correctly manage loading state for fetching results
AletheiaFact · Dec 15, 2024 · 1bc46df · 1bc46df
2 parents 29c5df9 + bce8e28
commit 1bc46df
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 48 deletions.
diff --git a/src/components/Home/DonationBanner.style.tsx b/src/components/Home/DonationBanner.style.tsx
@@ -4,9 +4,9 @@ import { Col } from "antd";
 import { queries } from "../../styles/mediaQueries";
 
 const DonationBannerStyle = styled(Col)`
-        background-color: ${colors.inactive};
+    background-color: ${colors.inactive};
 
-    .close-banner { 
+    .close-banner {
         color: ${colors.primary};
         font-size: 25px;
         align-self: flex-end;
@@ -27,7 +27,7 @@ const DonationBannerStyle = styled(Col)`
 
     .banner-buttons {
         display: flex;
-        gap: 30px;   
+        gap: 30px;
     }
 
     .banner-content > h1 {
@@ -65,9 +65,9 @@ const DonationBannerStyle = styled(Col)`
             font-size: 12px;
         }
 
-        .close-banner { 
+        .close-banner {
             align-self: flex-start;
-            top: -10px;    
+            top: -10px;
         }
     }
 `;

diff --git a/src/components/Home/DonationBanner.tsx b/src/components/Home/DonationBanner.tsx
@@ -6,39 +6,46 @@ import Cookies from "js-cookie";
 import CloseOutlined from "@mui/icons-material/CloseOutlined";
 
 const closeBanner = (onClose) => {
-  onClose();
-  Cookies.set("cta_donation_banner_show", "false");
+    onClose();
+    Cookies.set("cta_donation_banner_show", "false");
 };
 
 const DonationBanner = () => {
-  const enableDonationBanner = process.env.NEXT_PUBLIC_ENABLE_BANNER_DONATION === "true";
-  const [showDonationBanner, setDonationBanner] = useState<boolean>(false);
+    const enableDonationBanner =
+        process.env.NEXT_PUBLIC_ENABLE_BANNER_DONATION === "true";
+    const [showDonationBanner, setDonationBanner] = useState<boolean>(false);
 
-  useEffect(() => {
-    const CloseBannerCookies = Cookies.get("cta_donation_banner_show");
-    if (CloseBannerCookies) {
-      return setDonationBanner(false);
-    }
-    setDonationBanner(true);
-  }, []);
+    useEffect(() => {
+        const CloseBannerCookies = Cookies.get("cta_donation_banner_show");
+        if (CloseBannerCookies) {
+            return setDonationBanner(false);
+        }
+        setDonationBanner(true);
+    }, []);
 
-  if (!enableDonationBanner) {
-    return null
-  };
+    if (!enableDonationBanner) {
+        return null;
+    }
 
-  return showDonationBanner && (
-    <DonationBannerStyle>
-      <Col className="banner-container">
-        <CloseOutlined
-          className="close-banner"
-          onClick={() => closeBanner(() => setDonationBanner(false))}
-        />
-        <DonationBannerContent
-          closeClick={() => closeBanner(() => setDonationBanner(false))}
-        />
-      </Col>
-    </DonationBannerStyle>
-  )
+    return (
+        showDonationBanner && (
+            <DonationBannerStyle>
+                <Col className="banner-container">
+                    <CloseOutlined
+                        className="close-banner"
+                        onClick={() =>
+                            closeBanner(() => setDonationBanner(false))
+                        }
+                    />
+                    <DonationBannerContent
+                        closeClick={() =>
+                            closeBanner(() => setDonationBanner(false))
+                        }
+                    />
+                </Col>
+            </DonationBannerStyle>
+        )
+    );
 };
 
 export default DonationBanner;
diff --git a/src/components/Home/DonationBanner/DonationBannerContent.tsx b/src/components/Home/DonationBanner/DonationBannerContent.tsx
@@ -8,13 +8,9 @@ import DonationBannerStyle from "../DonationBanner.style";
 function DonationBannerContent({ closeClick }) {
     const { t } = useTranslation();
     return (
-        <DonationBannerStyle >
-            <Col
-                className="banner-content"
-            >
-                <h1>
-                    {t("donationBanner:title")}
-                </h1>
+        <DonationBannerStyle>
+            <Col className="banner-content">
+                <h1>{t("donationBanner:title")}</h1>
                 <p>
                     <Trans i18nKey="donationBanner:paragraph" />
                 </p>
@@ -34,8 +30,7 @@ function DonationBannerContent({ closeClick }) {
                     />
                 </div>
             </Col>
-        </DonationBannerStyle >
-
+        </DonationBannerStyle>
     );
 }
 

diff --git a/src/components/Search/OverlaySearchInput.tsx b/src/components/Search/OverlaySearchInput.tsx
@@ -23,7 +23,7 @@ const OverlaySearchInput = () => {
     });
 
     const handleInputSearch = async (name) => {
-        dispatch(actions.isFetchingResults());
+        dispatch(actions.setResultsLoading(true));
         dispatch(actions.openResultsOverlay());
         dispatch({
             type: ActionTypes.SET_SEARCH_OVERLAY_NAME,
@@ -38,6 +38,7 @@ const OverlaySearchInput = () => {
                 nameSpace: nameSpace,
             });
 
+        dispatch(actions.setResultsLoading(false));
         dispatch(actions.openResultsOverlay());
         dispatch({
             type: ActionTypes.SEARCH_OVERLAY_RESULTS,

diff --git a/src/components/topics/TopicForm.tsx b/src/components/topics/TopicForm.tsx
@@ -103,20 +103,25 @@ const TopicForm = ({
                     }}
                     render={({ field: { onChange, value } }) => (
                         <CssVarsProvider>
-
                             <FormControl sx={{ width: 655 }}>
                                 <Autocomplete
                                     freeSolo
                                     multiple
                                     placeholder={t("topics:placeholder")}
                                     options={options}
-                                    onInputChange={(_, inputValue) => fetchOptions(inputValue)}
+                                    onInputChange={(_, inputValue) =>
+                                        fetchOptions(inputValue)
+                                    }
                                     onChange={(_, selectedValues) => {
                                         onChange(selectedValues);
                                         setInputValue(selectedValues);
                                     }}
-                                    getOptionLabel={(option) => option.label || ""}
-                                    isOptionEqualToValue={(option, value) => option.value === value.value}
+                                    getOptionLabel={(option) =>
+                                        option.label || ""
+                                    }
+                                    isOptionEqualToValue={(option, value) =>
+                                        option.value === value.value
+                                    }
                                     loading={isLoading}
                                     endDecorator={
                                         isLoading ? (

diff --git a/src/store/actions.ts b/src/store/actions.ts
@@ -2,9 +2,9 @@ import { Content } from "../types/Content";
 import { ActionTypes } from "./types";
 
 const actions = {
-    isFetchingResults: () => ({
+    setResultsLoading: (isFetching) => ({
         type: ActionTypes.RESULTS_LOADING,
-        isFetching: true,
+        isFetching,
     }),
     openResultsOverlay: () => ({
         type: ActionTypes.RESULTS_OVERLAY_VISIBLE,