feat(client): post comment without reload page

use `alert` to show error message when post comment failed.
walinejs · Dec 19, 2020 · 353a14c · 353a14c
1 parent f57a2ce
commit 353a14c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/packages/client/src/App.js b/packages/client/src/App.js
@@ -32,9 +32,22 @@ function App({boxConfig, listConfig, copyRight}) {
     })).catch(_ => dispatch({loading: false}));
   }, [page, data]);
 
-  const onSubmit = useCallback(() => {
-    window.location.reload();
-  }, []);
+  const onSubmit = useCallback(comment => {
+    if(comment.rid) {
+      const cmt = data.find(({objectId}) => objectId === comment.rid);
+      if(!cmt) {
+        return;
+      }
+      if(!Array.isArray(cmt.children)) {
+        cmt.children = [];
+      }
+      cmt.children.push(comment);
+    } else {
+      data.unshift(comment);
+    }
+
+    dispatch({data: Array.from(data)});
+  }, [data]);
 
   return (
     <div className="v" data-class="v">

diff --git a/packages/client/src/components/CommentBox.js b/packages/client/src/components/CommentBox.js
@@ -115,7 +115,7 @@ export default function({
   replyUser, 
   rootId,
   serverURL,
-  onCanelReply,
+  onCancelReply,
   onSubmit
 }) {
   const inputsRef = {
@@ -187,12 +187,21 @@ export default function({
     setSubmitting(true);
     postComment({serverURL, comment}).then(resp => {
       setSubmitting(false);
-      onSubmit(resp);
       store.setItem({
         nick: comment.nick,
         link: comment.link,
         mail: comment.mail
       });
+
+      if(resp.errmsg) {
+        return alert(resp.errmsg);
+      }
+      onSubmit(resp.data);
+      editorRef.current.value = '';
+      setPreviewText('');
+      if(replyId) {
+        onCancelReply();
+      }
     }, _ => setSubmitting(false));
   }, [comment]);
 
@@ -218,7 +227,7 @@ export default function({
           <p 
             className="cancel-reply text-right" 
             title={ctx.locale.cancelReply} 
-            onClick={onCanelReply}
+            onClick={onCancelReply}
           >
             <CancelReplyIcon />
           </p>

diff --git a/packages/client/src/components/CommentCard.js b/packages/client/src/components/CommentCard.js
@@ -54,7 +54,7 @@ export default function CommentCard({comment, boxConfig, rootId, onSubmit}) {
               replyId={reply && reply.objectId}
               replyUser={reply && reply.nick} 
               rootId={rootId}
-              onCanelReply={_ => setReply(null)} 
+              onCancelReply={_ => setReply(null)} 
               onSubmit={onSubmit} 
             />
           </div>

diff --git a/packages/client/src/utils/fetch.js b/packages/client/src/utils/fetch.js
@@ -21,7 +21,7 @@ export function postComment({serverURL, comment}) {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(comment)
-  });
+  }).then(resp => resp.json());
 }
 
 export function fetchVisitCount({serverURL, path}) {