## Using SWR and using react-query in Immersion Kit Search

## Using SWR

function useDictionary ({keyword, tags, waniKaniLevel, JLPTLevel, sorting, category}) {
  const searchObject = {
    'keyword': keyword,
    'tags': tags,
    'jlpt': JLPTLevel,
    'wk': waniKaniLevel,
    'sort': sorting,
    'category': category
  }
  const searchParams =  new URLSearchParams(searchObject).toString();

  const { data, error } = useSWR(`${process.env.HOST}/look_up_dictionary?${searchParams}`, fetcher)

  let examples = []
  let dictionaryEntries = []
  const hasExamples = data && data.data.length > 0;

  if (hasExamples) {
    examples = data.data[0].examples
    dictionaryEntries = data.data[0].dictionary
  }

  return {
    examples: examples,
    dictionaryEntries: dictionaryEntries,
    isLoading: !error && !data,
    isError: error
  }
}

## Using react-query

function useDictionary ({keyword, tags, waniKaniLevel, JLPTLevel, sorting, category}) {
  const searchObject = {
    'keyword': keyword,
    'tags': tags,
    'jlpt': JLPTLevel,
    'wk': waniKaniLevel,
    'sort': sorting,
    'category': category
  }
  const searchParams =  new URLSearchParams(searchObject).toString();

  const { data, error } = useQuery('lookupDictionary', () =>
     fetch(`${process.env.HOST}/look_up_dictionary?${searchParams}`).then(res =>
       res.json()
     )
   )

  let examples = []
  let dictionaryEntries = []
  const hasExamples = data && data.data.length > 0;

  if (hasExamples) {
    examples = data.data[0].examples
    dictionaryEntries = data.data[0].dictionary
  }

  return {
    examples: examples,
    dictionaryEntries: dictionaryEntries,
    isLoading: !error && !data,
    isError: error
  }
}

## Usage

function Dictionary({metaTags, keyword}) {
  const router = useRouter();
  const [searchKeyword, setSearchKeyword] = useState('');
  const [inputValue, setInputValue] = useState('');
  const [timer, setTimer] = useState(null);
  const [searchTags, setSearchTags] = useState([]);
  const [waniKaniLevel, setWaniKaniLevel] = useState('');
  const [JLPTLevel, setJLPTLevel] = useState('');
  const [sorting, setSorting] = useState('None');
  const [category, setCategory] = useState('');
  const { examples, dictionaryEntries, isLoading, isError } = useDictionary({keyword: searchKeyword, tags:searchTags, waniKaniLevel, JLPTLevel, sorting, category});
  ...
  
  useEffect(() => {
      if (keyword) {
          if (keyword.length > 0) {
            setInputValue(decodeURIComponent(keyword));
            setSearchKeyword(decodeURIComponent(keyword));
          }
      }
  }, [keyword]);
    
  const onChangeSearch = async(event) => {
    const {value} = event.target;
    setInputValue(value);
    
    if (timer) {
      clearTimeout(timer);
      setTimer(null);
    }
    setTimer(
      setTimeout(() => {
        setSearchKeyword(value);
        if (value.length > 0) {
            router.push(`/dictionary?keyword=${value}`, undefined, { shallow: true })
        } else {
            router.push(`/dictionary`, undefined, { shallow: true })
        }

      }, 1000)
    );

  }
  ...
  return (
    <>
      <MediaList
        examples={examples}
        ...
        />
    </>
  )

}

## Website