Skip to content

Commit

Permalink
add post page
Browse files Browse the repository at this point in the history
  • Loading branch information
@aumetra
aumetra committed Oct 7, 2023
1 parent 388bf2c commit 320e052
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 1 deletion.
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 @@ -115,7 +115,7 @@
& * {
width: 100%;
max-height: 50ch;
max-height: 30ch;
}
}
}
Expand Down
40 changes: 40 additions & 0 deletions kitsune-fe/src/graphql/post.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { useQuery } from '@urql/vue';

import { computed } from 'vue';

import { graphql } from './types';

function getPostById(id: string) {
const { data } = useQuery({
query: graphql(`
query getPostById($id: UUID!) {
getPostById(id: $id) {
id
subject
content
account {
id
displayName
username
avatar {
url
}
url
}
attachments {
contentType
description
url
}
}
}
`),
variables: {
id,
},
});

return computed(() => data.value?.getPostById);
}

export { getPostById };
8 changes: 8 additions & 0 deletions kitsune-fe/src/graphql/types/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ 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 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 ':
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 ':
Expand Down Expand Up @@ -50,6 +52,12 @@ export function graphql(
export function graphql(
source: '\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 ',
): (typeof documents)['\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 '];
/**
* 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 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 ',
): (typeof documents)['\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 '];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
125 changes: 125 additions & 0 deletions kitsune-fe/src/graphql/types/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,34 @@ export type GetInstanceInfoQuery = {
};
};

export type GetPostByIdQueryVariables = Exact<{
id: Scalars['UUID']['input'];
}>;

export type GetPostByIdQuery = {
__typename?: 'RootQuery';
getPostById: {
__typename?: 'Post';
id: any;
subject?: string | null;
content: string;
account: {
__typename?: 'Account';
id: any;
displayName?: string | null;
username: string;
url: string;
avatar?: { __typename?: 'MediaAttachment'; url: string } | null;
};
attachments: Array<{
__typename?: 'MediaAttachment';
contentType: string;
description?: string | null;
url: string;
}>;
};
};

export type GetHomeTimelineQueryVariables = Exact<{ [key: string]: never }>;

export type GetHomeTimelineQuery = {
Expand Down Expand Up @@ -503,6 +531,103 @@ export const GetInstanceInfoDocument = {
GetInstanceInfoQuery,
GetInstanceInfoQueryVariables
>;
export const GetPostByIdDocument = {
kind: 'Document',
definitions: [
{
kind: 'OperationDefinition',
operation: 'query',
name: { kind: 'Name', value: 'getPostById' },
variableDefinitions: [
{
kind: 'VariableDefinition',
variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
type: {
kind: 'NonNullType',
type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } },
},
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'getPostById' },
arguments: [
{
kind: 'Argument',
name: { kind: 'Name', value: 'id' },
value: {
kind: 'Variable',
name: { kind: 'Name', value: 'id' },
},
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{ kind: 'Field', name: { kind: 'Name', value: 'id' } },
{ kind: 'Field', name: { kind: 'Name', value: 'subject' } },
{ kind: 'Field', name: { kind: 'Name', value: 'content' } },
{
kind: 'Field',
name: { kind: 'Name', value: 'account' },
selectionSet: {
kind: 'SelectionSet',
selections: [
{ kind: 'Field', name: { kind: 'Name', value: 'id' } },
{
kind: 'Field',
name: { kind: 'Name', value: 'displayName' },
},
{
kind: 'Field',
name: { kind: 'Name', value: 'username' },
},
{
kind: 'Field',
name: { kind: 'Name', value: 'avatar' },
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'url' },
},
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'url' } },
],
},
},
{
kind: 'Field',
name: { kind: 'Name', value: 'attachments' },
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'contentType' },
},
{
kind: 'Field',
name: { kind: 'Name', value: 'description' },
},
{ kind: 'Field', name: { kind: 'Name', value: 'url' } },
],
},
},
],
},
},
],
},
},
],
} as unknown as DocumentNode<GetPostByIdQuery, GetPostByIdQueryVariables>;
export const GetHomeTimelineDocument = {
kind: 'Document',
definitions: [
Expand Down
4 changes: 4 additions & 0 deletions kitsune-fe/src/router.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ const routes = [
path: '/oauth-callback',
component: () => import('./views/OAuthCallback.vue'),
},
{
path: '/posts/:id',
component: () => import('./views/PostPage.vue'),
},
{
path: '/:catchAll(.*)',
component: () => import('./views/NotFound.vue'),
Expand Down
28 changes: 28 additions & 0 deletions kitsune-fe/src/views/PostPage.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<div class="post-view">
<Post
v-if="postData"
:subject="postData.subject"
:content="postData.content"
:account="postData.account"
:attachments="postData.attachments"
/>
</div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import Post from '../components/Post.vue';
import { getPostById } from '../graphql/post';
const route = useRoute();
const postData = getPostById(<string>route.params.id);
</script>

<style lang="scss" scoped>
.post-view {
max-width: 100ch;
margin: auto;
}
</style>

0 comments on commit 320e052

Please sign in to comment.