From 635f8e7813a3bcfecda4a789959ebc58689ed215 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Sun, 14 May 2023 21:22:43 +0900 Subject: [PATCH] fix build errors --- .eslintrc.json | 5 +- src/components/Article/Article.Body.tsx | 2 +- .../Article.FromSameAuthorsArticles.tsx | 2 +- src/components/Post/Post.tsx | 16 +++++-- src/components/ProgressBar/ProgressBar.tsx | 8 ++-- .../ResponsiveImage/ResponsiveImage.tsx | 6 ++- src/components/Searchbar/Searchbar.tsx | 46 +++++++++---------- src/pages/api/og.tsx | 2 +- src/pages/search.tsx | 2 + 9 files changed, 52 insertions(+), 37 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..f0f3abe 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,6 @@ { - "extends": "next/core-web-vitals" + "extends": "next/core-web-vitals", + "rules": { + "@next/next/no-img-element": "off" + } } diff --git a/src/components/Article/Article.Body.tsx b/src/components/Article/Article.Body.tsx index 448493a..190c2ea 100644 --- a/src/components/Article/Article.Body.tsx +++ b/src/components/Article/Article.Body.tsx @@ -23,7 +23,7 @@ export default function ArticleBody({ data }: Props) { if (resultsNumber !== null) { setResultsHelperText(data.article.title) } - }, [resultsNumber]) + }, [resultsNumber, data.article.title, setResultsHelperText]) const ids = searchResultBlocks?.map((block) => block.doc._additional.id) diff --git a/src/components/Article/Footer/Article.FromSameAuthorsArticles.tsx b/src/components/Article/Footer/Article.FromSameAuthorsArticles.tsx index ae0f3c5..6f20acf 100644 --- a/src/components/Article/Footer/Article.FromSameAuthorsArticles.tsx +++ b/src/components/Article/Footer/Article.FromSameAuthorsArticles.tsx @@ -5,7 +5,7 @@ import { Collapse } from '@/components/Collapse' const FromSameAuthorsArticles = ({ data }: { data: GoogleDocEnhanced[] }) => data.length > 0 ? ( - + {data.map((article, idx) => ( ))} diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx index 88965f0..bd2d32d 100644 --- a/src/components/Post/Post.tsx +++ b/src/components/Post/Post.tsx @@ -99,7 +99,7 @@ export default function Post({ }, ...props }: PostProps) { - const date = new Date(dateStr) + const _date = useMemo(() => new Date(dateStr), [dateStr]) const _title = useMemo( () => ( @@ -138,7 +138,15 @@ export default function Post({ ) } - }, [showImage, coverImage, aspectRatio, postType, _title, _description]) + }, [ + showImage, + coverImage, + aspectRatio, + postType, + imageProps, + _title, + _description, + ]) const _header = useMemo(() => { if (postType === 'body') @@ -151,7 +159,7 @@ export default function Post({ • - {date.toLocaleString('en-GB', { + {_date.toLocaleString('en-GB', { day: 'numeric', month: 'long', // TODO: Should be uppercase year: 'numeric', @@ -162,7 +170,7 @@ export default function Post({ ) - }, [postType, classType, date, _title]) + }, [postType, classType, _date, _title]) return ( diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 171c7ee..1c07a47 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -1,21 +1,21 @@ import useIsDarkState from '@/states/isDarkState/isDarkState' import { defaultThemes } from '@acid-info/lsd-react' import NextNProgress from 'nextjs-progressbar' -import { useEffect, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' export const ProgressBar = () => { const isDark = useIsDarkState().get() - const getColor = () => { + const getColor = useCallback(() => { if (isDark) { return `rgb(${defaultThemes.dark.palette.primary})` } else { return `rgb(${defaultThemes.dark.palette.secondary})` } - } + }, [isDark]) const [color, setColor] = useState(getColor()) - useEffect(() => setColor(getColor()), [isDark]) + useEffect(() => setColor(getColor()), [isDark, getColor]) return ( { const [loaded, setLoaded] = useState(false) @@ -48,8 +50,8 @@ export const ResponsiveImage = ({ background: 'red', }} > - - + {alt} + {alt} ) } diff --git a/src/components/Searchbar/Searchbar.tsx b/src/components/Searchbar/Searchbar.tsx index 14ac4c6..6d7ea94 100644 --- a/src/components/Searchbar/Searchbar.tsx +++ b/src/components/Searchbar/Searchbar.tsx @@ -54,30 +54,30 @@ export default function Searchbar(props: SearchbarProps) { const isArticlePage = router.pathname === '/article/[slug]' - const performSearch = async ( - q: string = query, - _filterTags: string[] = filterTags, - ) => { - //if it is article page, just call onSearch - if (isArticlePage) { - if (onSearch) { - onSearch(q, _filterTags) + const performSearch = useCallback( + async (q: string = query, _filterTags: string[] = filterTags) => { + //if it is article page, just call onSearch + if (isArticlePage) { + if (onSearch) { + onSearch(q, _filterTags) + } + return } - return - } - await router.push( - { - pathname: '/search', - query: { - ...addQueryToQuery(q), - ...addTopicsToQuery(_filterTags), + await router.push( + { + pathname: '/search', + query: { + ...addQueryToQuery(q), + ...addTopicsToQuery(_filterTags), + }, }, - }, - undefined, - { shallow: true }, - ) - } + undefined, + { shallow: true }, + ) + }, + [isArticlePage, router, filterTags, onSearch, query], + ) useEffect(() => { setQuery(extractQueryFromQuery(router.query)) @@ -87,7 +87,7 @@ export default function Searchbar(props: SearchbarProps) { } else { setSearchScope(ESearchScope.GLOBAL) } - }, [router.query.query, router.query.topics]) + }, [router.query, router.query.topics, router.pathname]) const performClear = useCallback(() => { if (!isArticlePage) { @@ -99,7 +99,7 @@ export default function Searchbar(props: SearchbarProps) { setFilterTags([]) setActive(false) onReset && onReset() - }, [setQuery, setFilterTags]) + }, [isArticlePage, onReset, performSearch, setQuery, setFilterTags]) const handleTagClick = (tag: string) => { let newSelectedTags = [...filterTags] diff --git a/src/pages/api/og.tsx b/src/pages/api/og.tsx index 26c0035..ac01b86 100644 --- a/src/pages/api/og.tsx +++ b/src/pages/api/og.tsx @@ -27,7 +27,7 @@ export default async function handler() { alignItems: 'center', }} > - + og-image ), { diff --git a/src/pages/search.tsx b/src/pages/search.tsx index 871c6c0..aa45cfa 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -63,6 +63,8 @@ export default function SearchPage({ articles.reset(initialArticles) blocks.reset(initialBlocks) } + // if we follow the eslint, we will have an infinite loop + // eslint-disable-next-line react-hooks/exhaustive-deps }, [mounted, router.query]) return (