refactor: simplify onboarding process by removing unused components and props

Author: medyo

src/App.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useEffect, useLayoutEffect, useState } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { DNDLayout } from 'src/components/Layout'
 import {
   identifyAdvBlocked,
@@ -10,7 +10,6 @@ import {
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
 import { verifyAdvStatus } from './features/adv/utils/status'
-import { isWebOrExtensionVersion } from './utils/Environment'
 import { lazyImport } from './utils/lazyImport'
 const { OnboardingModal } = lazyImport(() => import('src/features/onboarding'), 'OnboardingModal')
 
@@ -25,16 +24,8 @@ const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
 }
 
 export const App = () => {
-  const [showOnboarding, setShowOnboarding] = useState(true)
-  const {
-    onboardingCompleted,
-    maxVisibleCards,
-    setAdvStatus,
-    isDNDModeActive,
-    layout,
-    DNDDuration,
-    setDNDDuration,
-  } = useUserPreferences()
+  const { maxVisibleCards, setAdvStatus, isDNDModeActive, layout, DNDDuration, setDNDDuration } =
+    useUserPreferences()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -78,10 +69,7 @@ export const App = () => {
 
   return (
     <>
-      {!onboardingCompleted && isWebOrExtensionVersion() === 'extension' && (
-        <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
-      )}
-
+      <OnboardingModal />
       <div
         className={clsx(
           'layoutLayers hideScrollBar',

src/features/onboarding/components/OnboardingModal.tsx

@@ -1,43 +1,23 @@
 import { useEffect } from 'react'
 import ReactModal from 'react-modal'
-import { Steps } from 'src/components/Elements'
-import { SUPPORTED_CARDS } from 'src/config/supportedCards'
-import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
-import {
-  identifyUserCards,
-  identifyUserLanguages,
-  identifyUserOccupation,
-  trackOnboardingFinish,
-  trackOnboardingSkip,
-  trackOnboardingStart,
-} from 'src/lib/analytics'
+import { trackOnboardingStart } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
-import { SelectedCard } from 'src/types'
 import { HelloTab } from './steps/HelloTab'
-import { LanguagesTab } from './steps/LanguagesTab'
-import { SourcesTab } from './steps/SourcesTab'
 import './steps/tabs.css'
 
-type OnboardingModalProps = {
-  showOnboarding: boolean
-  setShowOnboarding: (show: boolean) => void
-}
-
-export const OnboardingModal = ({ showOnboarding, setShowOnboarding }: OnboardingModalProps) => {
-  const { markOnboardingAsCompleted, setTags, setCards } = useUserPreferences()
-  const { supportedTags } = useRemoteConfigStore()
+export const OnboardingModal = () => {
+  const { onboardingCompleted } = useUserPreferences()
 
   useEffect(() => {
     trackOnboardingStart()
   }, [])
   return (
     <ReactModal
-      isOpen={showOnboarding}
+      isOpen={!onboardingCompleted}
       ariaHideApp={false}
       shouldCloseOnEsc={false}
       shouldCloseOnOverlayClick={false}
       shouldFocusAfterRender={false}
-      onRequestClose={() => setShowOnboarding(false)}
       contentLabel="Onboarding"
       className="Modal scrollable"
       style={{
@@ -47,50 +27,7 @@ export const OnboardingModal = ({ showOnboarding, setShowOnboarding }: Onboardin
       }}
       overlayClassName="Overlay">
       <div className="onboardingModal">
-        <Steps
-          steps={[
-            { title: 'Hello', element: HelloTab },
-            { title: 'Sources', element: SourcesTab },
-            { title: 'Languages', element: LanguagesTab },
-          ]}
-          onSkip={() => {
-            trackOnboardingSkip()
-            markOnboardingAsCompleted(null)
-            setShowOnboarding(false)
-          }}
-          onFinish={(tabsData) => {
-            trackOnboardingFinish()
-            if (tabsData) {
-              const { icon, ...occupation } = tabsData
-              markOnboardingAsCompleted(occupation)
-              identifyUserOccupation(occupation.title)
-
-              const tags =
-                (occupation.tags
-                  .map((tag) => supportedTags.find((st) => st.value === tag))
-                  .filter(Boolean) as Tag[]) || []
-
-              setTags(tags)
-              identifyUserLanguages(tags.map((tag) => tag.value))
-
-              const cards = (occupation.sources
-                .map((source) => SUPPORTED_CARDS.find((sc) => sc.value === source))
-                .filter(Boolean)
-                .map((source, index) => {
-                  return {
-                    id: index,
-                    name: source?.value || '',
-                    type: 'supported',
-                  }
-                }) || []) as SelectedCard[]
-
-              setCards(cards)
-              identifyUserCards(cards.map((card) => card.name))
-            }
-
-            setShowOnboarding(false)
-          }}
-        />
+        <HelloTab />
       </div>
     </ReactModal>
   )

src/features/onboarding/components/steps/HelloTab.tsx

@@ -1,25 +1,25 @@
 import clsx from 'clsx'
-import { useState } from 'react'
 import { AiFillMobile, AiFillSecurityScan } from 'react-icons/ai'
 import { BsArrowRight, BsFillGearFill } from 'react-icons/bs'
 import { FaDatabase, FaPaintBrush, FaRobot, FaServer } from 'react-icons/fa'
 import { RiDeviceFill } from 'react-icons/ri'
 import { TbDots } from 'react-icons/tb'
-import { StepProps } from 'src/components/Elements'
+import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
+import { useUserPreferences } from 'src/stores/preferences'
 import { Occupation } from '../../types'
 
 const OCCUPATIONS: Occupation[] = [
   {
     title: 'Front-End Engineer',
     icon: FaPaintBrush,
     sources: ['devto', 'github', 'medium', 'hashnode'],
-    tags: ['javascript', 'typescript'],
+    tags: ['frontend', 'javascript', 'typescript', 'css', 'react', 'vue', 'angular'],
   },
   {
     title: 'Back-End Engineer',
     icon: BsFillGearFill,
     sources: ['devto', 'github', 'medium', 'hashnode'],
-    tags: ['go', 'php', 'ruby', 'rust', 'r'],
+    tags: ['backend', 'go', 'php', 'ruby', 'rust', 'r'],
   },
   {
     title: 'Full Stack Engineer',
@@ -31,74 +31,92 @@ const OCCUPATIONS: Occupation[] = [
     title: 'Mobile',
     icon: AiFillMobile,
     sources: ['reddit', 'github', 'medium', 'hashnode'],
-    tags: ['android', 'kotlin', 'java', 'swift', 'objective-c'],
+    tags: [
+      'android',
+      'mobile',
+      'kotlin',
+      'java',
+      'ios',
+      'swift',
+      'objectivec',
+      'react native',
+      'flutter',
+    ],
   },
   {
     title: 'Devops Engineer',
     icon: FaServer,
     sources: ['freecodecamp', 'github', 'reddit', 'devto'],
-    tags: ['devops', 'bash'],
+    tags: ['devops', 'kubernetes', 'docker', 'bash'],
   },
   {
     title: 'Data Engineer',
     icon: FaDatabase,
     sources: ['freecodecamp', 'github', 'reddit', 'devto'],
-    tags: ['data-science', 'python', 'artificial-intelligence', 'machine-learning'],
+    tags: ['data science', 'python', 'artificial intelligence', 'machine learning'],
   },
   {
     title: 'Security Engineer',
     icon: AiFillSecurityScan,
     sources: ['freecodecamp', 'github', 'reddit', 'devto'],
-    tags: ['c++', 'bash', 'python'],
+    tags: ['security', 'cpp', 'bash', 'python'],
   },
   {
     title: 'ML Engineer',
     icon: FaRobot,
     sources: ['github', 'freecodecamp', 'hackernews', 'devto'],
-    tags: ['machine-learning', 'artificial-intelligence', 'python'],
+    tags: ['machine learning', 'artificial intelligence', 'python'],
   },
   {
     title: 'Other',
     icon: TbDots,
     sources: ['hackernews', 'github', 'producthunt', 'devto'],
-    tags: [],
+    tags: ['webdev', 'mobile'],
   },
 ]
 
-export const HelloTab = ({
-  moveToNext,
-  moveToPrevious,
-  setTabsData,
-  tabsData,
-}: StepProps<Occupation>) => {
-  const [selectedOccupation, setSelectedOccupation] = useState<Occupation | undefined>(
-    tabsData || OCCUPATIONS[0]
-  )
-  const onOccupationClicked = (occupation: Occupation) => {
-    setSelectedOccupation(occupation)
-  }
+export const HelloTab = () => {
+  const { markOnboardingAsCompleted, setCards, setTags, setOccupation, occupation } =
+    useUserPreferences()
+
+  const { tags } = useRemoteConfigStore()
 
-  const onClickNext = () => {
-    if (selectedOccupation === undefined) {
-      return
+  const onStartClicked = () => {
+    const selectedOccupation = OCCUPATIONS.find((occ) => occ.title === occupation)
+    if (selectedOccupation) {
+      setOccupation(selectedOccupation.title)
+      setCards(
+        selectedOccupation.sources.map((source, index) => ({
+          id: index,
+          name: source,
+          type: 'supported',
+        }))
+      )
+      const userTags = selectedOccupation.tags
+        .map((tag) => {
+          return tags.find((t) => t.value === tag)
+        })
+        .filter(Boolean) as Array<Tag>
+
+      setTags(userTags)
     }
 
-    setTabsData(selectedOccupation)
-    moveToNext && moveToNext()
+    markOnboardingAsCompleted()
   }
+
   return (
     <div>
       <div className="tabHeader">
-        <h1 className="tabTitle">Hi, 👋 Welcome to Hackertab</h1>
-        <p className="tabBody">Let's customize your Hackertab experience!</p>
+        <h1 className="tabTitle">👋 Let’s set up your Hackertab</h1>
+        <p className="tabBody">Select your developer role 👨🏻‍💻 to personalize your Hackertab.</p>
       </div>
       <div className="occupations">
         {OCCUPATIONS.map((occ) => {
           return (
             <button
               key={occ.title}
-              onClick={() => onOccupationClicked(occ)}
-              className={clsx('occupation', selectedOccupation?.title === occ.title && 'active')}>
+              onClick={() => setOccupation(occ.title)}
+              className={clsx('occupation', occupation === occ.title && 'active')}>
               <span>
                 <occ.icon className="occupationIcon" />
               </span>
@@ -108,10 +126,11 @@ export const HelloTab = ({
         })}
       </div>
       <div className="tabFooter">
-        <button onClick={() => moveToPrevious && moveToPrevious()}>Skip</button>
-        <button className="positiveButton" onClick={() => onClickNext()}>
-          <BsArrowRight /> Next
-        </button>
+        {occupation && (
+          <button className="positiveButton" onClick={onStartClicked}>
+            <BsArrowRight /> Start now
+          </button>
+        )}
       </div>
     </div>
   )

src/lib/analytics.ts

@@ -99,11 +99,11 @@ export const setupAnalytics = () => {
 export const setupIdentification = () => {
   const {
     userSelectedTags,
-    onboardingResult,
     theme,
     cards,
     listingMode,
     openLinksNewTab,
+    occupation,
     promptEngine,
     maxVisibleCards,
     layout,
@@ -118,8 +118,8 @@ export const setupIdentification = () => {
   identifyUserLinksInNewTab(openLinksNewTab)
   identifyUserMaxVisibleCards(maxVisibleCards)
   identifyDisplayLayout(layout)
-  if (onboardingResult?.title) {
-    identifyUserOccupation(onboardingResult.title)
+  if (occupation) {
+    identifyUserOccupation(occupation)
   }
   identifySentryUser({
     [Attributes.LANGUAGES]: userSelectedTags.map((tag: any) => tag.value),