diff --git a/src/components/ForumPost/ForumPost.tsx b/src/components/ForumPost/ForumPost.tsx index 61db1677d25e01987681cab3aa2607da8423f4f7..aeb24ad2d45946c3dbc8a2b4e33e7e07913b5f66 100644 --- a/src/components/ForumPost/ForumPost.tsx +++ b/src/components/ForumPost/ForumPost.tsx @@ -26,6 +26,7 @@ const ForumPost = ({ item }: props) => { const [userName, setUserName] = useState(""); const [userPic, setUserPic] = useState(""); const [isLike, setIslike] = useState(undefined); + const [isSendingLike, setIsSendingLike] = useState(false); const [commentQty, setCommentQty] = useState(item.commentCount); const [likeQty, setLikeQty] = useState(item.likeCount); @@ -117,14 +118,26 @@ const ForumPost = ({ item }: props) => { { - if (!isLike) { - await likeThread(item.id, user.id); + if (!isLike && !isSendingLike) { + setIsSendingLike(true); setIslike(true); - setLikeQty(likeQty + 1); - } else if (isLike) { - await unlikeThread(item.id, user.id); + try { + await likeThread(item.id, user.id); + setLikeQty(likeQty + 1); + } catch (e) { + setIslike(false); + } + setIsSendingLike(false); + } else if (isLike && !isSendingLike) { + setIsSendingLike(true); setIslike(false); - setLikeQty(likeQty - 1); + try { + await unlikeThread(item.id, user.id); + setLikeQty(likeQty - 1); + } catch (e) { + setIslike(true); + } + setIsSendingLike(false); } }} > diff --git a/src/screens/forum/ForumPostDetailScreen.tsx b/src/screens/forum/ForumPostDetailScreen.tsx index a96dec20a04ad3e1c4669e49edb2faedcb54a1a5..a9de410610b8ce702c9958b533323ee51f163e2b 100644 --- a/src/screens/forum/ForumPostDetailScreen.tsx +++ b/src/screens/forum/ForumPostDetailScreen.tsx @@ -1,6 +1,12 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import * as React from "react"; -import { StyleSheet, View, FlatList, Alert } from "react-native"; +import { + StyleSheet, + View, + FlatList, + Alert, + ActivityIndicator, +} from "react-native"; import Colors from "../../constants/Colors"; import Spacer from "../../components/Spacer/Spacer"; import { ForumStackScreenProps } from "../../types/navigation"; @@ -24,6 +30,7 @@ const ForumPostDetailScreen = ({ const [formComment, setFormComment] = useState(""); const [listData, setListData] = useState([]); const [forum, setForum] = useState(post); + const [sendingComment, setSendingComment] = useState(false); const fetchComments = async () => { setListData(await fetchCommentsByPostId(forum.id)); @@ -51,6 +58,13 @@ const ForumPostDetailScreen = ({ + {sendingComment && ( + + )} } ListFooterComponent={() => } @@ -62,11 +76,19 @@ const ForumPostDetailScreen = ({ placeholder={"Masukkan Komentar"} type={"comment"} onPress={async () => { - fetchComment( - (await addComments(forum.id, formComment, user.id)).id - ).then((res) => listData.unshift(res)); - Alert.alert("Komentar berhasil ditambahkan"); - setFormComment(""); + setSendingComment(true); + try { + fetchComment( + (await addComments(forum.id, formComment, user.id)).id + ).then((res) => { + listData.unshift(res); + setListData([...listData]); + }); + setFormComment(""); + } catch (e) { + Alert.alert("Oops, komentarmu gagal terkirim. Coba lagi"); + } + setSendingComment(false); }} />