Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Correctly manage loading state for fetching results #1471

Merged
merged 3 commits into from
Dec 15, 2024
+56 −48
Merged

fix: Correctly manage loading state for fetching results #1471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4dc3b77
fix: Correctly manage loading state for fetching results
caneppelevitor Nov 25, 2024
bb5fae2
Merge branch 'stage' of https://github.com/AletheiaFact/aletheia into…
caneppelevitor Nov 25, 2024
bce8e28
Merge branch 'stage' of https://github.com/AletheiaFact/aletheia into…
caneppelevitor Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/Home/DonationBanner.style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -27,7 +27,7 @@ const DonationBannerStyle = styled(Col)`

.banner-buttons {
display: flex;
gap: 30px;
gap: 30px;
}

.banner-content > h1 {
Expand Down Expand Up @@ -65,9 +65,9 @@ const DonationBannerStyle = styled(Col)`
font-size: 12px;
}

.close-banner {
.close-banner {
align-self: flex-start;
top: -10px;
top: -10px;
}
}
`;
Expand Down
61 changes: 34 additions & 27 deletions src/components/Home/DonationBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
13 changes: 4 additions & 9 deletions src/components/Home/DonationBanner/DonationBannerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -34,8 +30,7 @@ function DonationBannerContent({ closeClick }) {
/>
</div>
</Col>
</DonationBannerStyle >

</DonationBannerStyle>
);
}

Expand Down
3 changes: 2 additions & 1 deletion src/components/Search/OverlaySearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -38,6 +38,7 @@ const OverlaySearchInput = () => {
nameSpace: nameSpace,
});

dispatch(actions.setResultsLoading(false));
dispatch(actions.openResultsOverlay());
dispatch({
type: ActionTypes.SEARCH_OVERLAY_RESULTS,
Expand Down
13 changes: 9 additions & 4 deletions src/components/topics/TopicForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down
4 changes: 2 additions & 2 deletions src/store/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading