fix: prevent duplicate submissions for write post

Author: winverse

src/containers/write/MarkdownEditorContainer.tsx

@@ -61,17 +61,21 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     tags,
   } = useSelector((state: RootState) => state.write);
   const uncachedClient = useUncachedApolloClient();
-  const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
-    client: uncachedClient,
-  });
+  const [writePost, { loading: writePostLoading }] =
+    useMutation<WritePostResponse>(WRITE_POST, {
+      client: uncachedClient,
+    });
 
   const bodyRef = useRef(initialBody);
   const titleRef = useRef(title);
   const [createPostHistory] =
     useMutation<CreatePostHistoryResponse>(CREATE_POST_HISTORY);
-  const [editPost] = useMutation<EditPostResult>(EDIT_POST, {
-    client: uncachedClient,
-  });
+  const [editPost, { loading: editPostLoading }] = useMutation<EditPostResult>(
+    EDIT_POST,
+    {
+      client: uncachedClient,
+    },
+  );
 
   const [lastSavedData, setLastSavedData] = useState({
     title: initialTitle,
@@ -148,6 +152,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
 
   const onTempSave = useCallback(
     async (notify?: boolean) => {
+      if (writePostLoading || editPostLoading) return;
       if (!title || !markdown) {
         toast.error('제목 또는 내용이 비어있습니다.');
         return;
@@ -233,6 +238,8 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
       tags,
       title,
       writePost,
+      writePostLoading,
+      editPostLoading,
     ],
   );
 
@@ -244,6 +251,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
   const uploadWithPostId = useCallback(
     async (file: File) => {
       if (!file) return;
+      if (writePostLoading || editPostLoading) return;
       let id = postIdRef.current;
       if (!id) {
         const title = titleRef.current || 'Temp Title';
@@ -278,7 +286,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
         toast.error('이미지 업로드 실패! 잠시 후 다시 시도하세요.');
       });
     },
-    [cfUpload, writePost, dispatch, history],
+    [cfUpload, writePost, dispatch, history, writePostLoading, editPostLoading],
   );
 
   const onDragDropUpload = useCallback(

src/containers/write/PublishActionButtonsContainer.tsx

@@ -59,12 +59,16 @@ const PublishActionButtonsContainer: React.FC<
 
   const uncachedClient = useUncachedApolloClient();
 
-  const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
-    client: uncachedClient,
-  });
-  const [editPost] = useMutation<EditPostResult>(EDIT_POST, {
-    client: uncachedClient,
-  });
+  const [writePost, { loading: writePostLoading }] =
+    useMutation<WritePostResponse>(WRITE_POST, {
+      client: uncachedClient,
+    });
+  const [editPost, { loading: editPostLoading }] = useMutation<EditPostResult>(
+    EDIT_POST,
+    {
+      client: uncachedClient,
+    },
+  );
 
   const variables = {
     title: options.title,
@@ -86,6 +90,7 @@ const PublishActionButtonsContainer: React.FC<
   };
 
   const onPublish = async () => {
+    if (writePostLoading || editPostLoading) return;
     if (options.title.trim() === '') {
       toast.error('제목이 비어있습니다.');
       return;
@@ -104,6 +109,7 @@ const PublishActionButtonsContainer: React.FC<
   };
 
   const onEdit = async () => {
+    if (editPostLoading) return;
     const response = await editPost({
       variables: {
         id: options.postId,

src/containers/write/PublishPreviewContainer.tsx

@@ -47,9 +47,10 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
     [changeDescription],
   );
   const uncachedClient = useUncachedApolloClient();
-  const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
-    client: uncachedClient,
-  });
+  const [writePost, { loading: writePostLoading }] =
+    useMutation<WritePostResponse>(WRITE_POST, {
+      client: uncachedClient,
+    });
   const [upload, file] = useUpload();
   const { upload: cfUpload, image } = useCFUpload();
 
@@ -103,6 +104,7 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
 
   const uploadWithPostId = useCallback(
     async (file: File) => {
+      if (!file) return;
       const id = await getValidPostId();
       if (!id) return;
       cfUpload(file, { type: 'post', refId: id });
@@ -112,9 +114,10 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
 
   useEffect(() => {
     if (!file) return;
+    if (writePostLoading) return;
     uploadWithPostId(file);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [file]);
+  }, [file, writePostLoading]);
 
   useEffect(() => {
     if (!image) return;