47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<template>
|
|
<main>
|
|
<div class="columns is-multiline">
|
|
<div class="column" v-if="!friends.length">
|
|
<i class="far fa-times-square large-icon"></i>
|
|
<h1 class="subtitle">This user doesn't have any friends yet, how about you send them a friend request?</h1>
|
|
</div>
|
|
<div class="column is-4" v-for='(friend) in friends' :key='"friend-" + friend.id'>
|
|
<div class="box">
|
|
<router-link :to="'/u/' + friend.friend2.username" class="subtitle">{{friend.friend2.username}}</router-link><br>
|
|
<img width=30% :src="'https://cdn.kaverti.com/user/avatars/headshot/' + friend.friend2.picture + '.png'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
import AjaxErrorHandler from ".././assets/js/errorHandler";
|
|
|
|
export default {
|
|
name: 'UserFriends',
|
|
props: ['username'],
|
|
data() {
|
|
return {
|
|
friends: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.axios
|
|
.get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + 'relationships/user/' + this.$route.params.username)
|
|
.then(res => {
|
|
this.friends = res.data
|
|
})
|
|
.catch(e => {
|
|
let invalidId = e.response.data.errors.find(error => {
|
|
return error.name === 'accountDoesNotExist'
|
|
})
|
|
|
|
if (invalidId) {
|
|
this.$store.commit('set404Page', true)
|
|
} else {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script> |