Follow page started

src/components/cpmUserFollow.vue

@@ -0,0 +1,135 @@
+<template>
+  <v-card max-width="550">
+    <v-virtual-scroll :items="usersData" :item-height="70" height="350">
+      <template v-slot:default="{ item }">
+        <v-list-item>
+          <v-list-item-avatar>
+            <v-avatar color="orange" size="62">
+              <v-icon v-if="!item.avatar" dark>mdi-account-circle</v-icon>
+              <img v-else :src="item.avatar" alt="avatar" />
+            </v-avatar>
+          </v-list-item-avatar>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ item.name }}</v-list-item-title>
+          </v-list-item-content>
+
+          <v-list-item-action>
+            <v-btn
+              v-if="!item.following"
+              class="ma-2"
+              :loading="loading"
+              :disabled="loading"
+              color="#00CA9D"
+              @click="follow(item)"
+              depressed
+              small
+            >
+              Seguir
+            </v-btn>
+
+            <v-btn
+              v-else
+              class="ma-2"
+              :loading="loading"
+              :disabled="loading"
+              color="#00CA9D"
+              depressed
+              small
+            >
+              Seguindo
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+        <hr />
+      </template>
+    </v-virtual-scroll>
+  </v-card>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+  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",
+    }),
+
+    async follow(user) {
+      this.loading = true;
+
+      const follow = await this.doFollow(user.id);
+
+      this.loading = false;
+
+      this.following = true;
+    },
+
+    teste() {
+
+    },
+  },
+
+  async created() {
+    await this.getUsers();
+    await this.getFollowing();
+    // this.teste();
+  },
+};
+</script>
+
+<style>
+.custom-loader {
+  animation: loader 1s infinite;
+  display: flex;
+}
+@-moz-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/router/index.js

@@ -56,6 +56,11 @@ const routes = [
         path: '/Coment/1',
         name: 'Coment',
         component: () => import('../views/private/Coment.vue')
+      },
+      {
+        path: '/Follow',
+        name: 'FollowIndex',
+        component: () => import('../views/private/FollowIndex.vue')
       }
 
     ]

src/store/index.js

@@ -5,6 +5,7 @@ import FeedVuex from './modules/FeedVuex'
 import RegisterVuex from './modules/RegisterVuex'
 import LoginVuex from './modules/LoginVuex'
 import ProfileVuex from './modules/ProfileVuex'
+import FollowVuex from './modules/FollowVuex'
 
 Vue.use(Vuex)
 
@@ -38,6 +39,7 @@ export default new Vuex.Store({
     RegisterVuex,
     FeedVuex,
     LoginVuex,
-    ProfileVuex
+    ProfileVuex,
+    FollowVuex
   }
 })

src/store/modules/FollowVuex.js

@@ -0,0 +1,61 @@
+import axios from '../../util/axios'
+
+
+export default {
+
+  namespaced: true,
+
+  state: {
+    users: [],
+
+    following: [],
+  },
+
+  getters: {
+
+    usersData: state => state.usersData
+
+  },
+
+  mutations: {
+
+    setUsers(state, newState){
+        state.users = newState
+    },
+
+    setFollowing(state, newState){
+        state.following = newState
+    }
+
+  },
+
+  actions: {
+
+    async getUsers(context){
+        const users = await axios.get(process.env.VUE_APP_BASE_URL+'/user');
+
+        const [thisUser] = users.data.filter(item => localStorage.id == item.id);
+
+        users.data.splice(users.data.indexOf(thisUser), 1)
+
+        await context.commit('setUsers', users.data);
+
+        return users.data;
+    },
+
+    async doFollow(context, new_follow_id){
+        const follow = await axios.put(process.env.VUE_APP_BASE_URL+`/user/${new_follow_id}/follow`);
+
+        return follow.data;
+    },
+
+    async getFollowing(context){
+        const following = await axios.get(process.env.VUE_APP_BASE_URL+`/user/${localStorage.id}/following`);
+
+        await context.commit('setFollowing', following.data);
+
+        return following.data;
+    }
+
+  }
+}

src/views/private/FollowIndex.vue

@@ -0,0 +1,50 @@
+<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-btn class="button mt-5" color="warning" block>Entrar</v-btn>
+        </v-col>
+
+      </v-col>
+
+
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import cpmUserFollow from '../../components/cpmUserFollow';
+
+export default {
+  components: {cpmUserFollow},
+  data() {
+    return {
+      search: ''
+    }
+  },
+}
+</script>
+
+<style scoped>
+.box {
+  max-width: 550px;
+}
+
+
+</style>