From 70f39120475727593f08525cd3c37fe78b910663 Mon Sep 17 00:00:00 2001
From: Pedro Lopes <pedrolopeshls99@gmail.com>
Date: Thu, 1 Oct 2020 21:15:08 -0300
Subject: [PATCH 1/2] coments screen with same component

---
 src/components/cpmCard.vue   | 30 ++++++++++--------------------
 src/views/private/Coment.vue | 28 +++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/components/cpmCard.vue b/src/components/cpmCard.vue
index ebb1753..bff2bb4 100644
--- a/src/components/cpmCard.vue
+++ b/src/components/cpmCard.vue
@@ -1,48 +1,38 @@
 <template>
     <div>
 
-        <v-card class="rounded-xl" max-height="900px" max-width="600px">
+        <v-card v-if="cardData" class="rounded-xl" max-height="900px" max-width="600px">
 
             <v-app-bar color="white" class="d-flex align-center" dense>
 
                 <v-avatar size="36" color="orange">
-                    <v-icon v-if="!card.user.avatar" dark>mdi-account-circle</v-icon>
-                    <img v-else :src="card.user.avatar" alt="avatar">
+                    <v-icon v-if="!cardData.user.avatar" dark>mdi-account-circle</v-icon>
+                    <img v-else :src="cardData.user.avatar" alt="avatar">
                 </v-avatar>
-
-                <div class="ml-3">{{card.name}}</div>
                 
                 |
 
-                <div class="ml-3">{{card.user.name}}</div>
+                <div class="ml-3">{{cardData.user.name}}</div>
 
 
-                <div class="ml-3">{{card.eventDate}}</div>
+                <div class="ml-3">{{cardData.eventDate}}</div>
 
             </v-app-bar>
 
-            <v-img contain max-width="600px" max-height="600px" :src="card.img"></v-img>
+            <v-img contain max-width="600px" max-height="600px" :src="cardData.img"></v-img>
 
             <v-card-title>
-                <h2>{{card.title}}</h2>
+                <h2>{{cardData.title}}</h2>
             </v-card-title>
 
             <v-card-text>
-                <p>{{card.description}}</p>
+                <p>{{cardData.description}}</p>
             </v-card-text>
 
-            <!-- <v-card-subtitle>
-                <p>Criado em {{card.createdAt}}</p>
-            </v-card-subtitle> -->
-
             <v-expansion-panels>
                 <v-expansion-panel>
                     <v-expansion-panel-header>Comentários</v-expansion-panel-header>
-                        <v-expansion-panel-content v-for="(comment, i) in card.comments" :key="i">
-                            <!-- {{comment.user}}: {{comment.comment}} -->
-                        <!-- <v-avatar size="35">
-                            <v-img :src="user.avatar"></v-img>
-                        </v-avatar> -->
+                        <v-expansion-panel-content v-for="(comment, i) in cardData.comments" :key="i">
                             {{comment.user.name}}: {{comment.comment}}
                         </v-expansion-panel-content>
                 </v-expansion-panel>
@@ -59,7 +49,7 @@ export default {
     props: ['cardData'],
     data() {
         return {
-            card: this.cardData
+            
         }
     },
 
diff --git a/src/views/private/Coment.vue b/src/views/private/Coment.vue
index b70b0b6..c25bad3 100644
--- a/src/views/private/Coment.vue
+++ b/src/views/private/Coment.vue
@@ -1,22 +1,44 @@
 <template>
     <div>
-        <EventCard/>
+        <EventCard :cardData="dataEventResult"/>
     </div>
 </template>
 <script>
-import EventCard from '../../components/EventCard/EventCard'
+import EventCard from '../../components/cpmCard'
+import {
+  mapActions, mapGetters
+} from 'vuex'
 export default {
     components:{
         EventCard
     },
     data:() => ({
 
+        dataEventResult:'',
+
     }),
+    computed:{
+        ...mapGetters({
+            eventDataId: 'EventVuex/eventDataId'
+        })
+    },
+
     methods:{
 
+        ...mapActions({
+            getEventById: 'EventVuex/getEventById'
+        }),
+
+        async getEventComents(){
+            
+            let resultRequest = await this.getEventById(3)
+            this.dataEventResult = resultRequest
+        }
+
     },
-    created(){
 
+    created(){
+        this.getEventComents()
     }
 }
 </script>
\ No newline at end of file

From f9930e4b5c4be9ac9206ce7a2d72ae03c9aabdb0 Mon Sep 17 00:00:00 2001
From: Pedro Lopes <pedrolopeshls99@gmail.com>
Date: Thu, 1 Oct 2020 21:21:45 -0300
Subject: [PATCH 2/2] using same component

---
 src/components/cpmCard.vue |  2 +-
 src/views/private/Feed.vue | 24 ++++++++++++++----------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/cpmCard.vue b/src/components/cpmCard.vue
index bff2bb4..1059930 100644
--- a/src/components/cpmCard.vue
+++ b/src/components/cpmCard.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
 
-        <v-card v-if="cardData" class="rounded-xl" max-height="900px" max-width="600px">
+        <v-card v-if="cardData" class="rounded-xl ac" max-height="900px" max-width="600px">
 
             <v-app-bar color="white" class="d-flex align-center" dense>
 
diff --git a/src/views/private/Feed.vue b/src/views/private/Feed.vue
index a3f6adc..9cecee6 100644
--- a/src/views/private/Feed.vue
+++ b/src/views/private/Feed.vue
@@ -6,9 +6,14 @@
         <section v-else>
             <h1 class="alg-txt-c headline mt-3">Feed</h1>
 
-            <div class="p15 mt-10" v-for="(item, i) in cardsEventData" :key="i">
 
-                <v-card max-width="600" class="ac cp card-style-1">
+            <div class="p15 mt-10 ac" v-for="(item, i) in cardsEventData" :key="i">
+
+
+                <FeedCard :cardData="cardsEventData[i]"/>
+
+
+                <!-- <v-card max-width="600" class="ac cp card-style-1">
 
                     <img :src='item.img' class="img-size">
 
@@ -18,7 +23,7 @@
                         <span class="mt-2 display-b">Criado por <strong>{{ item.user.name }}</strong> </span>
                     </div>
 
-                </v-card>
+                </v-card> -->
 
             </div>
         </section>
@@ -29,13 +34,18 @@
 <script>
 
 import ToolBar from '@/components/cpmToolBar'
-import Card from '@/components/cpmCard'
+import FeedCard from '../../components/cpmCard'
 import {
     mapActions,
     mapGetters
 } from 'vuex'
 
 export default {
+    components: {
+        ToolBar,
+        FeedCard
+    },
+
     data: () => ({
         imageURL: './img-card-0.png',
         loading: null,
@@ -77,12 +87,6 @@ export default {
             },
         ]
     }),
-
-    components: {
-        ToolBar,
-        Card
-    },
-
     computed: {
 
         ...mapGetters({