Refactor: move cookie related code to cookies helper

helpers/_cookies.tsx

@@ -1,5 +1,44 @@
+import Cookies from 'js-cookie'
+
 export const COOKIE_NAME_LANGUAGE = 'efw_language'
 export const COOKIE_NAME_ADULT_FILTER = 'efw_adult_filter'
 export const COOKIE_NAME_NEW_TAB = 'efw_new_tab'
 export const COOKIE_NAME_COOKIE_CONSENT = 'efw_cookie_consent_accepted'
 export const COOKIE_NAME_SEARCH_COUNT = 'efw_search_count'
+
+type CookieName =
+  | typeof COOKIE_NAME_LANGUAGE
+  | typeof COOKIE_NAME_ADULT_FILTER
+  | typeof COOKIE_NAME_NEW_TAB
+  | typeof COOKIE_NAME_COOKIE_CONSENT
+  | typeof COOKIE_NAME_SEARCH_COUNT
+
+export type CookieMap = { [cookieName: string]: string }
+
+function convertCookieValue(name: CookieName, value?: string): string | number | boolean {
+  if (value === undefined) {
+    return value
+  }
+
+  switch (name) {
+    case COOKIE_NAME_SEARCH_COUNT:
+    case COOKIE_NAME_LANGUAGE:
+    case COOKIE_NAME_ADULT_FILTER:
+      return Number(value)
+
+    case COOKIE_NAME_NEW_TAB:
+      return value !== 'false'
+
+    default:
+      return value
+  }
+}
+
+export function getCookie(name: CookieName, cookieMap?: CookieMap) {
+  const value = cookieMap ? cookieMap[name] : Cookies.get(name)
+  return convertCookieValue(name, value)
+}
+
+export function setCookie(name: CookieName, value: string, opts?: { expires: number }): void {
+  Cookies.set(name, value, opts)
+}

hooks/useUserStateSyncedWithCookies.tsx

@@ -5,10 +5,10 @@ import {
   COOKIE_NAME_ADULT_FILTER,
   COOKIE_NAME_NEW_TAB,
   COOKIE_NAME_SEARCH_COUNT,
+  getCookie,
+  CookieMap,
+  setCookie,
 } from '../helpers/_cookies'
