Allow recents to store availability information

frontend/src/components/Recents/Recents.tsx

@@ -19,7 +19,7 @@ const Recents = () => {
   return recents?.length ? <Section id="recents">
     <Content>
       <h2>{t('home:recently_visited')}</h2>
-      {recents.map(event => (
+      {recents.slice(0, 5).map(event => (
         <Link className={styles.recent} href={`/${event.id}`} key={event.id}>
           <span className={styles.name}>{event.name}</span>
           <span

frontend/src/stores/recentsStore.ts

@@ -5,6 +5,10 @@ interface RecentEvent {
   id: string
   name: string
   created_at: number
+  user?: {
+    name: string
+    availability: string[]
+  }
 }
 
 interface RecentsStore {
@@ -19,16 +23,12 @@ const useRecentsStore = create<RecentsStore>()(persist(
   set => ({
     recents: [],
 
-    addRecent: event => set(state => {
+    addRecent: event => set(state => ({
-      const recents = state.recents.filter(e => e.id !== event.id)
+      recents: [event, ...state.recents.filter(e => e.id !== event.id)],
-      recents.unshift(event)
+    })),
-      recents.length = Math.min(recents.length, 5)
+    removeRecent: id => set(state => ({
-      return { recents }
+      recents: state.recents.filter(e => e.id !== id),
-    }),
+    })),
-    removeRecent: id => set(state => {
-      const recents = state.recents.filter(e => e.id !== id)
-      return { recents }
-    }),
     clearRecents: () => set({ recents: [] }),
   }),
   {