fix : home articles view change

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

@@ -35,7 +35,6 @@ export default defineComponent({
     const url = import.meta.env.VITE_BASE_URL;
     const store = useStore();
     const token = store.state.token;
-    const empty = ref(false);
 
     const articles = reactive({
       article: {art:{
@@ -58,19 +57,16 @@ export default defineComponent({
           Authorization : "TOKEN " + token
         }})
           .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);
             if(parseInt(articles.articlesCount) == 0) {
               emit("emptied",true);
             }
           });
     })
-    return { empty, articles }
+    return { articles }
 
   }
 })

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

@@ -1,11 +1,70 @@
 <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">
-export default {
-  name: "ArticleListGlobal"
-}
+import {onMounted, reactive, ref, defineComponent} from "vue";
+import axios from "axios";
+
+export default defineComponent({
+  name: "ArticleListGlobal",
+  props:{
+    isEmpty: Boolean,
+    isLoading: Boolean
+  },
+  setup(props,{emit}) {
+    const url = import.meta.env.VITE_BASE_URL;
+
+    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 => {
+            articles.article = response.data.articles;
+            articles.articlesCount = response.data.articlesCount;
+            articles.article = JSON.parse(JSON.stringify(articles.article));
+            emit("loading", false);
+            if (parseInt(articles.articlesCount) == 0) {
+              emit("emptied", true);
+            }
+          });
+    })
+    return { articles }
+  }
+})
 </script>
 
 <style scoped>

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

@@ -13,29 +13,44 @@
       <div class="row">
 
         <div class="col-md-9">
-          <div class="feed-toggle">
-            <ul class="nav nav-pills outline-active">
-              <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>
-          <div v-if="isLogin">
-            <article-list
+            <div class="feed-toggle">
+              <ul class="nav nav-pills outline-active">
+                <li class="nav-item" v-if="isLogin">
+                  <a class="nav-link"
+                     @click="feedSelect"
+                  :class="{ active : feedActive}">Your Feed</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link"
+                     @click="globalSelect"
+                  :class="{ active : globalActive }">Global Feed</a>
+                </li>
+              </ul>
+              <div v-if="isLoading">
+                Loading articles...
+              </div>
+              <div v-if="isEmpty">
+                No articles are here... yet.
+              </div>
+            </div>
+            <div v-if="isLogin && feedActive">
+              <article-list
+                  :value="isLoading"
+                  :value2="isEmpty"
+                  @loading="onChangeLoading"
+                  @emptied="emptyCheck">
+              </article-list>
+            </div>
+            <div v-else>
+              <article-list-global
                 :value="isLoading"
                 :value2="isEmpty"
                 @loading="onChangeLoading"
-                @emptied="emptyCheck"></article-list>
-          </div>
+                @emptied="emptyCheck">
+
+              </article-list-global>
+
+            </div>
           </div>
         <div class="col-md-3">
           <div class="sidebar">
@@ -63,16 +78,21 @@
 <script lang="ts">
 
 import articleList from '@/components/ArticleListFeed.vue'
+import articleListGlobal from "@/components/ArticleListGlobal.vue";
 import {ref} from "vue";
 import {useStore} from "vuex";
 export default {
   name: "TheHome",
-  components: {'article-list': articleList},
+  components: {
+    'article-list': articleList,
+    'article-list-global': articleListGlobal},
   setup(){
     const isLoading = ref(true);
     const isEmpty = ref(false);
     const store = useStore();
     const isLogin =  store.state.token == '' ? false : true;
+    const feedActive = ref(true);
+    const globalActive = ref(false);
 
     const onChangeLoading = (val : boolean) => {
       isLoading.value = val;
@@ -81,7 +101,21 @@ export default {
       isEmpty.value = val;
     }
 
-    return { isLoading, isEmpty, isLogin, onChangeLoading, emptyCheck };
+    const feedSelect = () => {
+      feedActive.value=true;
+      globalActive.value=false;
+      isEmpty.value=false;
+      isLoading.value=true;
+    }
+
+    const globalSelect = () => {
+      feedActive.value = false;
+      globalActive.value = true;
+      isEmpty.value=false;
+      isLoading.value=true;
+    }
+
+    return { isLoading, isEmpty, isLogin, feedActive, globalActive, onChangeLoading, emptyCheck, feedSelect, globalSelect };
   }
 }
 </script>