From f18a049bfbd1d124d3c7171d88bc900879ddc71f Mon Sep 17 00:00:00 2001
From: Tanay Pant <7481165+tanay1337@users.noreply.github.com>
Date: Fri, 23 Feb 2024 20:03:07 +0100
Subject: [PATCH] feat: add dates to resources in RH (#375)

* feat: add dates to resources in RH

* fix: update date format to ISO 8601

* feat: display date in RH

* Sort resource hub by date

* fix: Minor fixes

* fix: update the font for date

---------

Co-authored-by: Tanay Pant <tanaypantprotonmail.com>
Co-authored-by: louis-md <louis@margot-duclot.fr>
---
 components/ResourceHub/Card.tsx               | 51 +++++++++++++++----
 components/ResourceHub/Resources.tsx          |  5 +-
 .../ResourceHub/community-resources.json      | 29 +++++++++--
 components/ResourceHub/company-resources.json | 42 +++++++++++++--
 components/ResourceHub/useResourceSearch.ts   | 15 ++++--
 5 files changed, 115 insertions(+), 27 deletions(-)

diff --git a/components/ResourceHub/Card.tsx b/components/ResourceHub/Card.tsx
index 6bb25c34d..26d93bd2b 100644
--- a/components/ResourceHub/Card.tsx
+++ b/components/ResourceHub/Card.tsx
@@ -1,12 +1,25 @@
 import { Typography, Chip, Box } from '@mui/material'
 
 import css from './styles.module.css'
-// import { ECOSYSTEM_DATA_URL } from '@/config/constants'
 import { type KnowledgeResource } from './Resources'
 import YouTubeEmbed from '../YouTube'
-// import clsx from 'clsx'
 
 export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
+
   const CardContent = (
     <div style={{ width: '100%' }}>
       {resource.type === 'Video' && (
@@ -21,14 +34,27 @@ export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
         {resource.name}
       </Typography>
 
+      <Typography
+        variant='body2'
+        color='text.secondary'
+        className={css.description}
+        mb={0.5}
+      >
+        {months[new Date(resource.date).getMonth()] +
+          ', ' +
+          new Date(resource.date).getFullYear()}
+      </Typography>
+
       {resource.type === 'Blog Post' && (
-        <Typography
-          variant='body2'
-          color='text.secondary'
-          className={css.description}
-        >
-          {resource.abstract}
-        </Typography>
+        <>
+          <Typography
+            variant='body2'
+            color='text.secondary'
+            className={css.description}
+          >
+            {resource.abstract}
+          </Typography>
+        </>
       )}
 
       <div className={css.categories}>
@@ -72,7 +98,12 @@ export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
       }}
       className={css.card}
     >
-      <a href={resource.url} target='_blank' rel='noreferrer' style={{ width: '100%' }}>
+      <a
+        href={resource.url}
+        target='_blank'
+        rel='noreferrer'
+        style={{ width: '100%' }}
+      >
         {CardContent}
       </a>
     </Box>
diff --git a/components/ResourceHub/Resources.tsx b/components/ResourceHub/Resources.tsx
index 124231171..410291617 100644
--- a/components/ResourceHub/Resources.tsx
+++ b/components/ResourceHub/Resources.tsx
@@ -46,6 +46,7 @@ export interface KnowledgeResource {
   url: string
   name: string
   type: string
+  date: string
   origin: string
   abstract?: string
   tags: string[]
@@ -221,9 +222,7 @@ export const Resources = (): ReactElement => {
     <>
       <NextLink href={uploadResourceUrl} target='_blank' rel='noreferrer'>
         <Button
-          endIcon={
-            <AddIcon sx={{ mr: [1.5, 1] }} />
-          }
+          endIcon={<AddIcon sx={{ mr: [1.5, 1] }} />}
           sx={{
             alignItems: 'space-between',
             border: ['none', 'solid 1px rgba(161, 163, 167, 1)'],
diff --git a/components/ResourceHub/community-resources.json b/components/ResourceHub/community-resources.json
index 1bea5ee59..db2fe901b 100644
--- a/components/ResourceHub/community-resources.json
+++ b/components/ResourceHub/community-resources.json
@@ -3,6 +3,7 @@
     "name": "How To Deploy a Smart Contract From a Web3 Multi-Sig Wallet",
     "url": "https://www.youtube.com/watch?v=zn6omKzm3BI",
     "type": "Video",
+    "date": "2022-11-30",
     "tags": [
       "Introduction",
       "Safe Smart Account"
@@ -12,6 +13,7 @@
     "name": "Safe transaction service installation guide",
     "url": "https://www.youtube.com/watch?v=FUytj_xStDI",
     "type": "Video",
+    "date": "2023-04-16",
     "tags": [
       "Introduction",
       "Safe Transaction Service"
@@ -21,6 +23,7 @@
     "name": "How do you add a custom network to the Safe UI?",
     "url": "https://www.youtube.com/watch?v=E3v6p87bsYg",
     "type": "Video",
+    "date": "2022-11-21",
     "tags": [
       "Introduction",
       "Safe Wallet"
@@ -30,42 +33,47 @@
     "name": "Safe Wallet Tutorial | Multisig Wallet for DeFi",
     "url": "https://www.youtube.com/watch?v=GHyxe32Z814",
     "type": "Video",
+    "date": "2022-05-02",
     "tags": [
       "Tutorial",
       "Safe Wallet"
     ]
   },
   {
-    "name": "Safe 🛠 Build a Group Wallet to Buy things with Frens using Safe {Core} Account Abstraction SDK",
+    "name": "Build a Group Wallet to Buy things with Frens using Safe {Core} Account Abstraction SDK",
     "url": "https://www.youtube.com/watch?v=czGf5YgWs7M",
     "type": "Video",
+    "date": "2023-05-05",
     "tags": [
       "Tutorial",
       "Safe Core SDK"
     ]
   },
   {
-    "name": "How to Create a MultiSig Wallet Using Gnosis SAFE",
+    "name": "How to Create a MultiSig Wallet Using Safe",
     "url": "https://www.youtube.com/watch?v=JoFYldw6hVE",
     "type": "Video",
+    "date": "2022-11-05",
     "tags": [
       "Tutorial",
       "Safe Wallet"
     ]
   },
   {
-    "name": "Step-by-Step Guide to SAFE: The Ultimate Multisig Wallet for DeFi",
+    "name": "Step-by-Step Guide to Safe: The Ultimate Multisig Wallet for DeFi",
     "url": "https://www.youtube.com/watch?v=3edvkNc7Es0",
     "type": "Video",
+    "date": "2023-05-31",
     "tags": [
       "Tutorial",
       "Safe Wallet"
     ]
   },
   {
-    "name": "SAFE Smart Contract Multi-Sig Storage 🔒 (Better than Hardware Wallet!⭐️) Step-by-Step Setup Guide ✅",
+    "name": "Safe Smart Contract Multi-Sig Storage. Step-by-Step Setup Guide",
     "url": "https://www.youtube.com/watch?v=EPa9I3LDplA",
     "type": "Video",
+    "date": "2023-05-20",
     "tags": [
       "Tutorial",
       "Safe Wallet"
@@ -75,6 +83,7 @@
     "name": "Safe MultiSig Contract Deep Dive",
     "url": "https://www.youtube.com/watch?v=_2ZJ5HBEfUk",
     "type": "Video",
+    "date": "2022-02-25",
     "tags": [
       "Deep Dive",
       "Safe Smart Account"
@@ -84,15 +93,17 @@
     "name": "Ethereum: differences between createTransaction and createTransactionBatch (@safe-global/protocol...",
     "url": "https://www.youtube.com/watch?v=fbZBVpBgq_4",
     "type": "Video",
+    "date": "2023-11-10",
     "tags": [
       "Deep Dive",
       "Safe Smart Account"
     ]
   },
   {
-    "name": "Ethereum: Can a SAFE be deployed using a paymaster / gasless transaction?",
+    "name": "Ethereum: Can a Safe be deployed using a paymaster / gasless transaction?",
     "url": "https://www.youtube.com/watch?v=VL2EkErsWaM",
     "type": "Video",
+    "date": "2023-10-17",
     "tags": [
       "Tutorial",
       "Safe Smart Account",
@@ -103,6 +114,7 @@
     "name": "Ethereum: How to deploy a Safe on Hardhat",
     "url": "https://www.youtube.com/watch?v=GFkNdPAzEwI",
     "type": "Video",
+    "date": "2023-11-13",
     "tags": [
       "Tutorial",
       "Safe Smart Account",
@@ -113,6 +125,7 @@
     "name": "ERC-4337 Account Abstraction",
     "url": "https://www.youtube.com/watch?v=v_V4Wqcn7vE",
     "type": "Video",
+    "date": "2024-01-22",
     "tags": [
       "Tutorial",
       "Safe Smart Account",
@@ -123,6 +136,7 @@
     "name": "How to create and use a Safe account with permissionless.js",
     "url": "https://docs.pimlico.io/permissionless/how-to/accounts/use-safe-account",
     "type": "Blog Post",
+    "date": "2024-02-12",
     "abstract": "This guide will walk you through how to create and use a Safe account with permissionless.js.",
     "tags": [
       "Tutorial",
@@ -134,6 +148,7 @@
     "name": "Migrate an EOA to a Safe Smart Account using Aarc",
     "url": "https://docs.aarc.xyz/developer-docs/tutorials/safe-smart-wallet",
     "type": "Blog Post",
+    "date": "2024-02-06",
     "abstract": "A tutorial on integrating Safe Smart Account for an EOA with Aarc SDK.",
     "tags": [
       "Tutorial",
@@ -144,6 +159,7 @@
     "name": "Safe Study (Japanese)",
     "url": "https://zenn.dev/kozayupapa/articles/877ca3c93fc4a9",
     "type": "Blog Post",
+    "date": "2023-05-09",
     "abstract": "ERC-4337(AccountAbstraction) 等のライブラリを提供しているSafeについて理解を深めるため、下記のドキュメントを要約していきたいとおもいます。",
     "tags": [
       "Tutorial",
@@ -154,6 +170,7 @@
     "name": "How to Multi-Distribute ERC-20 tokens via Safe Core SDK",
     "url": "https://mirror.xyz/0xa1AC2cC82249A44892802a99CA84c4ed1072B29C/lL8AYV_b4VzTbojuZEprrxD7-RTTap2IMIS8qIObfl8",
     "type": "Blog Post",
+    "date": "2021-11-15",
     "abstract": "As part of the Atem.green project I'm helping to build, we want to incentivize early contributors by handing out (pre-launch) ERC-20 tokens. We use Coordinape to determine the impact every contributor has in a given month. From that we can calculate how many (pre-launch) token each contributor earned. Now the question is: How do we distribute these tokens?",
     "tags": [
       "Tutorial",
@@ -164,6 +181,7 @@
     "name": "Build a treasury wallet with multisignature Safe",
     "url": "https://blog.logrocket.com/build-treasury-wallet-multisignature-gnosis-safe/",
     "type": "Blog Post",
+    "date": "2022-03-15",
     "abstract": "Imagine you and your friends are building an NFT marketplace. You are the CEO and your friend works as a Solidity engineer who writes the smart contract. The NFT marketplace becomes popular, and your revenue builds from the market fee of every NFT sale transaction. You store your profit inside a smart contract, and boast to the media about your company that has enough money to buy a private island. Then, the Solidity engineer disappears and withdraws all the funds from the treasury. You watch in horror.",
     "tags": [
       "Tutorial",
@@ -174,6 +192,7 @@
     "name": "How to Deploy Safe Contracts",
     "url": "https://www.zlog.in/post/deploy-safe-contracts/",
     "type": "Blog Post",
+    "date": "2023-10-09",
     "abstract": "A tutorial that explains how to deploy Safe contracts on a blockchain.",
     "tags": [
       "Tutorial",
diff --git a/components/ResourceHub/company-resources.json b/components/ResourceHub/company-resources.json
index bea74f6a5..3ab6eac11 100644
--- a/components/ResourceHub/company-resources.json
+++ b/components/ResourceHub/company-resources.json
@@ -3,6 +3,7 @@
     "name": "Starting with the Safe Core SDK",
     "url": "https://www.youtube.com/watch?v=t2LzhAFBxkI",
     "type": "Video",
+    "date": "2022-04-28",
     "tags": [
       "Introduction",
       "Safe Core SDK"
@@ -12,6 +13,7 @@
     "name": "Safe modding 101: Create your own Safe module",
     "url": "https://www.youtube.com/watch?v=nmDYc9PlAic",
     "type": "Video",
+    "date": "2022-07-04",
     "tags": [
       "Introduction",
       "Modules"
@@ -21,6 +23,7 @@
     "name": "Safe modding 101: Create your own Safe module",
     "url": "https://www.youtube.com/watch?v=QdOfuxxXVBA",
     "type": "Video",
+    "date": "2022-05-09",
     "tags": [
       "Introduction",
       "Modules"
@@ -30,6 +33,7 @@
     "name": "Managing modules and transaction guards | Safe Core SDK",
     "url": "https://www.youtube.com/watch?v=Y4PwNkU8OVM",
     "type": "Video",
+    "date": "2023-02-27",
     "tags": [
       "Deep Dive",
       "Modules",
@@ -40,6 +44,7 @@
     "name": "Safe Core SDK 🛠 Managing modules and transaction guards",
     "url": "https://www.youtube.com/watch?v=ppwE9GXC5MA",
     "type": "Video",
+    "date": "2022-12-08",
     "tags": [
       "Deep Dive",
       "Modules",
@@ -47,35 +52,39 @@
     ]
   },
   {
-    "name": "Safe 🛠️ Building with the Safe{Core} SDK",
+    "name": "Building with the Safe{Core} SDK",
     "url": "https://www.youtube.com/watch?v=seQNBoUnwEI",
     "type": "Video",
+    "date": "2023-08-01",
     "tags": [
       "Safe Core SDK"
     ]
   },
   {
-    "name": "Web3 Native (Aug 24, 2023) - Navigation the Future of Account Abstraction with Lukas Schor",
+    "name": "Web3 Native - Navigation the Future of Account Abstraction with Lukas Schor",
     "url": "https://soundcloud.com/longhashventures_podcast/navigating-the-future-of-account-abstraction-with-safe-web3-native-podcast-safe-lukas-schor",
     "type": "Podcast",
+    "date": "2023-08-24",
     "tags": [
       "Perspectives",
       "Account Abstraction"
     ]
   },
   {
-    "name": "Defi Drip, EP. 6 (Aug 22, 2023) - Safe and Account Abstraction with Johannes Moormann",
+    "name": "Defi Drip - Safe and Account Abstraction with Johannes Moormann",
     "url": "https://www.youtube.com/watch?v=G50rE0129zI",
     "type": "Podcast",
+    "date": "2023-08-22",
     "tags": [
       "Perspectives",
       "Account Abstraction"
     ]
   },
   {
-    "name": "On the brink, EP. 440 (July 26, 2023) - Account Abstraction Adoption and Barriers with Richard Meissner",
+    "name": "On the brink - Account Abstraction Adoption and Barriers with Richard Meissner",
     "url": "https://onthebrink-podcast.com/safe/",
     "type": "Podcast",
+    "date": "2023-07-26",
     "tags": [
       "Perspectives",
       "Account Abstraction"
@@ -85,6 +94,7 @@
     "name": "Get the most secure web3 account in <30 seconds",
     "url": "https://safe.mirror.xyz/pyf0meKAyooY1v8GB7z6Ik7o4wPHGTyCOcUf--UU-IA",
     "type": "Blog Post",
+    "date": "2023-11-13",
     "abstract": "Introducing self-custody for everyone. From today, you can secure your crypto fast and free with Safe{Wallet} on Gnosis Chain using just your Google Account.",
     "tags": [
       "Tutorial",
@@ -95,6 +105,7 @@
     "name": "The new AI agent economy will run on Smart Accounts",
     "url": "https://safe.mirror.xyz/V965PykKzlE1PCuWxBjsCJR12WscLcnMxuvR9E9bP-Y",
     "type": "Blog Post",
+    "date": "2023-10-25",
     "abstract": "Web3's first billion users may not only be humans, but AI agents.",
     "tags": [
       "Perspectives",
@@ -105,6 +116,7 @@
     "name": "Enhancing Blockchain Security with ERC-7512: A Standard for representing smart contract audits onchain",
     "url": "https://safe.mirror.xyz/Li4Mb4teTEmosE6dAsnJ_iz3aMKOV_4lDU84W4TSfc0",
     "type": "Blog Post",
+    "date": "2023-09-21",
     "abstract": "In a significant stride towards fortifying blockchain security, we at Safe, along with top security experts have introduced ERC-7512, a standard for onchain audit report representations.",
     "tags": [
       "Safe Smart Account",
@@ -115,6 +127,7 @@
     "name": "Safe Modular Smart Account Architecture - Explained",
     "url": "https://safe.mirror.xyz/t76RZPgEKdRmWNIbEzi75onWPeZrBrwbLRejuj-iPpQ",
     "type": "Blog Post",
+    "date": "2023-07-10",
     "abstract": "Safe is at the forefront of modular Smart Account infrastructure, paving the way for developers to create a diverse range of applications and wallets.",
     "tags": [
       "Deep Dive",
@@ -126,6 +139,7 @@
     "name": "Launching Monerium on Safe{Core}: Connecting Safes to Euro IBAN accounts",
     "url": "https://safe.mirror.xyz/4pgiJAEQ2Jt0ij9Ezc8FSOSiRSfVY4Im8FZ0LuICx-8",
     "type": "Blog Post",
+    "date": "2023-07-06",
     "abstract": "Today, the Safe{Core} Account Abstraction SDK added a shiny new tool to its toolbox.",
     "tags": [
       "Introduction"
@@ -135,6 +149,7 @@
     "name": "Redefine security with new Safe{Wallet} transaction risk scanner",
     "url": "https://safe.mirror.xyz/rInLWZwD_sf7enjoFerj6FIzCYmVMGrrV8Nhg4THdwI",
     "type": "Blog Post",
+    "date": "2023-07-26",
     "abstract": "We're excited to bring you news of an important enhancement to your transactional security.",
     "tags": [
       "Security",
@@ -145,6 +160,7 @@
     "name": "Safe Smart Accounts & Diamond Proxies",
     "url": "https://safe.mirror.xyz/P83_rVQuUQJAM-SnMpWvsHlN8oLnCeSncD1txyMDqpE",
     "type": "Blog Post",
+    "date": "2023-04-25",
     "abstract": "Safe is a modular Smart Account protocol that uses Account Abstraction to build a wide range of wallets and other solutions through a shared plugin interface.",
     "tags": [
       "Deep Dive",
@@ -156,6 +172,7 @@
     "name": "Account Abstraction in a Multichain Landscape - Part 1: Addresses",
     "url": "https://safe.mirror.xyz/4GcGAOFno-suTCjBewiYH4k4yXPDdIukC5woO5Bjc4w",
     "type": "Blog Post",
+    "date": "2023-03-22",
     "abstract": "This is the first article in a series of posts exploring account abstraction in a multichain landscape.",
     "tags": [
       "Deep Dive",
@@ -166,6 +183,7 @@
     "name": "Launching Safe{Core} Account Abstraction Stack with Stripe, Gelato and Web3Auth",
     "url": "https://safe.mirror.xyz/FLvQQ5J9qXks0izRl73oC6LiFLofbwFNorwzaEj_xL8",
     "type": "Blog Post",
+    "date": "2023-03-01",
     "abstract": "Safe is launching Safe{Core}, a modular AA stack with Stripe, Gelato, and Web3Auth as launch partners.",
     "tags": [
       "Introduction",
@@ -176,6 +194,7 @@
     "name": "Take Back Ownership Manifesto",
     "url": "https://safe.mirror.xyz/tO26nZ4CruKCS8d49pyModJhzHw1TTm2QcMqx2lYaXQ",
     "type": "Blog Post",
+    "date": "2023-01-18",
     "abstract": "Not your keys, not your coins.",
     "tags": [
       "Perspectives",
@@ -184,8 +203,9 @@
   },
   {
     "name": "Safe Community Call #1 with Castle NFT Platform",
-    "url": "https://www.youtube.com/watch?v=PCtjRs0BpHE&list=PL0knnt70iEZoqz14dWu27utp5IAtf3UDn&index=14",
+    "url": "https://www.youtube.com/watch?v=PCtjRs0BpHE",
     "type": "Video",
+    "date": "2022-11-17",
     "tags": [
       "Community Call"
     ]
@@ -194,6 +214,7 @@
     "name": "Safe Community Call #2 with Onchain Den",
     "url": "https://www.youtube.com/watch?v=o18qA1bvNXI",
     "type": "Video",
+    "date": "2022-11-17",
     "tags": [
       "Community Call"
     ]
@@ -202,6 +223,7 @@
     "name": "Safe Community Call #3 announcing Safe Grants and Liminal updates",
     "url": "https://www.youtube.com/watch?v=nzT9HAb9lVw",
     "type": "Video",
+    "date": "2022-11-22",
     "tags": [
       "Community Call"
     ]
@@ -210,6 +232,7 @@
     "name": "Safe Community Call #4 with NinDAO",
     "url": "https://www.youtube.com/watch?v=eosjuOocH1Y",
     "type": "Video",
+    "date": "2022-12-05",
     "tags": [
       "Community Call"
     ]
@@ -218,6 +241,7 @@
     "name": "Safe Community Call #5 with Richard Meissner",
     "url": "https://www.youtube.com/watch?v=9XUXkfwDixA",
     "type": "Video",
+    "date": "2023-01-10",
     "tags": [
       "Community Call"
     ]
@@ -226,6 +250,7 @@
     "name": "Safe Community Call #6 with Tribes Co-Wallet",
     "url": "https://www.youtube.com/watch?v=j44PnR-aGL8",
     "type": "Video",
+    "date": "2023-02-07",
     "tags": [
       "Community Call"
     ]
@@ -234,6 +259,7 @@
     "name": "Safe Community Call #7 announcing Safe Core and Account Abstraction Hackathon",
     "url": "https://www.youtube.com/watch?v=XOkVwtJOHSI",
     "type": "Video",
+    "date": "2023-03-07",
     "tags": [
       "Community Call"
     ]
@@ -242,6 +268,7 @@
     "name": "Safe Community Call #8 with Podarchy Explorer demo from Metropolis",
     "url": "https://www.youtube.com/watch?v=l6jKLPp-ZbQ",
     "type": "Video",
+    "date": "2023-05-05",
     "tags": [
       "Community Call"
     ]
@@ -250,6 +277,7 @@
     "name": "Safe Community Call #9 with Brahma Fi Console",
     "url": "https://www.youtube.com/watch?v=vt0F0MnIB9I",
     "type": "Video",
+    "date": "2023-06-19",
     "tags": [
       "Community Call"
     ]
@@ -258,6 +286,7 @@
     "name": "Safe Community Call #10 with Redefine and Coinshift",
     "url": "https://www.youtube.com/watch?v=-M0xBi3lH1s",
     "type": "Video",
+    "date": "2023-07-13",
     "tags": [
       "Community Call"
     ]
@@ -266,6 +295,7 @@
     "name": "Safe Community Call #11 on Safe{Core} Protocol, Safe{Con}, Safe Grants Program and more",
     "url": "https://www.youtube.com/watch?v=8_5H0Y1THEo",
     "type": "Video",
+    "date": "2023-08-16",
     "tags": [
       "Community Call"
     ]
@@ -274,6 +304,7 @@
     "name": "Community Call #12: Grants Council and Safe DAO updates, ZK integrations & DAAta and AI Hackathon",
     "url": "https://www.youtube.com/watch?v=_WbnF_qyjeQ",
     "type": "Video",
+    "date": "2023-09-21",
     "tags": [
       "Community Call"
     ]
@@ -282,6 +313,7 @@
     "name": "Safe Community Call #13",
     "url": "https://www.youtube.com/watch?v=5UaCdug2LPA",
     "type": "Video",
+    "date": "2023-10-12",
     "tags": [
       "Community Call"
     ]
diff --git a/components/ResourceHub/useResourceSearch.ts b/components/ResourceHub/useResourceSearch.ts
index 7127046d0..eaadb04f3 100644
--- a/components/ResourceHub/useResourceSearch.ts
+++ b/components/ResourceHub/useResourceSearch.ts
@@ -6,9 +6,16 @@ const useResourceSearch = (
   resources: KnowledgeResource[],
   query: string
 ): KnowledgeResource[] => {
+  const sortedByDate = useMemo(
+    () =>
+      resources.sort((a, b) => {
+        return new Date(b.date).getTime() - new Date(a.date).getTime()
+      }),
+    [resources]
+  )
   const fuse = useMemo(
     () =>
-      new Fuse(resources, {
+      new Fuse(sortedByDate, {
         keys: [
           {
             name: 'name',
@@ -27,16 +34,16 @@ const useResourceSearch = (
         threshold: 0.3,
         findAllMatches: true
       }),
-    [resources]
+    [sortedByDate]
   )
 
   return useMemo(() => {
     if (query.length === 0) {
-      return resources
+      return sortedByDate
     }
 
     return fuse.search(query).map(result => result.item)
-  }, [fuse, resources, query])
+  }, [fuse, sortedByDate, query])
 }
 
 export { useResourceSearch }