From 8434f09a61af79d92f768878e51b32c403c62eaf Mon Sep 17 00:00:00 2001
From: Danz7775 <72111919+Danz7775@users.noreply.github.com>
Date: Thu, 29 Jun 2023 11:03:07 -0400
Subject: [PATCH 1/7] showing top level comments some bugs still to fix

---
 src/components/PostBoard.vue       | 345 ++++++++++++++---------------
 src/components/PostDesign.vue      | 196 +++++++++++-----
 src/components/charts/BarChart.vue |   4 +-
 src/layouts/MainLayout.vue         |  10 +-
 4 files changed, 318 insertions(+), 237 deletions(-)

diff --git a/src/components/PostBoard.vue b/src/components/PostBoard.vue
index 1100369..5129c47 100644
--- a/src/components/PostBoard.vue
+++ b/src/components/PostBoard.vue
@@ -154,10 +154,15 @@
    
     <div class="row q-col-gutter-lg">
       <div class= "col-lg-10 col-md-8 q-col-gutter-lg">
-         <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" v-for="(post, index) in pos" >
-           <post-design :data="post"></post-design>
+        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" v-for="(post) in pos" :key ="post.id">
+          <div>
+            <post-design :data="post"></post-design>
+          </div>
         </div>
     </div>
+
+
+
     <div class= "col-lg-2 col-md-4 col-sm-1 col-xs-1  q-col-gutter-lg">
     
       <q-select sqaure filled v-model= "selectModel" :options="['Most Recent', 'Oldest', 'Trending']" :display-value="'Most Recent'" ></q-select>
@@ -175,13 +180,16 @@
   </q-page>
 
 </template>
-
 <script>
-
 import {defineComponent, ref, onMounted, onUpdated, watchEffect, inject } from 'vue';
 import { api } from 'boot/axios'
 import { useQuasar } from 'quasar'
 import PostDesign from './PostDesign.vue';
