React

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: { external: ['os'] }
  }
})

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

/**
 * Interface representing a Pokemon data object.
 */
export interface Pokemon {
  id: string
  image_url: string
  caption: string
  name: string
  hp: number
  set_name: string
}

import { useState, useEffect } from 'react'
import Boox, { type SearchResult } from 'boox'
import { useDebounce } from 'use-debounce'
import type { Pokemon } from '../types'
import SearchInfo from './SearchInfo'
import SearchResults from './SearchResults'

const DEBOUNCE_DELAY = 300
const PLACEHOLDER_TEXT = 'Search (e.g. pikachu, water pwer)'

interface SearchProps {
  model: Boox<Pokemon>
}

const Search: React.FC<SearchProps> = ({ model }) => {
  const [input, setInput] = useState('')
  const [results, setResults] = useState<SearchResult<Pokemon>[]>([])
  const [query] = useDebounce(input, DEBOUNCE_DELAY)

  useEffect(() => {
    const performSearch = async () => {
      if (!query) {
        setResults([])
        return
      }

      const searchResults = await model.search(query)
      setResults(searchResults)
    }

    performSearch()
  }, [model, query])

  const totalDocuments = Object.keys(model.currentState.documents).length

  return (
    <>
      <form id='search-form' className='p-3' role='search'>
        <div className='form-group'>
          <input
            type='search'
            className='form-control form-control-lg'
            id='search-query'
            placeholder={PLACEHOLDER_TEXT}
            aria-label='Search pokemons'
            autoFocus
            value={input}
            onChange={e => setInput(e.target.value)}
          />

          <div className='form-text'>
            <strong>Note:</strong>
            <span> the </span>
            <code className='bg-body-secondary'>pwer</code>
            <span> demonstrates a typing error for </span>
            <code className='bg-body-secondary'>power</code>.
          </div>
        </div>
      </form>

      <SearchInfo results={results} totalDocuments={totalDocuments} />
      <SearchResults results={results} />
    </>
  )
}

export default Search

import type { SearchResult } from 'boox'
import type { Pokemon } from '../types'

interface SearchInfoProps {
  results: SearchResult<Pokemon>[]
  totalDocuments: number
}

const SearchInfo: React.FC<SearchInfoProps> = ({ results, totalDocuments }) => {
  const { length } = results

  return (
    <p
      id='results-length'
      className={`px-3 text-muted ${length ? '' : 'd-none'}`}
    >
      {length ? `Found ${length} of ${totalDocuments} pokemons` : ''}
    </p>
  )
}

export default SearchInfo

import type { SearchResult } from 'boox'
import type { Pokemon } from '../types'

interface SearchResultProps {
  result: SearchResult<Pokemon>
}

const SearchResultComponent: React.FC<SearchResultProps> = ({ result }) => {
  const {
    image_url,
    name: image_alt,
    hp
  } = result.attributes as unknown as Pokemon
  const { text: name } = result.context('name')
  const { text: set_name } = result.context('set_name')
  const { text: caption } = result.context('caption', 80)

  return (
    <a
      className='list-group-item list-group-item-action d-flex gap-3 py-3'
      href={String(image_url)}
      target='_blank'
      rel='noreferrer'
    >
      <img
        loading='lazy'
        src={image_url}
        alt={image_alt}
        width='32'
        height='32'
        className='rounded-circle flex-shrink-0'
      />
      <div className='d-flex gap-2 w-100 justify-content-between'>
        <div>
          <h6
            className='mb-1'
            dangerouslySetInnerHTML={{ __html: `${name} – ${set_name}` }}
          />
          <p
            className='mb-0 opacity-75'
            dangerouslySetInnerHTML={{ __html: `${caption}...` }}
          />
        </div>
        <small className='opacity-50 text-nowrap'>HP {hp}</small>
      </div>
    </a>
  )
}

export default SearchResultComponent

import type { SearchResult } from 'boox'
import type { Pokemon } from '../types'
import SearchResultComponent from './SearchResult'

interface SearchResultsProps {
  results: SearchResult<Pokemon>[]
}

const SearchResults: React.FC<SearchResultsProps> = ({ results }) => {
  return (
    <div
      id='results'
      className={`list-group list-group-flush overflow-auto rounded-3 ${
        results.length ? 'd-block' : 'd-none'
      }`}
    >
      {results.map(result => (
        <SearchResultComponent key={result.id} result={result} />
      ))}
    </div>
  )
}

export default SearchResults