removed redundant useless code

Author: ksraj123

src/assets/svgs/Closed.svg

@@ -0,0 +1,34 @@
+import React from "react";
+import Badge from "react-bootstrap/Badge";
+
+const BadgeElement = (props) => {
+  let badgeVariant = null;
+  switch (props.ticketState) {
+    case "Open":
+      badgeVariant = "primary";
+      break;
+    case "Solved":
+      badgeVariant = "success";
+      break;
+    case "OnHold":
+      badgeVariant = "secondary";
+      break;
+    case "Pending":
+      badgeVariant = "warning";
+      break;
+    case "Closed":
+      badgeVariant = "danger";
+      break;
+    default:
+      badgeVariant = "Open";
+  }
+  return (
+    <div>
+      <Badge pill variant={badgeVariant}>
+        {props.ticketState}
+      </Badge>
+    </div>
+  );
+};
+
+export default BadgeElement;

src/assets/svgs/OnHold.svg

@@ -0,0 +1,48 @@
+const customStyles = {
+  table: {
+    style: {
+      width: "87vw",
+      height: "60vh",
+    },
+  },
+  header: {
+    style: {
+      display: "none",
+      fontFamily: "Inter",
+      fontWeight: "bold",
+      fontSize: "1.5rem",
+      paddingLeft: "20px",
+      color: "#2D2D2D", // override the row height
+    },
+  },
+  rows: {
+    style: {
+      minHeight: "72px", // override the row height
+      fontFamily: "Inter",
+      fontStyle: "normal",
+      fontWeight: "normal",
+    },
+    highlightOnHoverStyle: {
+      backgroundColor: "#F5F5F5",
+    },
+  },
+  headCells: {
+    style: {
+      marginLeft: "10px",
+      fontFamily: "Inter",
+      fontSize: "16px",
+      fontWeight: "700",
+      paddingLeft: "8px", // override the cell padding for head cells
+      paddingRight: "8px",
+    },
+  },
+  cells: {
+    style: {
+      paddingLeft: "8px", // override the cell padding for data cells
+      paddingRight: "8px",
+      margin: "10px",
+    },
+  },
+};
+
+export default customStyles;

src/assets/svgs/Open.svg

@@ -1,93 +1,12 @@
 import React, { Component } from "react";
 import DataTable from "react-data-table-component";
-import data from "../../../assets/jsonData/tickets";
+import data from "../../../../assets/jsonData/tickets";
 import "./TicketContent.scss";
-import userIcon2 from "../../../assets/images/userIcon2.jpg";
-import { Image, Badge } from "react-bootstrap";
+import userIcon2 from "../../../../assets/images/userIcon2.jpg";
+import { Image } from "react-bootstrap";
 import { withRouter } from "react-router-dom";
-
-const BadgeElement = (props) => {
-  return (
-    <div>
-      {props.ticketState === "Open" && (
-        <Badge pill variant="primary">
-          {props.ticketState}
-        </Badge>
-      )}
-      {props.ticketState === "Solved" && (
-        <Badge pill variant="success">
-          {props.ticketState}
-        </Badge>
-      )}
-      {props.ticketState === "OnHold" && (
-        <Badge pill variant="secondary">
-          {props.ticketState}
-        </Badge>
-      )}
-      {props.ticketState === "Pending" && (
-        <Badge pill variant="warning">
-          {props.ticketState}
-        </Badge>
-      )}
-      {props.ticketState === "Closed" && (
-        <Badge pill variant="danger">
-          {props.ticketState}
-        </Badge>
-      )}
-
-      {/* <Badge pill variant="primary" style={{ fontSize: "12px" }}>
-        {props.ticketState}
-      </Badge> */}
-    </div>
-  );
-};
-
-const customStyles = {
-  table: {
-    style: {
-      width: "87vw",
-      height: "60vh",
-    },
-  },
-  header: {
-    style: {
-      display: "none",
-      fontFamily: "Inter",
-      fontWeight: "bold",
-      fontSize: "1.5rem",
-      paddingLeft: "20px",
-      color: "#2D2D2D", // override the row height
-    },
-  },
-  rows: {
-    style: {
-      minHeight: "72px", // override the row height
-      fontFamily: "Inter",
-      fontStyle: "normal",
-      fontWeight: "normal",
-    },
-    highlightOnHoverStyle: {
-      backgroundColor: "#F5F5F5",
-    },
-  },
-  headCells: {
-    style: {
-      marginLeft: "10px",
-      fontFamily: "Inter",
-      fontSize: "16px",
-      fontWeight: "700",
-      paddingLeft: "8px", // override the cell padding for head cells
-      paddingRight: "8px",
-    },
-  },
-  cells: {
-    style: {
-      paddingLeft: "8px", // override the cell padding for data cells
-      paddingRight: "8px",
-      margin: "10px",
-    },
-  },
-};
+import BadgeElement from './BadgeElement';
+import customStyles from './DataTableCustomStyles';
 
 class TicketContent extends Component {
   constructor(props) {
@@ -139,21 +58,21 @@ class TicketContent extends Component {
 
     const columns = [
       {
-        name: "Ticket Title",
+        name: "Title",
         selector: "titler",
         sortable: true,
         maxWidth: "600px", // when using custom you should use width or maxWidth, otherwise, the table will default to flex grow behavior
         cell: (row) => <CustomTitle row={row} />,
       },
       {
-        name: "Ticket Description",
+        name: "Description",
         selector: "plot",
         wrap: true,
         sortable: true,
         format: (row) => `${row.plot.slice(0, 100)}...`,
       },
       {
-        name: "Ticket Status",
+        name: "Status",
         // eslint-disable-next-line react/no-array-index-key
         cell: (row) => (
           <div>
@@ -165,7 +84,6 @@ class TicketContent extends Component {
       },
       {
         name: "User",
-
         cell: (row) => (
           <div>
             <Image
@@ -179,6 +97,12 @@ class TicketContent extends Component {
           </div>
         ),
       },
+      {
+        name: "Created At"
+      },
+      {
+        name: "Comments"
+      }
     ];
 
     return (