error handling project and ticket submit forms

Models/Ticket.cs

@@ -28,7 +28,7 @@ namespace TicketManager.Models
         public Impact Impact { get; set; } = Impact.Undefined;
         public Difficulty Difficulty { get; set; } = Difficulty.Undefined;
         public Category Category { get; set; } = Category.Undefined;
-        public Guid CreatorId { get; set; }
+        public string CreatorId { get; set; }
 
         [Display(Name = "Project")]
         public Project Project { get; set; }

Resources/Tickets/NewTicketDTO.cs

@@ -22,7 +22,7 @@ namespace TicketManager.Resources
 
         public int Category { get; set; }
         [Required]
-        public Guid CreatorId { get; set; }
+        public string CreatorId { get; set; }
         [Required]
         public int ProjectId { get; set; }
     }

Resources/Tickets/TicketDTO.cs

@@ -47,7 +47,7 @@ namespace TicketManager.Resources
 
         public string Category { get; set; }
 
-        public Guid CreatorId { get; set; }
+        public string CreatorId { get; set; }
 
         public ProjectDTORequest Project { get; set; }
 

Resources/Tickets/TicketDTORead.cs

@@ -44,7 +44,7 @@ namespace TicketManager.Resources
 
         public string Category { get; set; }
 
-        public Guid CreatorId { get; set; }
+        public string CreatorId { get; set; }
         public List<Note> Notes { get; set; } = new List<Note>();
 
         public List<File> Files { get; set; } = new List<File>();

client/src/components/Modals/NewProjectModal.tsx

@@ -1,9 +1,11 @@
 import React, { FC, useState, FormEvent } from "react";
 import { TextField } from "@material-ui/core";
+import Modal from "./Modal";
+import Preloader from "../Preloader";
 import { useAuth0 } from "../../authentication/auth0";
 import { ProjectService } from "../../services";
-import Modal from "./Modal";
 import { getUID } from "../../authentication/helpers";
+import { today } from "../../utils/methods";
 
 interface IProps {
   show: boolean;
@@ -13,11 +15,13 @@ interface IProps {
 const NewProjectModal: FC<IProps> = ({ show, handleClose }) => {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [endingDate, setEndingDate] = useState("");
+  const [endingDate, setEndingDate] = useState(today());
+  const [loading, setLoading] = useState(false);
   const { getTokenSilently, user } = useAuth0();
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
+    setLoading(true);
     let newProject = {
       title: title,
       description: description,
@@ -27,11 +31,18 @@ const NewProjectModal: FC<IProps> = ({ show, handleClose }) => {
 
     const token = await getTokenSilently();
     const Projects = new ProjectService(token);
-    await Projects.add(newProject);
+    Projects.add(newProject).catch((err) => console.error(err));
+    setLoading(false);
+    setTitle("");
+    setDescription("");
+    setEndingDate(today());
+
     handleClose();
   };
 
-  return (
+  return loading ? (
+    <Preloader />
+  ) : (
     <Modal
       name="New Project"
       show={show}

client/src/components/Modals/NewTicketModal.tsx

@@ -15,6 +15,8 @@ import Difficulty from "../../types/enums/difficulty";
 import { TicketService } from "../../services";
 import { useAuth0 } from "../../authentication/auth0";
 import { getUID } from "../../authentication/helpers";
+import { today } from "../../utils/methods";
+import Preloader from "../Preloader";
 
 interface IProps {
   show: boolean;
@@ -29,20 +31,21 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 const NewTicketModal: FC<IProps> = ({ show, handleClose, allProjects }) => {
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [endingDate, setEndingDate] = useState("");
-
+  const { getTokenSilently, user } = useAuth0();
   const { url } = useRouteMatch();
   const id = url.split("/")[2];
   const [projectId, setProjectId] = useState(id);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [endingDate, setEndingDate] = useState(today());
   const [categoryID, setCategoryID] = useState(1);
   const [impactID, setImpactID] = useState(1);
   const [difficultyID, setDifficultyID] = useState(1);
-  const { getTokenSilently, user } = useAuth0();
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
+    setLoading(true);
     let newTicket = {
       title: title,
       description: description,
@@ -56,12 +59,21 @@ const NewTicketModal: FC<IProps> = ({ show, handleClose, allProjects }) => {
 
     const token = await getTokenSilently();
     const Tickets = new TicketService(token);
-    await Tickets.add(newTicket);
+    Tickets.add(newTicket).catch((err) => console.error(err));
+    setLoading(false);
+    setTitle("");
+    setDescription("");
+    setEndingDate(today());
+    setCategoryID(1);
+    setImpactID(1);
+    setDifficultyID(1);
     handleClose();
   };
 
   const classes = useStyles();
-  return (
+  return loading ? (
+    <Preloader />
+  ) : (
     <Modal
       name="New Ticket"
       show={show}

client/src/utils/methods.ts

@@ -5,3 +5,8 @@ const getRemainingdays: (endDate: string) => number = (endDate: string) => {
 };
 
 export default getRemainingdays;
+
+/**
+ * get today date
+ */
+export const today = (): string => new Date().toISOString().split("T")[0];