Add types

src/middleware/middleware.ts

@@ -5,7 +5,7 @@ import { useProviderStore } from '~/stores/provider'
 import { useFeatureFlagStore } from '~/stores/feature-flag'
 import { useUiStore } from '~/stores/ui'
 
-import type { Middleware } from '@nuxt/types'
+import type { Context, Middleware } from '@nuxt/types'
 
 /**
  * In embedded mode, the app sends its url
@@ -20,7 +20,13 @@ import type { Middleware } from '@nuxt/types'
  * Currently, one event type is used:
  * - `urlChange` sends the relative path of the URL on every URL change.
  */
-const middleware: Middleware = async ({ app, query, route, $pinia }) => {
+const middleware: Middleware = async ({
+  $cookies,
+  $ua,
+  query,
+  route,
+  $pinia,
+}: Context) => {
   /* Nav store */
 
   const navigationStore = useNavigationStore($pinia)
@@ -46,14 +52,14 @@ const middleware: Middleware = async ({ app, query, route, $pinia }) => {
   /* Feature flag store */
 
   const featureFlagStore = useFeatureFlagStore($pinia)
-  featureFlagStore.initFromCookies(app.$cookies.get('features') ?? {})
+  featureFlagStore.initFromCookies($cookies.get('features') ?? {})
   featureFlagStore.initFromQuery(query)
 
   /* UI store */
 
   const uiStore = useUiStore($pinia)
-  const isMobileUa = app.$ua ? app.$ua.isMobile : false
-  app.$cookies.set('uiIsMobileUa', isMobileUa)
-  uiStore.initFromCookies(app.$cookies.getAll() ?? {})
+  const isMobileUa = $ua ? $ua.isMobile : false
+  $cookies.set('uiIsMobileUa', isMobileUa)
+  uiStore.initFromCookies($cookies.getAll() ?? {})
 }
 export default middleware

src/pages/preferences.vue

@@ -88,7 +88,7 @@ export default defineComponent({
     VCheckbox,
   },
   setup() {
-    const { app } = useContext()
+    const { $cookies } = useContext()
     const featureFlagStore = useFeatureFlagStore()
 
     const flags = computed(() => featureFlagStore.flags)
@@ -106,7 +106,7 @@ export default defineComponent({
       checked: boolean
     }) => {
       featureFlagStore.toggleFeature(name, checked ? ON : OFF)
-      app.$cookies.set('features', featureFlagStore.flagStateMap)
+      $cookies.set('features', featureFlagStore.flagStateMap)
     }
 
     return {

src/stores/ui.ts

@@ -106,7 +106,7 @@ export const useUiStore = defineStore('ui', {
     updateBreakpoint(isDesktopLayout: boolean) {
       if (this.isDesktopLayout !== isDesktopLayout) {
         this.isDesktopLayout = isDesktopLayout
-        this.$nuxt.app.$cookies.set(
+        this.$nuxt.$cookies.set(
           'uiIsDesktopLayout',
           this.isDesktopLayout,
           cookieOptions
@@ -125,7 +125,7 @@ export const useUiStore = defineStore('ui', {
       this.innerFilterVisible = visible
       if (this.isDesktopLayout) {
         this.isFilterDismissed = !visible
-        this.$nuxt.app.$cookies.set(
+        this.$nuxt.$cookies.set(
           'uiIsFilterDismissed',
           this.isFilterDismissed,
           cookieOptions

test/unit/test-utils/pinia.js

@@ -9,11 +9,9 @@ export const createPinia = () =>
         captureException: jest.fn(),
         captureEvent: jest.fn(),
       },
-      app: {
-        $cookies: {
-          set: jest.fn(),
-          get: jest.fn(),
-        },
+      $cookies: {
+        set: jest.fn(),
+        get: jest.fn(),
       },
     },
   }))

typings/nuxt__types/index.d.ts

@@ -1,13 +1,44 @@
 import '@nuxt/types'
 import '@nuxtjs/i18n'
+import { CookieSerializeOptions } from 'cookie'
+
+import type { OpenverseCookieState } from '~/types/cookies'
+
 import type { Details as UADetails } from 'express-useragent'
 
+export interface SetParams<Key extends keyof OpenverseCookieState> {
+  name: Key
+  value: OpenverseCookieState[Key]
+  opts?: CookieSerializeOptions
+}
+
+export interface NuxtCookies {
+  set: <Key extends keyof OpenverseCookieState>(
+    name: Key,
+    value: OpenverseCookieState[Key],
+    opts?: CookieSerializeOptions
+  ) => void
+  setAll: (cookieArray: SetParams[]) => void
+  get: <Key extends keyof OpenverseCookieState>(
+    name: Key,
+    opts?: GetOptions
+  ) => OpenverseCookieState[Key]
+  getAll: (opts?: GetOptions) => OpenverseCookieState
+  remove: <Key extends keyof OpenverseCookieState>(
+    name: Key,
+    opts?: CookieSerializeOptions
+  ) => void
+  removeAll: () => void
+}
+
 declare module '@nuxt/types' {
   export interface Context {
     $ua: UADetails | null
+    $cookies: NuxtCookies
   }
   export interface NuxtAppOptions {
     $ua: UADetails | null
+    $cookies: NuxtCookies
   }
 }