From 68ffaef10b02fb1c96f35ba170280f297c8e1617 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 6 Mar 2024 17:15:02 +0100
Subject: [PATCH] chore: remove device plugin + use composable in components

---
 components/Fields/Phone.vue                 | 15 ++++++++++-----
 components/Home/ExplorerOrFavoritesBack.vue | 13 +++++++++----
 components/Home/Home.vue                    | 10 +++++++---
 components/MainMap/FavoriteMenu.vue         | 14 ++++++++++----
 components/MainMap/MapFeatures.vue          |  9 +++++----
 components/PoisCard/PoiCardContent.vue      | 15 ++++++++++-----
 components/PoisDetails/Carousel.vue         | 17 ++++++++++-------
 nuxt.config.ts                              |  1 -
 plugins/device.ts                           | 19 -------------------
 utils/histoire-setup.js                     |  6 ------
 10 files changed, 61 insertions(+), 58 deletions(-)
 delete mode 100644 plugins/device.ts

diff --git a/components/Fields/Phone.vue b/components/Fields/Phone.vue
index 60987271f..601edbcaf 100644
--- a/components/Fields/Phone.vue
+++ b/components/Fields/Phone.vue
@@ -3,6 +3,7 @@ import type { PropType } from 'vue'
 
 import { defineNuxtComponent } from '#app'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -16,14 +17,18 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
+  },
+
   computed: {
     numberFormated(): string {
       return this.number.replaceAll(' ', ' ')
     },
-
-    phone(): boolean {
-      return this.$device.value.phone
-    },
   },
 })
 </script>
