Added shelf template shared between shelf and post page.
This commit is contained in:
parent
f3c8718fb2
commit
041b502776
|
|
@ -5,19 +5,19 @@
|
|||
class="vote bump"
|
||||
:class="{ active: hasBump }"
|
||||
title="Bump"
|
||||
@click="vote(1)"
|
||||
@click="submitVote(1)"
|
||||
>+</div>
|
||||
|
||||
<div
|
||||
class="tally"
|
||||
:title="`${post.votes.total} ${post.votes.total === 1 ? 'vote' : 'votes'}`"
|
||||
:title="`${post.vote.total} ${post.vote.total === 1 ? 'vote' : 'votes'}`"
|
||||
>{{ tally }}</div>
|
||||
|
||||
<div
|
||||
class="vote sink"
|
||||
:class="{ active: hasSink }"
|
||||
title="Sink"
|
||||
@click="vote(-1)"
|
||||
@click="submitVote(-1)"
|
||||
>-</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -102,12 +102,12 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const tally = ref(props.post.votes.tally);
|
||||
const hasBump = ref(props.post.votes.bump);
|
||||
const hasSink = ref(props.post.votes.sink);
|
||||
const tally = ref(props.post.vote.tally);
|
||||
const hasBump = ref(props.post.vote.bump);
|
||||
const hasSink = ref(props.post.vote.sink);
|
||||
const voting = ref(false);
|
||||
|
||||
async function vote(value) {
|
||||
async function submitVote(value) {
|
||||
if (!me || voting.value) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -115,11 +115,11 @@ async function vote(value) {
|
|||
voting.value = true;
|
||||
|
||||
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;
|
||||
hasBump.value = votes.bump;
|
||||
hasSink.value = votes.sink;
|
||||
tally.value = vote.tally;
|
||||
hasBump.value = vote.bump;
|
||||
hasSink.value = vote.sink;
|
||||
|
||||
voting.value = false;
|
||||
}
|
||||
|
|
@ -178,7 +178,7 @@ async function vote(value) {
|
|||
}
|
||||
|
||||
.votes {
|
||||
width: 2rem;
|
||||
width: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<Shelf :shelf="shelf">
|
||||
<div class="content">
|
||||
<Post
|
||||
:post="post"
|
||||
|
|
@ -43,14 +43,11 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
{{ shelf.name }}
|
||||
</div>
|
||||
</div>
|
||||
</Shelf>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Shelf from '../../templates/shelves/shelf.vue';
|
||||
import Post from '../../components/posts/post.vue';
|
||||
import Comment from '../../components/comments/comment.vue';
|
||||
import Writer from '../../components/comments/writer.vue';
|
||||
|
|
@ -67,12 +64,8 @@ const {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
@ -90,12 +83,4 @@ const {
|
|||
.post {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: var(--background);
|
||||
width: 20rem;
|
||||
padding: .5rem;
|
||||
border-radius: .5rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<h3>{{ shelf.slug }}</h3>
|
||||
|
||||
<Shelf :shelf="shelf">
|
||||
<ul class="posts nolist">
|
||||
<li
|
||||
v-for="post in posts"
|
||||
:key="post.id"
|
||||
class="post-item"
|
||||
>
|
||||
<Post
|
||||
:post="post"
|
||||
|
|
@ -13,74 +12,31 @@
|
|||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</Shelf>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Shelf from '../../templates/shelves/shelf.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';
|
||||
|
||||
const { pageData, routeParams } = usePageContext();
|
||||
const { pageData } = usePageContext();
|
||||
|
||||
const {
|
||||
shelf,
|
||||
posts,
|
||||
} = 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>
|
||||
|
||||
<style scoped>
|
||||
.posts {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,13 +48,6 @@ async function logout() {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
|
|
|
|||
37
src/posts.js
37
src/posts.js
|
|
@ -6,6 +6,13 @@ import { HttpError } from './errors';
|
|||
import { fetchShelf } from './shelves';
|
||||
import { fetchUsers } from './users';
|
||||
|
||||
const emptyVote = {
|
||||
tally: 0,
|
||||
total: 0,
|
||||
bump: false,
|
||||
sink: false,
|
||||
};
|
||||
|
||||
function curateDatabasePost(post, {
|
||||
shelf, users, votes,
|
||||
}) {
|
||||
|
|
@ -18,7 +25,7 @@ function curateDatabasePost(post, {
|
|||
createdAt: post.created_at,
|
||||
shelf,
|
||||
user: users.find((user) => user.id === post.user_id),
|
||||
votes: votes[post.id],
|
||||
vote: votes[post.id] || emptyVote,
|
||||
commentCount: Number(post.comment_count),
|
||||
};
|
||||
|
||||
|
|
@ -123,19 +130,27 @@ async function createPost(post, shelfId, user) {
|
|||
}
|
||||
|
||||
async function votePost(postId, value, user) {
|
||||
await knex('posts_votes')
|
||||
.insert({
|
||||
value,
|
||||
post_id: postId,
|
||||
user_id: user.id,
|
||||
})
|
||||
.onConflict(['post_id', 'user_id'])
|
||||
.merge()
|
||||
.returning('value');
|
||||
if (value === 0) {
|
||||
await knex('posts_votes')
|
||||
.where({
|
||||
post_id: postId,
|
||||
user_id: user.id,
|
||||
})
|
||||
.delete();
|
||||
} else {
|
||||
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);
|
||||
|
||||
return votes[postId];
|
||||
return votes[postId] || emptyVote;
|
||||
}
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue