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

Convert App component into script-setup format

Browse source
This commit is contained in:
silverpill 2022-07-29 11:12:34 +00:00
parent 2bcd8fc786
commit d821f9d1f8
1 changed files with 21 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/App.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<header v-if="!isPublicPage"> <header v-if="!isPublicPage()">
<div id="header"> <div id="header">
<div id="nav"> <div id="nav">
<router-link to="/" class="home-btn"> <router-link to="/" class="home-btn">
@ -9,54 +9,40 @@
<search /> <search />
</div> </div>
<div id="profile"> <div id="profile">
<router-link v-if="profile" class="profile-link" :to="{ name: 'profile', params: { profileId: profile.id }}"> <router-link
<avatar :profile="profile"></avatar> v-if="currentUser"
<div class="profile-name">@{{ profile.username }}</div> class="profile-link"
:to="{ name: 'profile', params: { profileId: currentUser.id }}"
>
<avatar :profile="currentUser"></avatar>
<div class="profile-name">@{{ currentUser.username }}</div>
</router-link> </router-link>
</div> </div>
</div> </div>
</header> </header>
<router-view :key="$route.fullPath" :class="{'wide': isPublicPage}" /> <router-view :key="route.fullPath" :class="{ wide: isPublicPage() }" />
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { Options, Vue, setup } from "vue-class-component" import { $ } from "vue/macros"
import { useRoute } from "vue-router"
import { User } from "@/api/users"
import { useCurrentUser } from "@/store/user" import { useCurrentUser } from "@/store/user"
import { useInstanceInfo } from "@/store/instance" import { useInstanceInfo } from "@/store/instance"
import Avatar from "@/components/Avatar.vue" import Avatar from "@/components/Avatar.vue"
import Search from "@/components/Search.vue" import Search from "@/components/Search.vue"
@Options({ const route = useRoute()
components: { const { currentUser } = $(useCurrentUser())
Avatar, const { loadInstanceInfo } = useInstanceInfo()
Search,
},
})
export default class App extends Vue {
private store = setup(() => { loadInstanceInfo()
const { currentUser } = useCurrentUser()
const { loadInstanceInfo } = useInstanceInfo()
return { currentUser, loadInstanceInfo }
})
created() {
this.store.loadInstanceInfo()
}
get isPublicPage(): boolean {
return (
this.store.currentUser === null ||
this.$route.name === "post-overlay"
)
}
get profile(): User | null {
return this.store.currentUser
}
function isPublicPage(): boolean {
return (
currentUser === null ||
route.name === "post-overlay"
)
} }
</script> </script>