11.24 save

src/main/java/com/io/realworld/domain/aggregate/user/service/UserServiceImpl.java

@@ -41,7 +41,8 @@ public class UserServiceImpl implements UserService {
             return convertUser(userRepository.save(User.builder().
                             username(userSignupRequest.getUsername()).
                             email(userSignupRequest.getEmail()).
-                            password(madeHash(userSignupRequest.getPassword())).build()));
+                            password(madeHash(userSignupRequest.getPassword())).
+                            image("https://api.realworld.io/images/smiley-cyrus.jpeg").build()));
         }
     }
 

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

@@ -0,0 +1,71 @@
+<template>
+
+  <div v-for = "art in articles.article">
+    <div class="article-preview">
+      <div class="article-meta">
+        <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>
+        </div>
+        <button class="btn btn-outline-primary btn-sm pull-xs-right">
+          <i class="ion-heart"></i> {{art.favoritesCount}}
+        </button>
+      </div>
+      <a href="" class="preview-link">
+        <h1>{{art.title}}</h1>
+        <p>{{art.description}}</p>
+        <span>Read more...</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {onMounted, reactive, ref, defineEmits} from "vue";
+import axios from "axios";
+
+export default {
+  name: "TheArticleList",
+  props:{
+    isLoading: Boolean
+  },
+  setup(){
+    const url = import.meta.env.VITE_BASE_URL;
+    const emit = defineEmits(["loading"])
+    const articles = reactive({
+      article: {art:{
+          slug: String,
+          title: String,
+          description: String,
+          favoritesCount: Number,
+          createdAt: String,
+          author: {
+            username: String,
+            image: String
+          }
+        }},
+      articlesCount: "",
+    })
+
+    onMounted(() => {
+      axios.get(url + "/api/articles")
+          .then(response => {
+            console.log(response);
+            articles.article = response.data.articles;
+            articles.articlesCount = response.data.articlesCount;
+            articles.article = JSON.parse(JSON.stringify(articles.article));
+            console.log(typeof(articles.article));
+            console.log(articles.articlesCount);
+            emit("loading",false);
+          });
+    })
+    return { articles }
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -16,33 +16,18 @@
           <div class="feed-toggle">
             <ul class="nav nav-pills outline-active">
               <li class="nav-item">
-                <a class="nav-link disabled" href="">Your Feed</a>
+                <a class="nav-link active">Your Feed</a>
+                <div v-if="isLoading">
+                  Loading articles...
+                </div>
               </li>
               <li class="nav-item">
-                <a class="nav-link active" href="">Global Feed</a>
+                <a class="nav-link">Global Feed</a>
               </li>
             </ul>
           </div>
+          <article-list :value="isLoading" @loading="onChangeLoading"></article-list>
 
-            <div v-for = "art in articles.article">
-              <div class="article-preview">
-                <div class="article-meta">
-                  <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>
-                  </div>
-                  <button class="btn btn-outline-primary btn-sm pull-xs-right">
-                    <i class="ion-heart"></i> {{art.favoritesCount}}
-                  </button>
-                </div>
-                <a href="" class="preview-link">
-                  <h1>{{art.title}}</h1>
-                  <p>{{art.description}}</p>
-                  <span>Read more...</span>
-                </a>
-              </div>
-            </div>
           </div>
 
 
@@ -71,42 +56,20 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, ref} from "vue";
-import axios from "axios";
 
+import articleList from '@/components/TheArticleList.vue'
+import {ref} from "vue";
 export default {
   name: "TheHome",
+  components: {'article-list': articleList},
   setup(){
-    const url = import.meta.env.VITE_BASE_URL;
+    const isLoading = ref(true);
+    const onChangeLoading = (val : boolean) => {
+      console.log("HELLO?");
+      isLoading.value = val;
+    }
 
-    const articles = reactive({
+    return { isLoading, onChangeLoading };
-      article: {art:{
-          slug: String,
-          title: String,
-          description: String,
-          favoritesCount: Number,
-          createdAt: String,
-          author: {
-            username: String,
-            image: String
-          }
-      }},
-      articlesCount: "",
-    })
-
-    onMounted(() => {
-        axios.get(url + "/api/articles")
-            .then(response => {
-              console.log(response);
-              articles.article = response.data.articles;
-              articles.articlesCount = response.data.articlesCount;
-              articles.article = JSON.parse(JSON.stringify(articles.article));
-              console.log(typeof(articles.article));
-              console.log(articles.articlesCount);
-            });
-    })
-
-    return { articles }
   }
 }
 </script>