refactor: reuse ArticlesNavigation

src/components/ArticlesNavigation.vue

@@ -58,13 +58,6 @@ export default defineComponent({
         name: 'my-feed',
         title: 'Your Feed',
       },
-
-      {
-        type: 'author',
-        name: 'profile',
-        params: { username: useAuthor.value },
-        title: 'My articles',
-      },
       {
         type: 'tag',
         name: 'tag',
@@ -72,6 +65,13 @@ export default defineComponent({
         title: useTag.value,
         icon: 'ion-pound',
       },
+
+      {
+        type: 'author',
+        name: 'profile',
+        params: { username: useAuthor.value },
+        title: 'My articles',
+      },
       {
         type: 'favorited',
         name: 'profile-favorites',

src/pages/Home.vue

@@ -13,14 +13,10 @@
       <div class="row">
         <div class="col-md-9">
           <div class="feed-toggle">
-            <!-- use-author and use-favorited just for test now -->
-            <!-- use them for profile page -->
             <ArticlesNavigation
               use-global-feed
               :use-my-feed="userAuthorized"
               :use-tag="tag"
-              :use-author="username"
-              :use-favorited="username"
             />
           </div>
 

src/pages/Profile.vue

@@ -37,28 +37,10 @@
       <div class="row">
         <div class="col-xs-12 col-md-10 offset-md-1">
           <div class="articles-toggle">
-            <ul class="nav nav-pills outline-active">
-              <li class="nav-item">
-                <AppLink
-                  class="nav-link"
-                  :class="{active: routeName === 'profile'}"
-                  name="profile"
-                  :params="{ username }"
-                >
-                  My Articles
-                </AppLink>
-              </li>
-              <li class="nav-item">
-                <AppLink
-                  class="nav-link"
-                  :class="{active: routeName === 'profile-favorites'}"
-                  name="profile-favorites"
-                  :params="{ username }"
-                >
-                  Favorited Articles
-                </AppLink>
-              </li>
-            </ul>
+            <ArticlesNavigation
+              :use-author="username"
+              :use-favorited="username"
+            />
           </div>
 
           <ArticlePreview
@@ -82,6 +64,7 @@ import { computed, defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import ArticlePreview from '../components/ArticlePreview.vue'
+import ArticlesNavigation from '../components/ArticlesNavigation.vue'
 import Pagination from '../components/Pagination.vue'
 import { useFavoritedArticles } from '../services/article/getFavoritedArticles'
 import { useProfileArticles } from '../services/article/getProfileArticles'
@@ -91,6 +74,7 @@ export default defineComponent({
   name: 'Profile',
   components: {
     ArticlePreview,
+    ArticlesNavigation,
     Pagination,
   },
   setup () {
@@ -100,7 +84,7 @@ export default defineComponent({
     const username = computed<string>(() => route.params.username as string)
     const { profile } = useProfile(username.value)
 
-    // FIXME: Here no request is triggered when the type changes
+    // FIXME: Here no request is triggered when the type changes (include home page articles navigation)
     const fetcher = route.name === 'profile' ? useProfileArticles : useFavoritedArticles
     const { articles, articlesCount, page } = fetcher(username.value)