fix: Ordered imports properly

src/components/AudioPlayer/index.ts

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

src/components/InfiniteScrollGrid/InfiniteScrollGrid.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react'
-
 import { Grid, GridProps } from '@chakra-ui/react'
 import { useInView } from 'react-intersection-observer'
 
@@ -10,7 +9,7 @@ export interface InfiniteScrollGridProps extends GridProps {
 export function InfiniteScrollGrid({
  onViewChange = () => void 0,
  children,
- maxHeight = 'md',
+ maxHeight = 'xl',
  templateColumns = ['repeat(3, 1fr)', 'repeat(4, 1fr)', 'repeat(5, 1fr)'],
  gap = 0,
  ...props

src/contexts/Words.tsx

@@ -1,12 +1,14 @@
 import React, { createContext, ReactNode, useEffect, useState } from 'react'
 import { QueryStatus } from '@tanstack/react-query'
-import { AxiosResponse } from 'axios'
 
-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'
+import { IApiResponse } from 'lib/api'
+
+import { Dictionary as DictionaryService } from 'services/Dictionary'
+
+import useLocalStorage from 'hooks/useLocalStorage'
+import { useFetch } from 'hooks/useQuery'
 
 const useFavoriteWord = () => {
  const [storage, setStorage] = useLocalStorage('@word-meaning/favorites')
@@ -40,7 +42,7 @@ interface WordsContextInterface {
  selectedWord: IWord
  setSelectedWord: React.Dispatch<React.SetStateAction<IWord>>
  fetchWordDefinitionStatus: QueryStatus
- wordDefinition: AxiosResponse<IWordDefinition[]> | undefined
+ wordDefinition: IApiResponse<IWordDefinition[]> | undefined
 }
 
 const WordsContext = createContext({} as WordsContextInterface)

src/features/worddefinition/components/Meaning/Meaning.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react'
+import { Box, BoxProps } from '@chakra-ui/react'
+
+import useWordContext from 'hooks/useWordContext'
+
+interface Props extends BoxProps {
+ children: React.ReactNode
+}
+
+export function Meaning({ ...props }: Props) {
+ const { wordDefinition = { data: [] } } = useWordContext()
+ const [word] = wordDefinition.data
+
+ return (
+ <Box {...props}>
+ {word.meanings.map(meaning => {
+ return meaning.partOfSpeech
+ })}
+ </Box>
+ )
+}
+
+export default Meaning

src/features/worddefinition/components/Meaning/index.ts

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

src/features/worddefinition/components/MeaningNavigation/MeaningNavigation.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react'
+import { Box, BoxProps } from '@chakra-ui/react'
+
+import useWordContext from 'hooks/useWordContext'
+
+interface Props extends BoxProps {
+ children: React.ReactNode
+}
+
+export function MeaningNavigation({ ...props }: Props) {
+ const { wordDefinition = { data: [] } } = useWordContext()
+ const [word] = wordDefinition.data
+
+ return (
+ <Box {...props}>
+ {word.meanings.map(meaning => {
+ return meaning.partOfSpeech
+ })}
+ </Box>
+ )
+}
+
+export default MeaningNavigation

src/features/worddefinition/components/MeaningNavigation/index.ts

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

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

@@ -1,12 +1,10 @@
 import React, { useState } from 'react'
 
 import { Item } from 'features/wordslist/components/Item'
-import { useWordContext } from 'hooks/useWordContext'
 import { InfiniteScrollGrid } from 'components/InfiniteScrollGrid'
+import { useWordContext } from 'hooks/useWordContext'
 
-interface Props {}
-
-export function FavoritesList({}: Props) {
+export function FavoritesList() {
  const { favoriteWord } = useWordContext()
  const [favorites] = useState(favoriteWord.getAll())
 

src/hooks/useQuery.ts

@@ -1,23 +1,23 @@
 import {
- QueryCache,
  useInfiniteQuery,
  useQuery,
  UseQueryOptions,
 } from '@tanstack/react-query'
-import { AxiosResponse } from 'axios'
 
-type QueryKeyT = string[] | String[]
+import { IApiResponse } from 'lib/api'
+
+type QueryKeyT = string[]
 
 export const useFetch = <T>(
- params: UseQueryOptions<AxiosResponse<T>, Error, AxiosResponse<T>, QueryKeyT>
+ params: UseQueryOptions<IApiResponse<T>, Error, IApiResponse<T>, QueryKeyT>
 ) => {
- return useQuery<AxiosResponse<T>, Error, AxiosResponse<T>, QueryKeyT>({
+ return useQuery<IApiResponse<T>, Error, IApiResponse<T>, QueryKeyT>({
  ...params,
  })
 }
 
 export const useLoadMore = <T>(params: object) => {
- return useInfiniteQuery<AxiosResponse<T>, Error, AxiosResponse<T>>({
+ return useInfiniteQuery<IApiResponse<T>, Error, IApiResponse<T>>({
  ...params,
  getNextPageParam: (page: any) => page.headers.link.next || false,
  })

src/lib/api.ts

@@ -1,13 +1,15 @@
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
 
+export interface IApiResponse<T = any, D = any> extends AxiosResponse<T, D> {}
+
 export function api(axiosDefauls: AxiosRequestConfig) {
  const axiosInstance = axios.create(axiosDefauls)
 
  return {
  get<TResponse>(
  url: string,
  config?: AxiosRequestConfig
- ): Promise<AxiosResponse<TResponse>> {
+ ): Promise<IApiResponse<TResponse>> {
  return axiosInstance.get<TResponse>(url, config)
  },
 

src/models/WordDefinition.ts

@@ -5,7 +5,7 @@ export interface Phonetic {
 
 export interface Definition {
  definition: string
- example: string
+ example?: string
  synonyms: string[]
  antonyms: string[]
 }

src/services/Dictionary.ts

@@ -1,13 +1,15 @@
-import { AxiosResponse } from 'axios'
-import { dictionaryAPI } from 'lib/dictionaryAPI'
+import { IApiResponse } from 'lib/api'
 import { IWord } from 'models/Word'
-
 import { IWordDefinition } from 'models/WordDefinition'
 
+import { dictionaryAPI } from 'lib/dictionaryAPI'
+
 const serviceURL: string = '/entries/en'
 
 export const Dictionary = {
- findOne({ word = '' }: IWord): Promise<AxiosResponse<IWordDefinition[]>> {
+ findOne({
+ word = '',
+ }: IWord): Promise<IApiResponse<IWordDefinition[]>> {
  return dictionaryAPI.get<IWordDefinition[]>(`${serviceURL}/${word}`)
  },
 }

src/services/Words.ts

@@ -1,16 +1,16 @@
-import { AxiosResponse } from 'axios'
-import { localAPI } from 'lib/localAPI'
-
+import { IApiResponse } from 'lib/api'
 import { IWord } from 'models/Word'
 
+import { localAPI } from 'lib/localAPI'
+
 const serviceURL: string = '/words'
 
 export const Words = {
  getAll({
  params = { _page: 1, _limit: 15 },
  }: {
  params?: { _page: number; _limit?: number }
- }): Promise<AxiosResponse<IWord[]>> {
+ }): Promise<IApiResponse<IWord[]>> {
  return localAPI.get<IWord[]>(serviceURL, { params })
  },
 }