Added date sorting to the ticket list

src/pages/tickets.tsx

@@ -25,6 +25,7 @@ import { withIronSessionSsr } from "iron-session/next";
 import moment from "moment";
 import Head from "next/head";
 import { useEffect, useState } from "react";
+import { BsArrowDown, BsArrowUp } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 const columnHelper = createColumnHelper<Ticket>();
@@ -75,6 +76,7 @@ export default function Tickets() {
   const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
   const [selectedTicket, setSelectedTicket] = useState<Ticket>();
   const [assigneeFilter, setAssigneeFilter] = useState<string>();
+  const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
 
   const [typeFilter, setTypeFilter] = useState<TicketType>();
   const [statusFilter, setStatusFilter] = useState<TicketStatus>();
@@ -83,6 +85,12 @@ export default function Tickets() {
   const { users } = useUsers();
   const { tickets, reload } = useTickets();
 
+  const sortByDate = (a: Ticket, b: Ticket) => {
+    return moment((dateSorting === "desc" ? b : a).date).diff(
+      moment((dateSorting === "desc" ? a : b).date),
+    );
+  };
+
   useEffect(() => {
     const filters = [];
     if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
@@ -90,8 +98,10 @@ export default function Tickets() {
     if (assigneeFilter)
       filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
 
-    setFilteredTickets(filters.reduce((d, f) => d.filter(f), tickets));
+    setFilteredTickets(
-  }, [tickets, typeFilter, statusFilter, assigneeFilter]);
+      [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate),
+    );
+  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting]);
 
   const columns = [
     columnHelper.accessor("id", {
@@ -120,7 +130,19 @@ export default function Tickets() {
       cell: (info) => info.getValue(),
     }),
     columnHelper.accessor("date", {
-      header: "Date",
+      id: "date",
+      header: (
+        <button
+          className="flex items-center gap-2"
+          onClick={() =>
+            setDateSorting((prev) => (prev === "asc" ? "desc" : "asc"))
+          }
+        >
+          <span>Date</span>
+          {dateSorting === "desc" && <BsArrowDown />}
+          {dateSorting === "asc" && <BsArrowUp />}
+        </button>
+      ) as any,
       cell: (info) => moment(info.getValue()).format("DD/MM/YYYY - HH:mm"),
     }),
     columnHelper.accessor("subject", {