feat: add welcome message for first visit (#40)

Author: resir014

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@fontsource/inter": "^4.5.11",
     "@headlessui/react": "^1.6.6",
+    "@heroicons/react": "^1.0.6",
     "@icons-pack/react-simple-icons": "^5.2.0",
     "@next/bundle-analyzer": "^12.2.3",
     "autoprefixer": "^10.4.8",

src/components/SiteHeader.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import * as React from 'react'
 
 import { HelpCircleIcon } from './HelpCircleIcon'
 import { KominfodLogo } from './KominfodLogo'
@@ -15,7 +16,7 @@ export function SiteHeader() {
         </Link>
         <Link href='/about'>
           <a>
-            <span className='sr-only'>Confused on what this is?</span>
+            <span className='sr-only'>About</span>
             <HelpCircleIcon className='h-6 w-6 text-brand-text-grey' aria-hidden />
           </a>
         </Link>

src/modules/ManualSearchSection.tsx src/modules/home/ManualSearchSection.tsxsrc/modules/ManualSearchSection.tsx renamed to src/modules/home/ManualSearchSection.tsx

@@ -2,8 +2,8 @@ import type Fuse from 'fuse.js'
 import Link from 'next/link'
 import * as React from 'react'
 
-import { useDebounce } from '../hooks/useDebounce'
-import type { PSEData } from '../types/PSEData'
+import { useDebounce } from '../../hooks/useDebounce'
+import type { PSEData } from '../../types/PSEData'
 
 export const ManualSearchSection = () => {
   // TODO: This shit's ugly - Research a better way

src/modules/home/WelcomeMessageSection.tsx

@@ -0,0 +1,82 @@
+import { InformationCircleIcon, XIcon } from '@heroicons/react/solid'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import * as React from 'react'
+
+const LOCAL_STORAGE_KEY = 'kominfod-welcome'
+const canUseDOM = typeof window !== 'undefined'
+const getLocalStorage = (key: string) => canUseDOM && localStorage.getItem(key)
+const setLocalStorage = (key: string, value: string) => {
+  return canUseDOM && localStorage.setItem(key, value)
+}
+
+export function WelcomeMessageSection() {
+  const router = useRouter()
+  const existingStorage = getLocalStorage(LOCAL_STORAGE_KEY)
+  const [isOpen, setIsOpen] = React.useState<boolean>(false)
+  const [hasStorage, setHasStorage] = React.useState<boolean>(
+    Boolean(existingStorage && existingStorage === '1')
+  )
+
+  const setCloseStateToStorage = () => {
+    setLocalStorage(LOCAL_STORAGE_KEY, '1')
+    setHasStorage(true)
+  }
+
+  const handleCloseMessage = React.useCallback(() => {
+    setIsOpen(false)
+    setCloseStateToStorage()
+  }, [])
+
+  React.useEffect(() => {
+    // Only open the dialog when intersecting
+    // and have not been triggered before
+    // and doesn't have a local storage "wbw-wm"
+    if (!hasStorage) {
+      setIsOpen(true)
+    }
+  }, [hasStorage])
+
+  React.useEffect(() => {
+    // Also close dialog when route changes
+    router.events.on('beforeHistoryChange', handleCloseMessage)
+
+    return () => {
+      router.events.off('beforeHistoryChange', handleCloseMessage)
+    }
+  }, [router.events, handleCloseMessage])
+
+  if (isOpen) {
+    return (
+      <div className='rounded-md bg-brand-light-blue p-4'>
+        <div className='flex'>
+          <div className='flex-shrink-0'>
+            <InformationCircleIcon className='h-5 w-5 text-brand-blue' aria-hidden='true' />
+          </div>
+          <div className='ml-3'>
+            <p className='text-sm text-brand-blue'>
+              Welcome to Kominfo&apos;d! Confused about what this is?{' '}
+              <Link href='/about'>
+                <a className='font-medium text-brand-blue underline'>Click here.</a>
+              </Link>
+            </p>
+          </div>
+          <div className='ml-auto pl-3'>
+            <div className='-mx-1.5 -my-1.5'>
+              <button
+                type='button'
+                className='inline-flex rounded-md p-1.5 text-brand-blue focus:outline-none focus:ring-2 focus:ring-brand-blue'
+                onClick={handleCloseMessage}
+              >
+                <span className='sr-only'>Dismiss</span>
+                <XIcon className='h-5 w-5' aria-hidden='true' />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}

src/modules/home/index.ts

@@ -0,0 +1,2 @@
+export * from './ManualSearchSection'
+export * from './WelcomeMessageSection'

src/modules/index.ts

@@ -10,8 +10,7 @@ import { PageContent } from '../components/PageContent'
 import { SiteHeader } from '../components/SiteHeader'
 import { WebsiteEntry } from '../components/WebsiteEntry'
 import { fetchTrustPositif } from '../functions/fetchTrustPositif'
-import { ManualSearchSection } from '../modules'
-import { ExplanationSection, WhatIsThisSection } from '../modules/about'
+import { ManualSearchSection, WelcomeMessageSection } from '../modules/home'
 import type { PSEData } from '../types/PSEData'
 import { generateBlockList } from './api/fetchBlocked'
 
@@ -75,6 +74,7 @@ const IndexPage = ({ PSEData: data, blockData, trustPositifData }: IndexPageProp
         <PageContent>
           <div className='mx-auto w-full max-w-screen-sm'>
             <div className='space-y-8'>
+              <WelcomeMessageSection />
               {websiteSections.map((item) => (
                 <section key={item.title}>
                   <h2 className='text-2xl font-semibold'>{item.title}</h2>

src/pages/index.tsx

@@ -68,6 +68,11 @@
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.6.tgz#3073c066b85535c9d28783da0a4d9288b5354d0c"
   integrity sha512-MFJtmj9Xh/hhBMhLccGbBoSk+sk61BlP6sJe4uQcVMtXZhCgGqd2GyIQzzmsdPdTEWGSF434CBi8mnhR6um46Q==
 
+"@heroicons/react@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
+  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"