refactor(meta): removed meta mixin in favor of a composition approach

Satellite-im · Apr 13, 2022 · ee9eae1 · ee9eae1
1 parent 5cbd4f2
commit ee9eae1
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 21 deletions.
diff --git a/components/compositions/useMeta.ts b/components/compositions/useMeta.ts
@@ -0,0 +1,9 @@
+const useMeta = () => {
+  const { $store } = useNuxtApp()
+
+  useHead({
+    title: $store.state.meta.title,
+  })
+}
+
+export default useMeta
diff --git a/components/mixins/Meta/WithMeta.ts b/components/mixins/Meta/WithMeta.ts
diff --git a/layouts/chat.vue b/layouts/chat.vue
@@ -106,7 +106,7 @@ import { MenuIcon } from 'satellite-lucide-icons'
 import DroppableWrapper from '../components/ui/DroppableWrapper/DroppableWrapper.vue'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
-import WithMeta from '~/components/mixins/Meta/WithMeta'
+import useMeta from '~/components/compositions/useMeta'
 import { MessagingTypesEnum } from '~/libraries/Enums/types/messaging-types'
 import { hexToRGB } from '~/utilities/Colors'
 
@@ -116,8 +116,11 @@ export default Vue.extend({
     MenuIcon,
     DroppableWrapper,
   },
-  mixins: [Touch, Layout, WithMeta],
+  mixins: [Touch, Layout],
   middleware: ['authenticated'],
+  setup() {
+    const meta = useMeta()
+  },
   data() {
     return {
       sidebar: !this.$device.isMobile,

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -9,10 +9,12 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
-import WithMeta from '~/components/mixins/Meta/WithMeta'
+import useMeta from '~/components/compositions/useMeta'
 
 export default Vue.extend({
-  mixins: [WithMeta],
+  setup() {
+    const meta = useMeta()
+  },
 })
 </script>
 <style lang="less">

diff --git a/layouts/files.vue b/layouts/files.vue
@@ -57,15 +57,18 @@ import { MenuIcon } from 'satellite-lucide-icons'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
 import { hexToRGB } from '~/utilities/Colors'
-import WithMeta from '~/components/mixins/Meta/WithMeta'
+import useMeta from '~/components/compositions/useMeta'
 
 export default Vue.extend({
   name: 'FilesLayout',
   components: {
     MenuIcon,
   },
-  mixins: [Touch, Layout, WithMeta],
+  mixins: [Touch, Layout],
   middleware: 'authenticated',
+  setup() {
+    const meta = useMeta()
+  },
   data() {
     return {
       sidebar: !this.$device.isMobile,

diff --git a/layouts/friends.vue b/layouts/friends.vue
@@ -56,15 +56,18 @@ import { MenuIcon } from 'satellite-lucide-icons'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
 import { hexToRGB } from '~/utilities/Colors'
-import WithMeta from '~/components/mixins/Meta/WithMeta'
+import useMeta from '~/components/compositions/useMeta'
 
 export default Vue.extend({
   name: 'ChatLayout',
   components: {
     MenuIcon,
   },
-  mixins: [Touch, Layout, WithMeta],
+  mixins: [Touch, Layout],
   middleware: 'authenticated',
+  setup() {
+    const meta = useMeta()
+  },
   data() {
     return {
       sidebar: !this.$device.isMobile,

diff --git a/layouts/server.vue b/layouts/server.vue
@@ -82,15 +82,18 @@ import { MenuIcon } from 'satellite-lucide-icons'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
 import { hexToRGB } from '~/utilities/Colors'
-import WithMeta from '~/components/mixins/Meta/WithMeta'
+import useMeta from '~/components/compositions/useMeta'
 
 export default Vue.extend({
   name: 'ServerLayout',
   components: {
     MenuIcon,
   },
-  mixins: [Touch, Layout, WithMeta],
+  mixins: [Touch, Layout],
   middleware: 'authenticated',
+  setup() {
+    const meta = useMeta()
+  },
   data() {
     return {
       sidebar: !this.$device.isMobile,