feat: add feature to load load inifnite words

src/App.tsx

@@ -1,15 +1,59 @@
 import React from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+ ChakraProvider,
+ theme,
+ Tabs,
+ TabList,
+ TabPanels,
+ Tab,
+ TabPanel,
+ Flex,
+ Box,
+} from '@chakra-ui/react'
 
-import { WordsGrid } from 'features/wordslist/components/WordsGrid'
+import { WordsList } from 'features/wordslist/components/WordsList'
+import { FavoritesList } from 'features/wordslist/components/FavoritesList'
+import { WordsProvider } from 'contexts/Words'
 
 // Create a client
 const queryClient = new QueryClient()
 
 export function App() {
  return (
  <QueryClientProvider client={queryClient}>
- <WordsGrid />
+ <ChakraProvider theme={theme}>
+ <WordsProvider>
+ <Flex
+ width="100vw"
+ flexDirection={['column', 'row']}
+ padding="20px 10px">
+ <Box flex="1"></Box>
+
+ <Flex
+ flex="1"
+ flexDirection="row"
+ maxWidth={'50vw'}>
+ <Tabs>
+ <TabList>
+ <Tab>Word list</Tab>
+ <Tab>Favorites</Tab>
+ </TabList>
+
+ <TabPanels>
+ <TabPanel>
+ <WordsList />
+ </TabPanel>
+
+ <TabPanel>
+ <FavoritesList />
+ </TabPanel>
+ </TabPanels>
+ </Tabs>
+ </Flex>
+ </Flex>
+ </WordsProvider>
+ </ChakraProvider>
  </QueryClientProvider>
  )
 }

src/components/InfiniteScrollGrid/InfiniteScrollGrid.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react'
+
+import { Grid, GridProps } from '@chakra-ui/react'
+import { useInView } from 'react-intersection-observer'
+
+export interface InfiniteScrollGridProps extends GridProps {
+ onViewChange?: () => void
+}
+
+export function InfiniteScrollGrid({
+ onViewChange = () => void 0,
+ children,
+ maxHeight = 'md',
+ templateColumns = ['repeat(3, 1fr)', 'repeat(4, 1fr)', 'repeat(5, 1fr)'],
+ gap = 0,
+ ...props
+}: InfiniteScrollGridProps) {
+ const { ref, inView } = useInView()
+
+ useEffect(() => {
+ onViewChange()
+ }, [onViewChange, inView])
+
+ return (
+ <Grid
+ templateColumns={templateColumns}
+ gap={gap}
+ overflowY="scroll"
+ maxHeight={maxHeight}
+ {...props}>
+ {children}
+ <div ref={ref} />
+ </Grid>
+ )
+}
+
+export default InfiniteScrollGrid

src/components/InfiniteScrollGrid/index.ts

@@ -0,0 +1,4 @@
+import { InfiniteScrollGrid } from './InfiniteScrollGrid'
+
+export { InfiniteScrollGrid }
+export default InfiniteScrollGrid

src/contexts/Words.tsx

@@ -1,38 +1,46 @@
 import React, { createContext, ReactNode, useEffect, useState } from 'react'
+import { QueryStatus } from '@tanstack/react-query'
+import { AxiosResponse } from 'axios'
 
-import useLocalStorage from 'hooks/useLocalStorage.js'
-import { Dictionary as DictionaryService } from 'services/Dictionary.js'
-import { WordDefinitionResponse } from 'models/WordDefinition'
+import useLocalStorage from 'hooks/useLocalStorage'
+import { Dictionary as DictionaryService } from 'services/Dictionary'
+import { IWordDefinition } from 'models/WordDefinition'
 import { useFetch } from 'hooks/useQuery'
