Refactor QuestionsAndComments component

hotosm · Oct 6, 2020 · 555b579 · 555b579
1 parent 623e658
commit 555b579
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 32 deletions.
diff --git a/backend/services/messaging/chat_service.py b/backend/services/messaging/chat_service.py
@@ -62,7 +62,7 @@ def post_message(
             )
             db.session.commit()
             # Ensure we return latest messages after post
-            return ProjectChat.get_messages(chat_dto.project_id, 1)
+            return ProjectChat.get_messages(chat_dto.project_id, 1, 5)
         else:
             raise ValueError("User not permitted to post Comment")
 

diff --git a/frontend/src/components/projectDetail/questionsAndComments.js b/frontend/src/components/projectDetail/questionsAndComments.js
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
@@ -7,25 +7,35 @@ import { RelativeTimeWithUnit } from '../../utils/formattedRelativeTime';
 import { PaginatorLine } from '../paginator';
 import { Button } from '../button';
 import { CommentInputField } from '../comments/commentInput';
+import { MessageStatus } from '../comments/status';
 import { CurrentUserAvatar, UserAvatar } from '../user/avatar';
 import { htmlFromMarkdown, formatUserNamesToLink } from '../../utils/htmlFromMarkdown';
 import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import '@webscopeio/react-textarea-autocomplete/style.css';
 
-const PostProjectComment = ({ token, projectId, setStat }) => {
+const PostProjectComment = ({ token, projectId, updateComments }) => {
   const [comment, setComment] = useState('');
+  const [status, setStatus] = useState('ready');
+
+  useEffect(() => {
+    setStatus('ready');
+  }, [comment]);
 
   const saveComment = () => {
-    if (comment === '') {
-      return null;
+    if (comment) {
+      setStatus('sending');
+      pushToLocalJSONAPI(
+        `projects/${projectId}/comments/`,
+        JSON.stringify({ message: comment }),
+        token,
+      )
+        .then((res) => {
+          updateComments(res);
+          setComment('');
+          setStatus('messageSent');
+        })
+        .catch((e) => setStatus('error'));
     }
-    const url = `projects/${projectId}/comments/`;
-    const body = JSON.stringify({ message: comment });
-
-    pushToLocalJSONAPI(url, body, token).then((res) => {
-      setStat(true);
-      setComment('');
-    });
   };
 
   return (
@@ -37,59 +47,60 @@ const PostProjectComment = ({ token, projectId, setStat }) => {
         <CommentInputField comment={comment} setComment={setComment} enableHashtagPaste={true} />
       </div>
       <div className="fl w-20-ns w-100 tc-ns tr pt3 pr0-ns pr1">
-        <Button onClick={saveComment} className="bg-red white f5" disabled={comment === ''}>
+        <Button
+          onClick={saveComment}
+          className="bg-red white f5"
+          disabled={comment === '' || status === 'sending'}
+        >
           <FormattedMessage {...messages.post} />
         </Button>
+        <div className="pv2">
+          <MessageStatus status={status} />
+        </div>
       </div>
     </div>
   );
 };
 
 export const QuestionsAndComments = ({ projectId }) => {
   const token = useSelector((state) => state.auth.get('token'));
-  const [response, setResponse] = useState(null);
+  const [comments, setComments] = useState(null);
   const [page, setPage] = useState(1);
-  const [commentsStat, setStat] = useState(true);
 
   const handlePagination = (val) => {
     setPage(val);
-    setStat(true);
   };
 
-  useLayoutEffect(() => {
-    const getComments = async (pageNo, projectId, perPage, token) => {
-      const url = `projects/${projectId}/comments/?perPage=${perPage}&page=${pageNo}`;
-      const res = await fetchLocalJSONAPI(url, token);
-      setResponse(res);
-    };
-
-    if (commentsStat === true && projectId) {
-      getComments(page, projectId, 5, token);
-      setStat(false);
+  useEffect(() => {
+    if (projectId && page) {
+      fetchLocalJSONAPI(
+        `projects/${projectId}/comments/?perPage=5&page=${page}`,
+        token,
+      ).then((res) => setComments(res));
     }
-  }, [page, projectId, commentsStat, token]);
+  }, [page, projectId, token]);
 
   return (
     <div className="bg-tan">
       <div className="ph6-l ph4-m ph2 pb3 w-100 w-70-l">
-        {response && response.chat.length ? (
-          <CommentList comments={response.chat} />
+        {comments && comments.chat.length ? (
+          <CommentList comments={comments.chat} />
         ) : (
           <div className="pv4 blue-grey tc">
             <FormattedMessage {...messages.noComments} />
           </div>
         )}
 
-        {response && response.pagination && response.pagination.pages > 0 && (
+        {comments && comments.pagination && comments.pagination.pages > 0 && (
           <PaginatorLine
             activePage={page}
             setPageFn={handlePagination}
-            lastPage={response.pagination.pages}
+            lastPage={comments.pagination.pages}
             className="tr w-90 center pv3"
           />
         )}
         {token ? (
-          <PostProjectComment projectId={projectId} token={token} setStat={setStat} />
+          <PostProjectComment projectId={projectId} token={token} updateComments={setComments} />
         ) : (
           <div>
             <p>You need to log in to be able to post comments.</p>