diff --git a/components/blocks/language-selector.tsx b/components/blocks/language-selector.tsx index 07cfcc89..93923a15 100644 --- a/components/blocks/language-selector.tsx +++ b/components/blocks/language-selector.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next'; import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react'; -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useMemo } from 'react'; import { HiLanguage } from 'react-icons/hi2'; import LanguageDetector from 'i18next-browser-languagedetector'; @@ -18,20 +18,20 @@ const languages: LanguageOption[] = [ const LanguageSelector = ({ bg = 'transparent', size, color }: { bg?: string; size?: string; color?: string }) => { const { i18n } = useTranslation(); - const languageDetector = new LanguageDetector(); + const languageDetector = useMemo(() => new LanguageDetector(), []); useEffect(() => { languageDetector.init(); const lng = languageDetector.detect(); i18n.changeLanguage(typeof lng === 'string' ? lng : lng[0]); - }, []); + }, [i18n, languageDetector]); const handleLanguageChange = useCallback( (languageCode: string) => { i18n.changeLanguage(languageCode); languageDetector.cacheUserLanguage(languageCode); }, - [i18n] + [i18n, languageDetector] ); return ( diff --git a/components/pages/app/page-templates/list-page-jump-to.tsx b/components/pages/app/page-templates/list-page-jump-to.tsx index b273bd1b..79e482e8 100644 --- a/components/pages/app/page-templates/list-page-jump-to.tsx +++ b/components/pages/app/page-templates/list-page-jump-to.tsx @@ -1,6 +1,6 @@ import { Column, ListCardContainer } from '@components/elements/grid'; import { useTranslation } from 'react-i18next'; -import { ReactNode, useEffect, useState } from 'react'; +import { ReactNode, useCallback, useEffect, useState } from 'react'; import { renderSkeleton } from './list-page'; import { FlexAlignItem, FlexContainer, FlexJustifyContent } from '@components/elements/flex'; import { Else, If, Then } from 'react-if'; @@ -98,30 +98,36 @@ export function useJumpToPaginatedList({ // Set loading useEffect(() => { setLoading(loadingElements || dataPagination == null || lastElement == null); - }, [loadingElements, dataPagination]); + }, [loadingElements, dataPagination, lastElement]); - const getFirstPageIndex = (page) => { - const index = lastElement - page * pageSize; - return index < 0 ? 0 : index; - }; + const getFirstPageIndex = useCallback( + (page) => { + const index = lastElement - page * pageSize; + return index < 0 ? 0 : index; + }, + [lastElement, pageSize] + ); // Get the page where the block are you searching is - const getPageFromPosition = () => { + const getPageFromPosition = useCallback(() => { const totalPages = Math.ceil(lastElement / pageSize); return totalPages - Math.ceil(jumpTo / pageSize); - }; + }, [jumpTo, lastElement, pageSize]); - const jumpToPosition = (newPos) => { - // Calculate new position - // const jumpToPosition = (jumpTo + 1) - pageSize - // But if paginator is used, page can change but the filter could be still set - // As we are using the paginator with pages instead of with positions, we have to handle - // the fact that somebody jump to a position and then advance the page. - // todo(ritmo): use paginator based on positions and not on pages for easy use. - const pageOfPosition = getPageFromPosition(); - const offset = () => newPos + 1 - getFirstPageIndex(pageOfPosition); - setDataPagination(getFirstPageIndex(currentPage) + offset() - pageSize); - }; + const jumpToPosition = useCallback( + (newPos) => { + // Calculate new position + // const jumpToPosition = (jumpTo + 1) - pageSize + // But if paginator is used, page can change but the filter could be still set + // As we are using the paginator with pages instead of with positions, we have to handle + // the fact that somebody jump to a position and then advance the page. + // todo(ritmo): use paginator based on positions and not on pages for easy use. + const pageOfPosition = getPageFromPosition(); + const offset = () => newPos + 1 - getFirstPageIndex(pageOfPosition); + setDataPagination(getFirstPageIndex(currentPage) + offset() - pageSize); + }, + [currentPage, getFirstPageIndex, getPageFromPosition, pageSize, setDataPagination] + ); // Jump to height on filter useEffect(() => { @@ -136,7 +142,7 @@ export function useJumpToPaginatedList({ } else { setCurrentPage(1); } - }, [jumpTo]); + }, [currentPage, getPageFromPosition, jumpTo, jumpToPosition]); // When current page changed get next blocks useEffect(() => { @@ -146,7 +152,7 @@ export function useJumpToPaginatedList({ jumpToPosition(jumpTo); } else setDataPagination(getFirstPageIndex(currentPage)); } - }, [currentPage, lastElement]); + }, [currentPage, getFirstPageIndex, jumpTo, jumpToPosition, lastElement, setDataPagination]); return { loading, diff --git a/components/pages/blocks/components/BlockFilter.tsx b/components/pages/blocks/components/BlockFilter.tsx index 3ee5301c..fbbb38c5 100644 --- a/components/pages/blocks/components/BlockFilter.tsx +++ b/components/pages/blocks/components/BlockFilter.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'; import { InputSearch } from '@components/elements/inputs'; import { InlineFlex } from '@components/elements/flex'; import { DivWithMarginChildren } from '@components/elements/styled-divs'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { FilterForm } from '@components/pages/app/page-templates/filter-form'; import { DELAY_BOUNCE_TIME } from '@const/filters'; @@ -18,21 +18,21 @@ export const BlocksFilter = ({ setFilter }: { setFilter: (IFilterBlocks) => void const [tempFilter, setTempFilter] = useState({}); - const resetFilter = () => { + const resetFilter = useCallback(() => { setTempFilter({}); setSearchTermIT(''); - }; + }, []); - const _onEnableFilter = () => { + const _onEnableFilter = useCallback(() => { setFilter(Object.assign({}, tempFilter)); - }; + }, [setFilter, tempFilter]); useEffect(() => { const delayDebounceFn = setTimeout(() => { _onEnableFilter(); }, DELAY_BOUNCE_TIME); return () => clearTimeout(delayDebounceFn); - }, [tempFilter]); + }, [_onEnableFilter, tempFilter]); return ( diff --git a/components/pages/transactions/components/TransactionsFilter.tsx b/components/pages/transactions/components/TransactionsFilter.tsx index de2bd21b..d33894e0 100644 --- a/components/pages/transactions/components/TransactionsFilter.tsx +++ b/components/pages/transactions/components/TransactionsFilter.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'; import { InputSearch } from '@components/elements/inputs'; import { InlineFlex } from '@components/elements/flex'; import { DivWithMarginChildren } from '@components/elements/styled-divs'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { FilterForm } from '@components/pages/app/page-templates/filter-form'; import { DELAY_BOUNCE_TIME } from '@const/filters'; @@ -23,16 +23,16 @@ export const TransactionsFilter = ({ setFilter }: { setFilter: (IFilterTransacti setSearchTermIT(''); }; - const _onEnableFilter = () => { + const _onEnableFilter = useCallback(() => { setFilter(Object.assign({}, tempFilter)); - }; + }, [setFilter, tempFilter]); useEffect(() => { const delayDebounceFn = setTimeout(() => { _onEnableFilter(); }, DELAY_BOUNCE_TIME); return () => clearTimeout(delayDebounceFn); - }, [tempFilter]); + }, [_onEnableFilter, tempFilter]); return ( diff --git a/components/pages/verify/index.tsx b/components/pages/verify/index.tsx index b396c627..7bee29ff 100644 --- a/components/pages/verify/index.tsx +++ b/components/pages/verify/index.tsx @@ -6,11 +6,10 @@ import { DivWithMarginChildren, FakedButton } from '@components/elements/styled- import { Typography, TypographyVariant } from '@components/elements/typography'; import i18n from '@i18n'; import { colors } from '@theme/colors'; -import { ReactNode, useEffect, useState } from 'react'; +import { useState } from 'react'; import styled from 'styled-components'; import { TopDiv } from '../app/page-templates/list-page'; import { Button } from '@components/elements/button'; -import { useUrlHash } from 'use-url-hash'; const VerifyPage = ({ minified = false, onSubmit }: { minified?: boolean; onSubmit?: (etVoteId: string) => void }) => { const [etVoteId, setEtVoteId] = useState(''); // Handle edit text state diff --git a/components/pages/verify/single-page.tsx b/components/pages/verify/single-page.tsx index ce8a74fa..fd192816 100644 --- a/components/pages/verify/single-page.tsx +++ b/components/pages/verify/single-page.tsx @@ -1,16 +1,8 @@ import { Loader } from '@components/blocks/loader'; -import { Button } from '@components/elements/button'; import { FlexAlignItem, FlexContainer, FlexJustifyContent } from '@components/elements/flex'; -import { FakedButton } from '@components/elements/styled-divs'; import { EnvelopeDetails } from '@components/pages/envelopes/details'; -import VerifyPage from '@components/pages/verify'; import i18n from '@i18n'; -import { useEffect, useState } from 'react'; -import { Else, If, Then, Unless, When } from 'react-if'; -import styled from 'styled-components'; -import Router from 'next/router'; -import { VERIFY_DETAILS } from '@const/routes'; -import { getPath } from '@components/pages/app/components/get-links'; +import { Else, If, Then, When } from 'react-if'; import { useVoteInfo } from '@hooks/use-voconi-sdk'; const VerifySinglePage = ({ voteId }: { voteId: string }) => { diff --git a/components/redirect.tsx b/components/redirect.tsx index 6864f881..8fd8d3c0 100644 --- a/components/redirect.tsx +++ b/components/redirect.tsx @@ -9,7 +9,7 @@ export const Redirect = ({ to }: IRedirectProps) => { const router = useRouter(); useEffect(() => { router.replace(to); - }, [to]); + }, [router, to]); return <>; }; diff --git a/pages/converter.tsx b/pages/converter.tsx index 4123a3a3..56431581 100644 --- a/pages/converter.tsx +++ b/pages/converter.tsx @@ -44,6 +44,8 @@ const BlocksPage = () => { setTargetDate(null); setTargetBlock(blockInput); } + // Execute this effect only when blockInput change + // eslint-disable-next-line react-hooks/exhaustive-deps }, [blockInput]); useEffect(() => { @@ -51,6 +53,8 @@ const BlocksPage = () => { setTargetBlock(null); setTargetDate(dateInput); } + // Execute this effect only when dateInput change + // eslint-disable-next-line react-hooks/exhaustive-deps }, [dateInput]); const enviormentName = (env) => { diff --git a/pages/index.tsx b/pages/index.tsx index 95552720..55a3624b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ import { Loader } from '@components/blocks/loader'; -import { BannerContainer, HeroBanner } from '@components/pages/home/components/hero-banner'; +import { BannerContainer } from '@components/pages/home/components/hero-banner'; import StatsPage from '@components/pages/stats'; import { Else, If, Then } from 'react-if'; import FeaturedContent from './index/featured';