FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Add link to subscriptions settings page to sidebar

Browse source
This commit is contained in:
silverpill 2022-09-13 17:49:59 +00:00
parent 8799e30b9a
commit 3dfbe4813e
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/Sidebar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="isUserAuthenticated" class="sidebar"> <div v-if="isUserAuthenticated()" class="sidebar">
<router-link class="sidebar-link" to="/notifications"> <router-link class="sidebar-link" to="/notifications">
<div class="icon"> <div class="icon">
<img :src="require('@/assets/feather/bell.svg')"> <img :src="require('@/assets/feather/bell.svg')">
@ -15,6 +15,14 @@
<div class="icon"><img :src="require('@/assets/feather/users.svg')"></div> <div class="icon"><img :src="require('@/assets/feather/users.svg')"></div>
<span>Profile directory</span> <span>Profile directory</span>
</router-link> </router-link>
<router-link
v-if="isSubscriptionsFeatureEnabled()"
class="sidebar-link"
:to="{ name: 'subscriptions-settings' }"
>
<div class="icon"><img :src="require('@/assets/tabler/coin.svg')"></div>
<span>Subscriptions</span>
</router-link>
<router-link class="sidebar-link" to="/about"> <router-link class="sidebar-link" to="/about">
<div class="icon"><img :src="require('@/assets/feather/help-circle.svg')"></div> <div class="icon"><img :src="require('@/assets/feather/help-circle.svg')"></div>
<span>About</span> <span>About</span>
@ -33,26 +41,33 @@ import { useRouter } from "vue-router"
import { useNotifications } from "@/store/notifications" import { useNotifications } from "@/store/notifications"
import { useCurrentUser } from "@/store/user" import { useCurrentUser } from "@/store/user"
import { useInstanceInfo } from "@/store/instance"
const router = useRouter() const router = useRouter()
const { loadNotifications, getUnreadNotificationCount } = $(useNotifications())
const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = $(useCurrentUser()) const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = $(useCurrentUser())
const { instance } = $(useInstanceInfo())
const { loadNotifications, getUnreadNotificationCount } = $(useNotifications())
onMounted(async () => { onMounted(async () => {
if (isUserAuthenticated) { if (isUserAuthenticated()) {
// TODO: reload notifications periodically // TODO: reload notifications periodically
await loadNotifications(ensureAuthToken()) await loadNotifications(ensureAuthToken())
} }
}) })
const isUserAuthenticated = $computed<boolean>(() => { function isUserAuthenticated(): boolean {
return currentUser !== null return currentUser !== null
}) }
const unreadNotificationCount = $computed<number>(() => { const unreadNotificationCount = $computed<number>(() => {
return getUnreadNotificationCount() return getUnreadNotificationCount()
}) })
function isSubscriptionsFeatureEnabled(): boolean {
const blockchain = instance?.blockchains[0]
return Boolean(blockchain?.features.subscriptions)
}
function logout() { function logout() {
setCurrentUser(null) setCurrentUser(null)
setAuthToken(null) setAuthToken(null)