fix(tutorial): tutorial is shown even after cookie is dropped

but since cookie injector does not refresh on cookie value change

Author: technikhil314

components/diffActionBar.vue

@@ -37,15 +37,10 @@ import ToggleInSync from './buttons/toggleInSync.vue'
 import NextDiff from './buttons/nextDiff.vue'
 import CopyLink from './buttons/copyLink.vue'
 import { putToClipboard } from '~/helpers/utils'
-interface Data {
-  comparator: HTMLElement | null
-  comparer: HTMLElement | null
-  copied: Boolean
-  treeWalker: TreeWalker | null
-}
+import { DiffActionBarData } from '~/helpers/types'
 export default Vue.extend({
   components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
-  data(): Data {
+  data(): DiffActionBarData {
     return {
       copied: false,
       comparator: null,

helpers/driverjsTutorials.ts

@@ -1,18 +1,6 @@
-interface Tutorial {
-  element: string
-  popover: {
-    title: string
-    description: string
-  }
-}
-
-interface TutorialMetadata {
-  tutorial: Tutorial[]
-  cookieName: string
-}
-
-type TutorialsMetadata = Record<string, TutorialMetadata[]>
-
+import { Cookies, Tutorial, TutorialsMetadata, TutorialMetadata } from './types'
+// Need this to keep track of latest value of cookie otherwise users sees same tutorial untill they refresh the page after the cookie is dropped
+const _cookies: Partial<Cookies> = {}
 const labelsTutorial: Tutorial[] = [
   {
     element: '#lhsLabel',
@@ -100,28 +88,29 @@ const tutorialsMetadata: TutorialsMetadata = {
 }
 
 export default async function showTutorials(
-  cookies: Record<string, boolean>,
+  cookies: Cookies,
   route: string,
   isDarkMode: boolean
 ) {
   const { default: Driver } = await import('driver.js')
-  const possibleTutorialsToShow = tutorialsMetadata[route]
+  const possibleTutorialsToShow: TutorialMetadata[] = tutorialsMetadata[route]
   let finalTutorial: Tutorial[] = []
-  const cookiesToSet: string[] = []
+  const cookiesToSet: TutorialMetadata[] = []
   const driver = new Driver({
     closeBtnText: 'Skip',
     className: 'dark:filter dark:invert',
     stageBackground: isDarkMode ? 'hsl(221deg 50% 90% / 0.5)' : '#ffffff',
     onReset: () => {
-      cookiesToSet.forEach((x) => {
-        document.cookie = `${x}=true; max-age=31536000; path=/;`
+      cookiesToSet.forEach((x: TutorialMetadata) => {
+        _cookies[x.cookieName] = true
+        document.cookie = `${x.cookieName}=true; max-age=31536000; path=/;`
       })
     },
   })
   possibleTutorialsToShow.forEach((x) => {
-    if (!cookies[x.cookieName]) {
+    if (!cookies[x.cookieName] && !_cookies[x.cookieName]) {
       finalTutorial = finalTutorial.concat(x.tutorial)
-      cookiesToSet.push(x.cookieName)
+      cookiesToSet.push(x)
     }
   })
   if (finalTutorial.length) {

helpers/types.ts

@@ -0,0 +1,29 @@
+export interface Cookies {
+  isDarkMode: boolean
+  isSkipTutorial: boolean
+  isSkipScrollInSyncTutorial: boolean
+  isSkipBackButtonPersistsDataTutorial: boolean
+  isSkipSubmitKbdShortcutTutorial: boolean
+}
+
+export interface Tutorial {
+  element: string
+  popover: {
+    title: string
+    description: string
+  }
+}
+
+export interface TutorialMetadata {
+  tutorial: Tutorial[]
+  cookieName: keyof Cookies
+}
+
+export type TutorialsMetadata = Record<string, TutorialMetadata[]>
+
+export interface DiffActionBarData {
+  comparator: HTMLElement | null
+  comparer: HTMLElement | null
+  copied: Boolean
+  treeWalker: TreeWalker | null
+}

plugins/cookie-injector.client.ts

@@ -4,14 +4,8 @@ import isSkipTutorialCookie from '~/helpers/isSkipTutorialCookie'
 import isSkipScrollInSyncTutorial from '~/helpers/isSkipScrollInSyncTutorial'
 import isSkipBackButtonPersistsDataTutorial from '~/helpers/isSkipBackButtonPersistsDataTutorial'
 import isSkipSubmitKbdShortcutTutorial from '~/helpers/isSkipSubmitKbdShortcutTutorial'
+import { Cookies } from '~/helpers/types'
 
-interface Cookies {
-  isDarkMode: boolean
-  isSkipTutorial: boolean
-  isSkipScrollInSyncTutorial: boolean
-  isSkipBackButtonPersistsDataTutorial: boolean
-  isSkipSubmitKbdShortcutTutorial: boolean
-}
 declare module 'vue/types/vue' {
   interface Vue {
     $cookies: Cookies