From 55203eb537e74db23e413c290d2a165fe5488c11 Mon Sep 17 00:00:00 2001
From: elizielx <yehezkieldio35@gmail.com>
Date: Sat, 2 Mar 2024 14:39:49 +0800
Subject: [PATCH] fix(app): sort trash bin page latesy by default

---
 .../trash-bin/trashbin/trashbin.page.tsx         | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx b/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx
index 734909e..987711b 100644
--- a/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx
@@ -13,6 +13,7 @@ import { useHistory } from "react-router-dom";
 import { useState } from "react";
 import Fuse from "fuse.js";
 import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
 
 export interface InterfaceTrashbin {
     id: number;
@@ -41,14 +42,25 @@ export function TrashBinPage() {
         refetch();
     });
 
+    function filterAndSortLatest(data: InterfaceTrashbin[]) {
+        return data
+            .filter((trashbin) => dayjs(trashbin.createdAt))
+            .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
+    }
+
     const fuseOptions = {
         keys: ["name"],
         threshold: 0.4,
     };
-    const fuse = new Fuse(!isLoading ? (trashBinData.data as InterfaceTrashbin[]) : [], fuseOptions);
+    const fuse = new Fuse(
+        !isLoading ? (filterAndSortLatest(trashBinData.data) as InterfaceTrashbin[]) : [],
+        fuseOptions
+    );
 
     const filteredData: InterfaceTrashbin[] =
-        !isLoading && searchTerm === "" ? trashBinData.data : fuse.search(searchTerm).map((result) => result.item);
+        !isLoading && searchTerm === ""
+            ? filterAndSortLatest(trashBinData.data)
+            : fuse.search(searchTerm).map((result) => result.item);
 
     function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
         queryClient.invalidateQueries({