degmods.com/src/pages/search.tsx

import { NDKEvent, NDKUserProfile, profileFromEvent } from '@nostr-dev-kit/ndk'
import { ErrorBoundary } from 'components/ErrorBoundary'
import { GameCard } from 'components/GameCard'
import { LoadingSpinner } from 'components/LoadingSpinner'
import { ModCard } from 'components/ModCard'
import { Pagination } from 'components/Pagination'
import { Profile } from 'components/ProfileSection'
import {
  MAX_GAMES_PER_PAGE,
  MAX_MODS_PER_PAGE,
  T_TAG_VALUE
} from 'constants.ts'
import { RelayController } from 'controllers'
import { useAppSelector, useGames, useMuteLists } from 'hooks'
import { Filter, kinds } from 'nostr-tools'
import { Subscription } from 'nostr-tools/abstract-relay'
import React, {
  Dispatch,
  SetStateAction,
  useEffect,
  useMemo,
  useRef,
  useState
} from 'react'
import { useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import { ModDetails, MuteLists } from 'types'
import { extractModData, isModDataComplete, log, LogType } from 'utils'

enum SortByEnum {
  Latest = 'Latest',
  Oldest = 'Oldest',
  Best_Rated = 'Best Rated',
  Worst_Rated = 'Worst Rated'
}

enum ModeratedFilterEnum {
  Moderated = 'Moderated',
  Unmoderated = 'Unmoderated',
  Unmoderated_Fully = 'Unmoderated Fully'
}

enum SearchingFilterEnum {
  Mods = 'Mods',
  Games = 'Games',
  Users = 'Users'
}

interface FilterOptions {
  sort: SortByEnum
  moderated: ModeratedFilterEnum
  searching: SearchingFilterEnum
  source: string
}

export const SearchPage = () => {
  const [searchParams] = useSearchParams()

  const muteLists = useMuteLists()
  const searchTermRef = useRef<HTMLInputElement>(null)
  const [filterOptions, setFilterOptions] = useState<FilterOptions>({
    sort: SortByEnum.Latest,
    moderated: ModeratedFilterEnum.Moderated,
    source: window.location.host,
    searching:
      (searchParams.get('searching') as SearchingFilterEnum) ||
      SearchingFilterEnum.Mods
  })
  const [searchTerm, setSearchTerm] = useState(
    searchParams.get('searchTerm') || ''
  )

  const handleSearch = () => {
    const value = searchTermRef.current?.value || '' // Access the input value from the ref
    setSearchTerm(value)
  }

  // Handle "Enter" key press inside the input
  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      handleSearch()
    }
  }

  return (
    <div className='InnerBodyMain'>
      <div className='ContainerMain'>
        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
          <div className='IBMSecMain'>
            <div className='SearchMainWrapper'>
              <div className='IBMSMTitleMain'>
                <h2 className='IBMSMTitleMainHeading'>
                  Search:&nbsp;
                  <span className='IBMSMTitleMainHeadingSpan'>
                    {searchTerm}
                  </span>
                </h2>
              </div>
              <div className='SearchMain'>
                <div className='SearchMainInside'>
                  <div className='SearchMainInsideWrapper'>
                    <input
                      type='text'
                      className='SMIWInput'
                      ref={searchTermRef}
                      onKeyDown={handleKeyDown}
                      placeholder='Enter search term'
                    />
                    <button
                      className='btn btnMain SMIWButton'
                      type='button'
                      onClick={handleSearch}
                    >
                      <svg
                        xmlns='http://www.w3.org/2000/svg'
                        viewBox='0 0 512 512'
                        width='1em'
                        height='1em'
                        fill='currentColor'
                      >
                        <path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <Filters
            filterOptions={filterOptions}
            setFilterOptions={setFilterOptions}
          />
          {filterOptions.searching === SearchingFilterEnum.Mods && (
            <ModsResult
              searchTerm={searchTerm}
              filterOptions={filterOptions}
              muteLists={muteLists}
            />
          )}
          {filterOptions.searching === SearchingFilterEnum.Users && (
            <UsersResult
              searchTerm={searchTerm}
              muteLists={muteLists}
              moderationFilter={filterOptions.moderated}
            />
          )}
          {filterOptions.searching === SearchingFilterEnum.Games && (
            <GamesResult searchTerm={searchTerm} />
          )}
        </div>
      </div>
    </div>
  )
}

