Add local timeline

src/api/posts.ts

@@ -82,6 +82,21 @@ export async function getHomeTimeline(
   return data
 }
 
+export async function getPublicTimeline(
+  authToken: string,
+  maxId?: string,
+): Promise<Post[]> {
+  const url = `${BACKEND_URL}/api/v1/timelines/public`
+  const queryParams = { max_id: maxId, limit: PAGE_SIZE }
+  const response = await http(url, {
+    method: "GET",
+    queryParams,
+    authToken,
+  })
+  const data = await response.json()
+  return data
+}
+
 export async function getTagTimeline(
   authToken: string | null,
   tagName: string,

src/assets/feather/server.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-server"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>

src/components/Sidebar.vue

@@ -7,6 +7,10 @@
       </div>
       <span>Notifications</span>
     </router-link>
+    <router-link class="sidebar-link" to="/local">
+      <div class="icon"><img :src="require('@/assets/feather/server.svg')"></div>
+      <span>Local</span>
+    </router-link>
     <router-link class="sidebar-link" to="/profile-directory">
       <div class="icon"><img :src="require('@/assets/feather/users.svg')"></div>
       <span>Profile directory</span>

src/router/index.ts

@@ -10,6 +10,7 @@ import ProfileView from "@/views/Profile.vue"
 import ProfileForm from "@/views/ProfileForm.vue"
 import PostDetail from "@/views/PostDetail.vue"
 import PostOverlay from "@/views/PostOverlay.vue"
+import PublicTimeline from "@/views/PublicTimeline.vue"
 import TagTimeline from "@/views/TagTimeline.vue"
 import SearchResultList from "@/views/SearchResultList.vue"
 
@@ -56,6 +57,12 @@ const routes: Array<RouteRecordRaw> = [
     component: HomeTimeline,
     meta: { onlyAuthenticated: true },
   },
+  {
+    path: "/local",
+    name: "local",
+    component: PublicTimeline,
+    meta: { onlyAuthenticated: true },
+  },
   {
     path: "/post/:postId",
     name: "post",

src/views/HomeTimeline.vue

@@ -12,7 +12,6 @@
 import { Options, Vue, setup } from "vue-class-component"
 
 import { Post, getHomeTimeline } from "@/api/posts"
-import Avatar from "@/components/Avatar.vue"
 import PostEditor from "@/components/PostEditor.vue"
 import PostList from "@/components/PostList.vue"
 import Sidebar from "@/components/Sidebar.vue"
@@ -20,7 +19,6 @@ import { useCurrentUser } from "@/store/user"
 
 @Options({
   components: {
-    Avatar,
     PostEditor,
     PostList,
     Sidebar,

src/views/PublicTimeline.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="main">
+    <div class="content posts">
+      <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { Post, getPublicTimeline } from "@/api/posts"
+import PostList from "@/components/PostList.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: {
+    PostList,
+    Sidebar,
+  },
+})
+export default class PublicTimeline extends Vue {
+
+  private store = setup(() => {
+    const { ensureAuthToken } = useCurrentUser()
+    return { ensureAuthToken }
+  })
+
+  posts: Post[] = []
+
+  async created() {
+    const authToken = this.store.ensureAuthToken()
+    this.posts = await getPublicTimeline(authToken)
+  }
+
+  insertPost(post: Post) {
+    this.posts = [post, ...this.posts]
+  }
+
+  async loadNextPage(maxId: string) {
+    const authToken = this.store.ensureAuthToken()
+    const posts = await getPublicTimeline(authToken, maxId)
+    this.posts.push(...posts)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+</style>