+import { IWord } from 'models/Word'
 
 const useFavoriteWord = () => {
  const [storage, setStorage] = useLocalStorage('@word-meaning/favorites')
 
  return {
- add({ word = '' } = { word: '' }): void {
- setStorage([...storage, word])
+ add(item: IWord): void {
+ setStorage([...storage, item])
  },
 
- remove({ word = '' } = { word: '' }): void {
- setStorage(storage.filter((w: string) => w !== word))
+ remove({ id }: IWord): void {
+ setStorage(storage.filter((saved: IWord) => saved.id !== id))
  },
 
- has({ word = '' } = { word: '' }): boolean {
- return storage.includes(word)
+ has({ id }: IWord): boolean {
+ return storage.some((saved: IWord) => saved.id === id)
  },
 
- getAll(): string[] {
+ getAll(): IWord[] {
  return storage
  },
  }
 }
 
 interface WordsContextInterface {
- favoriteWord: object
- selectedWord: string
- setSelectedWord: React.Dispatch<React.SetStateAction<string>>
- fetchWordDefinitionStatus: 'error' | 'success' | 'loading'
- wordDefinition: WordDefinitionResponse | undefined
+ favoriteWord: {
+ add(item: IWord): void
+ remove({ id }: IWord): void
+ has({ id }: IWord): boolean
+ getAll(): IWord[]
+ }
+ selectedWord: IWord
+ setSelectedWord: React.Dispatch<React.SetStateAction<IWord>>
+ fetchWordDefinitionStatus: QueryStatus
+ wordDefinition: AxiosResponse<IWordDefinition[]> | undefined
 }
 
 const WordsContext = createContext({} as WordsContextInterface)
@@ -43,20 +51,22 @@ interface Props {
 
 const WordsProvider = ({ children }: Props) => {
  const favoriteWord = useFavoriteWord()
- const [selectedWord, setSelectedWord] = useState('')
+ const [selectedWord, setSelectedWord] = useState({} as IWord)
 
  const {
  refetch,
  data: wordDefinition,
  status: fetchWordDefinitionStatus,
- } = useFetch<WordDefinitionResponse>({
- queryKey: ['word-definition', selectedWord],
- queryFn: () => DictionaryService.findOne({ word: selectedWord }),
+ } = useFetch<IWordDefinition[]>({
+ queryKey: ['word-definition'],
+ queryFn: () => DictionaryService.findOne(selectedWord),
  enabled: false,
  })
 
  useEffect(() => {
- refetch()
+ if (selectedWord) {
+ refetch()
+ }
  }, [refetch, selectedWord])
 
  return (

src/features/wordslist/components/FavoritesList/FavoritesList.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+
+import { Item } from 'features/wordslist/components/Item'
+import { useWordContext } from 'hooks/useWordContext'
+import { InfiniteScrollGrid } from 'components/InfiniteScrollGrid'
+
+interface Props {}
+
+export function FavoritesList({}: Props) {
+ const { favoriteWord } = useWordContext()
+ const [favorites] = useState(favoriteWord.getAll())
+
+ return (
+ <InfiniteScrollGrid>
+ {favorites.map(favorite => (
+ <Item
+ key={favorite.id}
+ data={favorite}
+ />
+ ))}
+ </InfiniteScrollGrid>
+ )
+}
+
+export default FavoritesList

src/features/wordslist/components/FavoritesList/index.ts

@@ -0,0 +1,3 @@
+import { FavoritesList } from './FavoritesList'
+
+export { FavoritesList }

src/features/wordslist/components/Item/Item.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { GridItem, GridItemProps } from '@chakra-ui/react'
+
+import { IWord } from 'models/Word'
+import useWordContext from 'hooks/useWordContext'
+
+export interface ItemProps extends GridItemProps {
+ isFavorite?: boolean
+ data: IWord
+}
+
+export function Item({
+ children,
+ isFavorite,
+ data,
+ borderColor = 'blackAlpha.300',
+ ...props
+}: ItemProps) {
+ const { setSelectedWord } = useWordContext()
+
+ return (
+ <GridItem
+ borderStyle="solid"
+ borderWidth={1}
+ borderColor={borderColor}
+ textAlign="center"
+ cursor="pointer"
+ padding={[2, 5]}
+ onClick={() => setSelectedWord(data)}
+ wordBreak="break-all"
+ {...props}>
+ {data.word}
+ </GridItem>
+ )
+}
+
+export default Item

src/features/wordslist/components/Item/index.ts

@@ -0,0 +1,4 @@
+import { Item } from './Item'
+
+export { Item }
+export default Item

src/features/wordslist/components/WordsList/WordsList.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import useWordsLoadMore from 'features/wordslist/hooks/useWordsLoadMore'
+import { Item } from 'features/wordslist/components/Item'
+import { useWordContext } from 'hooks/useWordContext'
+import { InfiniteScrollGrid } from 'components/InfiniteScrollGrid'
+
+interface Props {}
+
+export function WordsList({}: Props) {
+ const { data, fetchNextPage } = useWordsLoadMore()
+ const { favoriteWord } = useWordContext()
+
+ return (
+ <InfiniteScrollGrid onViewChange={fetchNextPage}>
+ {data?.pages.map((page, i) => {
+ return (
+ <React.Fragment key={i}>
+ {page.data.map(word => (
+ <Item
+ key={word.id}
+ data={word}
+ />
+ ))}
+ </React.Fragment>
+ )
+ })}
+ </InfiniteScrollGrid>
+ )
+}
+
+export default WordsList

src/features/wordslist/components/WordsList/index.ts

@@ -0,0 +1,3 @@
+import { WordsList } from './WordsList'
+
+export { WordsList }