Fix for users api being called multiple times (#1389)

frontend/src/Editor/Comment/CommentFooter.jsx

@@ -7,7 +7,7 @@ import Button from '@/_ui/Button';
 import useShortcuts from '@/_hooks/use-shortcuts';
 import usePopover from '@/_hooks/use-popover';
 
-function CommentFooter({ editComment = '', editCommentId, handleSubmit }) {
+function CommentFooter({ users, editComment = '', editCommentId, handleSubmit }) {
   const [comment, setComment] = React.useState(editComment);
   const [loading, setLoading] = React.useState(false);
   const [open, trigger, content, setOpen] = usePopover(false);
@@ -38,7 +38,12 @@ function CommentFooter({ editComment = '', editCommentId, handleSubmit }) {
       <div className="card-footer">
         <div className="row align-items-center">
           <div className="col-8">
-            <TextareaMentions value={comment} setValue={setComment} placeholder="Type your comment here" />
+            <TextareaMentions
+              users={users}
+              value={comment}
+              setValue={setComment}
+              placeholder="Type your comment here"
+            />
           </div>
           <div className="col-1 cursor-pointer">
             <svg {...trigger} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

frontend/src/Editor/Comment/index.jsx

@@ -11,7 +11,7 @@ import usePopover from '@/_hooks/use-popover';
 import { commentsService } from '@/_services';
 import useRouter from '@/_hooks/use-router';
 
-const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads, appVersionsId }) => {
+const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads, appVersionsId, users }) => {
   const [loading, setLoading] = React.useState(true);
   const [editComment, setEditComment] = React.useState('');
   const [editCommentId, setEditCommentId] = React.useState('');
@@ -156,6 +156,7 @@ const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads,
             thread={thread}
           />
           <CommentFooter
+            users={users}
             editComment={editComment}
             editCommentId={editCommentId}
             handleSubmit={editCommentId ? handleEdit : handleSubmit}

frontend/src/Editor/Comments.jsx

@@ -1,10 +1,10 @@
 import '@/_styles/editor/comments.scss';
 
 import React from 'react';
-import { isEmpty } from 'lodash';
+import { isEmpty, capitalize } from 'lodash';
 
 import Comment from './Comment';
-import { commentsService } from '@/_services';
+import { commentsService, organizationService } from '@/_services';
 
 import useRouter from '@/_hooks/use-router';
 
@@ -12,6 +12,18 @@ const Comments = ({ newThread = {}, appVersionsId, socket }) => {
   const [threads, setThreads] = React.useState([]);
   const router = useRouter();
 
+  const [users, setUsers] = React.useState([]);
+
+  React.useEffect(() => {
+    organizationService.getUsers(null).then((data) => {
+      const _users = data.users.map((u) => ({
+        id: u.id,
+        display: `${capitalize(u.first_name)} ${capitalize(u.last_name)}`,
+      }));
+      setUsers(_users);
+    });
+  }, []);
+
   async function fetchData() {
     const { data } = await commentsService.getThreads(router.query.id, appVersionsId);
     setThreads(data);
@@ -43,6 +55,7 @@ const Comments = ({ newThread = {}, appVersionsId, socket }) => {
         fetchThreads={fetchData}
         socket={socket}
         threadId={id}
+        users={users}
         {...thread}
       />
     );

frontend/src/_ui/Mentions/index.js

@@ -1,36 +1,8 @@
 import React from 'react';
-import { capitalize } from 'lodash';
-import { organizationService } from '@/_services';
 
 import { MentionsInput, Mention } from 'react-mentions';
 
-// const { emojis } = require('./emojis.json');
-
-const Mentions = ({ value, setValue, placeholder }) => {
-  const [users, setUsers] = React.useState([]);
-
-  // TODO: move this to context etc, this loads the users x number to imports
-  React.useEffect(() => {
-    organizationService.getUsers(null).then((data) => {
-      const _users = data.users.map((u) => ({
-        id: u.id,
-        display: `${capitalize(u.first_name)} ${capitalize(u.last_name)}`,
-      }));
-      setUsers(_users);
-    });
-  }, []);
-
-  const queryEmojis = (query) => {
-    if (query.length === 0) return;
-
-    return;
-    // const matches = emojis
-    //   .filter((emoji) => {
-    //     return emoji.name.indexOf(query.toLowerCase()) > -1;
-    //   })
-    //   .slice(0, 10);
-    // return matches.map(({ emoji }) => ({ id: emoji }));
-  };
+const Mentions = ({ users, value, setValue, placeholder }) => {
   return (
     <MentionsInput
       style={{
@@ -81,65 +53,8 @@ const Mentions = ({ value, setValue, placeholder }) => {
         // }}
         appendSpaceOnAdd
       />
-      <Mention trigger=":" markup="__id__" regex={/($a)/} data={queryEmojis} appendSpaceOnAdd />
     </MentionsInput>
   );
 };
 
-// const Mentions = ({ value, setValue, placeholder }) => {
-//   const [open, trigger, content, setOpen] = usePopover(false);
-//   const handleChange = (e) => {
-//     e.stopPropagation();
-//     if (e.target.value.includes('@')) {
-//       setOpen(true);
-//     }
-//     setValue(e.target.value);
-//   };
-
-//   let conditionalProps = {};
-
-//   if (open) {
-//     conditionalProps = { ...trigger };
-//   }
-//   return (
-//     <>
-//       <Textarea
-//         {...conditionalProps}
-//         value={value}
-//         onChange={handleChange}
-//         rows="1"
-//         className="w-full form-control"
-//         placeholder={placeholder}
-//       />
-//       <div
-//         {...content}
-//         className={cx('card popover mentions-popover', {
-//           show: open,
-//           hide: !open,
-//         })}
-//       >
-//         <div className="list-group list-group-flush list-group-hoverable">
-//           <div className="list-group-item">
-//             <div className="row align-items-center">
-//               <div className="col-auto">
-//                 <a href="#">
-//                   <span className="avatar">JL</span>
-//                 </a>
-//               </div>
-//               <div className="col text-truncate">
-//                 <a href="#" className="text-body d-block">
-//                   Jeffie Lewzey
-//                 </a>
-//                 <small className="d-block text-muted text-truncate mt-n1">
-//                   justify-content:between ⇒ justify-content:space-between (#29734)
-//                 </small>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     </>
-//   );
-// };
-
 export default Mentions;