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

Convert Avatar and Sidebar components into script-setup format

Browse source
This commit is contained in:
silverpill 2022-07-18 22:07:08 +00:00
parent 0ba41544be
commit c81cd738a3
2 changed files with 40 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/Avatar.vue
View file

@ -4,29 +4,29 @@
</div>
</template>
<script lang="ts">
import { Vue } from "vue-class-component"
import { Prop } from "vue-property-decorator"
<script setup lang="ts">
import { computed } from "vue"
import makeBlockie from "ethereum-blockies-base64"
import { Profile } from "@/api/users"
export default class Avatar extends Vue {
/* eslint-disable-next-line no-undef */
const props = defineProps<{
profile: Profile,
}>()
@Prop()
profile!: Profile
const UNNAMED = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAC8ElEQVR4nO3Y3UtTcRzHcf+nPdwccQ4GmeBymZDXYUgP2BTbdOIfURmFMibOdJPZ00WRBq1wq3RBBlkIS106N92m9gd8vWrwW5B69fuccz4X78svfH/ntXMOO01/jivCcGrSvQAjCHQEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAKWKUGKu9sSn47J4GBQ/B0d4vG0iNvtFm9rqwQCnRK6OySJxBPZL+9o39XSIIe1skxMPJLm5mZxOByn5vG0yEx8SvvelgSpVvbk1s0bZ4JoLDISluOjA+1nsBRIZCSsXGSn0ynBYL8spJLyJfdJ1r+vyepKVubmZqS399o/KA/H72s/g2VA0u+WlIvr9XpleTn935mFVFJcLld9xjAM2drc0H4WS4A0Pqoyp2D8bfzBPWXODO8TeJC94rbyS+/vv33m2eLutrjd7vrscDik/TymB3mffqv8ypPJ2XPNX/L767N9fde1n8f0IEeH+1Io5OXH+jdZ+ZyR3Z2tc813dV0mCEq1akkMw6iDjI2Nat/J1iDz87PK4+75s5T2nWwLUijkxefz1THa2i5IrVrSvpctQbY2N6S7+4pydyy+eaV9L1uCZLMfpL39ooIxFYtq38uWIJOTj5X/HYZhyMsXT7XvZTuQw1pZQqEh5a4IBDpl7WtO+262BGn88DgwcEfKpd/a97IlyNLiawVjNDJsmk/tlgTp6bmqPKYqB0XtO9kW5Ff+p3J3xKdj2neyNUhmOa2A5FY/at/J1iBWjCBgEQQsU4NEoxPKOySVSmjfiSAEwYkgYBGEEcRuEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwDoBOz/dnwXMOO8AAAAASUVORK5CYII="
get avatarUrl(): string {
if (this.profile.avatar) {
return this.profile.avatar
} else if (this.profile.acct === "") {
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAC8ElEQVR4nO3Y3UtTcRzHcf+nPdwccQ4GmeBymZDXYUgP2BTbdOIfURmFMibOdJPZ00WRBq1wq3RBBlkIS106N92m9gd8vWrwW5B69fuccz4X78svfH/ntXMOO01/jivCcGrSvQAjCHQEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAKWKUGKu9sSn47J4GBQ/B0d4vG0iNvtFm9rqwQCnRK6OySJxBPZL+9o39XSIIe1skxMPJLm5mZxOByn5vG0yEx8SvvelgSpVvbk1s0bZ4JoLDISluOjA+1nsBRIZCSsXGSn0ynBYL8spJLyJfdJ1r+vyepKVubmZqS399o/KA/H72s/g2VA0u+WlIvr9XpleTn935mFVFJcLld9xjAM2drc0H4WS4A0Pqoyp2D8bfzBPWXODO8TeJC94rbyS+/vv33m2eLutrjd7vrscDik/TymB3mffqv8ypPJ2XPNX/L767N9fde1n8f0IEeH+1Io5OXH+jdZ+ZyR3Z2tc813dV0mCEq1akkMw6iDjI2Nat/J1iDz87PK4+75s5T2nWwLUijkxefz1THa2i5IrVrSvpctQbY2N6S7+4pydyy+eaV9L1uCZLMfpL39ooIxFYtq38uWIJOTj5X/HYZhyMsXT7XvZTuQw1pZQqEh5a4IBDpl7WtO+262BGn88DgwcEfKpd/a97IlyNLiawVjNDJsmk/tlgTp6bmqPKYqB0XtO9kW5Ff+p3J3xKdj2neyNUhmOa2A5FY/at/J1iBWjCBgEQQsU4NEoxPKOySVSmjfiSAEwYkgYBGEEcRuEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwDoBOz/dnwXMOO8AAAAASUVORK5CYII="
} else {
return makeBlockie(this.profile.acct)
}
const avatarUrl = computed<string>(() => {
const profile = props.profile
if (profile.avatar) {
return profile.avatar
} else if (profile.acct === "") {
return UNNAMED
} else {
return makeBlockie(profile.acct)
}
}
})
</script>
<style scoped lang="scss">

69
src/components/Sidebar.vue
View file

@ -31,60 +31,39 @@
</div>
</template>
<script lang="ts">
import { Options, Vue, setup } from "vue-class-component"
<script setup lang="ts">
import { onMounted } from "vue"
import { $, $computed } from "vue/macros"
import { useRouter } from "vue-router"
import { InstanceInfo } from "@/api/instance"
import Avatar from "@/components/Avatar.vue"
import { useInstanceInfo } from "@/store/instance"
import { useNotifications } from "@/store/notifications"
import { useCurrentUser } from "@/store/user"
@Options({
components: { Avatar },
const router = useRouter()
const { instance } = $(useInstanceInfo())
const { loadNotifications, getUnreadNotificationCount } = $(useNotifications())
const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = $(useCurrentUser())
onMounted(async () => {
if (isUserAuthenticated) {
// TODO: reload notifications periodically
await loadNotifications(ensureAuthToken())
}
})
export default class Sidebar extends Vue {
private store = setup(() => {
const { instance } = useInstanceInfo()
const { loadNotifications, getUnreadNotificationCount } = useNotifications()
const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = useCurrentUser()
return {
instance,
currentUser,
setCurrentUser,
ensureAuthToken,
setAuthToken,
loadNotifications,
getUnreadNotificationCount,
}
})
const isUserAuthenticated = $computed<boolean>(() => {
return currentUser !== null
})
async created() {
if (this.isUserAuthenticated) {
// TODO: reload notifications periodically
await this.store.loadNotifications(this.store.ensureAuthToken())
}
}
get isUserAuthenticated(): boolean {
return this.store.currentUser !== null
}
get unreadNotificationCount(): number {
return this.store.getUnreadNotificationCount()
}
async logout() {
this.store.setCurrentUser(null)
this.store.setAuthToken(null)
this.$router.push({ name: "landing-page" })
}
get instance(): InstanceInfo | null {
return this.store.instance
}
const unreadNotificationCount = $computed<number>(() => {
return getUnreadNotificationCount()
})
function logout() {
setCurrentUser(null)
setAuthToken(null)
router.push({ name: "landing-page" })
}
</script>