(defaultValues || [])
const onSelect = (option: Option) => {
- setSelectedChip(option)
- onChange(option)
+ if (selectedChips?.some((chipValue) => chipValue === option.value)) {
+ if (!canSelectMultiple) {
+ return
+ }
+ const newVal = selectedChips?.filter((chipValue) => chipValue !== option.value)
+ setSelectedChips(newVal)
+ onChange &&
+ onChange(
+ 'REMOVE',
+ options.filter((opt) => newVal.some((selectedVal) => selectedVal === opt.value))
+ )
+ } else {
+ let newVal: string[] = []
+ if (canSelectMultiple) {
+ newVal = [...(selectedChips || []), option.value]
+ } else {
+ newVal = [option.value]
+ }
+
+ setSelectedChips(newVal)
+ onChange &&
+ onChange(
+ 'ADD',
+ options.filter((opt) => newVal.some((selectedVal) => selectedVal === opt.value))
+ )
+ }
}
return (
{options.map((option) => {
return (
-
+ chipValue === option.value) || false}
+ />
)
})}
diff --git a/src/components/Elements/ChipsSet/chipset.css b/src/components/Elements/ChipsSet/chipset.css
new file mode 100644
index 00000000..9989c756
--- /dev/null
+++ b/src/components/Elements/ChipsSet/chipset.css
@@ -0,0 +1,42 @@
+.chipsSet {
+ margin: 6px 0;
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.chip {
+ font-weight: 500;
+ border-radius: 50px;
+ padding: 6px 12px;
+ border: transparent;
+ font-family: 'nunito';
+ color: var(--chip-text);
+ background-color: var(--chip-background);
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ cursor: pointer;
+}
+.chip:hover {
+ filter: brightness(95%);
+}
+
+.chip .chipIcon {
+ margin: 0;
+ padding: 0;
+ line-height: 14px;
+}
+.chip .chipIcon > img,
+.chip .chipIcon > svg {
+ background-color: white;
+ color: black;
+ border-radius: 50px;
+ padding: 2px;
+ width: 20px;
+ height: 20px;
+}
+.chip.active {
+ background-color: var(--chip-active-background);
+ color: var(--chip-active-text);
+}
diff --git a/src/components/Elements/ClickableItem/ClickableItem.tsx b/src/components/Elements/ClickableItem/ClickableItem.tsx
index ee2b8ef4..b380fe45 100644
--- a/src/components/Elements/ClickableItem/ClickableItem.tsx
+++ b/src/components/Elements/ClickableItem/ClickableItem.tsx
@@ -1,6 +1,6 @@
-import { trackLinkOpen } from 'src/lib/analytics'
import React from 'react'
import { ref } from 'src/config'
+import { trackLinkOpen } from 'src/lib/analytics'
import { useUserPreferences } from 'src/stores/preferences'
@@ -18,7 +18,7 @@ export const ClickableItem = ({
className,
children,
analyticsAttributes,
- appendRef = true,
+ appendRef = false,
}: ClickableItemProps) => {
const { openLinksNewTab } = useUserPreferences()
diff --git a/src/components/Elements/FloatingFilter/FloatingFilter.tsx b/src/components/Elements/FloatingFilter/FloatingFilter.tsx
index d1df1513..07cb3d97 100644
--- a/src/components/Elements/FloatingFilter/FloatingFilter.tsx
+++ b/src/components/Elements/FloatingFilter/FloatingFilter.tsx
@@ -1,11 +1,11 @@
-import { SupportedCard, GLOBAL_TAG, MY_LANGUAGES_TAG, dateRanges } from 'src/config'
-import { FiFilter } from 'react-icons/fi'
import { useState } from 'react'
+import { FiFilter } from 'react-icons/fi'
import { BottomSheet } from 'react-spring-bottom-sheet'
import 'react-spring-bottom-sheet/dist/style.css'
-import { useUserPreferences } from 'src/stores/preferences'
-import { trackCardLanguageSelect, trackCardDateRangeSelect } from 'src/lib/analytics'
import { ChipsSet } from 'src/components/Elements'
+import { dateRanges, GLOBAL_TAG, MY_LANGUAGES_TAG, SupportedCard } from 'src/config'
+import { trackCardDateRangeSelect, trackCardLanguageSelect } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
type ListingFilterMobileProps = {
card: SupportedCard
@@ -44,21 +44,18 @@ export const FloatingFilter = ({ card, filters = ['language'] }: ListingFilterMo
Language
tag.value === cardsSettings[card.value]?.language
- ) || {
- label: GLOBAL_TAG.label,
- value: GLOBAL_TAG.value,
- }
+ defaultValues={
+ availableTagOptions
+ .filter((tag) => tag.value === cardsSettings[card.value]?.language)
+ ?.map((tag) => tag.label) || [GLOBAL_TAG.value]
}
options={availableTagOptions}
- onChange={(option) => {
+ onChange={(_, option) => {
setCardSettings(card.value, {
...cardsSettings[card.value],
- language: option.value,
+ language: option[0].value,
})
- trackCardLanguageSelect(card.analyticsTag, option.value)
+ trackCardLanguageSelect(card.analyticsTag, option[0].value)
}}
/>
@@ -70,18 +67,18 @@ export const FloatingFilter = ({ card, filters = ['language'] }: ListingFilterMo
Date Range
date.value === cardsSettings[card.value]?.dateRange
- ) || dateRanges[0]
+ defaultValues={
+ dateRanges
+ .filter((date) => date.value === cardsSettings[card.value]?.dateRange)
+ .map((date) => date.value) || dateRanges[0].value
}
options={dateRanges}
- onChange={(option) => {
+ onChange={(_, option) => {
setCardSettings(card.value, {
...cardsSettings[card.value],
- dateRange: option.value,
+ dateRange: option[0].value,
})
- trackCardDateRangeSelect(card.analyticsTag, option.value)
+ trackCardDateRangeSelect(card.analyticsTag, option[0].value)
}}
/>
diff --git a/src/components/Elements/Steps/Steps.tsx b/src/components/Elements/Steps/Steps.tsx
new file mode 100644
index 00000000..7814cdfb
--- /dev/null
+++ b/src/components/Elements/Steps/Steps.tsx
@@ -0,0 +1,126 @@
+import { createElement, useState } from 'react'
+import './steps.css'
+
+type StepStatus = {
+ [stepIndex: number]: 'current' | 'completed' | undefined | null
+}
+
+export type Step = {
+ title: string
+ status?: 'current' | 'completed' | undefined | null
+ element: React.ComponentType>
+}
+
+export type StepProps = {
+ showBackButton?: boolean
+ moveToNext?: () => void
+ moveToPrevious?: () => void
+ tabsData: T
+ setTabsData: (data: T) => void
+}
+
+type StepsProps = {
+ steps: Array>
+ skipSteps?: boolean
+ onFinish: (tabsData: T | undefined) => void
+ onSkip: () => void
+}
+
+export const Steps = ({
+ onFinish,
+ onSkip,
+ skipSteps = false,
+ steps,
+}: StepsProps) => {
+ const [currentStep, setCurrentStep] = useState(0)
+ const [tabsData, setTabsData] = useState()
+ const [stepsStatuses, setStepsStatuses] = useState(
+ steps.reduce(
+ (obj: StepStatus, step, index: number) => {
+ if (step.status) {
+ obj[index] = step.status
+ }
+
+ return obj
+ },
+ { 0: 'current' }
+ )
+ )
+
+ const moveToNext = () => {
+ if (currentStep < steps.length - 1) {
+ setStepsStatuses((prev) => {
+ prev[currentStep] = 'completed'
+ prev[currentStep + 1] = 'current'
+ return prev
+ })
+ setCurrentStep((prev) => prev + 1)
+ } else {
+ onFinish(tabsData)
+ }
+ }
+
+ const moveToPrevious = () => {
+ if (currentStep > 0) {
+ setCurrentStep((prev) => prev - 1)
+ } else if (currentStep === 0) {
+ onSkip()
+ }
+ }
+
+ const onStepClicked = (e: React.MouseEvent, index: number) => {
+ e.preventDefault()
+ setCurrentStep(index)
+ }
+
+ const renderStep = () => {
+ const props = {
+ moveToNext,
+ moveToPrevious,
+ tabsData,
+ setTabsData,
+ } as unknown as StepProps
+
+ const element = createElement(steps[currentStep].element, props)
+
+ return element
+ }
+ return (
+
+
+
{renderStep()}
+
+ {
+ 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 || '',
+ }
+ }) || []
+
+ setCards(cards)
+ identifyUserCards(cards.map((card) => card.name))
+ }
+
+ setShowOnboarding(false)
+ }}
+ />
+
+
+ )
+}
diff --git a/src/features/onboarding/components/steps/HelloTab.tsx b/src/features/onboarding/components/steps/HelloTab.tsx
new file mode 100644
index 00000000..1c88b744
--- /dev/null
+++ b/src/features/onboarding/components/steps/HelloTab.tsx
@@ -0,0 +1,118 @@
+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 { Occupation } from '../../types'
+
+const OCCUPATIONS: Occupation[] = [
+ {
+ title: 'Front-End Engineer',
+ icon: FaPaintBrush,
+ sources: ['devto', 'github', 'medium', 'hashnode'],
+ tags: ['javascript', 'typescript'],
+ },
+ {
+ title: 'Back-End Engineer',
+ icon: BsFillGearFill,
+ sources: ['devto', 'github', 'medium', 'hashnode'],
+ tags: ['go', 'php', 'ruby', 'rust', 'r'],
+ },
+ {
+ title: 'Full Stack Engineer',
+ icon: RiDeviceFill,
+ sources: ['devto', 'github', 'medium', 'hashnode'],
+ tags: ['javascript', 'typescript', 'php', 'ruby', 'rust'],
+ },
+ {
+ title: 'Mobile',
+ icon: AiFillMobile,
+ sources: ['reddit', 'github', 'medium', 'hashnode'],
+ tags: ['android', 'kotlin', 'java', 'swift', 'objective-c'],
+ },
+ {
+ title: 'Devops Engineer',
+ icon: FaServer,
+ sources: ['freecodecamp', 'github', 'reddit', 'devto'],
+ tags: ['devops', 'bash'],
+ },
+ {
+ title: 'Data Engineer',
+ icon: FaDatabase,
+ sources: ['freecodecamp', 'github', 'reddit', 'devto'],
+ tags: ['data-science', 'python', 'artificial-intelligence', 'machine-learning'],
+ },
+ {
+ title: 'Security Engineer',
+ icon: AiFillSecurityScan,
+ sources: ['freecodecamp', 'github', 'reddit', 'devto'],
+ tags: ['c++', 'bash', 'python'],
+ },
+ {
+ title: 'ML Engineer',
+ icon: FaRobot,
+ sources: ['github', 'freecodecamp', 'hackernews', 'devto'],
+ tags: ['machine-learning', 'artificial-intelligence', 'python'],
+ },
+ {
+ title: 'Other',
+ icon: TbDots,
+ sources: ['hackernews', 'github', 'producthunt', 'devto'],
+ tags: [],
+ },
+]
+
+export const HelloTab = ({
+ moveToNext,
+ moveToPrevious,
+ setTabsData,
+ tabsData,
+}: StepProps) => {
+ const [selectedOccupation, setSelectedOccupation] = useState(
+ tabsData || OCCUPATIONS[0]
+ )
+ const onOccupationClicked = (occupation: Occupation) => {
+ setSelectedOccupation(occupation)
+ }
+
+ const onClickNext = () => {
+ if (selectedOccupation === undefined) {
+ return
+ }
+
+ setTabsData(selectedOccupation)
+ moveToNext && moveToNext()
+ }
+ return (
+
+
+
Hi, 👋 Welcome to Hackertab
+
Let's customize your Hackertab experience!
+
+
+ {OCCUPATIONS.map((occ, index) => {
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+
+
🦾 Select your languages & topics
+
Select the languages you're interested in following.
+
+
+ {
+ setTabsData({ ...tabsData, tags: selectedChips.map((chip) => chip.value) })
+ }}
+ />
+
+
+
+
+
+
+
+
📙 Pick your sources
+
Your feed will be tailored by your followed sources
+
+
+ {
+ console.log(
+ 'sources',
+ selectedChips.map((chip) => chip.value)
+ )
+
+ setTabsData({ ...tabsData, sources: selectedChips.map((chip) => chip.value) })
+ }}
+ />
+
+
+
+
+
+