feat : Your Feed API Implement.

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

@@ -1,5 +1,4 @@
 <template>
-
   <div v-for = "art in articles.article">
     <div class="article-preview">
       <div class="article-meta">
@@ -22,17 +21,22 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, ref, defineEmits} from "vue";
+import {onMounted, reactive, ref, defineComponent} from "vue";
+import {useStore} from "vuex";
 import axios from "axios";
 
-export default {
+export default defineComponent({
-  name: "TheArticleList",
+  name: "ArticleListFeed",
   props:{
+    isEmpty: Boolean,
     isLoading: Boolean
   },
-  setup(){
+  setup(props,{emit}){
     const url = import.meta.env.VITE_BASE_URL;
-    const emit = defineEmits(["loading"])
+    const store = useStore();
+    const token = store.state.token;
+    const empty = ref(false);
+
     const articles = reactive({
       article: {art:{
           slug: String,
@@ -49,7 +53,10 @@ export default {
     })
 
     onMounted(() => {
-      axios.get(url + "/api/articles")
+      axios.get(url + "/api/articles/feed",{
+        headers:{
+          Authorization : "TOKEN " + token
+        }})
           .then(response => {
             console.log(response);
             articles.article = response.data.articles;
@@ -58,12 +65,15 @@ export default {
             console.log(typeof(articles.article));
             console.log(articles.articlesCount);
             emit("loading",false);
+            if(parseInt(articles.articlesCount) == 0) {
+              emit("emptied",true);
+            }
           });
     })
-    return { articles }
+    return { empty, articles }
 
   }
-}
+})
 </script>
 
 <style scoped>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script lang="ts">
+export default {
+  name: "ArticleListGlobal"
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -12,7 +12,7 @@ export default createStore({
         },
         setToken(state, token){
             state.token = token;
-        }
+        },
     },
     actions: {
         LOGIN({commit}, user){

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

@@ -15,23 +15,28 @@
         <div class="col-md-9">
           <div class="feed-toggle">
             <ul class="nav nav-pills outline-active">
-              <li class="nav-item">
+              <li class="nav-item" v-if="isLogin">
                 <a class="nav-link active">Your Feed</a>
                 <div v-if="isLoading">
                   Loading articles...
                 </div>
+                <div v-if="isEmpty">
+                  No articles are here... yet.
+                </div>
               </li>
               <li class="nav-item">
                 <a class="nav-link">Global Feed</a>
               </li>
             </ul>
           </div>
-          <article-list :value="isLoading" @loading="onChangeLoading"></article-list>
+          <div v-if="isLogin">
-
+            <article-list
+                :value="isLoading"
+                :value2="isEmpty"
+                @loading="onChangeLoading"
+                @emptied="emptyCheck"></article-list>
+          </div>
           </div>
-
-
-
         <div class="col-md-3">
           <div class="sidebar">
             <p>Popular Tags</p>
@@ -57,19 +62,26 @@
 
 <script lang="ts">
 
-import articleList from '@/components/TheArticleList.vue'
+import articleList from '@/components/ArticleListFeed.vue'
 import {ref} from "vue";
+import {useStore} from "vuex";
 export default {
   name: "TheHome",
   components: {'article-list': articleList},
   setup(){
     const isLoading = ref(true);
+    const isEmpty = ref(false);
+    const store = useStore();
+    const isLogin =  store.state.token == '' ? false : true;
+
     const onChangeLoading = (val : boolean) => {
-      console.log("HELLO?");
       isLoading.value = val;
     }
+    const emptyCheck = (val: boolean) => {
+      isEmpty.value = val;
+    }
 
-    return { isLoading, onChangeLoading };
+    return { isLoading, isEmpty, isLogin, onChangeLoading, emptyCheck };
   }
 }
 </script>

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

@@ -84,8 +84,9 @@ export default {
         user
       })
           .then(response => {
-            store.dispatch("LOGIN",response.data.user).then(allHideError);
+            allHideError();
-            router.push({name: "Home"});
+            store.dispatch("LOGIN",response.data.user);
+            router.push({name:"Home"});
           })
           .catch(error =>{
             const code = error.response.data.errors.code;