fix: correct composables

dargmuesli · Nov 13, 2022 · 22faf97 · 22faf97
1 parent 79322a3
commit 22faf97
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 94 deletions.
diff --git a/src/runtime/components/CookieControl.vue b/src/runtime/components/CookieControl.vue
@@ -18,7 +18,7 @@
             <div class="cookieControl__BarButtons">
               <button
                 v-if="cookies.moduleOptions.acceptNecessary"
-                @click="cookies.moduleOptions.acceptNecessary"
+                @click="acceptNecessary"
                 v-text="cookies.moduleOptions.text.acceptNecessary"
               />
               <button
@@ -156,6 +156,7 @@ import {
   LocaleStrings,
   Translatable,
 } from '../types'
+import { useAcceptNecessary, useSetConsent } from '../methods'
 
 export interface Props {
   locale?: Locale
@@ -165,6 +166,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { $cookies } = useNuxtApp()
+// const cookies = useNuxtCookieControl()
+const setConsentFun = useSetConsent()
+const acceptNecessary = useAcceptNecessary()
 
 // data
 const saved = ref(true)
@@ -221,10 +225,13 @@ function setConsent({
       expires: expirationDate.value,
     }
   )
-  if (!reload) {
-    cookies.value.methods.setConsent()
+
+  if (reload) {
+    window.location.reload()
+  } else {
+    setConsentFun()
     cookies.value.modal = false
-  } else window.location.reload()
+  }
 }
 function getDescription(description: Translatable) {
   if (typeof description === 'string')
@@ -274,7 +281,6 @@ async function setTexts(isChanged = false) {
   }
 
   $cookies.moduleOptions.text = text
-  // this.$set($cookies, 'text', text)
 }
 
 // lifecycle

diff --git a/src/runtime/composables.ts b/src/runtime/composables.ts
@@ -1,25 +1,5 @@
-import { setBlockedIframes, setConsent } from './methods'
-import { Cookie, State } from './types'
-
-import moduleOptions from '#build/nuxtCookieControl.options'
-
 export function useNuxtCookieControl() {
-  const consent = ref<boolean>()
-  const enabled = ref<Cookie[]>([])
-  const enabledList = ref<string[]>([])
-  const modal = ref<boolean>()
-  const optional: Cookie[] = []
+  const { $cookies } = useNuxtApp()
 
-  return {
-    consent,
-    enabled,
-    enabledList,
-    modal,
-    optional,
-    methods: {
-      setBlockedIframes,
-      setConsent,
-    },
-    moduleOptions,
-  } as State
+  return $cookies
 }
diff --git a/src/runtime/methods.ts b/src/runtime/methods.ts
@@ -1,18 +1,29 @@
 import Cookies from 'js-cookie'
+import { NuxtApp } from 'nuxt/dist/app/nuxt'
 import slugify from 'slugify'
+import { Ref } from 'vue'
 
 import { useNuxtCookieControl } from './composables'
-import { Translatable } from './types'
+import { Cookie, ModuleOptions, Translatable } from './types'
 
