Added filter base

src/pages/admin/events/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { NextPage } from "next";
 import useSWR from "swr";
 import { formatRelative } from "date-fns";
@@ -21,6 +21,14 @@ const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
   font-weight: bold;
 `;
 
+const StyledSelect = styled.select`
+  padding: 0.25rem;
+`;
+
+const SelectWrapper = styled.div`
+  padding: 0.25rem;
+`;
+
 const confirmDelete = async (event: Event) => {
   if (window.confirm(`Delete: ${event.id}: ${event.title_fi}/${event.title_en}; Are you sure?`) === true) {
     try {
@@ -37,42 +45,126 @@ const Renderer: React.FC = () => {
   const api: API = { path: APIPath.EVENTS, authenticated: true };
   const { data: events, error } = useSWR<Event[]>(api, fetcher);
 
+  const [sort, setSort] = useState<string>("start_time");
+  const [order, setOrder] = useState<string>("descending");
+  const [filter, setFilter] = useState<string>("all");
+
+  const [processedEvents, setProcessedEvents] = useState<Event[]>([]);
+
+  useEffect(() => {
+    console.log("hook call");
+
+    const eventSort = (a, b) => {
+      let result = 0;
+
+      console.log(order);
+      console.log(sort);
+
+      if (order === "ascending") {
+        if (sort in ["start_time", "end_time"]) {
+          result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime();
+        } else if (sort === "id") {
+          result = b[sort] - a[sort];
+        }
+      } else if (order === "descending") {
+        if (sort in ["start_time", "end_time"]) {
+          result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime();
+        } else if (sort === "id") {
+          result = a[sort] - b[sort];
+        }
+      }
+
+      return result;
+    };
+
+    const checkDate = (a) => {
+      let result = true;
+
+      if (filter === "upcoming") {
+        result = new Date(a.end_time).getTime() > Date.now();
+      } else if (filter === "past") {
+        result = new Date(a.end_time).getTime() < Date.now();
+        console.log(`Past ${result}`);
+      }
+      return result;
+    };
+
+    if (events) {
+      setProcessedEvents(events.sort(eventSort).filter(checkDate));
+    }
+  }, [sort, order, filter, events]);
+
+  function handleSortChange(e) {
+    setSort(e.target.value);
+  }
+
+  function handleOrderChange(e) {
+    setOrder(e.target.value);
+  }
+
+  function handleFilterChange(e) {
+    setFilter(e.target.value);
+  }
+
   if (error) {
     console.error(error);
     return (
       <div>
-        Failed loading events
+        Failed loading events.
       </div>
     );
   }
+
   if (!events?.length) {
     return <div>No events.</div>;
   }
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Start time</th>
-          <th>End time</th>
-        </tr>
-      </thead>
-      <tbody>
-        {events.map((event) => (
-          <tr key={event.id}>
-            <td><Link to={`${URL}/${event.id}`}>{event.title_fi}</Link></td>
-            <td>{formatRelative(new Date(event.start_time), new Date())}</td>
-            <td>{formatRelative(new Date(event.end_time), new Date())}</td>
-            <td>
-              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(event)}>
-                Delete
-              </StyledButton>
-            </td>
+    <div>
+      <div>
+        Sort by:
+        <select name="" onChange={handleSortChange}>
+          <option value="start_time">Start time</option>
+          <option value="end_time">End time</option>
+          <option value="id">Creation order</option>
+        </select>
+        Order:
+        <select name="" onChange={handleOrderChange}>
+          <option value="descending">Descending</option>
+          <option value="ascending">Ascending</option>
+        </select>
+        Filter:
+        <select name="" onChange={handleFilterChange}>
+          <option value="upcoming">Upcoming</option>
+          <option value="all">All</option>
+          <option value="past">Past</option>
+        </select>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Start time</th>
+            <th>End time</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {processedEvents
+            .map((event) => (
+              <tr key={event.id}>
+                <td><Link to={`${URL}/${event.id}`}>{event.title_fi}</Link></td>
+                <td>{formatRelative(new Date(event.start_time), new Date())}</td>
+                <td>{formatRelative(new Date(event.end_time), new Date())}</td>
+                <td>
+                  <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(event)}>
+                    Delete
+                  </StyledButton>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
   );
 };