refactor: use same code for ticket comment threads

ref: #112

Author: jon-nfc

src/components/page/ticket/TicketComment.jsx

@@ -8,17 +8,18 @@ import IconLoader from "../../IconLoader"
 import { secondsToTime } from "../../../layout/Ticket"
 import Section from "../../Section"
 import TicketCommentForm from "./TicketCommentForm"
+import TicketComments from "./TicketComments"
 
 
 
 const TicketComment = ({
-    discussion = false,
     comment_data = {},
     metadata = null,
     ticket_id = null,
     post_url,
     edit_callback = null,
-    callback_value = null
+    callback_value = null,
+    parent_comment = null,
 }) => {
 
     if( String(post_url).includes('?') ) {
@@ -30,7 +31,7 @@ const TicketComment = ({
 
     const [ comment_page_data, setCommentPageData ] = useState( comment_data )
 
-    const [ reload, setReload ] = useState(false)
+    const [ start_thread, setStartThread ] = useState( false )
 
     let comment_header = ' wrote'
 
@@ -114,20 +115,21 @@ const TicketComment = ({
 
     useEffect(() => {
 
-        if( comment_page_data ) {
+        if( comment_page_data._urls.threads && ! parent_comment) {
             apiFetch(
-                `${post_url + '/threads?page[size]=500'}`,
+                `${comment_page_data._urls.threads}?page[size]=500`,
                 (data) => {
                     setThreads(data)
                 },
                 undefined,
                 undefined,
                 false
             )
-
-            setReload(false)
         }
-    },[ reload ])
+    },[
+        comment_page_data._urls.threads,
+        parent_comment,
+    ])
 
 
 
@@ -141,7 +143,7 @@ const TicketComment = ({
             )
                 .then((result) => {
 
-                    if( result.status == 200 ) {
+                    if( result.status === 200 ) {
 
                         if( result.api_metadata !== null ) {
 
@@ -193,9 +195,9 @@ const TicketComment = ({
              <span style={{
                 cursor: 'pointer'
                 }} onClick={(e) => {
-                    setThreads( {
-                        results: []
-                    } )
+                    if(threads.results.length === 0) {
+                        setStartThread( (start_thread ? false : true) )
+                    }
             }}>
                 <IconLoader
                 name={'reply'}
@@ -242,6 +244,7 @@ const TicketComment = ({
                 comment_data={comment_page_data}
                 metadata={comment_metadata}
                 post_url = {post_url}
+                parent_id={parent_comment}
                 ticket_id={ticket_id}
                 is_edit = {true}
                 cancelbuttonOnSubmit={(e) => {
@@ -265,7 +268,6 @@ const TicketComment = ({
                     </h4>
                 )}
             >
-
                 <div className="comment row">
 
                     { comment_page_data.source &&
@@ -391,7 +393,8 @@ const TicketComment = ({
 
             </Section>
             }
-            { threads?.results[0]?.parent &&
+
+            { ((threads ? (threads.results.length > 0) : false) || start_thread ) &&
             <div
                 className="replies"
                 style={{
@@ -411,46 +414,12 @@ const TicketComment = ({
                         width = '20px'
                     />
                 </h3>
-                <ul
-                    className="replies"
-                    style={{
-                        paddingLeft: '1.6rem'
-                    }}
-                >
-                    { threads.results &&
-                    threads.results.map((comment, index) => (
-                    <li
-                        className="replies"
-                        id={comment.id}
-                        key={'comment-reply-' + comment.id}
-                    >
-                        <TicketComment
-                            comment_data={comment}
-                            discussion = {true}
-                            metadata = {comment_metadata}
-                            edit_callback = {() => {
-                                setReload(true)
-                            }}
-                        />
-                    </li>
-                    ))}
-                    <li
-                        className="replies"
-                        key={'comment-reply-form-' + comment_page_data.id}
-                    >
-                        <TicketCommentForm
-                            metadata={comment_metadata}
-                            post_url = {`${post_url}/threads`}
-                            ticket_id={ticket_id}
-                            parent_id = {comment_page_data['id'] ? comment_page_data['id'] : threads.results[0].parent}
-                            commentCallback={(response) => {
-
-                                setCommentPageData(response.api_page_data);
-
-                            }}
-                        />
-                    </li>
-                </ul>
+                <TicketComments
+                    comment_metadata = {metadata}
+                    comments_url = {comment_page_data._urls.threads}
+                    ticket_id = {ticket_id}
+                    parent_comment={comment_page_data.id}
+                />
             </div>}
         </div>
     );

src/components/page/ticket/TicketCommentForm.jsx

@@ -43,8 +43,8 @@ const TicketCommentForm = ({
         the view serializer.
     */
     const [form_data, setFormData] = useState({
-        ['comment_type']: comment_type}
-    )
+        ['comment_type']: comment_type
+    })
 
     const user = useContext(UserContext)
 
@@ -167,9 +167,11 @@ const TicketCommentForm = ({
                         e.target.reset();
 
                         // Reset the form
-                        setFormData({});
-                        setCommentType('comment')
                         setCommentMetadata(metadata)
+                        setCommentType('comment')
+                        setFormData({
+                            ['comment_type']: 'comment'
+                        });
                     }
 
                 }}

src/components/page/ticket/TicketComments.jsx

@@ -13,7 +13,8 @@ import { MARKDOWN_TICKET_LINK_UNESCAPE_RE } from "../../../functions/markdown_pl
 const TicketComments = ({
     comment_metadata,
     ticket_id,
-    comments_url
+    comments_url,
+    parent_comment = null,
 }) => {
 
     const [comments, setComments] = useState({
@@ -67,7 +68,11 @@ const TicketComments = ({
         do_fetch();
 
 
-    }, [reload, comments_url])
+    }, [
+        comments.fetch_url,
+        comments_url,
+        reload,
+    ])
 
 
     return (
@@ -100,7 +105,7 @@ const TicketComments = ({
                                 :
                                     comments.comments[key]['_urls']['_self'];
 
-                            if( url == comment_metadata.urls.self ) {
+                            if( url === comment_metadata.urls.self ) {
                                 needs_metadata = false
 
                             }
@@ -143,6 +148,8 @@ const TicketComments = ({
                                 ticket_id={ticket_id}
                                 edit_callback = {setRelaod}
                                 callback_value = {reload}
+                                comments_url = {comments_url}
+                                parent_comment={parent_comment}
                             />
                         </li>
                     )
@@ -153,7 +160,8 @@ const TicketComments = ({
                     >
                         <TicketCommentForm
                             metadata={comment_metadata}
-                            post_url = {comments_url.replace('/comment', '') }
+                            post_url = {comment_metadata.urls.self.replace('/comment', '') }
+                            parent_id={parent_comment}
                             ticket_id={ticket_id}
                             commentCallback={() => {
                                 setRelaod(reload ? false : true )