-export function acceptNecessary() {
-  const { consent, moduleOptions } = useNuxtCookieControl()
+export function useAcceptNecessary() {
+  const { enabled, consent, moduleOptions } = useNuxtCookieControl()
+  const nuxtApp = useNuxtApp()
 
-  if (!moduleOptions.cookies) return
+  return () =>
+    acceptNecessary(nuxtApp, enabled, consent, moduleOptions.cookies?.necessary)
+}
 
+export function acceptNecessary(
+  nuxtApp: NuxtApp,
+  enabled: Ref<Cookie[]>,
+  consent: Ref<boolean>,
+  necessaryCookies: Cookie[] = []
+) {
   const expires = new Date()
   expires.setFullYear(expires.getFullYear() + 1)
 
-  const necessaryCookieIds = moduleOptions.cookies.necessary.map(
+  const necessaryCookieIds = necessaryCookies.map(
     (necessaryCookie) =>
       necessaryCookie.id || slugify(resolveTranslatable(necessaryCookie.name))
   )
@@ -25,8 +36,8 @@ export function acceptNecessary() {
   consent.value = true
 
   if (process.client) {
-    setHead()
-    callAcceptedFunctions()
+    setHead(nuxtApp, enabled.value)
+    callAcceptedFunctions(nuxtApp, enabled.value)
   }
 }
 
@@ -40,10 +51,39 @@ export function capitalize(string: string) {
   return string.charAt(0).toUpperCase() + string.substring(1)
 }
 
-export function setConsent({ isInit = false }: { isInit: boolean }) {
+export function useSetConsent() {
   const { consent, moduleOptions, enabled, enabledList, optional } =
     useNuxtCookieControl()
+  const nuxtApp = useNuxtApp()
+  return () =>
+    setConsent({
+      isInit: false,
+      nuxtApp,
+      consent,
+      moduleOptions,
+      enabled,
+      enabledList,
+      optional,
+    })
+}
 
+export function setConsent({
+  isInit = false,
+  nuxtApp,
+  consent,
+  moduleOptions,
+  enabled,
+  enabledList,
+  optional,
+}: {
+  isInit: boolean
+  nuxtApp: NuxtApp
+  consent: Ref<boolean>
+  moduleOptions: ModuleOptions
+  enabled: Ref<Cookie[]>
+  enabledList: Ref<string[]>
+  optional: Cookie[]
+}) {
   consent.value = Cookies.get('cookie_control_consent') === 'true'
   enabled.value = []
   enabledList.value = []
@@ -79,22 +119,23 @@ export function setConsent({ isInit = false }: { isInit: boolean }) {
     )
 
   if (process.client && !isInit) {
-    setHead()
-    clearCookies()
-    callAcceptedFunctions()
+    setHead(nuxtApp, enabled.value)
+    clearCookies(nuxtApp, enabledList.value, optional)
+    callAcceptedFunctions(nuxtApp, enabled.value)
   }
 }
 
-export function clearCookies() {
-  const { enabledList, optional } = useNuxtCookieControl()
-  const nuxtApp = useNuxtApp()
-
+export function clearCookies(
+  nuxtApp: NuxtApp,
+  enabledList: string[],
+  optional: Cookie[]
+) {
   const disabled = optional.filter((optionalCookie) => {
     const cookieName =
       typeof optionalCookie.name === 'string'
         ? optionalCookie.name
         : optionalCookie.name[Object.keys(optionalCookie.name)[0]]
-    return !enabledList.value.includes(optionalCookie.id || slugify(cookieName))
+    return !enabledList.includes(optionalCookie.id || slugify(cookieName))
   })
 
   if (disabled.length > 0) {
@@ -114,13 +155,10 @@ export function clearCookies() {
   }
 }
 
-export function setHead() {
-  const { enabled } = useNuxtCookieControl()
-  const nuxtApp = useNuxtApp()
-
-  if (enabled.value.length > 0) {
+export function setHead(nuxtApp: NuxtApp, enabled: Cookie[]) {
+  if (enabled.length > 0) {
     const head = document.getElementsByTagName('head')[0]
-    enabled.value.forEach((c) => {
+    enabled.forEach((c) => {
       if (c.src) {
         const script = document.createElement('script')
         script.src = c.src
@@ -133,45 +171,42 @@ export function setHead() {
   }
 }
 
-export function callAcceptedFunctions() {
-  const { enabled } = useNuxtCookieControl()
-  const nuxtApp = useNuxtApp()
-
-  if (enabled.value.length > 0) {
-    enabled.value.forEach((c) => {
+export function callAcceptedFunctions(nuxtApp: NuxtApp, enabled: Cookie[]) {
+  if (enabled.length > 0) {
+    enabled.forEach((c) => {
       if (c.accepted) c.accepted().call(nuxtApp)
     })
   }
 }
 
-export function setBlockedIframes(content: any) {
-  const { enabled, moduleOptions } = useNuxtCookieControl()
-
-  const contentType = typeof content
-  content = contentType === 'string' ? content : JSON.stringify(content)
-
-  content = content.replace(/&lt;/g, '<')
-  content = content.replace(/&gt;/g, '>')
-
-  if (
-    moduleOptions.text &&
-    enabled.value.filter((c) => c.name === 'functional').length === 0
-  ) {
-    content = content.replace(
-      /<iframe/g,
-      `<div class='cookieControl__BlockedIframe '`
-    )
-    content = content.replace(
-      /<\/iframe/g,
-      `<p>${
-        moduleOptions.text.blockedIframe !== undefined
-          ? moduleOptions.text.blockedIframe
-          : ''
-      } <a href='#' onclick='event.preventDefault(); $Nuxt.$cookies.modal = true'>${
-        moduleOptions.text.here !== undefined ? moduleOptions.text.here : ''
-      }</a></p></div`
-    )
-  }
-
-  return contentType !== 'string' ? JSON.parse(content) : content
-}
+// export function setBlockedIframes(content: any) {
+//   const { enabled, moduleOptions } = useNuxtCookieControl()
+
+//   const contentType = typeof content
+//   content = contentType === 'string' ? content : JSON.stringify(content)
+
+//   content = content.replace(/&lt;/g, '<')
+//   content = content.replace(/&gt;/g, '>')
+
+//   if (
+//     moduleOptions.text &&
+//     enabled.value.filter((c) => c.name === 'functional').length === 0
+//   ) {
+//     content = content.replace(
+//       /<iframe/g,
+//       `<div class='cookieControl__BlockedIframe '`
+//     )
+//     content = content.replace(
+//       /<\/iframe/g,
+//       `<p>${
+//         moduleOptions.text.blockedIframe !== undefined
+//           ? moduleOptions.text.blockedIframe
+//           : ''
+//       } <a href='#' onclick='event.preventDefault(); $Nuxt.$cookies.modal = true'>${
+//         moduleOptions.text.here !== undefined ? moduleOptions.text.here : ''
+//       }</a></p></div`
+//     )
+//   }
+
+//   return contentType !== 'string' ? JSON.parse(content) : content
+// }
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -1,14 +1,47 @@
 import { defineNuxtPlugin } from '#app'
 
-import { useNuxtCookieControl } from './composables'
+import { setConsent } from './methods'
+import { Cookie, State } from './types'
+
+import moduleOptions from '#build/nuxtCookieControl.options'
 
 export default defineNuxtPlugin((_nuxtApp) => {
-  const state = useNuxtCookieControl()
+  const nuxtApp = useNuxtApp()
+  const consent = ref<boolean>(false)
+  const enabled = ref<Cookie[]>([])
+  const enabledList = ref<string[]>([])
+  const modal = ref<boolean>()
+  const optional: Cookie[] = []
+
+  const state = {
+    consent,
+    enabled,
+    enabledList,
+    modal,
+    optional,
+    moduleOptions,
+  } as State
 
-  state.methods.setConsent({ isInit: true })
+  setConsent({
+    isInit: true,
+    nuxtApp,
+    consent,
+    moduleOptions,
+    enabled,
+    enabledList,
+    optional,
+  })
 
   if (process.client) {
-    state.methods.setConsent()
+    setConsent({
+      isInit: false,
+      nuxtApp,
+      consent,
+      moduleOptions,
+      enabled,
+      enabledList,
+      optional,
+    })
   }
 
   return {

diff --git a/src/runtime/types.ts b/src/runtime/types.ts
@@ -128,10 +128,6 @@ export interface State {
   consent: Ref<boolean>
   enabled: Ref<Cookie[]>
   enabledList: Ref<string[]>
-  methods: {
-    setBlockedIframes: (cookies: State, content: any) => any
-    setConsent: (options?: { isInit?: boolean }) => void
-  }
   modal: Ref<boolean>
   optional: Cookie[]
   moduleOptions: ModuleOptions