ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extracting social media to vue component

Browse Source
This commit is contained in:
Nimit Bhargava 2020-12-06 18:50:13 +05:30
parent 0585960313
commit 3be426c0d5
2 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
webapp/components/SocialMedia/SocialMedia.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
<base-card style="position: relative; height: auto;">
<ds-space margin="x-small">
<ds-text tag="h5" color="soft">
{{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
</ds-text>
<template>
<ds-space v-for="link in socialMediaLinks()" :key="link.username" margin="x-small">
<a :href="link.url" target="_blank">
<img :src="link.favicon" alt="Link:" height="22" width="22" />
{{ link.username }}
</a>
</ds-space>
</template>
</ds-space>
</base-card>
</ds-space>
</template>
<script>
export default {
name: 'social-media',
props: {
userName: {},
user: {},
},
methods: {
socialMediaLinks() {
const { socialMedia = [] } = this.user
return socialMedia.map((socialMedia) => {
const { url } = socialMedia
const matches = url.match(/^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g)
const [domain] = matches || []
const favicon = domain ? `${domain}/favicon.ico` : null
const username = url.split('/').pop()
return { url, username, favicon }
})
},
},
}
</script>

31
webapp/pages/profile/_id/_slug.vue
View File

@ -103,23 +103,7 @@
type="following"
@fetchAllConnections="fetchAllConnections"
/>
<ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
<base-card style="position: relative; height: auto;">
<ds-space margin="x-small">
<ds-text tag="h5" color="soft">
{{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
</ds-text>
<template>
<ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
<a :href="link.url" target="_blank">
<img :src="link.favicon" alt="Link:" height="22" width="22" />
{{ link.username }}
</a>
</ds-space>
</template>
</ds-space>
</base-card>
</ds-space>
<social-media :user-name="userName" :user="user" />
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
@ -243,6 +227,7 @@ import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
import PostMutations from '~/graphql/PostMutations'
import UpdateQuery from '~/components/utils/UpdateQuery'
import SocialMedia from '~/components/SocialMedia/SocialMedia'
const tabToFilterMapping = ({ tab, id }) => {
return {
@ -254,6 +239,7 @@ const tabToFilterMapping = ({ tab, id }) => {
export default {
components: {
SocialMedia,
PostTeaser,
HcFollowButton,
HcCountTo,
@ -292,17 +278,6 @@ export default {
user() {
return this.User ? this.User[0] : {}
},
socialMediaLinks() {
const { socialMedia = [] } = this.user
return socialMedia.map((socialMedia) => {
const { url } = socialMedia
const matches = url.match(/^(?:https?:\/\/)?(?:[^@\n])?(?:www\.)?([^:/\n?]+)/g)
const [domain] = matches || []
const favicon = domain ? `${domain}/favicon.ico` : null
const username = url.split('/').pop()
return { url, username, favicon }
})
},
userName() {
const { name } = this.user || {}
return name || this.$t('profile.userAnonym')