Skip to content

Commit

Permalink
infinite scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@aumetra
aumetra committed Oct 7, 2023
1 parent dfe84c4 commit 1f2eb0f
Show file tree
Hide file tree
Showing 9 changed files with 63 additions and 24 deletions.
3 changes: 1 addition & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
}
39 changes: 36 additions & 3 deletions kitsune-fe/src/components/BaseTimeline.vue
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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>
Expand All @@ -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>
1 change: 1 addition & 0 deletions kitsune-fe/src/components/NavBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
@include only-on-mobile {
padding: 0;
Expand Down
2 changes: 1 addition & 1 deletion kitsune-fe/src/components/Post.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<script lang="ts" setup>
type Props = {
subject: string;
subject?: string | null;
content: string;
};
Expand Down
3 changes: 3 additions & 0 deletions kitsune-fe/src/graphql/timeline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ function getHome() {
url
account {
id
avatar {
url
}
displayName
username
url
Expand Down
6 changes: 3 additions & 3 deletions kitsune-fe/src/graphql/types/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
*/
Expand Down
14 changes: 14 additions & 0 deletions kitsune-fe/src/graphql/types/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ export type GetHomeTimelineQuery = {
displayName?: string | null;
username: string;
url: string;
avatar?: { __typename?: 'MediaAttachment'; url: string } | null;
};
}>;
pageInfo: {
Expand Down Expand Up @@ -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' },
Expand Down
14 changes: 0 additions & 14 deletions kitsune-fe/src/views/timeline/HomePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
5 changes: 4 additions & 1 deletion kitsune/src/http/graphql/query/timeline.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)
},
Expand Down

0 comments on commit 1f2eb0f

Please sign in to comment.