diff --git a/taehui-fe/src/avatar/ModifyAvatarView.tsx b/taehui-fe/src/avatar/ModifyAvatarView.tsx index d9dee7d..262ae2b 100644 --- a/taehui-fe/src/avatar/ModifyAvatarView.tsx +++ b/taehui-fe/src/avatar/ModifyAvatarView.tsx @@ -1,15 +1,15 @@ import { observer } from "mobx-react-lite"; import { useLayoutEffect, useMemo, useState } from "react"; -import { Button, Col, Input, Row } from "reactstrap"; -import { toast } from "react-toastify"; -import ReactTextareaAutosize from "react-textarea-autosize"; -import { getMillis } from "taehui-ts/date"; -import { useTo } from "taehui-ts/fe-utility"; import { useTranslation } from "react-i18next"; -import Swal from "sweetalert2"; - +import ReactTextareaAutosize from "react-textarea-autosize"; +import { toast } from "react-toastify"; +import { Button, Col, Input, Row } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import { wwwAXIOS } from "src/Www"; +import { getMillis } from "taehui-ts/date"; +import { useTo } from "taehui-ts/fe-utility"; + +import usePutAvatar from "./usePutAvatar"; export default observer(() => { const { @@ -29,10 +29,6 @@ const to = useTo(); - const onQuit = () => { - to("/"); - }; - const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]); useLayoutEffect(() => { @@ -41,6 +37,8 @@ } }, [to, totem]); + const { mutate: putAvatar } = usePutAvatar(); + return ( @@ -151,39 +149,13 @@ color="success" onClick={async () => { if (avatarCipher && avatarName && (!fax || isValidFax)) { - const { status, data } = await wwwAXIOS.put( - "/avatar", - { - avatarCipher, - avatarCipherModified, - avatarName, - fax, - avatarIntro, - }, - { - headers: { - millis: getMillis(), - totem, - }, - }, - ); - switch (status) { - case 204: - if (data) { - await Swal.fire( - t("doModifyAvatar"), - t("doModifiedAvatar"), - "success", - ); - window.location.href = "/"; - } else { - onQuit(); - } - break; - case 403: - toast.error(t("failedValidateCipher")); - break; - } + putAvatar({ + avatarCipher, + avatarCipherModified, + avatarName, + fax, + avatarIntro, + }); } else { toast.error(t("failedValidation")); } @@ -193,7 +165,12 @@ - diff --git a/taehui-fe/src/avatar/usePutAvatar.ts b/taehui-fe/src/avatar/usePutAvatar.ts new file mode 100644 index 0000000..3b6b5c9 --- /dev/null +++ b/taehui-fe/src/avatar/usePutAvatar.ts @@ -0,0 +1,70 @@ +import { useMutation } from "@tanstack/react-query"; +import { useTranslation } from "react-i18next"; +import Swal from "sweetalert2"; +import { toast } from "react-toastify"; +import { getMillis } from "taehui-ts/date"; +import { useTo } from "taehui-ts/fe-utility"; + +import { wwwAXIOS } from "src/Www"; +import { useAvatarStore } from "src/Stores"; + +export default function usePutAvatar() { + const { t } = useTranslation(); + + const { totem, setSession, saveTotem } = useAvatarStore(); + + const to = useTo(); + + return useMutation({ + mutationFn: async ({ + avatarCipher, + avatarCipherModified, + avatarName, + fax, + avatarIntro, + }: { + avatarCipher: string; + avatarCipherModified: string; + avatarName: string; + fax: string; + avatarIntro: string; + }) => { + const { data } = await wwwAXIOS.put( + "/avatar", + { + avatarCipher, + avatarCipherModified, + avatarName, + fax, + avatarIntro, + }, + { + headers: { + millis: getMillis(), + totem, + }, + }, + ); + return data; + }, + onSuccess: async (data) => { + if (data) { + await Swal.fire(t("doModifyAvatar"), t("doModifiedAvatar"), "success"); + setSession({ + totem: "", + avatarID: "", + avatarName: "'", + level: 0, + fax: "", + avatarIntro: "", + }); + saveTotem(); + } else { + to("/"); + } + }, + onError: () => { + toast.error(t("failedValidateCipher")); + }, + }); +} diff --git a/taehui-fe/src/commentary/CommentaryItem.tsx b/taehui-fe/src/commentary/CommentaryItem.tsx index 355a377..c01a202 100644 --- a/taehui-fe/src/commentary/CommentaryItem.tsx +++ b/taehui-fe/src/commentary/CommentaryItem.tsx @@ -5,9 +5,9 @@ import { Button, Col, Collapse, Input, ListGroupItem, Row } from "reactstrap"; import { getDatetime } from "taehui-ts/date"; -import { wwwAXIOS } from "src/Www"; import { CommentaryAPICommentary } from "src/wwwAPI"; -import useWipeCommentary from "./useWipeCommentary"; +import useWipeCommentary from "src/commentary/useWipeCommentary"; +import usePutCommentary from "src/commentary/usePutCommentary"; const CommentaryItem = ({ commentary: { commentaryID, avatarName, text, date }, @@ -21,6 +21,7 @@ const [inputText, setInputText] = useState(""); const { mutate: wipeCommentary } = useWipeCommentary(); + const { mutate: putCommentary } = usePutCommentary(); return ( @@ -70,19 +71,11 @@ color="warning" onClick={async () => { if (avatarCipher && inputText) { - const { status } = await wwwAXIOS.put(`/commentary`, { + putCommentary({ commentaryID, avatarCipher, text: inputText, }); - switch (status) { - case 204: - window.location.reload(); - break; - case 403: - toast.error(t("failedValidateCipher")); - break; - } } else { toast.error(t("failedValidation")); } diff --git a/taehui-fe/src/commentary/usePutCommentary.ts b/taehui-fe/src/commentary/usePutCommentary.ts new file mode 100644 index 0000000..80af38c --- /dev/null +++ b/taehui-fe/src/commentary/usePutCommentary.ts @@ -0,0 +1,35 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { wwwAXIOS } from "src/Www"; +import { toast } from "react-toastify"; +import { useTranslation } from "react-i18next"; + +export default function usePutCommentary() { + const queryClient = useQueryClient(); + + const { t } = useTranslation(); + + return useMutation({ + mutationFn: async ({ + commentaryID, + avatarCipher, + text, + }: { + commentaryID: number; + avatarCipher: string; + text: string; + }) => { + await wwwAXIOS.put("/commentary", { + commentaryID, + avatarCipher, + text, + }); + }, + onSuccess: async () => { + await queryClient.invalidateQueries({ queryKey: ["commentary"] }); + }, + onError: () => { + toast.error(t("failedValidateCipher")); + }, + }); +} diff --git a/taehui-fe/src/forum/CommentItem.tsx b/taehui-fe/src/forum/CommentItem.tsx index 6b4a5be..d8d33b3 100644 --- a/taehui-fe/src/forum/CommentItem.tsx +++ b/taehui-fe/src/forum/CommentItem.tsx @@ -12,6 +12,7 @@ import { wwwAXIOS } from "src/Www"; import AvatarTitle from "src/AvatarTitle"; import useWipeComment from "./useWipeComment"; +import usePutComment from "./usePutComment"; export default observer( ({ @@ -46,6 +47,7 @@ ); const { mutate: wipeComment } = useWipeComment(); + const { mutate: putComment } = usePutComment(); return (
@@ -76,19 +78,7 @@ color="warning" onClick={async () => { if (inputText) { - const { status } = await wwwAXIOS.put( - `/comment/${commentID}`, - { text: inputText }, - { - headers: { - millis: getMillis(), - totem, - }, - }, - ); - if (status === 204) { - window.location.reload(); - } + putComment({ commentID, text: inputText }); } else { toast.error(t("failedValidation")); } diff --git a/taehui-fe/src/forum/PostEssayView.tsx b/taehui-fe/src/forum/PostEssayView.tsx index 37fb637..6a051fa 100644 --- a/taehui-fe/src/forum/PostEssayView.tsx +++ b/taehui-fe/src/forum/PostEssayView.tsx @@ -29,9 +29,10 @@ import usePutAutoEssay from "src/forum/usePutAutoEssay"; import withTotem from "src/withTotem"; import useGetForum from "src/forum/useGetForum"; +import usePutEssay from "src/forum/usePutEssay"; export default withTotem( - observer(({ mode }: { mode: "w" | "m" }) => { + observer(() => { const { isTitleTextFilled, title, @@ -65,6 +66,7 @@ const { mutate: postAutoEssay } = usePostAutoEssay(); const { mutate: putAutoEssay } = usePutAutoEssay(); + const { mutate: putEssay } = usePutEssay(forumID); const editView = useRef(null); const textView = useRef(null); @@ -129,11 +131,11 @@ }, [avatarViewHeight, titleViewHeight, windowHeight]); useEffect(() => { - if (mode === "w") { + if (!essayID) { setTitle(""); setText(""); } - }, [mode, setText, setTitle]); + }, [essayID, setText, setTitle]); useEffect(() => { const postAutoEssaysID = setInterval(async () => { @@ -377,7 +379,22 @@ {t("viewEditedEssay")} - {mode === "w" && ( + {essayID ? ( + + + + ) : ( - - )}