jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(market-card.tsx): set loading state to true when handleLike function is called to provide visual feedback to the user

Browse source 
fix(market-card.tsx): set loading state to false after postLikeComponent promise is resolved or rejected to stop the loading state
fix(market-card.tsx): disable the like button when loading state is true or authorized state is false to prevent multiple requests and provide visual feedback to the user
This commit is contained in:
anovazzi1 2023-11-13 16:26:06 -03:00
commit 7b19cce2f7
1 changed files with 5 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/pages/StorePage/components/market-card.tsx
View file

@ -95,6 +95,7 @@ export const MarketCardComponent = ({
}
function handleLike() {
setLoading(true);
if (liked_by_user !== undefined || liked_by_user !== null) {
const temp = liked_by_user;
const tempNum = likes_count;
@ -107,6 +108,7 @@ export const MarketCardComponent = ({
console.log(data.id);
postLikeComponent(data.id)
.catch((error) => {
setLoading(false);
console.error(error);
setLiked_by_user(temp);
setLikes_count(tempNum);
@ -116,6 +118,7 @@ export const MarketCardComponent = ({
});
})
.then((response) => {
setLoading(false);
setLikes_count(response.likes_count);
setLiked_by_user(response.liked_by_user);
});
@ -194,6 +197,7 @@ export const MarketCardComponent = ({
content={authorized ? "Like" : "Please review your API key."}
>
<Button
disabled={loading || !authorized}
variant="ghost"
size="xs"
className={
@ -201,7 +205,7 @@ export const MarketCardComponent = ({
(!authorized ? " cursor-not-allowed" : "")
}
onClick={() => {
if (authorized) handleLike();
handleLike();
}}
>
<IconComponent