Merge branch 'main' of github.com:remanso-space/remanso

src/views/PublicNoteListView.vue

@@ -1,64 +1,64 @@
 <script setup lang="ts">
 import BackButton from "@/components/BackButton.vue"
-import { Author, getAka } from "@/modules/atproto/getAka"
-import { PublicNoteListItem } from "@/modules/note/models/Note"
-import { computedAsync, useAsyncState } from "@vueuse/core"
+import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
+import { slugify } from "@/utils/slugify"
+import { vInfiniteScroll } from "@vueuse/components"
 
-const { state, isLoading } = useAsyncState<{
-  notes: PublicNoteListItem[]
-}>(
-  async () => {
-    const response = await fetch("https://api.litenote.li212.fr/notes")
-    return response.json()
-  },
-  { notes: [] },
-)
-
-const aka = computedAsync<Map<string, Author>>(async () => {
-  if (state.value.notes.length === 0) {
-    return new Map()
-  }
-
-  return getAka(new Set(state.value.notes.map((n) => n.did)))
-}, new Map())
-
-const getAlias = (did: string) =>
-  aka.value.has(did) ? aka.value.get(did)?.alias : ""
+const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
+  usePublicNoteList()
 </script>
 
 <template>
   <main class="public-note-list-view">
-    <h1>Remanso notes</h1>
+    <div class="header">
+      <back-button class="back-button" :fallback="{ name: 'Home' }" />
+      <h1>Remanso notes</h1>
+    </div>
     <div v-if="isLoading"></div>
     <div v-else>
-      <ul class="list rounded-box shadow-sm">
-        <li v-for="note in state.notes" class="list-row">
+      <ul
+        class="list rounded-box shadow-sm"
+        v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
+      >
+        <li v-for="note in notes" class="list-row">
           <div class="list-col">
             <router-link
               :to="{
                 name: 'PublicNoteView',
-                params: { did: note.did, rkey: note.rkey },
+                params: {
+                  did: note.did,
+                  rkey: note.rkey,
+                  slug: slugify(note.title),
+                },
               }"
               class="btn btn-link"
               >{{ note.title }}</router-link
             >
 
-            <div class="text-xs opacity-90 alias">
-              <span v-if="getAlias(note.did)">
-                {{ getAlias(note.did) }}
-              </span>
-              <span v-if="note.publishedAt"
-                >&nbsp;•&nbsp;{{
+            <div class="text-xs opacity-80 alias">
+              <router-link
+                v-if="getAuthor(note.did)"
+                :to="{
+                  name: 'PublicNoteListByDidView',
+                  params: { did: note.did },
+                }"
+                class="link link-hover"
+              >
+                {{ getAuthor(note.did) }}
+              </router-link>
+
+              <template v-if="note.publishedAt">
+                <span>&nbsp;•&nbsp;</span>
+                <span>{{
                   new Date(note.publishedAt).toLocaleDateString()
-                }}
-              </span>
+                }}</span>
+              </template>
               <div v-else class="skeleton h-4 w-20"></div>
             </div>
           </div>
         </li>
       </ul>
     </div>
-    <BackButton class="back-button" />
   </main>
 </template>
 
@@ -67,10 +67,20 @@ const getAlias = (did: string) =>
   display: flex;
   flex: 1;
   flex-direction: column;
-  margin-left: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  .header {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
   h1 {
-    margin-top: 1rem;
+    flex: 1;
+    text-align: center;
+    margin-bottom: 0;
   }
 
   .back-button {
@@ -98,5 +108,9 @@ const getAlias = (did: string) =>
       justify-content: flex-end;
     }
   }
+
+  @media screen and (min-width: 769px) {
+    overflow-y: auto;
+  }
 }
 </style>