degmods.com/src/pages/home.tsx

import { kinds, nip19 } from 'nostr-tools'
import { useMemo, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { A11y, Autoplay, Navigation, Pagination } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react'
import { BlogCard } from '../components/BlogCard'
import { GameCard } from '../components/GameCard'
import { ModCard } from '../components/ModCard'
import { LANDING_PAGE_DATA, PROFILE_BLOG_FILTER_LIMIT } from '../constants'
import {
  useDidMount,
  useGames,
  useLocalStorage,
  useMuteLists,
  useNDKContext,
  useNSFWList
} from '../hooks'
import { appRoutes, getModPageRoute } from '../routes'
import { BlogCardDetails, ModDetails, NSFWFilter, SortBy } from '../types'
import {
  extractBlogCardDetails,
  extractModData,
  handleModImageError,
  log,
  LogType,
  npubToHex
} from '../utils'

import '../styles/cardLists.css'
import '../styles/SimpleSlider.css'
import '../styles/styles.css'

// Import Swiper styles
import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

export const HomePage = () => {
  const navigate = useNavigate()
  const games = useGames()

  const featuredGames = useMemo(() => {
    return games.filter((game) =>
      LANDING_PAGE_DATA.featuredGames.includes(game['Game Name'])
    )
  }, [games])

  return (
    <div className='InnerBodyMain'>
      <div className='SliderWrapper'>
        <div className='ContainerMain'>
          <div className='IBMSecMain'>
            <div className='simple-slider IBMSMSlider'>
              <Swiper
                className='swiper-container IBMSMSliderContainer'
                wrapperClass='swiper-wrapper IBMSMSliderContainerWrapper'
                modules={[Navigation, Pagination, A11y, Autoplay]}
                pagination={{ clickable: true, dynamicBullets: true }}
                slidesPerView={1}
                autoplay={{ delay: 5000 }}
                speed={1000}
                navigation
                loop
              >
                {LANDING_PAGE_DATA.featuredSlider.map((naddr) => (
                  <SwiperSlide
                    key={naddr}
                    className='swiper-slide IBMSMSliderContainerWrapperSlider'
                  >
                    <SlideContent naddr={naddr} />
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>
          </div>
        </div>
      </div>
      <div className='ContainerMain'>
        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
          <div className='IBMSecMain IBMSMListWrapper'>
            <div className='IBMSMTitleMain'>
              <h2 className='IBMSMTitleMainHeading'>Cool Games</h2>
            </div>
            <div className='IBMSMList IBMSMListFeaturedAlt'>
              {featuredGames.map((game) => (
                <GameCard
                  key={game['Game Name']}
                  title={game['Game Name']}
                  imageUrl={game['Boxart image']}
                />
              ))}
            </div>
            <div className='IBMSMAction'>
              <a
                className='btn btnMain IBMSMActionBtn'
                role='button'
                onClick={() => navigate(appRoutes.games)}
              >
                View All
              </a>
            </div>
          </div>
          <div className='IBMSecMain IBMSMListWrapper'>
            <div className='IBMSMTitleMain'>
              <h2 className='IBMSMTitleMainHeading'>Awesome Mods</h2>
            </div>
            <div className='IBMSMList IBMSMListAlt'>
              {LANDING_PAGE_DATA.awesomeMods.map((naddr) => (
                <DisplayMod key={naddr} naddr={naddr} />
              ))}
            </div>
            <div className='IBMSMAction'>
              <a
                className='btn btnMain IBMSMActionBtn'
                role='button'
                onClick={() => navigate(appRoutes.mods)}
              >
                View All
              </a>
            </div>
          </div>
          <DisplayLatestMods />
          <DisplayLatestBlogs />
        </div>
      </div>
    </div>
  )
}

type SlideContentProps = {
  naddr: string
}

const SlideContent = ({ naddr }: SlideContentProps) => {
  const navigate = useNavigate()
  const { fetchEvent } = useNDKContext()
  const [mod, setMod] = useState<ModDetails>()

  useDidMount(() => {
    const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
    const { identifier, kind, pubkey } = decoded.data

    const ndkFilter: NDKFilter = {
      '#a': [identifier],
      authors: [pubkey],
      kinds: [kind]
    }

    fetchEvent(ndkFilter)
      .then((ndkEvent) => {
        if (ndkEvent) {
          const extracted = extractModData(ndkEvent)
          setMod(extracted)
        }
      })
      .catch((err) => {
        log(
          true,
          LogType.Error,
          'An error occurred in fetching mod details from relays',
          err
        )
      })
  })

  if (!mod) return <Spinner />

  return (
    <>
      <div className='IBMSMSCWSPicWrapper'>
        <img
          src={mod.featuredImageUrl}
          onError={handleModImageError}
          className='IBMSMSCWSPic'
        />
      </div>
      <div className='IBMSMSCWSInfo'>
        <h3 className='IBMSMSCWSInfoHeading'>{mod.title}</h3>
        <div className='IBMSMSCWSInfoTextWrapper'>
          <p className='IBMSMSCWSInfoText'>
            {mod.summary}
            <br />
          </p>
        </div>
        <p className='IBMSMSCWSInfoText IBMSMSCWSInfoText2'>
          {mod.game}
          <br />
        </p>
        <div className='IBMSMSliderContainerWrapperSliderAction'>
          <a
            className='btn btnMain IBMSMSliderContainerWrapperSliderActionbtn'
            role='button'
            onClick={() => navigate(getModPageRoute(naddr))}
          >
            Check it out
          </a>
        </div>
      </div>
    </>
  )
}

type DisplayModProps = {
  naddr: string
}

const DisplayMod = ({ naddr }: DisplayModProps) => {
  const [mod, setMod] = useState<ModDetails>()

  const { fetchEvent } = useNDKContext()

  useDidMount(() => {
    const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
    const { identifier, kind, pubkey } = decoded.data

    const ndkFilter: NDKFilter = {
      '#a': [identifier],
      authors: [pubkey],
      kinds: [kind]
    }

    fetchEvent(ndkFilter)
      .then((ndkEvent) => {
        if (ndkEvent) {
          const extracted = extractModData(ndkEvent)
          setMod(extracted)
        }
      })
      .catch((err) => {
        log(
          true,
          LogType.Error,
          'An error occurred in fetching mod details from relays',
          err
        )
      })
  })

  if (!mod) return <Spinner />

  return <ModCard {...mod} />
}

const DisplayLatestMods = () => {
  const navigate = useNavigate()
  const { fetchMods } = useNDKContext()
  const [isFetchingLatestMods, setIsFetchingLatestMods] = useState(true)
  const [latestMods, setLatestMods] = useState<ModDetails[]>([])

  const muteLists = useMuteLists()
  const nsfwList = useNSFWList()

  useDidMount(() => {
    fetchMods({ source: window.location.host })
      .then((mods) => {
        setLatestMods(mods)
      })
      .finally(() => {
        setIsFetchingLatestMods(false)
      })
  })

  const filteredMods = useMemo(() => {
    const mutedAuthors = [...muteLists.admin.authors, ...muteLists.user.authors]
    const mutedEvents = [
      ...muteLists.admin.replaceableEvents,
      ...muteLists.user.replaceableEvents
    ]

    const filtered = latestMods.filter(
      (mod) =>
        !mutedAuthors.includes(mod.author) &&
        !mutedEvents.includes(mod.aTag) &&
        !nsfwList.includes(mod.aTag) &&
        !mod.nsfw
    )

    return filtered.slice(0, 4)
  }, [muteLists, nsfwList, latestMods])

  return (
    <div className='IBMSecMain IBMSMListWrapper'>
      <div className='IBMSMTitleMain'>
        <h2 className='IBMSMTitleMainHeading'>Latest Mods</h2>
      </div>
      <div className='IBMSMList'>
        {isFetchingLatestMods ? (
          <Spinner />
        ) : (
          filteredMods.map((mod) => {
            return <ModCard key={mod.id} {...mod} />
          })
        )}
      </div>

      <div className='IBMSMAction'>
        <a
          className='btn btnMain IBMSMActionBtn'
          role='button'
          onClick={() => navigate(appRoutes.mods)}
        >
          View All
        </a>
      </div>
    </div>
  )
}

const Spinner = () => {
  return (
    <div className='spinner'>
      <div className='spinnerCircle'></div>
    </div>
  )
}

const DisplayLatestBlogs = () => {
  const [blogs, setBlogs] = useState<Partial<BlogCardDetails>[]>()
  const { fetchEvents } = useNDKContext()
  const [filterOptions] = useLocalStorage('filter-blog-curated', {
    sort: SortBy.Latest,
    nsfw: NSFWFilter.Hide_NSFW
  })
  useDidMount(() => {
    const fetchBlogs = async () => {
      try {
        // Show maximum of 4 blog posts
        // 2 should be featured and the most recent 2 from blog npubs
        // Populate the filter from known naddr (constants.ts)
        const filter: NDKFilter = {
          kinds: [kinds.LongFormArticle],
          authors: [],
          '#d': []
        }
        for (let i = 0; i < LANDING_PAGE_DATA.featuredBlogPosts.length; i++) {
          try {
            const naddr = LANDING_PAGE_DATA.featuredBlogPosts[i]
            const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
            const { pubkey, identifier } = decoded.data
            if (!filter.authors?.includes(pubkey)) {
              filter.authors?.push(pubkey)
            }
            if (!filter.authors?.includes(identifier)) {
              filter['#d']?.push(identifier)
            }
          } catch (error) {
            // Silently ignore
          }
        }

        // Prepare filter for the latest
        const blogNpubs = import.meta.env.VITE_BLOG_NPUBS.split(',')
        const blogHexkeys = blogNpubs
          .map(npubToHex)
          .filter((hexkey) => hexkey !== null)

        // We fetch more posts in case of duplicates (from featured)
        const latestFilter: NDKFilter = {
          authors: blogHexkeys,
          kinds: [kinds.LongFormArticle],
          limit: 4
        }

        // Filter by NSFW tag
        if (filterOptions.nsfw === NSFWFilter.Only_NSFW) {
          latestFilter['#L'] = ['content-warning']
        } else if (filterOptions.nsfw === NSFWFilter.Hide_NSFW) {
          // Up the limit in case we fetch multiple NSFW blogs
          latestFilter.limit = PROFILE_BLOG_FILTER_LIMIT
        }

        const results = await Promise.allSettled([
          fetchEvents(filter),
          fetchEvents(latestFilter)
        ])

        const events: NDKEvent[] = []
        // Get featured blogs posts result
        results.forEach((r) => {
          // Add events from both promises to the array
          if (r.status === 'fulfilled' && r.value) {
            events.push(...r.value)
          }
        })

        // Remove duplicates
        const unique = Array.from(
          events
            .reduce((map, obj) => {
              map.set(obj.id, obj)
              return map
            }, new Map())
            .values()
        )
          .map(extractBlogCardDetails)
          .filter(
            (b) => !(b.nsfw && filterOptions.nsfw === NSFWFilter.Hide_NSFW)
          )

        const latest = unique.slice(0, 4)
        setBlogs(latest)
      } catch (error) {
        log(
          true,
          LogType.Error,
          'An error occurred in fetching blog details from relays',
          error
        )
        return null
      }
    }

    fetchBlogs()
  })

  return (
    <div className='IBMSecMain IBMSMListWrapper'>
      <div className='IBMSMTitleMain'>
        <h2 className='IBMSMTitleMainHeading'>Blog Posts</h2>
      </div>
      <div className='IBMSMList'>
        {blogs?.map((b) => (
          <BlogCard key={b.id} {...b} />
        ))}
      </div>

      <div className='IBMSMAction'>
        <Link
          className='btn btnMain IBMSMActionBtn'
          role='button'
          to={appRoutes.blogs}
        >
          View All
        </Link>
      </div>
    </div>
  )
}