Follow view almost ready

src/components/cpmUserFollow.vue

@@ -1,5 +1,37 @@
 <template>
-  <v-card max-width="550">
+  <div>
+    <v-list-item>
+      <v-list-item-avatar color="orange">
+        <v-icon v-if="userData.avatar == null">mdi-account-circle</v-icon>
+        <v-img v-else :src="userData.avatar"></v-img>
+      </v-list-item-avatar>
+
+      <v-list-item-content>
+        <v-list-item-title v-text="userData.name"></v-list-item-title>
+      </v-list-item-content>
+
+
+      <v-list-item-action v-if="userData.following">
+        <v-btn v-if="!loading" depressed small color="#00CA9D">
+          Seguindo
+        </v-btn>
+        <v-btn v-else loading depressed small color="#00CA9D"> Seguindo </v-btn>
+      </v-list-item-action>
+      <v-list-item-action v-else>
+        <v-btn
+          v-if="!loading"
+          depressed
+          small
+          color="#00CA9D"
+          @click="follow(userData)"
+        >
+          Seguir
+        </v-btn>
+        <v-btn v-else loading depressed small color="#00CA9D"> Seguir </v-btn>
+      </v-list-item-action>
+    </v-list-item>
+  </div>
+  <!-- <v-card max-width="550">
     <v-virtual-scroll :items="usersData" :item-height="70" height="350">
       <template v-slot:default="{ item }">
         <v-list-item>
@@ -44,31 +76,21 @@
         <hr />
       </template>
     </v-virtual-scroll>
-  </v-card>
+  </v-card> -->
 </template>
 
 <script>
 import { mapActions, mapGetters } from "vuex";
 
 export default {
+  props: ["userData"],
   data: () => ({
     following: false,
     loading: false,
   }),
 
-  computed: {
-    usersData() {
-      let users = this.$store.state.FollowVuex.users;
-
-
-      return users;
-    },
-  },
-
   methods: {
     ...mapActions({
-      getUsers: "FollowVuex/getUsers",
-      getFollowing: "FollowVuex/getFollowing",
       doFollow: "FollowVuex/doFollow",
     }),
 
@@ -79,18 +101,17 @@ export default {
 
       this.loading = false;
 
-      this.following = true;
+      user.following = true
     },
 
     teste() {
-
+      console.log();
     },
   },
 
-  async created() {
-    await this.getUsers();
-    await this.getFollowing();
+  created() {
     // this.teste();
+    // this.index();
   },
 };
 </script>

src/router/index.js

@@ -60,7 +60,7 @@ const routes = [
       {
         path: '/Follow',
         name: 'FollowIndex',
-        component: () => import('../views/private/FollowIndex.vue')
+        component: () => import('../views/private/FindFriends.vue')
       }
 
     ]

src/views/private/FindFriends.vue

@@ -0,0 +1,143 @@
+<template>
+  <v-container class="box">
+    <v-row class="d-flex flex-column">
+      <v-col>
+        <v-col ref="form" class="d-flex flex-column">
+          <h2 class="ac">Encontre amigos</h2>
+          <v-card-title>
+            <v-text-field
+              v-model="search"
+              append-icon="mdi-magnify"
+              label="Search"
+              single-line
+            ></v-text-field>
+          </v-card-title>
+
+          <strong class="mb-5">Pessoas que talvez você conheça</strong>
+
+          <!-- <cpmUserFollow />   -->
+
+          <!--  -->
+
+          <v-col max-width="500">
+            <v-list subheader>
+              <div v-for="user in users" :key="user.id">
+                <cpmUserFollow :userData="user" />
+              </div>
+            </v-list>
+
+            <v-divider></v-divider>
+          </v-col>
+
+          <!--  -->
+          <v-btn class="button mt-5" color="warning" block>Próximo</v-btn>
+        </v-col>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import cpmUserFollow from "../../components/cpmUserFollow";
+
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+  components: { cpmUserFollow },
+  data() {
+    return {
+      users: "",
+      search: "",
+      recent: [
+        {
+          active: true,
+          avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+          title: "Jason Oner",
+        },
+        {
+          active: true,
+          avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+          title: "Mike Carlson",
+        },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+          title: "Cindy Baker",
+        },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
+          title: "Ali Connors",
+        },
+      ],
+      previous: [
+        {
+          title: "Travis Howard",
+          avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
+        },
+      ],
+    };
+  },
+  methods: {
+    ...mapActions({
+      getUsers: "FollowVuex/getUsers",
+      getFollowing: "FollowVuex/getFollowing",
+      doFollow: "FollowVuex/doFollow",
+    }),
+    filterFollowing() {
+      // var ar1 = [{ n: "liam" }, {n: 'lucas'}];
+      // var ar2 = [
+      //   { n: "barbara" },
+      //   { n: "liam" },
+      //   { n: "liris" },
+      //   { n: "jovirone" },
+      //   { n: "chicão" },
+      // ];
+
+      // var ar2Filter = ar2.filter(item => {
+      //   ar1.find(e => {
+      //     if(e.n == item.n){
+      //       item.following = true;
+      //     }
+      //   })
+      // });
+
+      // console.log(ar2)
+
+      const ar1 = this.usersFollowing;
+      const ar2 = this.usersData;
+
+      var filter = ar2.filter((item) => {
+        ar1.find((e) => {
+          if (e.email == item.email) {
+            item.following = true;
+          }
+        });
+      });
+
+      this.users = ar2;
+    },
+  },
+  async created() {
+    await this.getUsers();
+    await this.getFollowing();
+    this.filterFollowing();
+  },
+  computed: {
+    usersData() {
+      let users = this.$store.state.FollowVuex.users;
+
+      return users;
+    },
+    usersFollowing() {
+      let users = this.$store.state.FollowVuex.following;
+
+      return users;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.box {
+  max-width: 550px;
+}
+</style>