feat: [FE] Profile and Settings connection, Implement Unfollow, follow API, getProfile.

src/vite-frontend/src/router/index.ts

@@ -30,7 +30,8 @@ const routes = [
     {
         path: "/@:username",
         name: "Profile",
-        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheProfile.vue')
+        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheProfile.vue'),
+        props: true
     }
 ];
 

src/vite-frontend/src/store/index.ts

@@ -13,6 +13,9 @@ export default createStore({
         setToken(state, token){
             state.token = token;
         },
+        getToken(state){
+            return state.token
+        }
     },
     actions: {
         LOGIN({commit}, user){
@@ -20,7 +23,7 @@ export default createStore({
                 commit("setToken", user.token);
                 localStorage.setItem("username", user.username);
                 localStorage.setItem("token", user.token);
-            }
+            },
         },
     }
 )

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

@@ -7,16 +7,29 @@
         <div class="row">
 
           <div class="col-xs-12 col-md-10 offset-md-1">
-            <img src="http://i.imgur.com/Qr71crq.jpg" class="user-img"/>
-            <h4>Eric Simons</h4>
+            <img :src="profile.image" class="user-img"/>
+            <h4>{{ profile.username }}</h4>
             <p>
-              Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from the
-              Hunger Games
+              {{ profile.bio }}
             </p>
-            <button class="btn btn-sm btn-outline-secondary action-btn">
-              <i class="ion-plus-round"></i>
-              &nbsp;
-              Follow Eric Simons
+            <button class="btn btn-sm btn-outline-secondary action-btn" @click="stateUpdate">
+              <div v-if="isMe">
+                <i class="ion-gear-a"></i>
+                &nbsp;
+                Edit Profile Settings
+              </div>
+              <div v-else>
+                <div v-if="profile.following">
+                  <i class="ion-plus-round"></i>
+                  &nbsp;
+                  unFollow {{profile.username}}
+                </div>
+                <div v-else>
+                  <i class="ion-plus-round"></i>
+                  &nbsp;
+                  Follow {{profile.username}}
+                </div>
+              </div>
             </button>
           </div>
 
@@ -89,9 +102,84 @@
 </template>
 
 <script lang="ts">
-export default {
-  name: "TheProfile.vue"
-}
+import {onMounted, reactive, ref, UnwrapNestedRefs} from "vue";
+import { useStore } from "vuex";
+import axios from "axios";
+import { defineComponent } from 'vue';
+import router from "@/router";
+
+export default defineComponent({
+  name: "TheProfile.vue",
+  props:{
+    username: String,
+  },
+  setup(props){
+
+    const url = import.meta.env.VITE_BASE_URL;
+    const store = useStore();
+    const token = store.state.token;
+
+    const isMe = ref(false);
+    const profile = reactive({
+      image: "",
+      username: "",
+      bio: "",
+      following: false,
+    })
+
+
+
+    const setProfile = ( data: any ) => {
+      profile.image = data.image;
+      profile.bio = data.bio;
+      profile.following = data.following;
+      profile.username = data.username;
+    }
+
+    const stateUpdate = () => {
+       if(isMe.value){
+         router.push({name:"Settings"});
+       }else{
+         if(profile.following){
+            axios.delete(url + "/api/profiles/" + profile.username + "/follow",{
+              headers:{
+                Authorization : "TOKEN " + token,
+                "Content-Type": `application/json`,
+              }
+            }).then(response => {
+              setProfile(response.data.profile)
+              console.log(response)
+            })
+         }else{
+           axios.post(url + "/api/profiles/" + profile.username + "/follow",{
+             headers:{
+               Authorization : "TOKEN " + token,
+               "Content-Type": `application/json`,
+             }
+           }).then(response => {
+             setProfile(response.data.profile)
+             console.log(response)
+           })
+         }
+       }
+    }
+
+
+    onMounted(() =>{
+        axios.get(url + "/api/profiles/" + props.username)
+            .then(response => {
+              const getProfile = response.data.profile;
+              setProfile(getProfile)
+              if(getProfile.username.localeCompare(store.state.username) == 0){
+                isMe.value = true;
+              }else{
+                isMe.value = false;
+              }
+            })
+    })
+    return { url, isMe, profile, stateUpdate }
+  }
+})
 </script>
 
 <style scoped>

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

@@ -62,7 +62,7 @@ export default {
       user.bio = getuser.bio
       user.email = getuser.email
       user.username = getuser.username
-      user.image = user.image
+      user.image = getuser.image
     }
 
     const updateUser = () => {
@@ -73,7 +73,9 @@ export default {
         }})
           .then(response => {
             store.dispatch("LOGIN",response.data.user);
-            router.push('/@'+ response.data.user.username);
+            router.push({
+              name: 'Profile',
+              params: {username: response.data.user.username}})
 
           })
           .catch(error =>{
@@ -90,10 +92,8 @@ export default {
         }
       })
           .then(response => {
-            console.log(response)
-            window.localStorage.setItem("token",response.data.user.token);
+            store.dispatch("LOGIN",response.data.user)
             getUser(response.data.user);
-
           })
           .catch(error =>{
             const code = error.response.data.errors.code;