Add tab bar to profile page

src/api/common.ts

@@ -12,7 +12,7 @@ export const fetcher = {
 interface RequestInfo extends RequestInit {
   authToken?: string | null;
   json?: any;
-  queryParams?: { [name: string]: string | number | undefined };
+  queryParams?: { [name: string]: string | number | boolean | undefined };
 }
 
 export async function http(

src/api/posts.ts

@@ -117,10 +117,15 @@ export async function getTagTimeline(
 export async function getProfileTimeline(
   authToken: string | null,
   authorId: string,
+  excludeReplies?: boolean,
   maxId?: string,
 ): Promise<Post[]> {
   const url = `${BACKEND_URL}/api/v1/accounts/${authorId}/statuses`
-  const queryParams = { max_id: maxId, limit: PAGE_SIZE }
+  const queryParams = {
+    exclude_replies: excludeReplies,
+    max_id: maxId,
+    limit: PAGE_SIZE,
+  }
   const response = await http(url, {
     method: "GET",
     queryParams,

src/views/Profile.vue

@@ -138,8 +138,26 @@
           </component>
         </div>
       </div>
+      <div class="tab-bar">
+        <template v-if="tabName === 'posts' || tabName === 'posts-with-replies'">
+          <router-link
+            :class="{ active: tabName === 'posts' }"
+            :to="{ name: 'profile-tab', params: { profileId: profile.id, tabName: 'posts' }}"
+          >
+            Posts
+          </router-link>
+          <router-link
+            :class="{ active: tabName === 'posts-with-replies' }"
+            :to="{ name: 'profile-tab', params: { profileId: profile.id, tabName: 'posts-with-replies' }}"
+          >
+            Posts with replies
+          </router-link>
+        </template>
+        <template v-else-if="tabName === 'followers'">Followers</template>
+        <template v-else-if="tabName === 'following'">Following</template>
+      </div>
       <post-list
-        v-if="tabName === 'posts'"
+        v-if="tabName === 'posts' || tabName === 'posts-with-replies'"
         :posts="posts"
         @load-next-page="loadNextPage"
       ></post-list>
@@ -228,6 +246,13 @@ export default class ProfileView extends Vue {
       this.posts = await getProfileTimeline(
         this.store.authToken,
         this.profile.id,
+        true,
+      )
+    } else if (this.tabName === "posts-with-replies") {
+      this.posts = await getProfileTimeline(
+        this.store.authToken,
+        this.profile.id,
+        false,
       )
     } else if (this.tabName === "followers" && this.isCurrentUser()) {
       this.followList = await getFollowers(
@@ -419,7 +444,12 @@ export default class ProfileView extends Vue {
     if (!this.profile) {
       return
     }
-    const posts = await getProfileTimeline(this.store.authToken, this.profile.id, maxId)
+    const posts = await getProfileTimeline(
+      this.store.authToken,
+      this.profile.id,
+      this.tabName !== "posts-with-replies",
+      maxId,
+    )
     this.posts.push(...posts)
   }
 
@@ -611,6 +641,25 @@ $avatar-size: 170px;
   }
 }
 
+.tab-bar {
+  align-items: center;
+  display: flex;
+  margin-bottom: $block-outer-padding;
+
+  a {
+    border-radius: $block-border-radius;
+    padding: $block-inner-padding / 2;
+    text-align: center;
+    width: 50%;
+
+    &.active {
+      background-color: $block-background-color;
+      font-weight: bold;
+    }
+  }
+}
+
+/* profile-list-item */
 .profile {
   margin-bottom: $block-outer-padding;
 }