type FiltersProps = {
  filterOptions: FilterOptions
  setFilterOptions: Dispatch<SetStateAction<FilterOptions>>
}

const Filters = React.memo(
  ({ filterOptions, setFilterOptions }: FiltersProps) => {
    const userState = useAppSelector((state) => state.user)

    return (
      <div className='IBMSecMain'>
        <div className='FiltersMain'>
          {filterOptions.searching === SearchingFilterEnum.Mods && (
            <div className='FiltersMainElement'>
              <div className='dropdown dropdownMain'>
                <button
                  className='btn dropdown-toggle btnMain btnMainDropdown'
                  aria-expanded='false'
                  data-bs-toggle='dropdown'
                  type='button'
                >
                  {filterOptions.sort}
                </button>

                <div className='dropdown-menu dropdownMainMenu'>
                  {Object.values(SortByEnum).map((item, index) => (
                    <div
                      key={`sortByItem-${index}`}
                      className='dropdown-item dropdownMainMenuItem'
                      onClick={() =>
                        setFilterOptions((prev) => ({
                          ...prev,
                          sort: item
                        }))
                      }
                    >
                      {item}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {(filterOptions.searching === SearchingFilterEnum.Mods ||
            filterOptions.searching === SearchingFilterEnum.Users) && (
            <div className='FiltersMainElement'>
              <div className='dropdown dropdownMain'>
                <button
                  className='btn dropdown-toggle btnMain btnMainDropdown'
                  aria-expanded='false'
                  data-bs-toggle='dropdown'
                  type='button'
                >
                  {filterOptions.moderated}
                </button>
                <div className='dropdown-menu dropdownMainMenu'>
                  {Object.values(ModeratedFilterEnum).map((item, index) => {
                    if (item === ModeratedFilterEnum.Unmoderated_Fully) {
                      const isAdmin =
                        userState.user?.npub ===
                        import.meta.env.VITE_REPORTING_NPUB

                      if (!isAdmin) return null
                    }

                    return (
                      <div
                        key={`moderatedFilterItem-${index}`}
                        className='dropdown-item dropdownMainMenuItem'
                        onClick={() =>
                          setFilterOptions((prev) => ({
                            ...prev,
                            moderated: item
                          }))
                        }
                      >
                        {item}
                      </div>
                    )
                  })}
                </div>
              </div>
            </div>
          )}

          {filterOptions.searching === SearchingFilterEnum.Mods && (
            <div className='FiltersMainElement'>
              <div className='dropdown dropdownMain'>
                <button
                  className='btn dropdown-toggle btnMain btnMainDropdown'
                  aria-expanded='false'
                  data-bs-toggle='dropdown'
                  type='button'
                >
                  {filterOptions.source === window.location.host
                    ? `Show From: ${filterOptions.source}`
                    : 'Show All'}
                </button>
                <div className='dropdown-menu dropdownMainMenu'>
                  <div
                    className='dropdown-item dropdownMainMenuItem'
                    onClick={() =>
                      setFilterOptions((prev) => ({
                        ...prev,
                        source: window.location.host
                      }))
                    }
                  >
                    Show From: {window.location.host}
                  </div>
                  <div
                    className='dropdown-item dropdownMainMenuItem'
                    onClick={() =>
                      setFilterOptions((prev) => ({
                        ...prev,
                        source: 'Show All'
                      }))
                    }
                  >
                    Show All
                  </div>
                </div>
              </div>
            </div>
          )}

          <div className='FiltersMainElement'>
            <div className='dropdown dropdownMain'>
              <button
                className='btn dropdown-toggle btnMain btnMainDropdown'
                aria-expanded='false'
                data-bs-toggle='dropdown'
                type='button'
              >
                Searching: {filterOptions.searching}
              </button>
              <div className='dropdown-menu dropdownMainMenu'>
                {Object.values(SearchingFilterEnum).map((item, index) => (
                  <div
                    key={`searchingFilterItem-${index}`}
                    className='dropdown-item dropdownMainMenuItem'
                    onClick={() =>
                      setFilterOptions((prev) => ({
                        ...prev,
                        searching: item
                      }))
                    }
                  >
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
)

type ModsResultProps = {
  filterOptions: FilterOptions
  searchTerm: string
  muteLists: {
    admin: MuteLists
    user: MuteLists
  }
}

const ModsResult = ({
  filterOptions,
  searchTerm,
  muteLists
}: ModsResultProps) => {
  const hasEffectRun = useRef(false)
  const [isSubscribing, setIsSubscribing] = useState(false)
  const [mods, setMods] = useState<ModDetails[]>([])
  const [page, setPage] = useState(1)
  const userState = useAppSelector((state) => state.user)

  useEffect(() => {
    if (hasEffectRun.current) {
      return
    }

    hasEffectRun.current = true // Set it so the effect doesn't run again

    const filter: Filter = {
      kinds: [kinds.ClassifiedListing],
      '#t': [T_TAG_VALUE]
    }

    setIsSubscribing(true)

    let subscriptions: Subscription[] = []

    RelayController.getInstance()
      .subscribeForEvents(filter, [], (event) => {
        if (isModDataComplete(event)) {
          const mod = extractModData(event)
          setMods((prev) => [...prev, mod])
        }
      })
      .then((subs) => {
        subscriptions = subs
      })
      .catch((err) => {
        log(
          true,
          LogType.Error,
          'An error occurred in subscribing to relays.',
          err
        )
        toast.error(err.message || err)
      })
      .finally(() => {
        setIsSubscribing(false)
      })

    // Cleanup function to stop all subscriptions
    return () => {
      subscriptions.forEach((sub) => sub.close()) // close each subscription
    }
  }, [])

  useEffect(() => {
    setPage(1)
  }, [searchTerm])

  const filteredMods = useMemo(() => {
    if (searchTerm === '') return []

    const lowerCaseSearchTerm = searchTerm.toLowerCase()

    const filterFn = (mod: ModDetails) =>
      mod.title.toLowerCase().includes(lowerCaseSearchTerm) ||
      mod.game.toLowerCase().includes(lowerCaseSearchTerm) ||
      mod.summary.toLowerCase().includes(lowerCaseSearchTerm) ||
      mod.body.toLowerCase().includes(lowerCaseSearchTerm) ||
      mod.tags.findIndex((tag) =>
        tag.toLowerCase().includes(lowerCaseSearchTerm)
      ) > -1

    return mods.filter(filterFn)
  }, [mods, searchTerm])

  const filteredModList = useMemo(() => {
    let filtered: ModDetails[] = [...filteredMods]

    if (filterOptions.source === window.location.host) {
      filtered = filtered.filter((mod) => mod.rTag === window.location.host)
    }

    const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
    const isUnmoderatedFully =
      filterOptions.moderated === ModeratedFilterEnum.Unmoderated_Fully

    // Only apply filtering if the user is not an admin or the admin has not selected "Unmoderated Fully"
    if (!(isAdmin && isUnmoderatedFully)) {
      filtered = filtered.filter(
        (mod) =>
          !muteLists.admin.authors.includes(mod.author) &&
          !muteLists.admin.replaceableEvents.includes(mod.aTag)
      )
    }

    if (filterOptions.moderated === ModeratedFilterEnum.Moderated) {
      filtered = filtered.filter(
        (mod) =>
          !muteLists.user.authors.includes(mod.author) &&
          !muteLists.user.replaceableEvents.includes(mod.aTag)
      )
    }

    if (filterOptions.sort === SortByEnum.Latest) {
      filtered.sort((a, b) => b.published_at - a.published_at)
    } else if (filterOptions.sort === SortByEnum.Oldest) {
      filtered.sort((a, b) => a.published_at - b.published_at)
    }

    return filtered
  }, [
    filteredMods,
    userState.user?.npub,
    filterOptions.sort,
    filterOptions.moderated,
    filterOptions.source,
    muteLists
  ])

  const handleNext = () => {
    setPage((prev) => prev + 1)
  }

  const handlePrev = () => {
    setPage((prev) => prev - 1)
  }

  return (
    <>
      {isSubscribing && (
        <LoadingSpinner desc='Subscribing to relays for mods' />
      )}
      <div className='IBMSecMain IBMSMListWrapper'>
        <div className='IBMSMList'>
          {filteredModList
            .slice((page - 1) * MAX_MODS_PER_PAGE, page * MAX_MODS_PER_PAGE)
            .map((mod) => (
              <ModCard key={mod.id} {...mod} />
            ))}
        </div>
      </div>
      <Pagination
        page={page}
        disabledNext={filteredModList.length <= page * MAX_MODS_PER_PAGE}
        handlePrev={handlePrev}
        handleNext={handleNext}
      />
    </>
  )
}

type UsersResultProps = {
  searchTerm: string
  moderationFilter: ModeratedFilterEnum
  muteLists: {
    admin: MuteLists
    user: MuteLists
  }
}

const UsersResult = ({
  searchTerm,
  moderationFilter,
  muteLists
}: UsersResultProps) => {
  const [isFetching, setIsFetching] = useState(false)
  const [profiles, setProfiles] = useState<NDKUserProfile[]>([])

  const userState = useAppSelector((state) => state.user)

  useEffect(() => {
    if (searchTerm === '') {
      setProfiles([])
    } else {
      const filter: Filter = {
        kinds: [kinds.Metadata],
        search: searchTerm
      }

      setIsFetching(true)
      RelayController.getInstance()
        .fetchEvents(filter, ['wss://purplepag.es', 'wss://user.kindpag.es'])
        .then((events) => {
          const results = events.map((event) => {
            const ndkEvent = new NDKEvent(undefined, event)
            const profile = profileFromEvent(ndkEvent)
            return profile
          })
          setProfiles(results)
        })
        .catch((err) => {
          log(true, LogType.Error, 'An error occurred in fetching users', err)
        })
        .finally(() => {
          setIsFetching(false)
        })
    }
  }, [searchTerm])

  const filteredProfiles = useMemo(() => {
    let filtered = [...profiles]
    const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
    const isUnmoderatedFully =
      moderationFilter === ModeratedFilterEnum.Unmoderated_Fully

    // Only apply filtering if the user is not an admin or the admin has not selected "Unmoderated Fully"
    if (!(isAdmin && isUnmoderatedFully)) {
      filtered = filtered.filter(
        (profile) => !muteLists.admin.authors.includes(profile.pubkey as string)
      )
    }

    if (moderationFilter === ModeratedFilterEnum.Moderated) {
      filtered = filtered.filter(
        (profile) => !muteLists.user.authors.includes(profile.pubkey as string)
      )
    }

    return filtered
  }, [userState.user?.npub, moderationFilter, profiles, muteLists])
  return (
    <>
      {isFetching && <LoadingSpinner desc='Fetching Profiles' />}
      <div className='IBMSecMain IBMSMListWrapper'>
        <div className='IBMSMList'>
          {filteredProfiles.map((profile) => {
            if (profile.pubkey) {
              const displayName =
                profile?.displayName || profile?.name || '[name not set up]'
              const about = profile?.bio || profile?.about || '[bio not set up]'

              return (
                <ErrorBoundary key={profile.pubkey}>
                  <Profile
                    pubkey={profile.pubkey as string}
                    displayName={displayName}
                    about={about}
                    image={profile?.image}
                    nip05={profile?.nip05}
                    lud16={profile?.lud16}
                  />
                </ErrorBoundary>
              )
            }

            return null
          })}
        </div>
      </div>
    </>
  )
}

type GamesResultProps = {
  searchTerm: string
}

const GamesResult = ({ searchTerm }: GamesResultProps) => {
  const games = useGames()
  const [page, setPage] = useState(1)

  // Reset the page to 1 whenever searchTerm changes
  useEffect(() => {
    setPage(1)
  }, [searchTerm])

  const filteredGames = useMemo(() => {
    if (searchTerm === '') return []

    const lowerCaseSearchTerm = searchTerm.toLowerCase()

    return games.filter((game) =>
      game['Game Name'].toLowerCase().includes(lowerCaseSearchTerm)
    )
  }, [searchTerm, games])

  const handleNext = () => {
    setPage((prev) => prev + 1)
  }

  const handlePrev = () => {
    setPage((prev) => prev - 1)
  }

  return (
    <>
      <div className='IBMSecMain IBMSMListWrapper'>
        <div className='IBMSMList IBMSMListFeaturedAlt'>
          {filteredGames
            .slice((page - 1) * MAX_GAMES_PER_PAGE, page * MAX_GAMES_PER_PAGE)
            .map((game) => (
              <GameCard
                key={game['Game Name']}
                title={game['Game Name']}
                imageUrl={game['Boxart image']}
              />
            ))}
        </div>
      </div>
      <Pagination
        page={page}
        disabledNext={filteredGames.length <= page * MAX_GAMES_PER_PAGE}
        handlePrev={handlePrev}
        handleNext={handleNext}
      />
    </>
  )
}