DebaucheryLibrarian
/
shack
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added shelf template shared between shelf and post page.

This commit is contained in:
DebaucheryLibrarian 2023-06-25 20:43:42 +02:00
parent f3c8718fb2
commit 041b502776
6 changed files with 179 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/posts/post.vue
View File

@ -5,19 +5,19 @@
class="vote bump" class="vote bump"
:class="{ active: hasBump }" :class="{ active: hasBump }"
title="Bump" title="Bump"
@click="vote(1)" @click="submitVote(1)"
>+</div> >+</div>
<div <div
class="tally" class="tally"
:title="`${post.votes.total} ${post.votes.total === 1 ? 'vote' : 'votes'}`" :title="`${post.vote.total} ${post.vote.total === 1 ? 'vote' : 'votes'}`"
>{{ tally }}</div> >{{ tally }}</div>
<div <div
class="vote sink" class="vote sink"
:class="{ active: hasSink }" :class="{ active: hasSink }"
title="Sink" title="Sink"
@click="vote(-1)" @click="submitVote(-1)"
>-</div> >-</div>
</div> </div>
@ -102,12 +102,12 @@ const props = defineProps({
}, },
}); });
const tally = ref(props.post.votes.tally); const tally = ref(props.post.vote.tally);
const hasBump = ref(props.post.votes.bump); const hasBump = ref(props.post.vote.bump);
const hasSink = ref(props.post.votes.sink); const hasSink = ref(props.post.vote.sink);
const voting = ref(false); const voting = ref(false);
async function vote(value) { async function submitVote(value) {
if (!me || voting.value) { if (!me || voting.value) {
return; return;
} }
@ -115,11 +115,11 @@ async function vote(value) {
voting.value = true; voting.value = true;
const undo = (value > 0 && hasBump.value) || (value < 0 && hasSink.value); const undo = (value > 0 && hasBump.value) || (value < 0 && hasSink.value);
const votes = await api.post(`/posts/${props.post.id}/votes`, { value: undo ? 0 : value }); const vote = await api.post(`/posts/${props.post.id}/votes`, { value: undo ? 0 : value });
tally.value = votes.tally; tally.value = vote.tally;
hasBump.value = votes.bump; hasBump.value = vote.bump;
hasSink.value = votes.sink; hasSink.value = vote.sink;
voting.value = false; voting.value = false;
} }
@ -178,7 +178,7 @@ async function vote(value) {
} }
.votes { .votes {
width: 2rem; width: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

23
pages/posts/post.page.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="page"> <Shelf :shelf="shelf">
<div class="content"> <div class="content">
<Post <Post
:post="post" :post="post"
@ -43,14 +43,11 @@
</li> </li>
</ul> </ul>
</div> </div>
</Shelf>
<div class="sidebar">
{{ shelf.name }}
</div>
</div>
</template> </template>
<script setup> <script setup>
import Shelf from '../../templates/shelves/shelf.vue';
import Post from '../../components/posts/post.vue'; import Post from '../../components/posts/post.vue';
import Comment from '../../components/comments/comment.vue'; import Comment from '../../components/comments/comment.vue';
import Writer from '../../components/comments/writer.vue'; import Writer from '../../components/comments/writer.vue';
@ -67,12 +64,8 @@ const {
</script> </script>
<style scoped> <style scoped>
.page {
display: flex;
}
.content { .content {
flex-grow: 1; width: 100%;
} }
.body { .body {
@ -90,12 +83,4 @@ const {
.post { .post {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.sidebar {
background: var(--background);
width: 20rem;
padding: .5rem;
border-radius: .5rem;
margin-left: .5rem;
}
</style> </style>

66
pages/shelves/shelf.page.vue
View File

@ -1,11 +1,10 @@
<template> <template>
<div class="content"> <Shelf :shelf="shelf">
<h3>{{ shelf.slug }}</h3>
<ul class="posts nolist"> <ul class="posts nolist">
<li <li
v-for="post in posts" v-for="post in posts"
:key="post.id" :key="post.id"
class="post-item"
> >
<Post <Post
:post="post" :post="post"
@ -13,74 +12,31 @@
/> />
</li> </li>
</ul> </ul>
</Shelf>
<form
class="form compose"
@submit.prevent="submitPost"
>
<div class="form-row">
<input
v-model="title"
placeholder="Title"
class="input"
>
</div>
<div class="form-row">
<input
v-model="link"
class="input"
placeholder="Link"
>
</div>
<div class="form-row">
<textarea
v-model="body"
placeholder="Body"
class="input body"
/>
</div>
<div class="form-actions">
<button class="button button-submit">Post</button>
</div>
</form>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import Shelf from '../../templates/shelves/shelf.vue';
import Post from '../../components/posts/post.vue'; import Post from '../../components/posts/post.vue';
import * as api from '../../assets/js/api';
import { navigate } from '../../assets/js/navigate';
import { usePageContext } from '../../renderer/usePageContext'; import { usePageContext } from '../../renderer/usePageContext';
const { pageData, routeParams } = usePageContext(); const { pageData } = usePageContext();
const { const {
shelf, shelf,
posts, posts,
} = pageData; } = pageData;
const title = ref();
const link = ref();
const body = ref();
async function submitPost() {
const post = await api.post(`/shelves/${routeParams.id}/posts`, {
title: title.value,
link: link.value,
body: body.value,
});
navigate(`/s/${shelf.slug}/post/${post.id}`);
}
</script> </script>
<style scoped> <style scoped>
.posts { .posts {
width: 100%;
display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.post-item {
width: 100%;
}
</style> </style>

7
renderer/container.vue
View File

@ -48,13 +48,6 @@ async function logout() {
</script> </script>
<style> <style>
.content {
display: flex;
flex-direction: column;
padding: 1rem;
flex-grow: 1;
}
.logo svg { .logo svg {
height: 100%; height: 100%;
width: auto; width: auto;

37
src/posts.js
View File

@ -6,6 +6,13 @@ import { HttpError } from './errors';
import { fetchShelf } from './shelves'; import { fetchShelf } from './shelves';
import { fetchUsers } from './users'; import { fetchUsers } from './users';
const emptyVote = {
tally: 0,
total: 0,
bump: false,
sink: false,
};
function curateDatabasePost(post, { function curateDatabasePost(post, {
shelf, users, votes, shelf, users, votes,
}) { }) {
@ -18,7 +25,7 @@ function curateDatabasePost(post, {
createdAt: post.created_at, createdAt: post.created_at,
shelf, shelf,
user: users.find((user) => user.id === post.user_id), user: users.find((user) => user.id === post.user_id),
votes: votes[post.id], vote: votes[post.id] || emptyVote,
commentCount: Number(post.comment_count), commentCount: Number(post.comment_count),
}; };
@ -123,19 +130,27 @@ async function createPost(post, shelfId, user) {
} }
async function votePost(postId, value, user) { async function votePost(postId, value, user) {
await knex('posts_votes') if (value === 0) {
.insert({ await knex('posts_votes')
value, .where({
post_id: postId, post_id: postId,
user_id: user.id, user_id: user.id,
}) })
.onConflict(['post_id', 'user_id']) .delete();
.merge() } else {
.returning('value'); await knex('posts_votes')
.insert({
value,
post_id: postId,
user_id: user.id,
})
.onConflict(['post_id', 'user_id'])
.merge();
}
const votes = await fetchPostVotes([postId], user); const votes = await fetchPostVotes([postId], user);
return votes[postId]; return votes[postId] || emptyVote;
} }
export { export {

126
templates/shelves/shelf.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div class="page">
<header class="header">
<h2 class="title">
<a
:href="`/s/${shelf.slug}`"
class="nolink"
>s/{{ shelf.slug }}</a>
</h2>
</header>
<div class="body">
<slot />
<div class="sidebar">
<h4 class="sidebar-title">{{ shelf.slug }}</h4>
<form
class="form compose"
@submit.prevent="submitPost"
>
<div class="form-row">
<input
v-model="title"
placeholder="Title"
class="input"
>
</div>
<div class="form-row">
<input
v-model="link"
class="input"
placeholder="Link"
>
</div>
<div class="form-row">
<textarea
v-model="body"
placeholder="Body"
class="input body"
/>
</div>
<div class="form-actions">
<button class="button button-submit">Post</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps } from 'vue';
import * as api from '../../assets/js/api';
import { navigate } from '../../assets/js/navigate';
import { usePageContext } from '../../renderer/usePageContext';
const { routeParams } = usePageContext();
const props = defineProps({
shelf: {
type: Object,
default: null,
},
});
const title = ref();
const link = ref();
const body = ref();
async function submitPost() {
const post = await api.post(`/shelves/${routeParams.id}/posts`, {
title: title.value,
link: link.value,
body: body.value,
});
navigate(`/s/${props.shelf.slug}/post/${post.id}`);
}
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
padding: 1rem
}
.body {
display: flex;
}
.content {
width: 100%;
display: flex;
flex-grow: 1;
}
.header {
padding: 1rem;
border-radius: .25rem;
margin-bottom: .5rem;
background: var(--background);
}
.title {
margin: 0;
font-size: 1.25rem;
}
.sidebar {
background: var(--background);
width: 20rem;
padding: .5rem;
border-radius: .25rem;
margin-left: .5rem;
}
.sidebar-title {
margin: 0 0 1rem 0;
font-size: 1.25rem;
}
</style>