refactor: tickets to load comments in separate component

ref: #1 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#307 nofusscomputing/centurion_erp#319

src/components/page/ticket/Comments.jsx → src/components/page/ticket/TicketComment.jsx

@@ -2,12 +2,12 @@ import IconLoader from "../../IconLoader"
 import FieldData from "../../../functions/FieldData"
 import { useEffect, useState } from "react"
 import { apiFetch } from "../../../hooks/apiFetch"
-import TicketCommentForm from "./Comment"
+import TicketCommentForm from "./TicketCommentForm"
 import { secondsToTime } from "../../../layout/Ticket"
 
 
 
-const TicketComments = ({
+const TicketComment = ({
     discussion = false,
     comment_data = {},
     metadata = null,
@@ -58,6 +58,7 @@ const TicketComments = ({
     const comment_header_text_updated = (<span class="sub-script">Updated </span>)
 
     const comment_header_text = (
+        metadata && comment_data &&
         <div id="text">
             <FieldData
                 metadata={metadata}
@@ -288,9 +289,10 @@ const TicketComments = ({
                     />
                 </h3>
                 <ul className="replies">
-                    {threads.results.map((comment, index) => (
+                    { threads.results &&
+                    threads.results.map((comment, index) => (
                         <li className="replies">
-                            <TicketComments
+                            <TicketComment
                                 comment_data={comment}
                                 discussion = {true}
                                 metadata={metadata}
@@ -314,4 +316,4 @@ const TicketComments = ({
     );
 }
 
-export default TicketComments;
+export default TicketComment;

src/components/page/ticket/Comment.jsx → src/components/page/ticket/TicketCommentForm.jsx

@@ -79,7 +79,7 @@ const TicketCommentForm = ({
 
 
                             const response = await apiFetch(
-                                String(post_url).split('api/v2')[1],
+                                post_url,
                                 setFormError,
                                 'POST',
                                 form_data

src/components/page/ticket/TicketComments.jsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+
+import { apiFetch } from "../../../hooks/apiFetch";
+import TicketCommentForm from "./TicketCommentForm";
+import TicketComment from "./TicketComment";
+
+
+
+
+
+const TicketComments = ({
+    comment_metadata,
+    ticket_id,
+    comments_url
+}) => {
+
+    const [comments, setComments] = useState(null)
+    const [ reload, setRelaod ] = useState(false)
+
+
+    useEffect(() => {
+
+        apiFetch(
+
+            comments_url,
+            (data) =>{
+
+                setComments(data)
+
+            },
+        )
+
+    }, [reload, comments_url])
+
+
+    return (
+        (comments && comment_metadata) &&
+        <div className="comments">
+            <ul className="comments">
+                {comments.results.map((comment) => {
+
+                    return (
+                        comment_metadata &&
+                        <li>
+                            <TicketComment
+                                comment_data={comment}
+                                metadata={comment_metadata}
+                                ticket_id={ticket_id}
+                            />
+                        </li>
+                    )
+                })}
+                {comment_metadata &&
+                    <li>
+                        <TicketCommentForm
+                            metadata={comment_metadata}
+                            post_url = {comments_url}
+                            ticket_id={ticket_id}
+                            commentCallback={() => {
+                                setRelaod(reload ? false : true )
+                            }}
+                        />
+                    </li>
+                }
+            </ul>
+        </div>
+    );
+}
+
+export default TicketComments;

src/layout/Ticket.jsx

@@ -2,11 +2,11 @@ import { useEffect, useState } from "react";
 import { Link, useLoaderData, useParams } from "react-router-dom";
 import FieldData from "../functions/FieldData";
 
-import TicketComments from "../components/page/ticket/Comments";
 import { apiFetch } from "../hooks/apiFetch";
-import TicketCommentForm from "../components/page/ticket/Comment";
 import LinkedItems from "../components/page/ticket/LinkedItems";
 import RelatedTickets from "../components/page/ticket/RelatedTickets";
+import TicketComments from "../components/page/ticket/TicketComments";
+import urlBuilder from "../hooks/urlBuilder";
 
 
 
@@ -37,7 +37,6 @@ const Ticket = ({
     SetContentHeaderIcon('')
 
     const [comments, setComments] = useState(null)
-    const [ reload, setRelaod ] = useState(false)
 
     const [comment_metadata, setCommentMetaData] = useState(null);
 
@@ -82,32 +81,21 @@ const Ticket = ({
 
     useEffect(() => {
 
-        apiFetch(
-            params.module + '/ticket/' + params.model + '/' + params.pk + '/comments?page[size]=500',
-            (data) =>{
-
-                setComments(data)
-
-            },
-        )
-
-    }, [params, reload])
-
-
-    useEffect(() => {
+        if( page_data['_urls']['comments'] ) {
 
+            apiFetch(
+                page_data['_urls']['comments'],
+                (data) =>{
 
-        apiFetch(
-            params.module + '/ticket/' + params.model + '/' + params.pk + '/comments',
-            (data) =>{
+                    setCommentMetaData(data)
 
-                setCommentMetaData(data)
+                },
+                'OPTIONS'
+            )
+        }
 
-            },
-            'OPTIONS'
-        )
+    }, [page_data['_urls']['comments']])
 
-    }, [params])
 
     return (
         metadata !== null && <div className="ticket">
@@ -154,43 +142,28 @@ const Ticket = ({
                     </div>
                 </section>
 
+                { page_data['_urls']['related_tickets'] &&
                 <RelatedTickets
                     data_url={String(page_data['_urls']['related_tickets']).split('api/v2')[1]}
                     ticket_id={page_data['id']}
-                />
+                />}
 
+                { page_data['_urls']['linked_items'] &&
                 <LinkedItems
                     data_url={String(page_data['_urls']['linked_items']).split('api/v2')[1]}
-                />
-
-                <div className="comments">
-                    <ul className="comments">
-                        {(comments != null && comment_metadata != null) && comments.results.map((comment) => {
-
-                            return (
-                                <li>
-                                    <TicketComments
-                                        comment_data={comment}
-                                        metadata={comment_metadata}
-                                        ticket_id={page_data['id']}
-                                    />
-                                </li>
-                            )
-                        })}
-                        {comment_metadata != null &&
-                            <li>
-                                <TicketCommentForm
-                                    metadata={comment_metadata}
-                                    post_url = {page_data['_urls']['comments']}
-                                    ticket_id={page_data['id']}
-                                    commentCallback={() => {
-                                        setRelaod(true)
-                                    }}
-                                />
-                            </li>
-                        }
-                    </ul>
-                </div>
+                />}
+
+                { (
+                    comment_metadata
+                    && page_data['_urls']['comments']
+                    && page_data['id']
+
+                ) && 
+                <TicketComments
+                    comment_metadata = {comment_metadata}
+                    comments_url = {String(page_data['_urls']['comments']).split('api/v2')[1] + '?page[size]=500'}
+                    ticket_id = {page_data['id']}
+                />}
             </div>
 
             <div className="sidebar">