moving filter function within a dedicated file

src/pages/Events/EventsPage.jsx

@@ -2,6 +2,7 @@ import {useState} from "react";
 import Event from "../../components/Event/Event.jsx";
 import styles from "./EventsPage.module.css";
 import ToolBar from "../../components/ToolBar/ToolBar.jsx";
+import filter from "../../utils/filter.js";
 
 
 function EventsPage(){
@@ -10,6 +11,7 @@ function EventsPage(){
         yearOrder: "asc",
     });
 
+
     const [events] = useState([
         {
             id: 1,
@@ -173,49 +175,12 @@ function EventsPage(){
         },
     ]);
 
-    const compareDate = (dateA, dateB) => {
-        const dA = new Date(dateA);
-        const dB = new Date(dateB);
-
-        if (filters.yearOrder === "asc") {
-            return dB - dA;
-        } else {
-            return dA - dB;
-        }
-    };
-
-    const sortedEvents = [...events].sort((a, b) => {
-        const sortedATasks = a.tasks.sort((taskA, taskB) =>
-            compareDate(taskA.start, taskB.start)
-        );
-        const sortedBTasks = b.tasks.sort((taskA, taskB) =>
-            compareDate(taskA.start, taskB.start)
-        );
-
-        const timeComparison = compareDate(
-            sortedATasks[0].start,
-            sortedBTasks[0].start
-        );
-
-        if (timeComparison !== 0) {
-            return timeComparison;
-        }
-
-        if (filters.alphabetical !== null) {
-            return filters.alphabetical === "asc"
-                ? a.name.localeCompare(b.name)
-                : b.name.localeCompare(a.name);
-        }
-
-        return 0;
-    });
-
 
     return (
         <div className={styles.eventsContainer}>
             <ToolBar setFilters={setFilters} filters={filters}/>
             <div className={styles.eventsList}>
-                {sortedEvents.map((event, index) => (
+                {filter(events, filters).map((event, index) => (
                     <Event key={index} event={event} />
                 ))}
             </div>

src/utils/filter.js

@@ -0,0 +1,42 @@
+function filter(elements, filters) {
+    const compareDate = (dateA, dateB) => {
+        const dA = new Date(dateA);
+        const dB = new Date(dateB);
+
+        if (filters.yearOrder === "asc") {
+            return dB - dA;
+        } else {
+            return dA - dB;
+        }
+    };
+
+
+    return [...elements].sort((a, b) => {
+        const sortedATasks = a.tasks.sort((taskA, taskB) =>
+            compareDate(taskA.start, taskB.start)
+        );
+        const sortedBTasks = b.tasks.sort((taskA, taskB) =>
+            compareDate(taskA.start, taskB.start)
+        );
+
+        const timeComparison = compareDate(
+            sortedATasks[0].start,
+            sortedBTasks[0].start
+        );
+
+        if (timeComparison !== 0) {
+            return timeComparison;
+        }
+
+        if (filters.alphabetical !== null) {
+            return filters.alphabetical === "asc"
+                ? a.name.localeCompare(b.name)
+                : b.name.localeCompare(a.name);
+        }
+
+        return 0;
+    });
+}
+
+
+export default filter;