When i try to add in a new ticket, it isn't rendering on the screen properly, only after i come back to that page the ticket is added on the table fix it...import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import { getJwtToken } from "../GlobalVar/JwtToken";
import { getUserObject } from "../GlobalVar/UserObject";
import "./ProjectView.css";
import AddTicket from "../component/Modal/AddTicket";

function ProjectView() {
  const [project, setProject] = useState(null);
  const [userObject, setUserObject] = useState(null);
  const [showAddTicketModal, setShowAddTicketModal] = useState(false);
  const params = useParams();

  const handleAddMember = () => {};

  const handleAddTicket = async () => {
    setShowAddTicketModal(true);
  };
  

  const handleEditTicket = (ticketId) => {};

  const handleRemoveTicket = (ticketId) => {};

  useEffect(() => {
    const jwtToken = getJwtToken();

    const fetchProject = async () => {
      try {
        const response = await axios.get(
          `http://localhost:8080/dashboard/project/${params.projectId}`,
          {
            headers: {
              Authorization: `Bearer ${jwtToken}`,
            },
          }
        );
        setProject(response.data);
      } catch (error) {
        console.error("Error fetching project:", error);
      }
    };

    const fetchUserObject = async () => {
      try {
        const userObject = await getUserObject();
        setUserObject(userObject);
      } catch (error) {
        console.error("Error fetching user object:", error);
      }
    };

    fetchProject();
    fetchUserObject();
  }, []);


  const handleTicketAdded = (ticket) => {
    setProject((prevProject) => {
      const updatedTickets = [...prevProject.tickets, ticket];
      const updatedProject = { ...prevProject, tickets: updatedTickets };
      return updatedProject;
    });
    setShowAddTicketModal(false);
  };
  

  if (!project || !userObject) {
    return <div>Loading...</div>;
  }

  return (
    <div className="project-details">
      <h2 className="section-title">Project Details</h2>
      <table className="details-table">
        <thead>
          <tr>
            <th>Project ID</th>
            <th>Project Name</th>
            <th>Description</th>
            <th>Project Identifier</th>
            <th>Date Created</th>
            <th>Last Updated</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{project.projectId}</td>
            <td>{project.projectName}</td>
            <td>{project.description}</td>
            <td>{project.projectIdentifier}</td>
            <td>{project.dateCreated}</td>
            <td>{project.lastUpdated}</td>
          </tr>
        </tbody>
      </table>

      <h2 className="section-title">Project Associates</h2>
      <table className="associates-table">
        <thead>
          <tr>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {project.projectAssociates.map((associate) => (
            <tr key={associate}>
              <td>{associate}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <h2 className="section-title">Tickets</h2>
      <table className="tickets-table">
        <thead>
          <tr>
            <th>Ticket ID</th>
            <th>Title</th>
            <th>Description</th>
            <th>Status</th>
            {userObject.role === "ADMIN" || userObject.role === "MANAGER" ? (
              <th>Actions</th>
            ) : null}
          </tr>
        </thead>
        <tbody>
          {project.tickets.map((ticket) => (
            <tr key={ticket.id}>
              <td>{ticket.id}</td>
              <td>{ticket.ticketName}</td>
              <td>{ticket.description}</td>
              <td>{ticket.ticketStatus}</td>
              {userObject.role === "ADMIN" || userObject.role === "MANAGER" ? (
                <td>
                  <button
                    className="edit-button"
                    onClick={() => handleEditTicket(ticket.id)}
                  >
                    Edit
                  </button>
                  <button
                    className="remove-button"
                    onClick={() => handleRemoveTicket(ticket.id)}
                  >
                    Remove
                  </button>
                </td>
              ) : null}
            </tr>
          ))}
        </tbody>
      </table>

      {userObject.role === "ADMIN" || userObject.role === "MANAGER" ? (
        <div className="add-member-button-container">
          <button className="add-member-button" onClick={handleAddMember}>
            Add Member
          </button>
        </div>
      ) : null}

      {userObject.role === "ADMIN" || userObject.role === "MANAGER" ? (
        <div className="add-ticket-button-container">
          <button className="add-ticket-button" onClick={handleAddTicket}>
            Add Ticket
          </button>
        </div>
      ) : null}

      {/* Render the modal if showAddTicketModal state is true */}
      {showAddTicketModal && (
        <div className="add-ticket-container">
          <AddTicket
            onAddTicket={handleTicketAdded}
            projectId={params.projectId}
          />
        </div>
      )}
    </div>
  );
}

export default ProjectView;
this is the add ticket moda

import React, { useState } from "react";
import axios from "axios";
import { getJwtToken } from "../../GlobalVar/JwtToken";

function AddTicket({ onAddTicket, projectId }) {
  const [ticketName, setTicketName] = useState("");
  const [roles, setRoles] = useState("");
  const [description, setDescription] = useState("");
  const [priority, setPriority] = useState("");
  const [type, setType] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false); // Added isSubmitting state

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (isSubmitting) {
      return; // Prevent multiple submissions
    }

    setIsSubmitting(true); // Set isSubmitting to true when submit button is clicked

    const ticket = {
      ticketName,
      roles,
      description,
      priority,
      type,
    };

    try {
      const jwtToken = getJwtToken();
      const response = await axios.put(
        `http://localhost:8080/dashboard/project/add-ticket/${projectId}`,
        ticket,
        {
          headers: {
            Authorization: `Bearer ${jwtToken}}`,
          },
        }
      );

      setTicketName("");
      setRoles("");
      setDescription("");
      setPriority("");
      setType("");

      onAddTicket(response.data);
    } catch (error) {
      console.error("Error adding ticket:", error);
    } finally {
      setIsSubmitting(false); // Reset isSubmitting to false after submission
    }
  };

  return (
    <div>
      <h2>Add Ticket</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Ticket Name:</label>
          <input
            type="text"
            value={ticketName}
            onChange={(e) => setTicketName(e.target.value)}
            required
          />
        </div>
        <div>
          <label>Roles:</label>
          <input
            type="text"
            value={roles}
            onChange={(e) => setRoles(e.target.value)}
            required
          />
        </div>
        <div>
          <label>Description:</label>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            required
          ></textarea>
        </div>
        <div>
          <label>Priority:</label>
          <select
            value={priority}
            onChange={(e) => setPriority(e.target.value)}
            required
          >
            <option value="">Select Priority</option>
            <option value="High">High</option>
            <option value="Medium">Medium</option>
            <option value="Low">Low</option>
          </select>
        </div>
        <div>
          <label>Type:</label>
          <select
            value={type}
            onChange={(e) => setType(e.target.value)}
            required
          >
            <option value="">Select Type</option>
            <option value="Bug">Bug</option>
            <option value="Feature">Feature</option>
            <option value="Enhancement">Enhancement</option>
          </select>
        </div>
        <button type="submit" disabled={isSubmitting}>Submit</button>
      </form>
    </div>
  );
}

export default AddTicket;