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