0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2024-12-22 21:33:01 -05:00
safetwitch/src/components/FollowButton.vue

65 lines
1.5 KiB
Vue

<script lang="ts">
import { ref } from 'vue'
export default {
props: {
username: {
type: String,
default() {
return ''
}
}
},
setup() {
return {
isFollowing: ref(false)
}
},
methods: {
followStreamer() {
const username = this.$props.username
const follows = localStorage.getItem('following') || '[]'
let parsedFollows: string[] = JSON.parse(follows)
if (follows?.includes(username)) {
const index = parsedFollows.indexOf(username)
console.log(index)
if (index === -1) return
parsedFollows.splice(index, 1)
console.log(parsedFollows)
this.isFollowing = false
} else {
if (follows) parsedFollows = JSON.parse(follows)
parsedFollows.push(username)
this.isFollowing = true
}
localStorage.setItem('following', JSON.stringify(parsedFollows))
}
},
mounted() {
let followerData = localStorage.getItem('following')
if (!followerData) return
let following: string[] = JSON.parse(followerData)
const isFollower = following.includes(this.$props.username)
if (isFollower) {
this.isFollowing = true
}
}
}
</script>
<template>
<button
ref="followButton"
@click="followStreamer"
class="text-contrast text-sm font-bold p-2 py-1 rounded-md bg-purple"
>
<v-icon name="bi-heart-fill" scale="0.85"></v-icon>
<span v-if="isFollowing"> {{ $t('streamer.unfollow') }} </span>
<span v-else> {{ $t('streamer.follow') }} </span>
</button>
</template>