Fix ticket loading (#295)

Author: berniceu

src/pages/tickets/adminTicketResolve.tsx

@@ -6,13 +6,15 @@ import { GetTicket, resolveTicket } from "../../redux/actions/ticketActions";
 import { useDispatch, useSelector } from "react-redux";
 import { connect } from "react-redux";
 import { toast, ToastContainer } from "react-toastify";
+import { ThreeDots } from "react-loader-spinner";
 
 const ResolveTicketPage = (props: any) => {
   const dispatch = useDispatch();
   const params = useParams();
   const [ticketId, setTicketId] = useState(params.id);
   const [adminReply, setAdminReply] = useState("");
   const ticketData = useSelector((state: any) => state.tickets?.currentTicket);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const getAllReplies = () => {
     if (!ticketData) return [];
@@ -46,13 +48,17 @@ const ResolveTicketPage = (props: any) => {
     e.preventDefault();
     if (ticketId && adminReply.trim()) {
       try {
+        setIsSubmitting(true);
         await dispatch(resolveTicket(ticketId, adminReply));
         setAdminReply("");
         await dispatch(GetTicket(ticketId));
-        toast.success("Ticket Resolved Successfully");
+        // toast.success("Ticket Resolved Successfully");
+        
       } catch (error) {
         toast.error("Failed to resolve ticket")
         console.error("Failed to resolve ticket:", error);
+      } finally{
+        setIsSubmitting(false);
       }
     }
   };
@@ -135,10 +141,14 @@ const ResolveTicketPage = (props: any) => {
                       />
                       <button
                         type="submit"
-                        disabled={!adminReply.trim()}
+                        disabled={isSubmitting}
                         className="px-4 py-2 bg-button-color dark:bg-green text-white rounded-lg "
                       >
-                        Submit Response
+                        {isSubmitting ? (
+                        <ThreeDots height="20" width="30" color="#ffffff" />
+                      ) : (
+                        "Submit Response"
+                      )}
                       </button>
                     </div>
                   </form>

src/pages/tickets/applicantTicketReply.tsx

@@ -6,13 +6,16 @@ import { GetTicket, updateTicket } from "../../redux/actions/ticketActions";
 import { useDispatch, useSelector } from "react-redux";
 import { connect } from "react-redux";
 import { toast, ToastContainer } from "react-toastify";
+import { ThreeDots } from "react-loader-spinner";
+
 
 const ReplyTicketPage = (props: any) => {
   const dispatch = useDispatch();
   const params = useParams();
   const [ticketId, setTicketId] = useState(params.id);
   const [applicantReply, setApplicantReply] = useState("");
   const ticketData = useSelector((state: any) => state.tickets?.currentTicket);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const getAllReplies = () => {
     if (!ticketData) return [];
@@ -48,16 +51,20 @@ const ReplyTicketPage = (props: any) => {
     e.preventDefault();
     if (ticketId && applicantReply.trim()) {
       try {
+        setIsSubmitting(true);
         await dispatch(updateTicket(
             ticketId,
             applicantReply
         ));
         setApplicantReply("");
         await dispatch(GetTicket(ticketId));
         // toast.success("Ticket Updated Successfully");
+        
       } catch (error) {
         toast.error("Failed to update ticket")
         console.error("Failed to update ticket:", error);
+      } finally{
+        setIsSubmitting(false);
       }
     }
   };
@@ -139,10 +146,14 @@ const ReplyTicketPage = (props: any) => {
                       />
                       <button
                         type="submit"
-                        disabled={!applicantReply.trim()}
+                        disabled={isSubmitting}
                         className="px-4 py-2 bg-button-color dark:bg-green text-white rounded-lg "
                       >
-                        Submit Response
+                        {isSubmitting ? (
+                        <ThreeDots height="20" width="30" color="#ffffff" />
+                      ) : (
+                        "Submit Response"
+                      )}
                       </button>
                     </div>
                   </form>

src/pages/tickets/createTicketModal.tsx

@@ -63,14 +63,17 @@ const CreateTicketModal = ({ isOpen, onClose, onSubmit }) => {
                       type="text"
                       value={ticket.title}
                       onChange={(e) =>
-                        setTicket((prev) => ({ ...prev, title: e.target.value }))
+                        setTicket((prev) => ({
+                          ...prev,
+                          title: e.target.value,
+                        }))
                       }
                       className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-white dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                       placeholder="Enter the subject of your ticket"
                       required
                     />
                   </div>
-  
+
                   <div>
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
                       Description <span className="text-red-500">*</span>
@@ -88,7 +91,7 @@ const CreateTicketModal = ({ isOpen, onClose, onSubmit }) => {
                       required
                     />
                   </div>
-  
+
                   <div className="flex space-x-4">
                     <button
                       className="flex bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 text-white font-medium cursor-pointer"