From 1f2eb0f7bcfefeecf23fc3a9b6cd2b7fc7ed56e4 Mon Sep 17 00:00:00 2001
From: aumetra <aumetra@cryptolab.net>
Date: Sat, 7 Oct 2023 17:42:53 +0200
Subject: [PATCH] infinite scrolling

---
 .vscode/settings.json                      |  3 +-
 kitsune-fe/src/components/BaseTimeline.vue | 39 ++++++++++++++++++++--
 kitsune-fe/src/components/NavBar.vue       |  1 +
 kitsune-fe/src/components/Post.vue         |  2 +-
 kitsune-fe/src/graphql/timeline.ts         |  3 ++
 kitsune-fe/src/graphql/types/gql.ts        |  6 ++--
 kitsune-fe/src/graphql/types/graphql.ts    | 14 ++++++++
 kitsune-fe/src/views/timeline/HomePage.vue | 14 --------
 kitsune/src/http/graphql/query/timeline.rs |  5 ++-
 9 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1119812da..37caee8fa 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,5 @@
   "rust-analyzer.cargo.buildScripts.enable": true,
   "editor.formatOnSave": true,
   "rust-analyzer.showUnlinkedFileNotification": false,
-  "rust-analyzer.cargo.features": ["oidc"],
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "rust-analyzer.cargo.features": ["oidc"]
 }
diff --git a/kitsune-fe/src/components/BaseTimeline.vue b/kitsune-fe/src/components/BaseTimeline.vue
index f7e971293..8526f61f8 100644
--- a/kitsune-fe/src/components/BaseTimeline.vue
+++ b/kitsune-fe/src/components/BaseTimeline.vue
@@ -1,7 +1,7 @@
 <template>
-  <fieldset class="home-timeline">
+  <fieldset class="timeline" ref="scroller">
     <legend>INCOMING TRANSMISSIONS</legend>
-    <DynamicScroller :items="posts" :min-item-size="50">
+    <DynamicScroller class="scroller" :items="posts" :min-item-size="50">
       <template
         v-slot="{
           item,
@@ -21,7 +21,7 @@
           :data-index="index"
         >
           <Post :subject="item.subject" :content="item.content" />
-          <!-- Load bearing litting div -->
+          <!-- Load bearing little div -->
           <!-- Without this div, the height computation is all messed up and the margin of the post gets ignored -->
           <div style="height: 1px"></div>
         </DynamicScrollerItem>
@@ -31,10 +31,43 @@
 </template>
 
 <script lang="ts" setup>
+  import { useInfiniteScroll } from '@vueuse/core';
+
+  import { ref } from 'vue';
+
+  import Post from './Post.vue';
+
   export type Post = {
     subject?: string | null;
     content: string;
   };
 
   defineProps<{ posts: Post[] }>();
+
+  const scroller = ref<HTMLElement>();
+  useInfiniteScroll(
+    scroller,
+    () => {
+      console.log('hmm');
+    },
+    { distance: 10 },
+  );
 </script>