+
+let url = process.env.ADMIN_API_URL + '/posts';
+let post_url = process.env.ADMIN_API_URL + '/posts';
+let topics_url = process.env.ADMIN_API_URL + '/topics'
+
 export default defineComponent({
   components: { PostDesign },
   name: 'PostBoard',
@@ -190,7 +198,7 @@ export default defineComponent({
     return {
       isConnected: false,
       socketMessage: ''
-  }
+    }
   },
   sockets: {
     connect() {
@@ -201,8 +209,12 @@ export default defineComponent({
       this.isConnected = false;
     },
   },
+  
   setup (props) {
     const $q = useQuasar()
+    const post_data = ref(null)
+    const post_tops = ref([])
+
     const data = ref(null)
     const tops = ref([])
     const pos = ref([])
@@ -220,198 +232,174 @@ export default defineComponent({
     const message = inject('message')
 
     /* gets topics to use for q-dialog */
+    //LOADING IN TOPICS
     function loadData () {
-    
-    api.get('https://swarmnet-prod.herokuapp.com/topics',{
-  method: 'GET',
-  
-  headers: {
+      api.get(topics_url, {
+        method: 'GET',
+        headers: {
           'Access-Control-Allow-Origin': '*'
         }
-    })
-      .then((response) => {
-        data.value = response.data
-        
-        for (let i of data.value) { 
-          tops.value.push(i)  
-        }
-      
-      /* console.log( tops.value[0].text) */
-      // console.log(tops) 
       })
-      .catch(() => {
-        $q.notify({
-          color: 'negative',
-          position: 'top',
-          message: 'Loading failed',
-          icon: 'report_problem'
+        .then((response) => {
+          data.value = response.data    
+          for (let i of data.value) { 
+            tops.value.push(i)  
+          }        
         })
+        .catch(() => {
+          $q.notify({
+            color: 'negative',
+            position: 'top',
+            message: 'Loading failed',
+            icon: 'report_problem'
+          })
+        })
+
+
+      //LOADING IN POSTS
+      api.get(post_url, {
+        method: 'GET',
+        headers: {
+          Authorization: 'Bearer ' + localStorage.getItem('token'),
+          'Access-Control-Allow-Origin': '*'
+        }
       })
+        .then((response) => {
+          post_data.value = response.data.posts
+          for (let i of post_data.value) {
+            let o = JSON.parse(JSON.stringify(i))
+            pos.value.unshift(o)
+            posTags.value.unshift(o.tags)
+            for (let j of comments.value) {
+              if (i.id == j.id) {
+                let o = JSON.parse(JSON.stringify(i))
+                pos.value.shift(o)
+                posTags.value.shift(o.tags)
+              }
+            }
+          }
+        })
+        .catch(() => {
+          $q.notify({
+            color: 'negative',
+            position: 'top',
+            message: 'Loading failed',
+            icon: 'report_problem'
+          })
+        })
   }
+
+        /* displays all post after user logins in */
+    function displayAllPost(){
+          pos.value.unshift([{
+            id: -1,
+            title: 'This is a post title',
+            text:'This is my first post on SwarNET',
+            created_date: '2022-10-12T19:35:24Z',
+            media: [],
+            tags:{
+              id:'1',
+              tag:'flood'
+            },
+            user: {
+                email: "jd@doemail.com",
+                first_name: "John",
+                last_name: "Doe",
+                profile_image: null
+            }
+          }])
+        } 
+
+  
     /* filters post to get only post about the selected topic */
     function getDetails(topic){
       
       pos.value.splice(0)
+      console.log("get details")
       if(topic == 0){
-      pos.value.splice(0)
+
+        console.log("if block")
+        pos.value.splice(0)
       
-      let url = "https://swarmnet-prod.herokuapp.com/posts"
-          
-            api.get(url,{
-            method: 'GET',
-            
-            headers: {
-                    'Access-Control-Allow-Origin': '*'
-                  }
-              })
-            .then((response) => {
-              data.value = response.data
-              for (let i of data.value) { 
-               
-            
-                pos.value.unshift(i)
-                posTags.value.unshift(i.tags)
-              for (let j of comments.value){
-              if(i.id == j.id){
-                pos.value.shift()
-                 posTags.value.shift()
+        api.get(url,{
+        method: 'GET',
+        
+        headers: {
+                'Access-Control-Allow-Origin': '*'
               }
-            }
-            }
-            
-            })
-            .catch(() => {
-              $q.notify({
-                color: 'negative',
-                position: 'top',
-                message: 'Loading failed',
-                icon: 'report_problem'
-              })
-            })
-    }
-      
-      else{
-      let url = "https://swarmnet-prod.herokuapp.com/posts"
-      api.get(url,{
-      method: 'GET',
-      headers: {
-              'Access-Control-Allow-Origin': '*'
-            }
-        })
-      .then((response) => {
-        data.value = response.data
-        for (let i of data.value) { 
-          if(i.topicId == parseInt(topic)){
+          })
+        .then((response) => {
+          data.value = response.data
+          for (let i of data.value) { 
             pos.value.unshift(i)
             posTags.value.unshift(i.tags)
-          for(let j of comments.value){ /*remove comments from array with top level post */
-            if(i.id == j.id ){
+            for (let j of comments.value){
+            if(i.id == j.id){
               pos.value.shift()
               posTags.value.shift()
             }
-            }
           }
         }
-       // console.log(pos.value)
-        for(let j of tops.value){
-          if(j.id == parseInt(props.tabText)){
-            ptabtext.value = j.text
-          }     
-        }   
-      
-      })
-      .catch(() => {
-        $q.notify({
-          color: 'negative',
-          position: 'top',
-          message: 'Loading failed',
-          icon: 'report_problem'
+        
+        })
+        .catch(() => {
+          $q.notify({
+            color: 'negative',
+            position: 'top',
+            message: 'Loading failed',
+            icon: 'report_problem'
+          })
+        })
+    } 
+      else{
+        console.log("Else block")
+        api.get(url,{
+        method: 'GET',
+        headers: {
+                'Access-Control-Allow-Origin': '*'
+              }
+          })
+        .then((response) => {
+          data.value = response.data
+          for (let i of data.value) { 
+            if(i.topicId == parseInt(topic)){
+              pos.value.unshift(i)
+              posTags.value.unshift(i.tags)
+              for(let j of comments.value){ /*remove comments from array with top level post */
+                if(i.id == j.id ){
+                  pos.value.shift()
+                  posTags.value.shift()
+                }
+              }
+            }
+          }
+        
+          for(let j of tops.value){
+            if(j.id == parseInt(props.tabText)){
+              ptabtext.value = j.text
+            }     
+          }   
+        
+        })
+        .catch(() => {
+          $q.notify({
+            color: 'negative',
+            position: 'top',
+            message: 'Loading failed',
+            icon: 'report_problem'
+          })
         })
-      })
       }
       }
     
-    /* displays all post after user logins in */
-    function displayAllPost(){
-          pos.value.unshift([{
-            title: 'This is a post title',
-            text:'This is my first post on SwarNET',
-            created_date: '2022-07-27T23:24:21.125Z',
-            tags:{
-              id:'1',
-              tag:'flood'
-            }
-          }])
-          let curl = process.env.ADMIN_API_URL+"/posts"
-            api.get(curl,{
-            method: 'GET',
-            
-            headers: {
-                     Authorization:  'Bearer '+ localStorage.getItem('token') ,
-                    'Access-Control-Allow-Origin': '*'
-                  }
-              })
-            .then((response) => {
-              data.value = response.data.posts
-        
-            for (let i of data.value) { /*add all replies to an array */
-                let o = JSON.parse(JSON.stringyfy(i))
-                comments.value.push(o)
-              }
-            })
-            .catch(() => {
-              $q.notify({
-                color: 'negative',
-                position: 'top',
-                message: 'Loading failed',
-                icon: 'report_problem'
-              })
-            })
-      
-          let url = process.env.ADMIN_API_URL+"/posts"
-          
-            api.get(url,{
-            method: 'GET',
-            
-            headers: {
-                    Authorization: 'Bearer '+ localStorage.getItem('token'),
-                    'Access-Control-Allow-Origin': '*'
-                  }
-              })
-            .then((response) => {
-              data.value =  response.data.posts/* get all post */
-              
-            for (let i of data.value) {  /* filter post from replies */
-                let o = JSON.parse(JSON.stringify(i))
-                pos.value.unshift(o)  /*the unshift() function adds one or more items to the start of an array*/
-                posTags.value.unshift(o.tags)
-                 
-              for(let j of comments.value){
-                if(i.id == j.id){
-                  let o = JSON.parse(JSON.stringify(i))
-                  pos.value.shift(o)  
-                  posTags.value.shift(o.tags)
-                }  
-              }
-              }
-             
-            })
-            .catch(() => {
-              $q.notify({
-                color: 'negative',
-                position: 'top',
-                message: 'Loading failed',
-                icon: 'report_problem'
-              })
-            })
-        } 
+
     
     /*get all top level post with a partciular tag*/
     function searchByTags(searchTag){
    
-      let url = `https://swarmnet-prod.herokuapp.com/posts/${searchTag}`
+      let search_url = url+`/${searchTag}`
       //console.log(url)
-            api.get(url,{
+            api.get(search_url,{
             method: 'GET',
             headers: {
                     'Access-Control-Allow-Origin': '*',
@@ -452,7 +440,7 @@ export default defineComponent({
       if(ptopid.value == ''){
         ptopid.value = props.tabText
       }
-      let url = "https://swarmnet-prod.herokuapp.com/posts"
+      // let url = "https://swarmnet-prod.herokuapp.com/posts"
           
             api.post(url,{
               topic_id: ptopid.value,  
@@ -515,10 +503,18 @@ export default defineComponent({
               })
             }) 
   }
-  
+
+  onMounted(() => {
+      loadData();
+      displayAllPost();
+      getPostTags();
+    })
+
   watchEffect(()=>{
     if(message.value == 0){
       pos.value.splice(0)
+
+      console.log("Hi I'm keeping back")
       
       let url = "https://swarmnet.sundaebytes.com/api/admin/posts"
           
@@ -531,6 +527,7 @@ export default defineComponent({
                   }
               })
             .then((response) => {
+              console.log("done")
               data.value = response.data
 
               for (let i of data.value) { 
@@ -555,8 +552,9 @@ export default defineComponent({
             })
     }
     else{
+      console.log("else")
       pos.value.splice(0)
-      let url = "https://swarmnet-prod.herokuapp.com/posts"
+      // let url = "https://swarmnet-prod.herokuapp.com/posts"
       api.get(url,{
       method: 'GET',
       headers: {
@@ -605,12 +603,6 @@ export default defineComponent({
       //  subsStatus(props.tabText);
    
   });
-  onMounted(() => {
-      loadData();
-      displayAllPost();
-      getPostTags();
-    })
-  
   onUpdated(()=> {
     props.tabText; 
   })
@@ -658,6 +650,7 @@ export default defineComponent({
   }
 })
 </script>
+
 <style lang="sass" scoped>
 .my-card
   width: 100%
diff --git a/src/components/PostDesign.vue b/src/components/PostDesign.vue
index e7370ae..4f215cc 100644
--- a/src/components/PostDesign.vue
+++ b/src/components/PostDesign.vue
@@ -1,95 +1,100 @@
 <template>
   <q-card class="my-card background">
      <!--<a :href="`/Details/${data.id}`"> </a>-->
+
+    <!-- <div v-if="dataLoaded()"><p>LOADING</p></div>
+    <div v-else><p>DONE</p></div> -->
+
+
+<!-- HEADING -->
     <q-card-section square=true>
       <div class="row q-gutter-none q-pa-md q-ma-xs">
         <div class="col-4 text-p postTitle">{{data.title}}</div>
-      <div class="col-4 text-p dateStyle">
-            <p> {{datePassed()}} </p>
+        <div class="col-4 text-p">
+        </div>
+        <div class="col-4 text-p dateStyle">
+              <p> {{datePassed()}} </p>
+              <!-- <p>{{ data.user.first_name }}</p> -->
+        </div>
       </div>
-         <!--<div class="col text-subtitle1 text-justify q-mt-sm">
+
+
+               <!-- <div class="col text-subtitle1 text-justify q-mt-sm">
           {{datePassed()}}
-        </div>-->
-         <div class="col-4 text-p">
-            <span class="tag tag-blue"
-                  v-for="(tag,index) in data.tags" :key="tag">             
-                    {{tag.tag_text}}    
-         </span>
-          </div>
-      </div>
+        </div> -->
+
+
+                <!-- <span class="tag tag-blue" v-for="(tag) in data.tags" :key="tag">              -->
+                    <!-- {{tag.tag_text}}     -->
+          <!-- </span> -->
+<!-- CONTENT -->
+
     <div class="q-pa-md">
-         <div class="row">
-         <!-- <div class="col">
-            <q-avatar>
-              <img src="https://cdn.quasar.dev/img/boy-avatar.png">
-            </q-avatar>
-          </div> -->
-
-          <div class="col-9 text-p">
-           {{ data.text }}
-          </div>
+      <div class="row">
+        <div class="col-9 text-p">
+          {{ data.text }}
+        </div>         
+      </div>
+    </div>
 
-         
-        </div>
-        
-        </div>
+<!-- MEDIA -->
 
-         <div class="row">
-          <div class="col">
-            <q-carousel
-                animated
-                v-model="slide"
-                arrows
-                navigation
-                infinite
-                >
-                  <q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
-                  <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
-                  <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
-                  <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" />
-              </q-carousel>
-          </div>
-         
-          </div>
+  <!-- <div v-if=" hasMedia()"><p>LOADING</p></div> -->
+
+    <div class="row" v-if=" hasMedia()">
+      <div class="col">
+        <q-carousel animated v-model="slide" arrows navigation infinite >
+            <q-carousel-slide v-for="(media) in data.media" :key="getMediaURL(media)" :name="getMediaURL(media)" :img-src="getMediaURL(media)" />
+            <!-- <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
+            <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
+            <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" /> -->
+        </q-carousel>
+          <!-- <q-img :src="img"/> -->
+      </div>
+    </div>
+
+<!-- BUTTONS -->
     
     </q-card-section>
     <q-separator color="grey"/>
      <q-card-actions>
             <div class="col-4 q-px-xl">
                 <q-icon name="fa-solid fa-message"></q-icon>
-                <q-btn flat @click="toggleComments"> Comments 20 </q-btn>
+                <q-btn flat @click="toggleComments"> Comments </q-btn>
             </div>
              <div class="col-4 q-px-xl">
               <q-icon name="fa-solid fa-heart"> </q-icon>
-              <q-btn flat> Likes: 210 </q-btn>
+              <q-btn flat> Likes: {{ data.likes }} </q-btn>
             </div>
-             <div class="col-4 q-px-xl">
+             <!-- <div class="col-4 q-px-xl">
               <q-icon name="fa-solid fa-share"></q-icon>
               <q-btn flat> Share</q-btn>
-            </div>
+            </div> -->
     </q-card-actions>
 
+<!-- COMMENTS -->
+
   <div v-if="seeComments">
     <q-separator color="grey"/>
       <q-card class=" q-pa-md my-card background">
-        <q-card-section square="true">
+        <q-card-section square="true" v-for="(reply) in data.replies" :key="getReplyKey(reply)">
           <div class="row">
             <div class="col-1">
               <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
             </div>
             <div class="col-11">
-              <p> John Doe </p>
-              <p>This is a simulated reply only to be used for testing </p>
+              <p> {{ reply.first_name }} {{ reply.last_name }} </p>
+              <p>{{ reply.text }} </p>
             </div>
           </div>
              <q-card-actions>
              <div class="col-4 q-px-xl">
                 <q-icon name="fa-solid fa-message"></q-icon>
-                <q-btn flat> Comments 20 </q-btn>
+                <q-btn flat @click="toggleComments"> Comments  </q-btn>
             </div>
              <div class="col-4 q-px-xl">
               <q-icon name="fa-solid fa-heart"> </q-icon>
-              <q-btn flat> Likes: 210 </q-btn>
+              <q-btn flat> Likes:  </q-btn>
             </div>
              <div class="col-4 q-px-xl">
               <q-icon name="fa-solid fa-share"></q-icon>
@@ -113,8 +118,38 @@ export default defineComponent({
 
  
   setup(props) {
+
+    // const img = props.data.media && props.data.media.url;
+
+    // console.log(props.data)
+
+    let full_name = ""
+    function load_name(){
+      try{
+        full_name = props.data.user.first_name +" "+ props.data.user.last_name
+      }
+      catch(err){
+        full_name = ""
+      }
+      
+    }
+
+    function dataLoaded(){
+      if (Array.isArray(props.data)){
+        if (props.data[0].id !== -1){
+          console.log("waiting")
+          return true
+        } 
+      }
+      else{
+        console.log("done")
+        return false
+      }    
+    }
+
     const value = Date.now()
     const seeComments = ref(false)
+    const num_replies = 0
     function datePassed() {
     //  console.log(Date.parse(props.data.created))
     //  console.log(formatDistance(Date.parse(props.data.created), new Date(), { addSuffix: true }))
@@ -125,9 +160,60 @@ export default defineComponent({
 
     function toggleComments(){
       seeComments.value = !seeComments.value
+
     }
 
+    const replies = ref(props.data.replies || [])
+    // const num_replies = 0
+
+    // Function to get the reply key
+    function getReplyKey(reply) {
+      // num_replies = array.length(props.data.replies)
+      return reply && reply.id
+    }
+
+    function hasMedia(){
+      try{
+        return props.data.media.url
+      }
+      catch (err){
+        console.log (props.data.media)
+        return false
+      }
+      // let arr_len = 0
+      // try{
+      //   arr_len = props.data.media.length()
+      //   console.log (arr_len)
+      // }
+      // catch (err){
+      //   console.log (props.data.media)
+      //   console.log (err)
+      //   console.log(typeof props.data.media)
+      //   return false
+      // }
+      // if (arr_len>0){
+        
+      //   console.log ("returning true")
+      //   return true
+      // }
+      // else{
+      //   return false
+      // }
+    }
+
+    function getMediaURL(media){
+      return media.url
+    }
+
+
+
     return{
+      getMediaURL,
+      full_name,
+      hasMedia,
+      dataLoaded,
+      replies,
+      getReplyKey,
       datePassed,
       toggleComments,
       seeComments,
@@ -137,6 +223,8 @@ export default defineComponent({
 })
 </script>
 
+
+
 <style scoped>
 
 /* unvisited link */
@@ -168,14 +256,14 @@ background-image: linear-gradient(315deg, #ffffff 0%, #ffffff 74%);
 
 .postTitle{
   text-align: left;
-  font: normal normal 600 30px/46px Poppins;
+  font: normal normal 600 30px/30px Poppins;
   letter-spacing: 0px;
   color: #4D4D4D;
   opacity: 1;
 }
 .dateStyle{
-  text-align: left;
-  font: normal normal 300 20px/30px Poppins;
+  text-align: right;
+  font: normal normal 100 14px/9px Poppins;
   letter-spacing: 0px;
   color: #4D4D4D;
   opacity: 1;
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
index 8d292b7..6446541 100644
--- a/src/components/charts/BarChart.vue
+++ b/src/components/charts/BarChart.vue
@@ -84,7 +84,7 @@ export default defineComponent({
          const posTags = ref([])
        var a= []
        var b
-         api.get('https://swarmnet-prod.herokuapp.com/topics',{
+         api.get(process.env.ADMIN_API_URL+'/topics',{
   method: 'GET',
   
   headers: {
@@ -100,7 +100,7 @@ export default defineComponent({
         }
 var counter =[]
 var a=0
- let url = "https://swarmnet-prod.herokuapp.com/posts"
+ let url = process.env.ADMIN_API_URL+"/posts"
       api.get(url,{
       method: 'GET',
       headers: {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 4e3c068..ec68a96 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -54,7 +54,7 @@
           </q-item-section>
         </q-item>
 
-        <q-item to="/Post "  class="menuText"  active-class="q-item-no-link-highlighting v-ripple">
+        <q-item to="/Post"  class="menuText"  active-class="q-item-no-link-highlighting v-ripple">
           <q-item-section avatar>
             <q-icon style = "color:#457B9D" name="fa-solid fa-file-lines"/>
           </q-item-section>
@@ -265,7 +265,7 @@ export default defineComponent({
 
      function loadData () {//get Topics from api
        tops.value.splice(0)
-    api.get('https://swarmnet-prod.herokuapp.com/topics',{
+    api.get(process.env.ADMIN_API_URL+'/topics',{
   method: 'GET',
   
   headers: {
@@ -291,7 +291,7 @@ export default defineComponent({
      function addTopic(newTopic, topLevel){//add topics 
       // console.log(newTopic , topLevel)
 
-      api.post("https://swarmnet-prod.herokuapp.com/topics",{        
+      api.post(process.env.ADMIN_API_URL+"/topics",{        
               text: newTopic,
               level: parseInt(topLevel),
               },
@@ -328,7 +328,7 @@ export default defineComponent({
 /*edit a topic on the postboard */
 function editTopic(topicId, text){
   //console.log(topicId , text)
-   api.put(`https://swarmnet-prod.herokuapp.com/topics/${topicId}`,
+   api.put(process.env.ADMIN_API_URL+`/topics/${topicId}`,
                 {
                   text: text,
                   "level": 1
@@ -361,7 +361,7 @@ function editTopic(topicId, text){
 function deleteTopic(postID){
       // console.log(postID)
 
-       api.delete(`https://swarmnet-prod.herokuapp.com/topics/${postID}`,
+       api.delete(process.env.ADMIN_API_URL+`/topics/${postID}`,
               {
                 headers: {
                   Authorization:'JWT '+ localStorage.getItem('token'),

From 21b792e7e74cdb552bc031885df5b687fd8b6945 Mon Sep 17 00:00:00 2001
From: Danz7775 <72111919+Danz7775@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:54:59 -0400
Subject: [PATCH 2/7] attempting to render nested comments

---
 src/components/Comments.vue   |  26 ++--
 src/components/PostBoard.vue  |  45 +++---
 src/components/PostDesign.vue | 257 ++++++++++++++++++++++------------
 src/pages/Login.vue           |   2 +-
 4 files changed, 205 insertions(+), 125 deletions(-)

diff --git a/src/components/Comments.vue b/src/components/Comments.vue
index fa063a7..9aa4097 100644
--- a/src/components/Comments.vue
+++ b/src/components/Comments.vue
@@ -42,19 +42,19 @@
 
       </div>
 
-
-    <comments
-      v-if="showChildren"
-      v-for="(node, index) in nodes" 
-      :key="index"
-      :nodes="node.replies" 
-      :label="node.text"
-      :depth="depth + 1"
-      :id="node.id"
-      :topic="node.topicId" 
-      :date="node.created"
-    >
-    </comments>
+    <div v-if="showChildren">
+      <comments
+        v-for="(node, index) in nodes" 
+        :key="index"
+        :nodes="node.replies" 
+        :label="node.text"
+        :depth="depth + 1"
+        :id="node.id"
+        :topic="node.topicId" 
+        :date="node.created"
+      >
+      </comments>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/PostBoard.vue b/src/components/PostBoard.vue
index 5129c47..5736761 100644
--- a/src/components/PostBoard.vue
+++ b/src/components/PostBoard.vue
@@ -154,11 +154,15 @@
    
     <div class="row q-col-gutter-lg">
       <div class= "col-lg-10 col-md-8 q-col-gutter-lg">
-        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" v-for="(post) in pos" :key ="post.id">
-          <div>
-            <post-design :data="post"></post-design>
+        <div v-if="loading = true">
+          <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" v-for="(post) in pos" :key ="post.id">
+            <div>
+              <post-design :data="post"></post-design>
+            </div>
           </div>
         </div>
+        <v-progress-circular v-else/>
+
     </div>
 
 
@@ -211,6 +215,7 @@ export default defineComponent({
   },
   
   setup (props) {
+    const loading = true
     const $q = useQuasar()
     const post_data = ref(null)
     const post_tops = ref([])
@@ -250,7 +255,7 @@ export default defineComponent({
           $q.notify({
             color: 'negative',
             position: 'top',
-            message: 'Loading failed',
+            message: 'Loading of topics failed',
             icon: 'report_problem'
           })
         })
@@ -278,12 +283,13 @@ export default defineComponent({
               }
             }
           }
+          loading = false
         })
         .catch(() => {
           $q.notify({
             color: 'negative',
             position: 'top',
-            message: 'Loading failed',
+            message: 'Loading of post failed (1)',
             icon: 'report_problem'
           })
         })
@@ -291,23 +297,23 @@ export default defineComponent({
 
         /* displays all post after user logins in */
     function displayAllPost(){
-          pos.value.unshift([{
+          pos.value.unshift({
             id: -1,
-            title: 'This is a post title',
-            text:'This is my first post on SwarNET',
-            created_date: '2022-10-12T19:35:24Z',
+            title: '',
+            text:'',
+            created_date: '',
             media: [],
             tags:{
-              id:'1',
-              tag:'flood'
+              id:'',
+              tag:''
             },
             user: {
-                email: "jd@doemail.com",
-                first_name: "John",
-                last_name: "Doe",
+                email: "",
+                first_name: "",
+                last_name: "",
                 profile_image: null
             }
-          }])
+          })
         } 
 
   
@@ -318,7 +324,6 @@ export default defineComponent({
       console.log("get details")
       if(topic == 0){
 
-        console.log("if block")
         pos.value.splice(0)
       
         api.get(url,{
@@ -352,7 +357,6 @@ export default defineComponent({
         })
     } 
       else{
-        console.log("Else block")
         api.get(url,{
         method: 'GET',
         headers: {
@@ -513,8 +517,6 @@ export default defineComponent({
   watchEffect(()=>{
     if(message.value == 0){
       pos.value.splice(0)
-
-      console.log("Hi I'm keeping back")
       
       let url = "https://swarmnet.sundaebytes.com/api/admin/posts"
           
@@ -546,7 +548,7 @@ export default defineComponent({
               $q.notify({
                 color: 'negative',
                 position: 'top',
-                message: 'Loading failed',
+                message: 'Loading failed (2)',
                 icon: 'report_problem'
               })
             })
@@ -594,7 +596,7 @@ export default defineComponent({
         $q.notify({
           color: 'negative',
           position: 'top',
-          message: 'Loading failed',
+          message: 'Loading failed (3)',
           icon: 'report_problem'
         })
       })
@@ -607,6 +609,7 @@ export default defineComponent({
     props.tabText; 
   })
     return {
+        loading,
         prompt: ref(false),
         modelMultiple: ref(),
         topicInfo,
diff --git a/src/components/PostDesign.vue b/src/components/PostDesign.vue
index 4f215cc..63df61a 100644
--- a/src/components/PostDesign.vue
+++ b/src/components/PostDesign.vue
@@ -14,7 +14,7 @@
         </div>
         <div class="col-4 text-p dateStyle">
               <p> {{datePassed()}} </p>
-              <!-- <p>{{ data.user.first_name }}</p> -->
+              <p>{{ full_name }}</p>
         </div>
       </div>
 
@@ -41,7 +41,7 @@
 
   <!-- <div v-if=" hasMedia()"><p>LOADING</p></div> -->
 
-    <div class="row" v-if=" hasMedia()">
+    <div class="row" v-if="data.media.length > 0"> 
       <div class="col">
         <q-carousel animated v-model="slide" arrows navigation infinite >
             <q-carousel-slide v-for="(media) in data.media" :key="getMediaURL(media)" :name="getMediaURL(media)" :img-src="getMediaURL(media)" />
@@ -74,78 +74,189 @@
 
 <!-- COMMENTS -->
 
-  <div v-if="seeComments">
-    <q-separator color="grey"/>
-      <q-card class=" q-pa-md my-card background">
-        <q-card-section square="true" v-for="(reply) in data.replies" :key="getReplyKey(reply)">
-          <div class="row">
-            <div class="col-1">
-              <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
-            </div>
-            <div class="col-11">
-              <p> {{ reply.first_name }} {{ reply.last_name }} </p>
-              <p>{{ reply.text }} </p>
-            </div>
-          </div>
-             <q-card-actions>
-             <div class="col-4 q-px-xl">
-                <q-icon name="fa-solid fa-message"></q-icon>
-                <q-btn flat @click="toggleComments"> Comments  </q-btn>
-            </div>
-             <div class="col-4 q-px-xl">
-              <q-icon name="fa-solid fa-heart"> </q-icon>
-              <q-btn flat> Likes:  </q-btn>
-            </div>
-             <div class="col-4 q-px-xl">
-              <q-icon name="fa-solid fa-share"></q-icon>
-              <q-btn flat> Share</q-btn>
-            </div>
-          </q-card-actions>
+<!-- <div v-if="seeComments">
+  <q-separator color="grey" />
+  <q-card class="q-pa-md my-card background">
+    <q-card-section square="true">
+      <CommentCard
+        v-for="(nestedReply) in data.replies"
+        :key="getReplyKey(nestedReply, replyDepth + 1)"
+        :reply="nestedReply"
+        :replyDepth="replyDepth + 1"
+      />
+    </q-card-section>
+  </q-card>
+</div> -->
+
+
+    <div v-if="seeComments">
         <q-separator color="grey"/>
-      </q-card-section>    
-</q-card></div>
+          <q-card class=" q-pa-md my-card background">
+            <q-card-section square="true" >
+              <comments
+                :nodes="data.replies" 
+                :label="node.text"
+                :depth="depth + 1"
+                :id="node.id"
+                :topic="node.topicId" 
+                :date="node.created"
+              ></comments>
+              
+              <!-- <div v-if="data.replies.length > 0">
+                <div v-for="reply in data.replies" :reply="reply.replies" :key="getReplyKey(reply)">
+                  <p> {{ reply.first_name }} {{ reply.last_name }} </p>
+                  <p>{{ reply.text }} </p> -->
+                    
+                  <!-- <div v-for="nestedReply in reply.replies" :nestedReply="nestedReply.replies" :key="getReplyKey(nestedReply)">
+                    <p> {{ nestedReply.first_name }} {{ nestedReply.last_name }} </p>
+                    <p>{{ nestedReply.text }} </p>
+                  </div> -->
+
+                  <!-- <nested-comment v-for="nestedReply in reply.replies" :reply="nestedReply.replies" :key="getReplyKey(nestedReply)"></nested-comment>
+                </div> -->
+                
+
+
+                
+
+                <!-- <div class="row">
+                  <div class="col-1">
+                    <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
+                  </div>
+                  <div class="col-11">
+                    <p> {{ reply.first_name }} {{ reply.last_name }} </p>
+                    <p>{{ reply.text }} </p>
+                  </div>
+                </div> -->
+              <!-- </div> -->
+
+                <q-card-actions>
+                <div class="col-4 q-px-xl">
+                    <q-icon name="fa-solid fa-message"></q-icon>
+                    <q-btn flat @click="toggleComments"> Comments  </q-btn>
+                </div>
+                <div class="col-4 q-px-xl">
+                  <q-icon name="fa-solid fa-heart"> </q-icon>
+                  <q-btn flat> Likes:  </q-btn>
+                </div>
+                <div class="col-4 q-px-xl">
+                  <q-icon name="fa-solid fa-share"></q-icon>
+                  <q-btn flat> Share</q-btn>
+                </div>
+              </q-card-actions>
+            <q-separator color="grey"/>
+          </q-card-section>    
+        </q-card>
+    </div>
+
+    <!-- <div v-if="seeComments">
+      <q-separator color="grey"/>
+        <q-card class=" q-pa-md my-card background">
+          <q-card-section square="true" v-for="(reply) in data.replies" :key="getReplyKey(reply)">
+            <div class="row">
+              <div class="col-1">
+                <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
+              </div>
+              <div class="col-11">
+                <p> {{ reply.first_name }} {{ reply.last_name }} </p>
+                <p>{{ reply.text }} </p>
+              </div>
+            </div>
+              <q-card-actions>
+              <div class="col-4 q-px-xl">
+                  <q-icon name="fa-solid fa-message"></q-icon>
+                  <q-btn flat @click="toggleComments"> Comments  </q-btn>
+              </div>
+              <div class="col-4 q-px-xl">
+                <q-icon name="fa-solid fa-heart"> </q-icon>
+                <q-btn flat> Likes:  </q-btn>
+              </div>
+              <div class="col-4 q-px-xl">
+                <q-icon name="fa-solid fa-share"></q-icon>
+                <q-btn flat> Share</q-btn>
+              </div>
+            </q-card-actions>
+          <q-separator color="grey"/>
+        </q-card-section>    
+      </q-card>
+    </div> -->
   </q-card>
 </template>
 
 <script>
+
+
+
+// Vue.component('nested-comment', {
+//     props: ['reply'],
+//     template: `
+//     <div>
+//       <div class="row" v-if="reply.replies.length > 0">
+//         <div class="col-1">
+//           <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
+//         </div>
+//         <div class="col-11">
+//           <p> {{ reply.first_name }} {{ reply.last_name }} </p>
+//           <p>{{ reply.text }} </p>
+//         </div>
+//       </div>
+//       <nested-comment v-for="nestedReply in reply.replies" :reply="nestedReply" :key="getReplyKey(nestedReply)"></nested-comment>
+//     </div>
+//     `
+//   });
+
+
 import {defineComponent, ref} from 'vue'
 import { formatDistance} from 'date-fns'
 
+// const NestedComment = defineComponent({
+//   props: ['reply'],
+//   template: `
+//     <div>
+//       <div class="row" v-if="reply.replies.length > 0">
+//         <div class="col-1">
+//           <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
+//         </div>
+//         <div class="col-11">
+//           <p> {{ reply.first_name }} {{ reply.last_name }} </p>
+//           <p>{{ reply.text }} </p>
+//         </div>
+//       </div>
+//       <nested-comment v-for="nestedReply in reply.replies" :reply="nestedReply" :key="getReplyKey(nestedReply)"></nested-comment>
+//     </div>
+//     `
+
+// });
+
+
+
 export default defineComponent({
   name: "PostDesign",
-
   props: ['data'],
-
  
   setup(props) {
 
-    // const img = props.data.media && props.data.media.url;
+    console.log(props.data)
 
-    // console.log(props.data)
 
-    let full_name = ""
-    function load_name(){
-      try{
-        full_name = props.data.user.first_name +" "+ props.data.user.last_name
-      }
-      catch(err){
-        full_name = ""
-      }
-      
+    function getReplyKey(reply, replyDepth) {
+      return reply && reply.id + '_' + replyDepth
     }
 
-    function dataLoaded(){
-      if (Array.isArray(props.data)){
-        if (props.data[0].id !== -1){
-          console.log("waiting")
-          return true
-        } 
+    let full_name = ""
+    function load_name() {
+    try {
+      const user = props.data.user;
+      if (user && typeof user.first_name === 'string' && typeof user.last_name === 'string') {
+        full_name = user.first_name + ' ' + user.last_name;
+      } else {
+        full_name = '';
       }
-      else{
-        console.log("done")
-        return false
-      }    
+    } 
+    catch (err) {
+      full_name = '';
     }
+}
 
     const value = Date.now()
     const seeComments = ref(false)
@@ -164,55 +275,21 @@ export default defineComponent({
     }
 
     const replies = ref(props.data.replies || [])
-    // const num_replies = 0
+
 
     // Function to get the reply key
     function getReplyKey(reply) {
-      // num_replies = array.length(props.data.replies)
       return reply && reply.id
     }
 
-    function hasMedia(){
-      try{
-        return props.data.media.url
-      }
-      catch (err){
-        console.log (props.data.media)
-        return false
-      }
-      // let arr_len = 0
-      // try{
-      //   arr_len = props.data.media.length()
-      //   console.log (arr_len)
-      // }
-      // catch (err){
-      //   console.log (props.data.media)
-      //   console.log (err)
-      //   console.log(typeof props.data.media)
-      //   return false
-      // }
-      // if (arr_len>0){
-        
-      //   console.log ("returning true")
-      //   return true
-      // }
-      // else{
-      //   return false
-      // }
-    }
-
     function getMediaURL(media){
+      console.log(media.url)
       return media.url
     }
 
-
-
     return{
       getMediaURL,
       full_name,
-      hasMedia,
-      dataLoaded,
-      replies,
       getReplyKey,
       datePassed,
       toggleComments,
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index d846cec..6a6ba04 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -62,7 +62,7 @@ export default defineComponent({
     function login(username, password){
     
     
-      let urrl =  process.env.ADMIN_API_URL+"/login"
+      let urrl = "/login"
       api.post(urrl, {
         "username": username,
         "password": password

From ffbba7301a46ccf2f92dbd7a2bdc83403ca59d63 Mon Sep 17 00:00:00 2001
From: Danz7775 <danielsuite7@gmail.com>
Date: Fri, 7 Jul 2023 20:37:12 +0000
Subject: [PATCH 3/7] Working nested comments, top level comment repeats

---
 package.json                  |   1 +
 src/components/Comments.vue   |  12 +--
 src/components/PostDesign.vue | 162 +++++-----------------------------
 src/pages/Login.vue           |   2 +-
 4 files changed, 29 insertions(+), 148 deletions(-)

diff --git a/package.json b/package.json
index 1fc66cf..0fac29d 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@quasar/app": "^3.0.0",
+    "@quacar/cli": "^2.2.1",
     "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.2",
     "dotenv": "^16.0.1",
     "quasar-app-extension-qhierarchy": "^1.0.0-alpha.1"
diff --git a/src/components/Comments.vue b/src/components/Comments.vue
index 9aa4097..4be11ce 100644
--- a/src/components/Comments.vue
+++ b/src/components/Comments.vue
@@ -50,8 +50,8 @@
         :label="node.text"
         :depth="depth + 1"
         :id="node.id"
-        :topic="node.topicId" 
-        :date="node.created"
+        :topic="1" 
+        :date="node.created_date"
       >
       </comments>
     </div>
@@ -71,7 +71,7 @@ import { formatDistance} from 'date-fns'
    
     data() {
       return { 
-        showChildren: false,
+        showChildren: ref(false),
         createReply: false
        }
     },
@@ -97,15 +97,15 @@ import { formatDistance} from 'date-fns'
       const $q = useQuasar()
 
       function datePassed(time) {
-      console.log(Date.parse(time))
-      console.log(formatDistance(Date.parse(time), new Date(), { addSuffix: true }))
+      // console.log(Date.parse(time))
+      // console.log(formatDistance(Date.parse(time), new Date(), { addSuffix: true }))
         return formatDistance(Date.parse(time), new Date(), { addSuffix: true })
     }
       
       function createNewComment(message){
         console.log("creating new comment")
         console.log(message)
-        api.post("https://swarmnet-prod.herokuapp.com/replies", {
+        api.post(process.env.BASE_URL+"/replies", {
           "topic_id": props.topic,
           "text": message,
           "replyTo": props.id,
diff --git a/src/components/PostDesign.vue b/src/components/PostDesign.vue
index 63df61a..c217303 100644
--- a/src/components/PostDesign.vue
+++ b/src/components/PostDesign.vue
@@ -1,11 +1,6 @@
 <template>
   <q-card class="my-card background">
      <!--<a :href="`/Details/${data.id}`"> </a>-->
-
-    <!-- <div v-if="dataLoaded()"><p>LOADING</p></div>
-    <div v-else><p>DONE</p></div> -->
-
-
 <!-- HEADING -->
     <q-card-section square=true>
       <div class="row q-gutter-none q-pa-md q-ma-xs">
@@ -29,6 +24,8 @@
           <!-- </span> -->
 <!-- CONTENT -->
 
+    <!-- <post-details :label="data.text" :nodes="data" :depth="0"  :id="data.id" :date="data.created"> </post-details> -->
+
     <div class="q-pa-md">
       <div class="row">
         <div class="col-9 text-p">
@@ -49,7 +46,6 @@
             <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
             <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" /> -->
         </q-carousel>
-          <!-- <q-img :src="img"/> -->
       </div>
     </div>
 
@@ -74,163 +70,40 @@
 
 <!-- COMMENTS -->
 
-<!-- <div v-if="seeComments">
-  <q-separator color="grey" />
-  <q-card class="q-pa-md my-card background">
-    <q-card-section square="true">
-      <CommentCard
-        v-for="(nestedReply) in data.replies"
-        :key="getReplyKey(nestedReply, replyDepth + 1)"
-        :reply="nestedReply"
-        :replyDepth="replyDepth + 1"
-      />
-    </q-card-section>
-  </q-card>
-</div> -->
-
 
     <div v-if="seeComments">
         <q-separator color="grey"/>
           <q-card class=" q-pa-md my-card background">
             <q-card-section square="true" >
-              <comments
-                :nodes="data.replies" 
-                :label="node.text"
-                :depth="depth + 1"
-                :id="node.id"
-                :topic="node.topicId" 
-                :date="node.created"
-              ></comments>
               
-              <!-- <div v-if="data.replies.length > 0">
-                <div v-for="reply in data.replies" :reply="reply.replies" :key="getReplyKey(reply)">
-                  <p> {{ reply.first_name }} {{ reply.last_name }} </p>
-                  <p>{{ reply.text }} </p> -->
-                    
-                  <!-- <div v-for="nestedReply in reply.replies" :nestedReply="nestedReply.replies" :key="getReplyKey(nestedReply)">
-                    <p> {{ nestedReply.first_name }} {{ nestedReply.last_name }} </p>
-                    <p>{{ nestedReply.text }} </p>
-                  </div> -->
-
-                  <!-- <nested-comment v-for="nestedReply in reply.replies" :reply="nestedReply.replies" :key="getReplyKey(nestedReply)"></nested-comment>
-                </div> -->
-                
-
-
-                
-
-                <!-- <div class="row">
-                  <div class="col-1">
-                    <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
-                  </div>
-                  <div class="col-11">
-                    <p> {{ reply.first_name }} {{ reply.last_name }} </p>
-                    <p>{{ reply.text }} </p>
-                  </div>
-                </div> -->
-              <!-- </div> -->
-
-                <q-card-actions>
-                <div class="col-4 q-px-xl">
-                    <q-icon name="fa-solid fa-message"></q-icon>
-                    <q-btn flat @click="toggleComments"> Comments  </q-btn>
-                </div>
-                <div class="col-4 q-px-xl">
-                  <q-icon name="fa-solid fa-heart"> </q-icon>
-                  <q-btn flat> Likes:  </q-btn>
-                </div>
-                <div class="col-4 q-px-xl">
-                  <q-icon name="fa-solid fa-share"></q-icon>
-                  <q-btn flat> Share</q-btn>
-                </div>
-              </q-card-actions>
+              
+              <div v-if="data.replies.length > 0">
+
+                <comments :label="data.replies[0].text" :nodes="data.replies" :depth="0"  :id="data.replies[0].id" :topic="1" :date="data.replies[0].created_date" ></comments>
+
+              </div>
             <q-separator color="grey"/>
           </q-card-section>    
         </q-card>
     </div>
 
-    <!-- <div v-if="seeComments">
-      <q-separator color="grey"/>
-        <q-card class=" q-pa-md my-card background">
-          <q-card-section square="true" v-for="(reply) in data.replies" :key="getReplyKey(reply)">
-            <div class="row">
-              <div class="col-1">
-                <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
-              </div>
-              <div class="col-11">
-                <p> {{ reply.first_name }} {{ reply.last_name }} </p>
-                <p>{{ reply.text }} </p>
-              </div>
-            </div>
-              <q-card-actions>
-              <div class="col-4 q-px-xl">
-                  <q-icon name="fa-solid fa-message"></q-icon>
-                  <q-btn flat @click="toggleComments"> Comments  </q-btn>
-              </div>
-              <div class="col-4 q-px-xl">
-                <q-icon name="fa-solid fa-heart"> </q-icon>
-                <q-btn flat> Likes:  </q-btn>
-              </div>
-              <div class="col-4 q-px-xl">
-                <q-icon name="fa-solid fa-share"></q-icon>
-                <q-btn flat> Share</q-btn>
-              </div>
-            </q-card-actions>
-          <q-separator color="grey"/>
-        </q-card-section>    
-      </q-card>
-    </div> -->
   </q-card>
 </template>
 
 <script>
 
-
-
-// Vue.component('nested-comment', {
-//     props: ['reply'],
-//     template: `
-//     <div>
-//       <div class="row" v-if="reply.replies.length > 0">
-//         <div class="col-1">
-//           <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
-//         </div>
-//         <div class="col-11">
-//           <p> {{ reply.first_name }} {{ reply.last_name }} </p>
-//           <p>{{ reply.text }} </p>
-//         </div>
-//       </div>
-//       <nested-comment v-for="nestedReply in reply.replies" :reply="nestedReply" :key="getReplyKey(nestedReply)"></nested-comment>
-//     </div>
-//     `
-//   });
-
-
 import {defineComponent, ref} from 'vue'
 import { formatDistance} from 'date-fns'
+import Comments from './Comments.vue'
 
-// const NestedComment = defineComponent({
-//   props: ['reply'],
-//   template: `
-//     <div>
-//       <div class="row" v-if="reply.replies.length > 0">
-//         <div class="col-1">
-//           <q-avatar icon="fa-solid fa-circle-user fa-2xl"/>
-//         </div>
-//         <div class="col-11">
-//           <p> {{ reply.first_name }} {{ reply.last_name }} </p>
-//           <p>{{ reply.text }} </p>
-//         </div>
-//       </div>
-//       <nested-comment v-for="nestedReply in reply.replies" :reply="nestedReply" :key="getReplyKey(nestedReply)"></nested-comment>
-//     </div>
-//     `
-
-// });
 
 
 
 export default defineComponent({
+
+  components: {
+    Comments
+  },
   name: "PostDesign",
   props: ['data'],
  
@@ -271,7 +144,6 @@ export default defineComponent({
 
     function toggleComments(){
       seeComments.value = !seeComments.value
-
     }
 
     const replies = ref(props.data.replies || [])
@@ -287,6 +159,13 @@ export default defineComponent({
       return media.url
     }
 
+    function hasChildren(reply){
+      if (reply.length > 0){
+        return true
+      }
+
+    }
+
     return{
       getMediaURL,
       full_name,
@@ -295,6 +174,7 @@ export default defineComponent({
       toggleComments,
       seeComments,
       slide:ref(1),
+      Comments
     }
   }
 })
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 6a6ba04..6d35b13 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -62,7 +62,7 @@ export default defineComponent({
     function login(username, password){
     
     
-      let urrl = "/login"
+      let urrl = process.env.BASE_API_URL+"/login"
       api.post(urrl, {
         "username": username,
         "password": password

From 01cdf0fec0db011fae8d7684ff77458955321d14 Mon Sep 17 00:00:00 2001
From: Danz7775 <danielsuite7@gmail.com>
Date: Mon, 10 Jul 2023 19:00:20 +0000
Subject: [PATCH 4/7] nested comments now work Co-authored-by: shanif
 <salamandur@users.noreply.github.com>

---
 src/components/Comments.vue   | 33 +++++++++++++--------
 src/components/PostBoard.vue  | 56 +++++++++++++++++++++--------------
 src/components/PostDesign.vue | 15 ++++++++--
 3 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/components/Comments.vue b/src/components/Comments.vue
index 4be11ce..55c936e 100644
--- a/src/components/Comments.vue
+++ b/src/components/Comments.vue
@@ -43,17 +43,21 @@
       </div>
 
     <div v-if="showChildren">
-      <comments
-        v-for="(node, index) in nodes" 
-        :key="index"
-        :nodes="node.replies" 
-        :label="node.text"
-        :depth="depth + 1"
-        :id="node.id"
-        :topic="1" 
-        :date="node.created_date"
-      >
-      </comments>
+      <!-- <div v-if="increaseDepth()>0"> -->
+          <comments
+          v-for="(node, index) in nodes" 
+          :key="index"
+          :nodes="node.replies" 
+          :label="node.text"
+          :depth="depth + 1"
+          :id="node.id"
+          :topic="1" 
+          :date="node.created_date"
+        >
+        </comments>
+      
+      <!-- </div> -->
+
     </div>
   </div>
 </template>
@@ -137,8 +141,13 @@ import { formatDistance} from 'date-fns'
             })
           })     
       }
-
+    function increaseDepth(){
+      let depth = this.depth
+      this.depth = this.depth + 1
+      return depth
+    }
     return{
+      increaseDepth,
       createNewComment,
       text,
       datePassed
diff --git a/src/components/PostBoard.vue b/src/components/PostBoard.vue
index 5736761..caae239 100644
--- a/src/components/PostBoard.vue
+++ b/src/components/PostBoard.vue
@@ -1,5 +1,5 @@
 <template>
-   <!--<div class="q-pa-md" >
+   <div class="q-pa-md" >
    <div class="q-gutter-md row">
       <q-input
         v-model="search"
@@ -16,18 +16,18 @@
           <q-btn icon="fas fa-times" flat round @click="search='', getDetails(message)" />
         </template>
       </q-input>
--->
+
       <q-space/>
 
-     <!-- <div class="q-gutter-sm row items-center no-wrap ">
+     <div class="q-gutter-sm row items-center no-wrap ">
     
     <q-btn fab flat round icon="far fa-edit" color="accent" size="xs" fab-mini @click="fixed = true">
       <q-tooltip>
             Create Post
           </q-tooltip>
-    </q-btn> -->
+    </q-btn>
 
-    <!--
+    
       <q-btn icon="event" flat round color="accent">
          <q-tooltip>
             Filter by Date
@@ -43,7 +43,8 @@
     </q-btn>
     
       </div>    
-    </div>-->
+    </div>
+  </div>
 
      <q-dialog v-model="fixed" no-refocus>
       <q-card style="width: 600px; height: 400px; background-color: powderblue;">
@@ -147,6 +148,7 @@
     </div>
     
     </div>--->
+
     <div class="row">
         <div class= "postHeader q-ma-lg" style="color: #4D4D4D;"> All Posts </div>
     </div> 
@@ -161,12 +163,14 @@
             </div>
           </div>
         </div>
-        <v-progress-circular v-else/>
+        <q-spinner
+        color="primary"
+        size="3em"
+        v-else
+      />
 
     </div>
 
-
-
     <div class= "col-lg-2 col-md-4 col-sm-1 col-xs-1  q-col-gutter-lg">
     
       <q-select sqaure filled v-model= "selectModel" :options="['Most Recent', 'Oldest', 'Trending']" :display-value="'Most Recent'" ></q-select>
@@ -192,7 +196,7 @@ import PostDesign from './PostDesign.vue';
 
 let url = process.env.ADMIN_API_URL + '/posts';
 let post_url = process.env.ADMIN_API_URL + '/posts';
-let topics_url = process.env.ADMIN_API_URL + '/topics'
+// let topics_url = process.env.ADMIN_API_URL + '/topics' 
 
 export default defineComponent({
   components: { PostDesign },
@@ -239,14 +243,15 @@ export default defineComponent({
     /* gets topics to use for q-dialog */
     //LOADING IN TOPICS
     function loadData () {
-      api.get(topics_url, {
+      let url = process.env.BASE_API_URL+'/topics'
+      api.get(url, {
         method: 'GET',
         headers: {
           'Access-Control-Allow-Origin': '*'
         }
       })
         .then((response) => {
-          data.value = response.data    
+          data.value = response.data.topics    
           for (let i of data.value) { 
             tops.value.push(i)  
           }        
@@ -270,20 +275,23 @@ export default defineComponent({
         }
       })
         .then((response) => {
+          pos.value.shift(0)
           post_data.value = response.data.posts
           for (let i of post_data.value) {
-            let o = JSON.parse(JSON.stringify(i))
-            pos.value.unshift(o)
-            posTags.value.unshift(o.tags)
-            for (let j of comments.value) {
-              if (i.id == j.id) {
-                let o = JSON.parse(JSON.stringify(i))
-                pos.value.shift(o)
-                posTags.value.shift(o.tags)
+            if (!i.originalPostId) {
+              let o = JSON.parse(JSON.stringify(i))
+              pos.value.unshift(o)
+              posTags.value.unshift(o.tags)
+              for (let j of comments.value) {
+                if (i.id == j.id) {
+                  let o = JSON.parse(JSON.stringify(i))
+                  pos.value.shift(o)
+                  posTags.value.shift(o.tags)
+                }
               }
             }
           }
-          loading = false
+          
         })
         .catch(() => {
           $q.notify({
@@ -400,8 +408,10 @@ export default defineComponent({
     
     /*get all top level post with a partciular tag*/
     function searchByTags(searchTag){
+
+      let search_url = process.env.COMMON_API_URL +`/${searchTag}`
    
-      let search_url = url+`/${searchTag}`
+      // let search_url = url+`/${searchTag}`
       //console.log(url)
             api.get(search_url,{
             method: 'GET',
@@ -518,7 +528,7 @@ export default defineComponent({
     if(message.value == 0){
       pos.value.splice(0)
       
-      let url = "https://swarmnet.sundaebytes.com/api/admin/posts"
+      let url = process.env.ADMIN_API_URL+"/posts"
           
             api.get(url,{
             method: 'GET',
diff --git a/src/components/PostDesign.vue b/src/components/PostDesign.vue
index c217303..417c1d9 100644
--- a/src/components/PostDesign.vue
+++ b/src/components/PostDesign.vue
@@ -41,10 +41,12 @@
     <div class="row" v-if="data.media.length > 0"> 
       <div class="col">
         <q-carousel animated v-model="slide" arrows navigation infinite >
-            <q-carousel-slide v-for="(media) in data.media" :key="getMediaURL(media)" :name="getMediaURL(media)" :img-src="getMediaURL(media)" />
+          <div v-for="(media) in data.media" :key="getMediaURL(media)" >
+            <q-carousel-slide :name="getMediaURL(media)" :img-src="getMediaURL(media)" />
             <!-- <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
             <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
             <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" /> -->
+          </div>
         </q-carousel>
       </div>
     </div>
@@ -78,8 +80,15 @@
               
               
               <div v-if="data.replies.length > 0">
-
-                <comments :label="data.replies[0].text" :nodes="data.replies" :depth="0"  :id="data.replies[0].id" :topic="1" :date="data.replies[0].created_date" ></comments>
+                
+                <comments v-for="(reply, index) in data.replies" 
+                :key="index" 
+                :label="reply.text" 
+                :nodes="reply.replies" 
+                :depth="0"  
+                :id="reply.id" 
+                :topic="1" 
+                :date="reply.created_date" ></comments>
 
               </div>
             <q-separator color="grey"/>

From 8e1baee696d6bedc38a1fbba2ff169ec069c85c4 Mon Sep 17 00:00:00 2001
From: Danz7775 <danielsuite7@gmail.com>
Date: Mon, 10 Jul 2023 20:22:39 +0000
Subject: [PATCH 5/7] Posting posts now work

---
 src/components/PostBoard.vue  | 49 +++++++++++++++++++----------------
 src/components/PostDesign.vue | 24 +++--------------
 2 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/src/components/PostBoard.vue b/src/components/PostBoard.vue
index caae239..8df262c 100644
--- a/src/components/PostBoard.vue
+++ b/src/components/PostBoard.vue
@@ -66,10 +66,13 @@
         <q-separator />
 
         <q-card-section style="height: 120px" class="scroll" counter maxlength="260">
+          <q-input placeholder="Enter The Title Here!" type="textarea" v-model="title" counter maxlength="260"  autogrow>
+          </q-input>
           <q-input placeholder="Enter Post Here!" type="textarea" v-model="text" counter maxlength="260"  autogrow>
           </q-input>
         </q-card-section>
 
+
         <q-separator/>
 
         <q-card-actions> 
@@ -90,7 +93,7 @@
 
         <q-card-actions align="right">
           <q-btn flat label="Discard" color="primary" @click="text = ''" v-close-popup />
-          <q-btn flat label="Post" color="primary" v-close-popup @click="postPost(text, modelMultiple); text = '';"/>
+          <q-btn flat label="Post" color="primary" v-close-popup @click="postPost(title, text, modelMultiple); text = '';"/>
         </q-card-actions>
 
       </q-card>
@@ -410,9 +413,7 @@ export default defineComponent({
     function searchByTags(searchTag){
 
       let search_url = process.env.COMMON_API_URL +`/${searchTag}`
-   
-      // let search_url = url+`/${searchTag}`
-      //console.log(url)
+
             api.get(search_url,{
             method: 'GET',
             headers: {
@@ -450,24 +451,37 @@ export default defineComponent({
     }
     
     /* creates new post using q-dialog*/ 
-    function postPost(text, tags){
+    function postPost(title, text, tags){
+      
       if(ptopid.value == ''){
         ptopid.value = props.tabText
       }
-      // let url = "https://swarmnet-prod.herokuapp.com/posts"
-          
+      if (ptopid.value==''){
+        ptopid.value==1
+      }
+      let tag_labels = []
+
+      for (let tag of tags){  
+        tag_labels.push(tag.label)
+      }
+
+
+
+          let url = process.env.BASE_API_URL + '/user/feed'
+      
             api.post(url,{
-              topic_id: ptopid.value,  
+              title: title,
+              topic_ids: [ptopid.value],  
               text: text,
-              tags: tags,
-              composed: "2022-03-02T14:48:00Z"
+              attachments:[],
+              tags: tag_labels,
+              composed: "2022-11-14 14:32:30"
               },
               {
                 headers: {
-                  Authorization:'JWT '+ localStorage.getItem('token'),
+                  Authorization:'Bearer '+ localStorage.getItem('token'),
                   'Access-Control-Allow-Origin': '*'
-                  
-                }
+                },
               }
               )
             .then((response) => {
@@ -539,7 +553,6 @@ export default defineComponent({
                   }
               })
             .then((response) => {
-              console.log("done")
               data.value = response.data
 
               for (let i of data.value) { 
@@ -564,9 +577,7 @@ export default defineComponent({
             })
     }
     else{
-      console.log("else")
       pos.value.splice(0)
-      // let url = "https://swarmnet-prod.herokuapp.com/posts"
       api.get(url,{
       method: 'GET',
       headers: {
@@ -591,16 +602,12 @@ export default defineComponent({
           }
         }
 
-        //console.log(pos.value)
-
         for(let j of tops.value){
           if(j.id == message.value){
             ptabtext.value = j.text
           }     
         }  
 
-       // console.log(props.tabText);
-
            })
       .catch(() => {
         $q.notify({
@@ -611,8 +618,6 @@ export default defineComponent({
         })
       })
     }
-     
-      //  subsStatus(props.tabText);
    
   });
   onUpdated(()=> {
diff --git a/src/components/PostDesign.vue b/src/components/PostDesign.vue
index 417c1d9..f7c65fe 100644
--- a/src/components/PostDesign.vue
+++ b/src/components/PostDesign.vue
@@ -9,7 +9,7 @@
         </div>
         <div class="col-4 text-p dateStyle">
               <p> {{datePassed()}} </p>
-              <p>{{ full_name }}</p>
+              <p>{{ data.user.first_name }} {{ data.user.last_name }}</p>
         </div>
       </div>
 
@@ -19,9 +19,9 @@
         </div> -->
 
 
-                <!-- <span class="tag tag-blue" v-for="(tag) in data.tags" :key="tag">              -->
-                    <!-- {{tag.tag_text}}     -->
-          <!-- </span> -->
+      <span class="tag tag-blue" v-for="(tag) in data.tags" :key="tag">             
+        {{tag.tag_text}}    
+      </span>
 <!-- CONTENT -->
 
     <!-- <post-details :label="data.text" :nodes="data" :depth="0"  :id="data.id" :date="data.created"> </post-details> -->
@@ -125,21 +125,6 @@ export default defineComponent({
       return reply && reply.id + '_' + replyDepth
     }
 
-    let full_name = ""
-    function load_name() {
-    try {
-      const user = props.data.user;
-      if (user && typeof user.first_name === 'string' && typeof user.last_name === 'string') {
-        full_name = user.first_name + ' ' + user.last_name;
-      } else {
-        full_name = '';
-      }
-    } 
-    catch (err) {
-      full_name = '';
-    }
-}
-
     const value = Date.now()
     const seeComments = ref(false)
     const num_replies = 0
@@ -177,7 +162,6 @@ export default defineComponent({
 
     return{
       getMediaURL,
-      full_name,
       getReplyKey,
       datePassed,
       toggleComments,

From 56cc78c8594eed0b5c005d85ffd87a3d6777b3a4 Mon Sep 17 00:00:00 2001
From: Danz7775 <danielsuite7@gmail.com>
Date: Thu, 13 Jul 2023 21:14:50 +0000
Subject: [PATCH 6/7] Fixed media and changed user profile image source

---
 src/components/Comments.vue   |  6 +++---
 src/components/PostDesign.vue | 17 ++++++-----------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/Comments.vue b/src/components/Comments.vue
index 55c936e..a23f1e0 100644
--- a/src/components/Comments.vue
+++ b/src/components/Comments.vue
@@ -3,9 +3,9 @@
     <div class="q-mr-sm box_comment" :style="indent" id="rcorners3" >
       <div class="row justify-center">
       <div class="col">
-         <q-avatar >
-              <img src="https://cdn.quasar.dev/img/boy-avatar.png">
-            </q-avatar>
+        <q-avatar>
+              <img src="{{ node.user.profile_image }}">
+        </q-avatar>
        {{ label }}
       </div>
       
diff --git a/src/components/PostDesign.vue b/src/components/PostDesign.vue
index f7c65fe..226c864 100644
--- a/src/components/PostDesign.vue
+++ b/src/components/PostDesign.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- <div v-show="showSimulatedReturnData"> -->
   <q-card class="my-card background">
      <!--<a :href="`/Details/${data.id}`"> </a>-->
 <!-- HEADING -->
@@ -40,13 +41,9 @@
 
     <div class="row" v-if="data.media.length > 0"> 
       <div class="col">
+
         <q-carousel animated v-model="slide" arrows navigation infinite >
-          <div v-for="(media) in data.media" :key="getMediaURL(media)" >
-            <q-carousel-slide :name="getMediaURL(media)" :img-src="getMediaURL(media)" />
-            <!-- <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
-            <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
-            <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" /> -->
-          </div>
+            <q-carousel-slide v-for="(media, index) in data.media" :key="getMediaURL(media)" :name="index+1" :img-src="getMediaURL(media)" />
         </q-carousel>
       </div>
     </div>
@@ -95,8 +92,9 @@
           </q-card-section>    
         </q-card>
     </div>
-
+    <!-- <q-inner-loading :showing="visible" label="Please wait..." label-class="text-teal" label-style="font-size: 1.1em"/> -->
   </q-card>
+<!-- </div> -->
 </template>
 
 <script>
@@ -107,7 +105,6 @@ import Comments from './Comments.vue'
 
 
 
-
 export default defineComponent({
 
   components: {
@@ -117,10 +114,8 @@ export default defineComponent({
   props: ['data'],
  
   setup(props) {
-
     console.log(props.data)
-
-
+  
     function getReplyKey(reply, replyDepth) {
       return reply && reply.id + '_' + replyDepth
     }

From 86d7db090f4fdf14f85eec26baac3a4a31e3a05e Mon Sep 17 00:00:00 2001
From: salamandur <salmah.hanif@gmail.com>
Date: Mon, 7 Aug 2023 17:51:51 +0000
Subject: [PATCH 7/7] added dislikes to post display

---
 src/components/PostDesign.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/PostDesign.vue b/src/components/PostDesign.vue
index 226c864..2000df2 100644
--- a/src/components/PostDesign.vue
+++ b/src/components/PostDesign.vue
@@ -57,9 +57,13 @@
                 <q-icon name="fa-solid fa-message"></q-icon>
                 <q-btn flat @click="toggleComments"> Comments </q-btn>
             </div>
-             <div class="col-4 q-px-xl">
-              <q-icon name="fa-solid fa-heart"> </q-icon>
+            <div class="col-4 q-px-xl">
+              <q-icon name="fa-solid fa-thumbs-up"> </q-icon>
               <q-btn flat> Likes: {{ data.likes }} </q-btn>
+            </div>
+            <div class="col-4 q-px-xl">
+              <q-icon name="fa-solid fa-thumbs-down"> </q-icon>
+              <q-btn flat> Dislikes: {{ data.dislikes }} </q-btn>
             </div>
              <!-- <div class="col-4 q-px-xl">
               <q-icon name="fa-solid fa-share"></q-icon>