Function PlatformPicker

components/article/PlatformPicker.tsx:39–74

()

}

export const PlatformPicker = () => {
  const { defaultPlatform, detectedPlatforms } = useArticleContext()

  const [defaultUA, setDefaultUA] = useState('')
  useEffect(() => {
    let userAgent = parseUserAgent().os
    if (userAgent === 'ios') {
      userAgent = 'mac'
    }
    setDefaultUA(userAgent)
  }, [])

  // Defensively, just in case some article happens to have an array
  // but for some reasons, it might be empty, let's not have a picker
  // at all.
  if (!detectedPlatforms.length) return null

  const options = platforms.filter((platform) => detectedPlatforms.includes(platform.value))

  return (
    <InArticlePicker
      defaultValue={defaultPlatform}
      fallbackValue={
        detectedPlatforms.includes(defaultUA)
          ? defaultUA
          : detectedPlatforms[detectedPlatforms.length - 1]
      }
      cookieKey="osPreferred"
      queryStringKey={platformQueryKey}
      onValue={showPlatformSpecificContent}
      preferenceName="os"
      ariaLabel="Platform"
      options={options}
    />
  )
}