@@ -31,7 +36,7 @@ export default defineNuxtComponent({
 <template>
   <client-only>
     <ExternalLink
-      v-if="phone"
+      v-if="device.phone"
       :href="`tel:${number}`"
       :title="$t('fields.phone.callNumber')"
     >
diff --git a/components/Home/ExplorerOrFavoritesBack.vue b/components/Home/ExplorerOrFavoritesBack.vue
index 4b14b57eb..3dc3553ae 100644
--- a/components/Home/ExplorerOrFavoritesBack.vue
+++ b/components/Home/ExplorerOrFavoritesBack.vue
@@ -4,6 +4,7 @@ import { mapState } from 'pinia'
 
 import { defineNuxtComponent } from '#app'
 import { mapStore } from '~/stores/map'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -12,10 +13,14 @@ export default defineNuxtComponent({
 
   computed: {
     ...mapState(mapStore, ['isModeFavorites']),
+  },
 
-    device() {
-      return this.$device
-    },
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
   },
 
   emits: {
@@ -42,7 +47,7 @@ export default defineNuxtComponent({
     <p class="tw-ml-2">
       {{
         $t(
-          device.value.smallScreen
+          device.smallScreen
             ? isModeFavorites
               ? 'headerMenu.backToMenuFavorites'
               : 'headerMenu.backToMenuExplorer'
diff --git a/components/Home/Home.vue b/components/Home/Home.vue
index c39cc8dae..a21d2d724 100644
--- a/components/Home/Home.vue
+++ b/components/Home/Home.vue
@@ -31,6 +31,7 @@ import { menuStore } from '~/stores/menu'
 import { Mode, OriginEnum } from '~/utils/types'
 import { getHashPart, setHashParts } from '~/utils/url'
 import { flattenFeatures } from '~/utils/utilities'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -59,8 +60,11 @@ export default defineNuxtComponent({
   },
 
   setup() {
+    const device = useDevice()
+
     return {
       bottomMenu: ref<InstanceType<typeof HTMLDivElement>>(),
+      device,
     }
   },
 
@@ -111,7 +115,7 @@ export default defineNuxtComponent({
 
     isBottomMenuOpened(): boolean {
       return (
-        (this.$device.value.smallScreen && this.isPoiCardVisible)
+        (this.device.smallScreen && this.isPoiCardVisible)
         || this.isMenuItemOpen
       )
     },
@@ -127,7 +131,7 @@ export default defineNuxtComponent({
     },
 
     fitBoundsPaddingOptions(): FitBoundsOptions['padding'] {
-      if (this.$device.value.smallScreen) {
+      if (this.device.smallScreen) {
         return {
           top: 100,
           bottom: 50,
@@ -335,7 +339,7 @@ export default defineNuxtComponent({
         this.mode = Mode.EXPLORER
         this.goToSelectedFeature()
 
-        if (this.$device.value.smallScreen)
+        if (this.device.smallScreen)
           this.showPoi = false
       }
       else {
diff --git a/components/MainMap/FavoriteMenu.vue b/components/MainMap/FavoriteMenu.vue
index 2b398ec20..583d597bc 100644
--- a/components/MainMap/FavoriteMenu.vue
+++ b/components/MainMap/FavoriteMenu.vue
@@ -11,6 +11,7 @@ import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
 import type { ApiPoi, ApiPoiId } from '~/lib/apiPois'
 import { getPois } from '~/lib/apiPois'
 import { mapStore } from '~/stores/map'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -47,6 +48,14 @@ export default defineNuxtComponent({
     toggleFavorites: () => true,
   },
 
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
+  },
+
   data(): {
     isCopied: boolean
     favs: ApiPoi[]
@@ -61,9 +70,6 @@ export default defineNuxtComponent({
 
   computed: {
     ...mapState(mapStore, ['isModeFavorites']),
-    smallScreen(): boolean {
-      return this.$device.value.smallScreen
-    },
   },
   methods: {
     async fetchFavorites(ids: number[]) {
@@ -153,7 +159,7 @@ export default defineNuxtComponent({
     <div>
       <v-dialog
         v-model="notebookModal"
-        :fullscreen="smallScreen"
+        :fullscreen="device.smallScreen"
         max-width="80rem"
       >
         <FavoriteNoteBook
diff --git a/components/MainMap/MapFeatures.vue b/components/MainMap/MapFeatures.vue
index 58ecce689..53613ef36 100644
--- a/components/MainMap/MapFeatures.vue
+++ b/components/MainMap/MapFeatures.vue
@@ -35,6 +35,7 @@ import { filterRouteByCategories, filterRouteByPoiIds } from '~/utils/styles'
 import type { LatLng } from '~/utils/types'
 import { MapStyleEnum } from '~/utils/types'
 import { getHashPart } from '~/utils/url'
+import useDevice from '~/composables/useDevice'
 
 type ITMarker = InstanceType<typeof Marker>
 
@@ -111,8 +112,12 @@ export default defineNuxtComponent({
       default: undefined,
     },
   },
+
   setup() {
+    const device = useDevice()
+
     return {
+      device,
       mapBase: ref<InstanceType<typeof MapBase>>(),
     }
   },
@@ -136,10 +141,6 @@ export default defineNuxtComponent({
     ...mapState(menuStore, ['isLoadingFeatures']),
     ...mapWritableState(mapStore, ['center']),
 
-    device() {
-      return this.$device.value
-    },
-
     availableStyles(): MapStyleEnum[] {
       return [MapStyleEnum.vector, MapStyleEnum.aerial, MapStyleEnum.bicycle]
     },
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index 1d95ad575..672177825 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -13,6 +13,7 @@ import { mapStore } from '~/stores/map'
 import { isIOS } from '~/utils/isIOS'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import type { ContribFields } from '~/composables/useContrib'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -38,6 +39,14 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
+  },
+
   data(): {
     contribMode: boolean
     isContribEligible: (properties: ApiPoiProperties) => boolean
@@ -56,10 +65,6 @@ export default defineNuxtComponent({
     ...mapState(mapStore, ['isModeExplorer']),
     ...mapState(favoritesStore, ['favoritesIds']),
 
-    device() {
-      return this.$device
-    },
-
     id(): ApiPoiId {
       return this.poi.properties.metadata.id
     },
@@ -256,7 +261,7 @@ export default defineNuxtComponent({
       class="tw-flex tw-items-center tw-space-x-2 tw-justify-evenly tw-shrink-0 tw-bottom-0 tw-pt-2"
     >
       <a
-        v-if="device.value.phone && coordinatesHref"
+        v-if="device.phone && coordinatesHref"
         :href="coordinatesHref"
         class="tw-flex tw-flex-col tw-items-center tw-flex-1 tw-h-full tw-p-2 tw-space-y-2 tw-rounded-lg hover:tw-bg-zinc-100"
         :title="$t('poiCard.findRoute')"
diff --git a/components/PoisDetails/Carousel.vue b/components/PoisDetails/Carousel.vue
index 21fd55331..ffc969709 100644
--- a/components/PoisDetails/Carousel.vue
+++ b/components/PoisDetails/Carousel.vue
@@ -4,6 +4,7 @@ import { VCarousel, VCarouselItem } from 'vuetify/components/VCarousel'
 
 import { defineNuxtComponent } from '#app'
 import UIPicture from '~/components/UI/UIPicture.vue'
+import useDevice from '~/composables/useDevice'
 
 export default defineNuxtComponent({
   components: {
@@ -12,10 +13,12 @@ export default defineNuxtComponent({
     VCarouselItem,
   },
 
-  computed: {
-    smallScreen(): boolean {
-      return this.$device.value.smallScreen
-    },
+  setup() {
+    const device = useDevice()
+
+    return {
+      device,
+    }
   },
 
   props: {
@@ -31,7 +34,7 @@ export default defineNuxtComponent({
   <div v-if="images.length === 1" class="tw-margin tw-slide tw-mb-14">
     <UIPicture
       :src="images[0]"
-      :media-size="smallScreen ? '100vw' : '66vw'"
+      :media-size="device.smallScreen ? '100vw' : '66vw'"
       :alt="$t('poiCard.image')"
     />
   </div>
@@ -40,12 +43,12 @@ export default defineNuxtComponent({
       :show-arrows="false"
       :hide-delimiter-background="true"
       class="tw-mb-14 print:tw-mb-6"
-      :height="smallScreen ? 300 : 500"
+      :height="device.smallScreen ? 300 : 500"
     >
       <v-carousel-item v-for="(image, i) in images" :key="i">
         <UIPicture
           :src="image"
-          :media-size="smallScreen ? '100vw' : '66vw'"
+          :media-size="device.smallScreen ? '100vw' : '66vw'"
           :alt="$t('poiCard.image')"
           :img-attrs="{ class: 'h-100 tw-object-cover' }"
         />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c5259381f..5676dbe9a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -86,7 +86,6 @@ export default defineNuxtConfig({
     '@/plugins/settings.ts',
     '@/plugins/fontawesome.ts',
     '@/plugins/touch.ts',
-    '@/plugins/device.ts',
     { src: '@/plugins/tracking.ts', mode: 'client' },
     '@/plugins/property-translations.ts',
     { src: '@/plugins/pinia-shared-state.ts', mode: 'client' },
diff --git a/plugins/device.ts b/plugins/device.ts
deleted file mode 100644
index a1c7492bb..000000000
--- a/plugins/device.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { computed } from 'vue'
-import { useGrid, useScreen } from 'vue-screen'
-
-import { defineNuxtPlugin } from '#app/nuxt'
-
-export default defineNuxtPlugin((_nuxtApp) => {
-  const screen = useScreen()
-  const grid = useGrid('tailwind')
-  return {
-    provide: {
-      device: computed(() => ({
-        smallScreen: !grid.md,
-        touch: screen.touch,
-        // Quick heuristic for device havng phone capability
-        phone: screen.touch && !grid.lg,
-      })),
-    },
-  }
-})
diff --git a/utils/histoire-setup.js b/utils/histoire-setup.js
index 6aab4e4cc..b07825298 100644
--- a/utils/histoire-setup.js
+++ b/utils/histoire-setup.js
@@ -27,12 +27,6 @@ export const setupVue3 = defineSetupVue3(({ app, _story, _variant }) => {
     p: (field, _context) => field,
     pv: (_field, property, _context) => property,
   }
-  app.config.globalProperties.$device = ref({
-    smallScreen: false,
-    touch: true,
-    phone: true,
-  })
-
   // Plugins
   vuetify({ vueApp: app })
 })