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

lib/stack.js

@@ -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;

src/components/App.js

@@ -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,

src/components/AppFooter.css

@@ -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;
 }

src/components/AppFooter.js

@@ -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>
     `
 };

src/components/AppMainQuestions.js

@@ -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>

src/components/AppMainSwipeCurrent.css

@@ -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;

src/components/AppMainSwipeCurrent.js

@@ -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"

src/components/c-button.css

@@ -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);
+}

src/components/c-button.js

@@ -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>
+    `
+};