Implement comment count, create 'button' component, fix 'getQuestionCommentCount' method

master
KaKi87 7 months ago
parent b5f639d7de
commit ceb457de44

@ -71,6 +71,12 @@ export const
tags: item['tags'],
title: decodeHtmlEntities(item['title'])
})),
getQuestionComments = async ({
getQuestionCommentCount = async ({
site = 'stackoverflow',
id
}) => (await client(`/questions/${id}/comments`)).data['items'].length;
}) => (await client({
url: `/questions/${id}/comments`,
params: {
site
}
})).data['items'].length;

@ -1,10 +1,17 @@
import { createEmitter } from 'https://jspm.dev/simpler-emitter@0.1.0';
import AppHeader from './AppHeader.js';
import AppMain from './AppMain.js';
import AppFooter from './AppFooter.js';
import style from './App.css' assert { type: 'css' };
const emitter = createEmitter();
export default {
'provide': {
emitter
},
'components': {
AppHeader,
AppMain,

@ -1,14 +1,20 @@
.App__Footer,
.App__Footer__Pagination {
display: flex;
}
.App__Footer {
padding: 1rem;
background-color: var(--color-darkest);
justify-content: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.App__Footer__Pagination {
.App__Footer__Area {
display: flex;
column-gap: 0.5rem;
align-items: center;
}
.App__Footer__Area--Pagination {
justify-content: center;
}
.App__Footer__Area--Actions {
justify-content: flex-end;
}

@ -1,6 +1,14 @@
import cButton from './c-button.js';
import style from './AppFooter.css' assert { type: 'css' };
export default {
'components': {
cButton
},
'inject': [
'emitter'
],
'props': {
page: undefined
},
@ -13,11 +21,15 @@ export default {
},
nextPage: function(){
this.$emit('next-page');
},
fetchComments: function(){
this.emitter.emit('fetch-comments');
}
},
'template': `
<footer class="App__Footer">
<p class="App__Footer__Pagination">
<p class="App__Footer__Area"><!-- TODO --></p>
<p class="App__Footer__Area App__Footer__Area--Pagination">
<button
@click="prevPage"
><i
@ -30,6 +42,12 @@ export default {
class="fa fa-caret-right"
></i></button>
</p>
<ul class="App__Footer__Area App__Footer__Area--Actions">
<li><c-button
label="Fetch comments"
@click="fetchComments"
></c-button></li>
</ul>
</footer>
`
};

@ -6,9 +6,16 @@ import cLink from './c-link.js';
import style from './AppMainQuestions.css' assert { type: 'css' };
import {
getQuestionCommentCount
} from '../../lib/stack.js';
dayjs.extend(dayjsRelativeTime);
export default {
'inject': [
'emitter'
],
'components': {
cTag,
cLink
@ -22,7 +29,8 @@ export default {
style,
isLoading: false,
sortedQuestions: undefined,
sortedQuestionsRefreshTimeout: undefined
sortedQuestionsRefreshTimeout: undefined,
commentCount: {}
}),
'methods': {
refreshSortedQuestions: function(){
@ -51,12 +59,21 @@ export default {
a.bountyExpirationTimestamp - b.bountyExpirationTimestamp
);
}
},
fetchComments: async function(){
this.isLoading = true;
await Promise.all(this.sortedQuestions.map(({ id }) => (async () => this.commentCount[id] = await getQuestionCommentCount({ id }))()));
this.isLoading = false;
}
},
'mounted': function(){
this.refreshSortedQuestions();
this.$watch(() => this.blacklistedTagNames, this.refreshSortedQuestions, { deep: true });
this.$watch(() => this.whitelistedTagNames, this.refreshSortedQuestions, { deep: true });
this.emitter.on('fetch-comments', this.fetchComments);
},
'beforeUnmount': function(){
this.emitter.off('fetch-comments', this.fetchComments);
},
'template': `
<div class="App__Main__Questions">
@ -103,7 +120,7 @@ export default {
:label="question.title"
></c-link></td>
<td>{{ question.answerCount }}</td>
<td>-</td>
<td>{{ typeof commentCount[question.id] === 'number' ? commentCount[question.id] : '-' }}</td>
</tr>
</tbody>
</table>

@ -27,18 +27,6 @@
overflow: auto;
}
.App__Main__Swipe__Current__TagDescription__Fetch {
padding: 0.5rem;
background-color: var(--color-dark);
color: var(--color-light);
transition: background-color 0.25s, color 0.25s;
}
.App__Main__Swipe__Current__TagDescription__Fetch:hover {
background-color: var(--color-primary);
color: var(--color-lightest);
}
.App__Main__Swipe__Current__Actions {
display: flex;
column-gap: 1rem;

@ -1,3 +1,5 @@
import cButton from './c-button.js';
import style from './AppMainSwipeCurrent.css' assert { type: 'css' };
import {
@ -5,6 +7,9 @@ import {
} from '../../lib/stack.js';
export default {
'components': {
cButton
},
'props': {
tagName: undefined,
blacklistTag: undefined,
@ -37,11 +42,11 @@ export default {
<p class="App__Main__Swipe__Current__TagDescription">
<span v-if="isLoading"><i class="fa fa-circle-o-notch fa-spin"></i></span>
<span v-else-if="tagDescription">{{ tagDescription }}</span>
<button
<c-button
v-else
class="App__Main__Swipe__Current__TagDescription__Fetch"
label="Load tab description"
@click="loadTagDescription"
>Load tab description</button>
></c-button>
</p>
<form
class="App__Main__Swipe__Current__Actions"

@ -0,0 +1,11 @@
.c-button {
padding: 0.5rem;
background-color: var(--color-dark);
color: var(--color-light);
transition: background-color 0.25s, color 0.25s;
}
.c-button:hover {
background-color: var(--color-primary);
color: var(--color-lightest);
}

@ -0,0 +1,13 @@
import style from './c-button.css' assert { type: 'css' };
export default {
'props': {
label: undefined
},
'data': () => ({
style
}),
'template': `
<button class="c-button">{{ label }}</button>
`
};
Loading…
Cancel
Save