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

30
src/components/Avatar.vue
View file

@ -4,29 +4,29 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { Vue } from "vue-class-component" import { computed } from "vue"
import { Prop } from "vue-property-decorator"
import makeBlockie from "ethereum-blockies-base64" import makeBlockie from "ethereum-blockies-base64"
import { Profile } from "@/api/users" import { Profile } from "@/api/users"
export default class Avatar extends Vue { /* eslint-disable-next-line no-undef */
const props = defineProps<{
profile: Profile,
}>()
@Prop() 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="
profile!: Profile
get avatarUrl(): string { const avatarUrl = computed<string>(() => {
if (this.profile.avatar) { const profile = props.profile
return this.profile.avatar if (profile.avatar) {
} else if (this.profile.acct === "") { return profile.avatar
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 if (profile.acct === "") {
return UNNAMED
} else { } else {
return makeBlockie(this.profile.acct) return makeBlockie(profile.acct)
} }
} })
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

65
src/components/Sidebar.vue
View file

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