feat(saved posts): implement DomainSelector component

Rule-34 · Jun 11, 2021 · 204e77e · 204e77e
1 parent 8874988
commit 204e77e
Showing 1 changed file with 25 additions and 35 deletions.
diff --git a/pages/premium/saved-posts.vue b/pages/premium/saved-posts.vue
@@ -2,25 +2,15 @@
   <main class="flex flex-col max-w-3xl min-h-screen p-4 mx-auto sm:p-6 lg:p-8">
     <ContentSeparator title="Saved posts" />
 
-    <select
-      id="booru-selector"
-      name="booru"
-      aria-label="Change the domain where the saved posts are shown"
-      @change="booruChangeListener"
-    >
-      <option value="all" selected>&lt;All&gt;</option>
-
-      <template v-for="booru in availableBoorusWithSavedPosts">
-        <option :value="booru" :key="booru" :selected="selectedBooru === booru">
-          {{ booru }}
-        </option>
-      </template>
-    </select>
-
-    <ul class="mt-4 space-y-4">
-      <!-- TODO: separate with title if they are from different boorus -->
-      <!-- TODO: use the same booru by the default that is active -->
-
+    <nav class="flex flex-row items-center justify-between py-4">
+      <DomainSelector
+        :activeDomain="selectedBooru"
+        :domainGroupList="boorusThatHaveSavedPosts"
+        @domainChange="onDomainChange"
+      />
+    </nav>
+
+    <ul class="space-y-4">
       <template v-if="savedPostsFromSelectedBooru.length">
         <li v-for="POST in savedPostsFromSelectedBooru" :key="POST.data.id">
           <Post
@@ -66,6 +56,20 @@ export default {
   computed: {
     ...mapGetters('user', ['getSavedPosts']),
 
+    boorusThatHaveSavedPosts() {
+      const BOORU_DOMAINS = this.getSavedPosts.map(
+        (POST) => POST.meta_data.booru_domain
+      )
+
+      const UNIQUE_BOORU_DOMAINS = [...new Set(BOORU_DOMAINS)]
+
+      const DOMAIN_GROUP_LIST = [
+        { name: 'Default', domains: ['<All Boorus>', ...UNIQUE_BOORU_DOMAINS] },
+      ]
+
+      return DOMAIN_GROUP_LIST
+    },
+
     savedPostsFromSelectedBooru() {
       let SAVED_POSTS = null
 
@@ -86,25 +90,11 @@ export default {
 
       return SORTED_SAVED_POSTS
     },
-
-    availableBoorusWithSavedPosts() {
-      const BOORU_DOMAINS = this.getSavedPosts.map(
-        (POST) => POST.meta_data.booru_domain
-      )
-
-      const UNIQUE_BOORU_DOMAINS = [...new Set(BOORU_DOMAINS)]
-
-      return UNIQUE_BOORU_DOMAINS
-    },
   },
 
   methods: {
-    booruChangeListener(event) {
-      event.preventDefault()
-
-      const BOORU = event.target.value
-
-      this.selectedBooru = BOORU
+    async onDomainChange(DOMAIN) {
+      this.selectedBooru = DOMAIN
     },
 
     sortPostsByDate(POSTS) {