12.02 temporary save in company

src/vite-frontend/src/api/index.ts

@@ -87,6 +87,19 @@ const listArticles = async (): Promise<AxiosResponse> => {
     }
 }
 
+const listArticlesByUsername = async (author: string): Promise<AxiosResponse> => {
+    let currentToken = localStorage.getItem("token");
+    if(currentToken == null){
+        return await axiosService.get('/api/articles?author=' + author);
+    }else{
+        return await axiosService.get('/api/articles?author=' + author,{
+            headers:{
+                Authorization: "TOKEN " + currentToken,
+            }
+        })
+    }
+}
+
 const feedArticle = async (): Promise<AxiosResponse> => {
     let currentToken = localStorage.getItem("token");
     return await axiosService.get('/api/articles/feed',{
@@ -165,7 +178,7 @@ export { signUp, signIn,
          getCurrentUser, updateUser,
          getProfile, followUser,
          createArticle, feedArticle,
-         listArticles,
+         listArticles, listArticlesByUsername,
          unfollowUser, getArticle,
          addCommentToArticle, getCommentsFromArticle,
          favoriteArticle, unFavoriteArticle,

src/vite-frontend/src/components/ArticleMy.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="article-preview">
+    <div class="article-meta">
+      <a href=""><img src="http://i.imgur.com/Qr71crq.jpg"/></a>
+      <a href="javascript:(0)" @click="showProfile(art.author.username)"><img :src="art.author.image"/></a>
+      <div class="info">
+        <a href="" class="author">Eric Simons</a>
+        <span class="date">January 20th</span>
+      </div>
+      <button class="btn btn-outline-primary btn-sm pull-xs-right">
+        <i class="ion-heart"></i> 29
+      </button>
+    </div>
+    <a href="" class="preview-link">
+      <h1>How to build webapps that scale</h1>
+      <p>This is the description for the post.</p>
+      <span>Read more...</span>
+    </a>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import router from "@/router";
+export default defineComponent({
+  name: "ArticleMy",
+  props:{
+    art: {
+      type: Object,
+      default: () =>{
+        return {
+          slug: "",
+          title: "",
+          description: "",
+          body: "",
+          tagList: new Array(),
+          createdAt: "",
+          favorited: false,
+          favoritesCount: 0,
+          author:{
+            username:"",
+            bio: "",
+            image: "",
+            following: false,
+          }
+        }
+      }
+    }
+  },
+  setup(props){
+    const showProfile = (username: string) => {
+      router.push({
+        name: 'Profile',
+        params: {username: username}
+      })
+    }
+
+    return { showProfile, }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/vite-frontend/src/views/TheProfile.vue

@@ -49,47 +49,9 @@
             </ul>
           </div>
 
-          <div class="article-preview">
+          <article-my v-for="(art,index) in articles.article"
-            <div class="article-meta">
+                        :art="art">
-              <a href=""><img src="http://i.imgur.com/Qr71crq.jpg"/></a>
+          </article-my>
-              <div class="info">
-                <a href="" class="author">Eric Simons</a>
-                <span class="date">January 20th</span>
-              </div>
-              <button class="btn btn-outline-primary btn-sm pull-xs-right">
-                <i class="ion-heart"></i> 29
-              </button>
-            </div>
-            <a href="" class="preview-link">
-              <h1>How to build webapps that scale</h1>
-              <p>This is the description for the post.</p>
-              <span>Read more...</span>
-            </a>
-          </div>
-
-          <div class="article-preview">
-            <div class="article-meta">
-              <a href=""><img src="http://i.imgur.com/N4VcUeJ.jpg"/></a>
-              <div class="info">
-                <a href="" class="author">Albert Pai</a>
-                <span class="date">January 20th</span>
-              </div>
-              <button class="btn btn-outline-primary btn-sm pull-xs-right">
-                <i class="ion-heart"></i> 32
-              </button>
-            </div>
-            <a href="" class="preview-link">
-              <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
-              <p>This is the description for the post.</p>
-              <span>Read more...</span>
-              <ul class="tag-list">
-                <li class="tag-default tag-pill tag-outline">Music</li>
-                <li class="tag-default tag-pill tag-outline">Song</li>
-              </ul>
-            </a>
-          </div>
-
-
         </div>
 
       </div>
@@ -99,14 +61,18 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, ref} from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { useStore } from "vuex";
 import { defineComponent } from 'vue';
 import router from "@/router";
-import {followUser, getProfile, unfollowUser} from "@/api";
+import { followUser, getProfile, listArticlesByUsername, unfollowUser } from "@/api";
+import ArticleMy from "@/components/ArticleMy.vue";
 
 export default defineComponent({
   name: "TheProfile.vue",
+  components: {
+    "article-my": ArticleMy,
+  },
   props:{
     username: String,
   },
@@ -123,6 +89,26 @@ export default defineComponent({
       following: false,
     })
 
+    const articles = reactive({
+      article: reactive({
+        slug: "",
+        title: "",
+        description: "",
+        body: "",
+        tagList: new Array(),
+        createdAt: "",
+        updatedAt: "",
+        favorited: false,
+        favoritesCount: 0,
+        author: {
+          username: "",
+          bio: "",
+          image: "",
+          following: false
+        }
+      })
+    })
+
     const setProfile = async ( data: any ) => {
       profile.image = data.image;
       profile.bio = data.bio;
@@ -167,8 +153,15 @@ export default defineComponent({
         if(code == "USER_NOT_FOUND")
           await router.push({name:"home"});
       }
+
+      try{
+        const { data } = await listArticlesByUsername(profile.username);
+        articles.article = data.articles;
+      }catch (error: any){
+        alert(error);
+      }
     })
-    return { url, isMe, profile, stateUpdate }
+    return { url, isMe, profile, articles, stateUpdate }
   }
 })
 </script>