Skip to content

Commit

Permalink
add local timeline, add global timeline, add infinite scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@aumetra
aumetra committed Oct 15, 2023
1 parent 7ddc054 commit 4a4d2a5
Show file tree
Hide file tree
Showing 9 changed files with 391 additions and 35 deletions.
19 changes: 10 additions & 9 deletions kitsune-fe/src/components/BaseTimeline.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
class="post-container"
:item="item"
:active="active"
:size-dependencies="[item.subject, item.content]"
:size-dependencies="[item.subject, item.content, item.attachments]"
:data-index="index"
>
<Post
Expand All @@ -46,16 +46,17 @@
import Post, { Post as PostType } from './Post.vue';
defineProps<{ posts: PostType[] }>();
const props = defineProps<{
posts: PostType[];
loadMore: () => Promise<void>;
}>();
const scroller = ref<HTMLElement>();
useInfiniteScroll(
scroller,
async () => {
console.log('hmm');
},
{ distance: 3 },
);
useInfiniteScroll(scroller, async () => {
if (props.posts.length !== 0) {
await props.loadMore();
}
});
</script>

<style lang="scss" scoped>
Expand Down
3 changes: 3 additions & 0 deletions kitsune-fe/src/consts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ const BACKEND_PREFIX =
const DEFAULT_PROFILE_PICTURE_URL =
BACKEND_PREFIX + '/public/assets/default-avatar.png';

const MAX_UUID = 'FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFFFFFF';

const TEMPLATE_PARAMS = {
separator: '-',
siteName: 'Kitsune',
Expand All @@ -14,6 +16,7 @@ const TITLE_TEMPLATE = '%s %separator %siteName';
export {
BACKEND_PREFIX,
DEFAULT_PROFILE_PICTURE_URL,
MAX_UUID,
TEMPLATE_PARAMS,
TITLE_TEMPLATE,
};
54 changes: 50 additions & 4 deletions kitsune-fe/src/graphql/timeline.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,54 @@
import { useQuery } from '@urql/vue';

import { Ref } from 'vue';

import { graphql } from './types';

function getHome() {
function getHome(after: Ref<string>) {
const { data } = useQuery({
query: graphql(`
query getHomeTimeline($after: String!) {
homeTimeline(after: $after) @_relayPagination(mergeMode: "after") {
nodes {
id
subject
content
url
account {
id
avatar {
url
}
displayName
username
url
}
attachments {
contentType
description
url
}
}
pageInfo {
startCursor
endCursor
}
}
}
`),
variables: {
after: after as unknown as string,
},
});

return data;
}

function getPublic(after: Ref<string>, onlyLocal: boolean) {
const { data } = useQuery({
query: graphql(`
query getHomeTimeline {
homeTimeline(before: "00000000-0000-0000-0000-000000000000")
query getPublicTimeline($after: String!, $onlyLocal: Boolean!) {
publicTimeline(after: $after, onlyLocal: $onlyLocal)
@_relayPagination(mergeMode: "after") {
nodes {
id
Expand Down Expand Up @@ -35,9 +77,13 @@ function getHome() {
}
}
`),
variables: {
after: after as unknown as string,
onlyLocal,
},
});

return data;
}

export { getHome };
export { getHome, getPublic };
14 changes: 11 additions & 3 deletions kitsune-fe/src/graphql/types/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ const documents = {
types.GetInstanceInfoDocument,
'\n query getPostById($id: UUID!) {\n getPostById(id: $id) {\n id\n subject\n content\n account {\n id\n displayName\n username\n avatar {\n url\n }\n url\n }\n attachments {\n contentType\n description\n url\n }\n }\n }\n ':
types.GetPostByIdDocument,
'\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 attachments {\n contentType\n description\n url\n }\n }\n pageInfo {\n startCursor\n endCursor\n }\n }\n }\n ':
'\n query getHomeTimeline($after: String!) {\n homeTimeline(after: $after) @_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 attachments {\n contentType\n description\n url\n }\n }\n pageInfo {\n startCursor\n endCursor\n }\n }\n }\n ':
types.GetHomeTimelineDocument,
'\n query getPublicTimeline($after: String!, $onlyLocal: Boolean!) {\n publicTimeline(after: $after, onlyLocal: $onlyLocal)\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 attachments {\n contentType\n description\n url\n }\n }\n pageInfo {\n startCursor\n endCursor\n }\n }\n }\n ':
types.GetPublicTimelineDocument,
'\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 @@ -62,8 +64,14 @@ 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 avatar {\n url\n }\n displayName\n username\n url\n }\n attachments {\n contentType\n description\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 attachments {\n contentType\n description\n url\n }\n }\n pageInfo {\n startCursor\n endCursor\n }\n }\n }\n '];
source: '\n query getHomeTimeline($after: String!) {\n homeTimeline(after: $after) @_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 attachments {\n contentType\n description\n url\n }\n }\n pageInfo {\n startCursor\n endCursor\n }\n }\n }\n ',
): (typeof documents)['\n query getHomeTimeline($after: String!) {\n homeTimeline(after: $after) @_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 attachments {\n contentType\n description\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.
*/
export function graphql(
source: '\n query getPublicTimeline($after: String!, $onlyLocal: Boolean!) {\n publicTimeline(after: $after, onlyLocal: $onlyLocal)\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 attachments {\n contentType\n description\n url\n }\n }\n pageInfo {\n startCursor\n endCursor\n }\n }\n }\n ',
): (typeof documents)['\n query getPublicTimeline($after: String!, $onlyLocal: Boolean!) {\n publicTimeline(after: $after, onlyLocal: $onlyLocal)\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 attachments {\n contentType\n description\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
Loading

0 comments on commit 4a4d2a5

Please sign in to comment.