+
+<style lang="scss" scoped>
+  .timeline {
+    margin: 1em;
+    border-color: grey;
+
+    max-height: 80vh;
+    overflow-y: scroll;
+  }
+
+  .post-container * {
+    margin-bottom: 15px;
+  }
+
+  .scroller {
+    height: 100%;
+  }
+</style>
diff --git a/kitsune-fe/src/components/NavBar.vue b/kitsune-fe/src/components/NavBar.vue
index d348c2068..6fe890ff7 100644
--- a/kitsune-fe/src/components/NavBar.vue
+++ b/kitsune-fe/src/components/NavBar.vue
@@ -68,6 +68,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    z-index: 999;
 
     @include only-on-mobile {
       padding: 0;
diff --git a/kitsune-fe/src/components/Post.vue b/kitsune-fe/src/components/Post.vue
index 9c2e09aa2..b0e8bcb41 100644
--- a/kitsune-fe/src/components/Post.vue
+++ b/kitsune-fe/src/components/Post.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
   type Props = {
-    subject: string;
+    subject?: string | null;
     content: string;
   };
 
diff --git a/kitsune-fe/src/graphql/timeline.ts b/kitsune-fe/src/graphql/timeline.ts
index 4d7066840..79738c91c 100644
--- a/kitsune-fe/src/graphql/timeline.ts
+++ b/kitsune-fe/src/graphql/timeline.ts
@@ -15,6 +15,9 @@ function getHome() {
             url
             account {
               id
+              avatar {
+                url
+              }
               displayName
               username
               url
diff --git a/kitsune-fe/src/graphql/types/gql.ts b/kitsune-fe/src/graphql/types/gql.ts
index a75caf31f..2db3b2cd5 100644
--- a/kitsune-fe/src/graphql/types/gql.ts
+++ b/kitsune-fe/src/graphql/types/gql.ts
@@ -18,7 +18,7 @@ const documents = {
     types.RegisterUserDocument,
   '\n      query getInstanceInfo {\n        instance {\n          description\n          domain\n          localPostCount\n          registrationsOpen\n          name\n          userCount\n          version\n          captcha {\n            backend\n            key\n          }\n        }\n      }\n    ':
     types.GetInstanceInfoDocument,
-  '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ':
+  '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ':
     types.GetHomeTimelineDocument,
   '\n      mutation registerOauthApplication(\n        $name: String!\n        $redirect_uri: String!\n      ) {\n        registerOauthApplication(name: $name, redirectUri: $redirect_uri) {\n          id\n          secret\n          redirectUri\n        }\n      }\n    ':
     types.RegisterOauthApplicationDocument,
@@ -54,8 +54,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ',
-): (typeof documents)['\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    '];
+  source: '\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    ',
+): (typeof documents)['\n      query getHomeTimeline {\n        homeTimeline(before: "00000000-0000-0000-0000-000000000000")\n          @_relayPagination(mergeMode: "after") {\n          nodes {\n            id\n            subject\n            content\n            url\n            account {\n              id\n              avatar {\n                url\n              }\n              displayName\n              username\n              url\n            }\n          }\n          pageInfo {\n            startCursor\n            endCursor\n          }\n        }\n      }\n    '];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/kitsune-fe/src/graphql/types/graphql.ts b/kitsune-fe/src/graphql/types/graphql.ts
index 82b690659..2806dca5d 100644
--- a/kitsune-fe/src/graphql/types/graphql.ts
+++ b/kitsune-fe/src/graphql/types/graphql.ts
@@ -303,6 +303,7 @@ export type GetHomeTimelineQuery = {
         displayName?: string | null;
         username: string;
         url: string;
+        avatar?: { __typename?: 'MediaAttachment'; url: string } | null;
       };
     }>;
     pageInfo: {
@@ -566,6 +567,19 @@ export const GetHomeTimelineDocument = {
                               kind: 'Field',
                               name: { kind: 'Name', value: 'id' },
                             },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'avatar' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'url' },
+                                  },
+                                ],
+                              },
+                            },
                             {
                               kind: 'Field',
                               name: { kind: 'Name', value: 'displayName' },
diff --git a/kitsune-fe/src/views/timeline/HomePage.vue b/kitsune-fe/src/views/timeline/HomePage.vue
index 4ba312d25..93cb3bb37 100644
--- a/kitsune-fe/src/views/timeline/HomePage.vue
+++ b/kitsune-fe/src/views/timeline/HomePage.vue
@@ -13,17 +13,3 @@
     data.value ? data.value.homeTimeline.nodes : [],
   );
 </script>
-
-<style lang="scss" scoped>
-  @use '../../styles/colours' as *;
-
-  .home-timeline {
-    margin: auto;
-    max-width: 90ch;
-    border-color: grey;
-  }
-
-  .post-container * {
-    margin-bottom: 15px;
-  }
-</style>
diff --git a/kitsune/src/http/graphql/query/timeline.rs b/kitsune/src/http/graphql/query/timeline.rs
index 6172d956c..babe4a8a8 100644
--- a/kitsune/src/http/graphql/query/timeline.rs
+++ b/kitsune/src/http/graphql/query/timeline.rs
@@ -9,6 +9,7 @@ use async_graphql::{
 use futures_util::TryStreamExt;
 use kitsune_core::service::timeline::{GetHome, GetPublic};
 use speedy_uuid::Uuid;
+use std::collections::VecDeque;
 
 #[derive(Default)]
 pub struct TimelineQuery;
@@ -47,9 +48,11 @@ impl TimelineQuery {
                     .map_ok(Post::from);
 
                 let mut connection = Connection::new(true, true); // TODO: Set actual values
+                let mut edges = VecDeque::new();
                 while let Some(post) = post_stream.try_next().await? {
-                    connection.edges.push(Edge::new(post.id, post));
+                    edges.push_front(Edge::new(post.id, post));
                 }
+                connection.edges = edges.into();
 
                 Ok::<_, async_graphql::Error>(connection)
             },