feat : common date util function add. convert to Us-en String from LocalDateTime

src/main/java/com/io/realworld/domain/aggregate/article/service/ArticleServiceImpl.java

@@ -73,7 +73,7 @@ public class ArticleServiceImpl implements ArticleService {
 
         Pageable pageable = PageRequest.of(offset,limit);
 
-        List<Follow> follows = profileRepository.findByFollowerId(userAuth.getId());
+        List<Follow> follows = profileRepository.findByFolloweeId(userAuth.getId());
         follows.stream().forEach(follow -> {
             String followerName = follow.getFollower().getUsername();
             articles.addAll(articleRepository.findByAuthorName(followerName,pageable));

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

@@ -5,7 +5,7 @@
         <a href="profile.html"><img :src="art.author.image"/></a>
         <div class="info">
           <a href="" class="author">{{art.author.username}}</a>
-          <span class="date">{{ art.createdAt }}</span>
+          <span class="date">{{convertDate(art.createdAt)}}</span>
         </div>
         <button class="btn btn-outline-primary btn-sm pull-xs-right">
           <i class="ion-heart"></i> {{art.favoritesCount}}
@@ -24,6 +24,7 @@
 import {onMounted, reactive, ref, defineComponent} from "vue";
 import {useStore} from "vuex";
 import axios from "axios";
+import convertDate from "@/ts/common";
 
 export default defineComponent({
   name: "ArticleListFeed",
@@ -38,14 +39,14 @@ export default defineComponent({
 
     const articles = reactive({
       article: {art:{
-          slug: String,
+          slug: "",
-          title: String,
+          title: "",
-          description: String,
+          description: "",
-          favoritesCount: Number,
+          favoritesCount: 0,
-          createdAt: String,
+          createdAt: "",
           author: {
-            username: String,
+            username: "",
-            image: String
+            image: ""
           }
         }},
       articlesCount: "",
@@ -67,7 +68,7 @@ export default defineComponent({
             }
           });
     })
-    return { articles }
+    return { articles, convertDate }
 
   }
 })

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

@@ -7,7 +7,7 @@
           <a class="author"
              href="javascript:void(0)"
              @click="showProfile(art.author.username)">{{art.author.username}}</a>
-          <span class="date">{{ art.createdAt }}</span>
+          <span class="date">{{convertDate(art.createdAt)}}</span>
         </div>
         <button class="btn btn-outline-primary btn-sm pull-xs-right">
           <i class="ion-heart"></i> {{art.favoritesCount}}
@@ -25,9 +25,10 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, ref, defineComponent, watch} from "vue";
+import {onMounted, reactive, defineComponent, computed } from "vue";
 import axios from "axios";
 import router from "@/router";
+import convertDate from '@/ts/common';
 
 export default defineComponent({
   name: "ArticleListGlobal",
@@ -38,7 +39,6 @@ export default defineComponent({
   },
   setup(props,{emit}) {
     const url = import.meta.env.VITE_BASE_URL;
-
     const articles = reactive({
       article: {
         art: {
@@ -83,10 +83,11 @@ export default defineComponent({
       })
     }
 
+
     onMounted(() => {
       getArticles();
     })
-    return { articles, getArticles, showProfile, showArticle }
+    return { articles, getArticles, convertDate, showProfile, showArticle }
   }
 })
 </script>

src/vite-frontend/src/ts/common.ts

@@ -0,0 +1,5 @@
+function convertDate(date: string): string {
+    return new Date(date).toLocaleDateString("en-US", { year: 'numeric', month: 'long', day: 'numeric' });
+}
+
+export default convertDate;

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

@@ -9,7 +9,7 @@
         <div class="article-meta">
           <div class="info">
             <a href="javascript:void(0)" class="author" @click="viewProfile">{{ articleDetail.article.author.username }}</a>
-            <span class="date">{{articleDetail.article.createdAt}}</span>
+            <span class="date">{{convertDate(articleDetail.article.createdAt)}}</span>
           </div>
           <button class="btn btn-sm btn-outline-secondary" @click="stateUpdate(articleDetail.article.author.following)">
             <div v-if="articleDetail.article.author.following">
@@ -47,7 +47,7 @@
           <a href="javascript:void(0)"><img :src="articleDetail.article.author.image"></a>
           <div class="info">
             <a href="javascript:void(0)" class="author" @click="viewProfile">{{ articleDetail.article.author.username }}</a>
-            <span class="date">{{articleDetail.article.createdAt}}</span>
+            <span class="date">{{convertDate(articleDetail.article.createdAt)}}</span>
           </div>
 
           <button class="btn btn-sm btn-outline-secondary" @click="stateUpdate(articleDetail.article.author.following)">
@@ -131,6 +131,7 @@ import {onMounted, defineComponent, reactive} from "vue";
 import axios from "axios";
 import router from "@/router";
 import {useStore} from "vuex";
+import convertDate from "@/ts/common";
 
 export default defineComponent({
   name: "TheArticleDetail.vue",
@@ -202,7 +203,7 @@ export default defineComponent({
       })
     })
 
-    return { articleDetail, viewProfile, stateUpdate, }
+    return { articleDetail, convertDate, viewProfile, stateUpdate, }
   }
 })
 </script>