index.tsx raw

   1  import ExternalContent from '@/components/ExternalContent'
   2  import ExternalContentInteractions from '@/components/ExternalContentInteractions'
   3  import StuffStats from '@/components/StuffStats'
   4  import { Separator } from '@/components/ui/separator'
   5  import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
   6  import { forwardRef, useEffect, useState } from 'react'
   7  import { useTranslation } from 'react-i18next'
   8  import NotFoundPage from '../NotFoundPage'
   9  
  10  const ExternalContentPage = forwardRef(({ index }: { index?: number }, ref) => {
  11    const { t } = useTranslation()
  12    const [id, setId] = useState<string | undefined>()
  13  
  14    useEffect(() => {
  15      const searchParams = new URLSearchParams(window.location.search)
  16      const id = searchParams.get('id')
  17      if (id) {
  18        setId(id)
  19      }
  20    }, [])
  21  
  22    if (!id) return <NotFoundPage index={index} />
  23  
  24    return (
  25      <SecondaryPageLayout
  26        ref={ref}
  27        index={index}
  28        title={t('External Content')}
  29        displayScrollToTopButton
  30      >
  31        <div className="px-4 mt-3">
  32          <ExternalContent content={id} mustLoadMedia />
  33          <StuffStats className="mt-3" stuff={id} fetchIfNotExisting displayTopZapsAndLikes />
  34        </div>
  35        <Separator className="mt-4" />
  36        <ExternalContentInteractions externalContent={id} />
  37      </SecondaryPageLayout>
  38    )
  39  })
  40  ExternalContentPage.displayName = 'ExternalContentPage'
  41  export default ExternalContentPage
  42