-import Cookies from 'js-cookie'
-
-type CookieMap = { [cookieName: string]: string }
 
 const cookiesName = {
   numOfSearches: COOKIE_NAME_SEARCH_COUNT,
@@ -20,28 +20,13 @@ const cookiesName = {
 const mergeCookiesWithUserState = (defaultUserState: UserState, serverCookies?: CookieMap): UserState => {
   const newUserState = { ...defaultUserState }
 
-  function getCookie(name: string): string {
-    return serverCookies ? serverCookies[name] : Cookies.get(name)
-  }
-
-  const numOfSearches = getCookie(cookiesName.numOfSearches)
-  if (numOfSearches !== undefined) {
-    newUserState.numOfSearches = Number(numOfSearches)
-  }
-
-  const language = getCookie(cookiesName.language)
-  if (language !== undefined) {
-    newUserState.language = Number(language)
-  }
-
-  const adultContentFilter = getCookie(cookiesName.adultContentFilter)
-  if (adultContentFilter !== undefined) {
-    newUserState.adultContentFilter = Number(adultContentFilter)
-  }
-
-  const openInNewTab = getCookie(cookiesName.openInNewTab)
-  if (openInNewTab !== undefined) {
-    newUserState.openInNewTab = openInNewTab !== 'false'
+  for (const key in newUserState) {
+    if (Object.getOwnPropertyDescriptor(cookiesName, key)) {
+      const cookieValue = getCookie(cookiesName[key], serverCookies)
+      if (cookieValue !== undefined) {
+        newUserState[key] = cookieValue
+      }
+    }
   }
 
   return newUserState
@@ -60,7 +45,7 @@ export const useUserStateSyncedWithCookies = (serverCookies?: CookieMap): UserCo
 
       for (const key in nextState) {
         if (Object.getOwnPropertyDescriptor(cookiesName, key)) {
-          Cookies.set(cookiesName[key], newState[key], { expires: 365 })
+          setCookie(cookiesName[key], newState[key], { expires: 365 })
         }
       }
 

pages/_app.tsx

@@ -10,6 +10,7 @@ import NProgress from 'nprogress' // nprogress module
 import '../styles/base.css'
 import '../styles/odometer.css'
 import 'nprogress/nprogress.css' // styles of nprogress
+import { CookieMap } from '../helpers/_cookies'
 
 // Binding routes events.
 Router.events.on('routeChangeStart', () => NProgress.start())
@@ -21,8 +22,6 @@ Router.events.on('routeChangeComplete', (url) => {
 })
 Router.events.on('routeChangeError', () => NProgress.done())
 
-type CookieMap = { [cookieName: string]: string }
-
 interface ElliotAppProps extends AppProps {
   serverCookies?: CookieMap
 }

pages/search.tsx

@@ -9,14 +9,12 @@ import TabsMenu from '../components/TabsMenu/TabsMenu'
 import Loader from '../components/Loader/Loader'
 import LoadMore from '../components/LoadMore/LoadMore'
 import { formatNumber, queryNoWitheSpace } from '../helpers/_utils'
-import { COOKIE_NAME_ADULT_FILTER } from '../helpers/_cookies'
+import { COOKIE_NAME_ADULT_FILTER, getCookie } from '../helpers/_cookies'
 import { FiMoreVertical } from 'react-icons/fi'
 import { FaWikipediaW, FaYoutube, FaTwitch } from 'react-icons/fa'
 import GmailIcon from '../components/Icons/GmailIcon'
 import AmazonIcon from '../components/Icons/AmazonIcon'
 
-import Cookies from 'js-cookie'
-
 const AllResultsView = dynamic(() => import('../components/AllResultsView/AllResultsView'), {
   loading: () => <Loader />,
 })
@@ -445,9 +443,7 @@ SearchPage.getInitialProps = async ({ req, res, query }) => {
   let results: resultsObj = null
   let activeTab = findTabByType(type)
   const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
-  const adultContentCookie = req
-    ? req.cookies[COOKIE_NAME_ADULT_FILTER] || 1
-    : Cookies.get(COOKIE_NAME_ADULT_FILTER) || 1
+  const adultContentCookie = req ? req.cookies[COOKIE_NAME_ADULT_FILTER] || 1 : getCookie(COOKIE_NAME_ADULT_FILTER) || 1
 
   if (type === 'map') {
     activeTab = findTabByType('map')

webComponents/CookiePolicy/CookiePolicy.tsx

@@ -1,5 +1,4 @@
-import { COOKIE_NAME_COOKIE_CONSENT } from '../../helpers/_cookies'
-import Cookies from 'js-cookie'
+import { COOKIE_NAME_COOKIE_CONSENT, getCookie, setCookie } from '../../helpers/_cookies'
 
 const template = document.createElement('template')
 template.innerHTML = `
@@ -63,10 +62,10 @@ template.innerHTML = `
   </div>  
   `
 
+const COOKIE_POLICY_YES = 'yes'
+
 class CookiePolicy extends HTMLElement {
   private root: ShadowRoot
-  private cookiePolicyName: String
-  private cookiePolicyValue: String
 
   constructor() {
     super()
@@ -75,8 +74,6 @@ class CookiePolicy extends HTMLElement {
     this.root.querySelector('.cookie-policy__button').addEventListener('click', () => {
       this.onAccepted()
     })
-    this.cookiePolicyName = COOKIE_NAME_COOKIE_CONSENT
-    this.cookiePolicyValue = 'yes'
   }
 
   public updateDisplay(display): void {
@@ -85,13 +82,13 @@ class CookiePolicy extends HTMLElement {
   }
 
   public connectedCallback(): void {
-    if (Cookies.get(this.cookiePolicyName) === this.cookiePolicyValue) {
+    if (getCookie(COOKIE_NAME_COOKIE_CONSENT) === COOKIE_POLICY_YES) {
       this.updateDisplay('none')
     }
   }
 
   public onAccepted(): void {
-    Cookies.set(this.cookiePolicyName, this.cookiePolicyValue)
+    setCookie(COOKIE_NAME_COOKIE_CONSENT, COOKIE_POLICY_YES)
     this.updateDisplay('none')
   }
 }