✨ Implement filters

src/components/AppFooter.css

@@ -11,6 +11,10 @@
     align-items: center;
 }
 
+.App__Footer__Area--Filters {
+    justify-content: flex-start;
+}
+
 .App__Footer__Area--Pagination {
     justify-content: center;
 }

src/components/AppFooter.js

@@ -1,9 +1,11 @@
+import cCheckbox from './c-checkbox.js';
 import cButton from './c-button.js';
 
 import style from './AppFooter.css' assert { type: 'css' };
 
 export default {
     'components': {
+        cCheckbox,
         cButton
     },
     'inject': [
@@ -13,7 +15,9 @@ export default {
         page: undefined
     },
     'data': () => ({
-        style
+        style,
+        isAnsweredQuestions: undefined,
+        isCommentedQuestions: undefined
     }),
     'methods': {
         prevPage: function(){
@@ -24,11 +28,42 @@ export default {
         },
         fetchComments: function(){
             this.emitter.emit('fetch-comments');
+        },
+        toggleAnsweredQuestions: function(value){
+            this.emitter.emit('toggle-answered-questions', value);
+        },
+        toggleCommentedQuestions: function(value){
+            this.emitter.emit('toggle-commented-questions', value);
+        },
+        onToggledAnsweredQuestions: function(value){
+            this.isAnsweredQuestions = value;
+        },
+        onToggledCommentedQuestions: function(value){
+            this.isCommentedQuestions = value;
         }
     },
+    'mounted': function(){
+        this.emitter.on('toggled-answered-questions', this.onToggledAnsweredQuestions);
+        this.emitter.on('toggled-commented-questions', this.onToggledCommentedQuestions);
+    },
+    'beforeUnmount': function(){
+        this.emitter.off('toggled-answered-questions', this.onToggledAnsweredQuestions);
+        this.emitter.off('toggled-commented-questions', this.onToggledCommentedQuestions);
+    },
     'template': `
         <footer class="App__Footer">
-            <p class="App__Footer__Area"><!-- TODO --></p>
+            <ul class="App__Footer__Area App__Footer__Area--Filters">
+                <li><c-checkbox
+                    label="Answered questions"
+                    :is-checked="isAnsweredQuestions"
+                    @toggle="toggleAnsweredQuestions"
+                ></c-checkbox></li>
+                <li><c-checkbox
+                    label="Commented questions"
+                    :is-checked="isCommentedQuestions"
+                    @toggle="toggleCommentedQuestions"
+                ></c-checkbox></li>
+            </ul>
             <p class="App__Footer__Area App__Footer__Area--Pagination">
                 <button
                     @click="prevPage"

src/components/AppMain.js

@@ -43,7 +43,7 @@ export default {
         },
         refresh: async function(){
             this.isLoading = true;
-            this.questions = (await getQuestions({ page: this.page })).filter(({ answerCount }) => !answerCount);
+            this.questions = await getQuestions({ page: this.page });
             this.blacklistedTagNames = JSON.parse(window.localStorage.getItem('blacklistedTagNames') || '[]');
             this.whitelistedTagNames = JSON.parse(window.localStorage.getItem('whitelistedTagNames') || '[]');
             this.waitlistedTagNames = this.getWaitlistedTagNames();

src/components/AppMainQuestions.js

@@ -29,7 +29,8 @@ export default {
         style,
         isLoading: false,
         sortedQuestions: undefined,
-        sortedQuestionsRefreshTimeout: undefined,
+        isAnsweredQuestions: undefined,
+        isCommentedQuestions: undefined,
         commentCount: {}
     }),
     'methods': {
@@ -51,6 +52,11 @@ export default {
                             bountyExpiration: now.to(dayjs(question.bountyExpirationTimestamp))
                         };
                     })
+                    .filter(question =>
+                        (this.isAnsweredQuestions ? true : !question.answerCount)
+                        &&
+                        (this.isCommentedQuestions ? true : !this.commentCount[question.id])
+                    )
                     .sort((a, b) =>
                         b.matchRate - a.matchRate
                         ||
@@ -60,9 +66,20 @@ export default {
                     );
             }
         },
+        toggleAnsweredQuestions: function(value){
+            this.isAnsweredQuestions = value;
+            this.refreshSortedQuestions();
+            this.emitter.emit('toggled-answered-questions', value);
+        },
+        toggleCommentedQuestions: function(value){
+            this.isCommentedQuestions = value;
+            this.refreshSortedQuestions();
+            this.emitter.emit('toggled-commented-questions', value);
+        },
         fetchComments: async function(){
             this.isLoading = true;
             await Promise.all(this.sortedQuestions.map(({ id }) => (async () => this.commentCount[id] = await getQuestionCommentCount({ id }))()));
+            this.refreshSortedQuestions();
             this.isLoading = false;
         }
     },
@@ -71,9 +88,13 @@ export default {
         this.$watch(() => this.blacklistedTagNames, this.refreshSortedQuestions, { deep: true });
         this.$watch(() => this.whitelistedTagNames, this.refreshSortedQuestions, { deep: true });
         this.emitter.on('fetch-comments', this.fetchComments);
+        this.emitter.on('toggle-answered-questions', this.toggleAnsweredQuestions);
+        this.emitter.on('toggle-commented-questions', this.toggleCommentedQuestions);
     },
     'beforeUnmount': function(){
         this.emitter.off('fetch-comments', this.fetchComments);
+        this.emitter.off('toggle-answered-questions', this.toggleAnsweredQuestions);
+        this.emitter.off('toggle-commented-questions', this.toggleCommentedQuestions);
     },
     'template': `
         <div class="App__Main__Questions">

src/components/c-checkbox.css

@@ -0,0 +1,5 @@
+.c-checkbox {
+    display: flex;
+    column-gap: 0.5rem;
+    align-items: center;
+}

src/components/c-checkbox.js

@@ -0,0 +1,26 @@
+import style from './c-checkbox.css' assert { type: 'css' };
+
+export default {
+    'props': {
+        label: undefined,
+        isChecked: undefined
+    },
+    'data': () => ({
+        style
+    }),
+    'methods': {
+        toggle: function(event){
+            this.$emit('toggle', event.target.checked);
+        }
+    },
+    'template': `
+        <label
+            class="c-checkbox"
+        ><input
+            type="checkbox"
+            :checked="isChecked"
+            :key="isChecked"
+            @click.prevent="toggle"
+        >{{ label }}</label>
+    `
+};