From d473673a02a8dfabd508259de8e1defa6d6e1c50 Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 12 Jan 2024 11:57:54 +0200 Subject: [PATCH] Refactor after review --- src/components/homePage/HomePageLayout.tsx | 6 +++--- .../txHistory/filter/ListFilter.tsx | 2 +- src/components/txHistory/index.tsx | 20 ++++++++++--------- src/components/txHistory/useGetTxHistory.tsx | 12 +++++------ .../utils/Dropdowns/Index.module.sass | 2 +- ...bleDropdown.tsx => SelectableDropdown.tsx} | 6 +++--- 6 files changed, 24 insertions(+), 24 deletions(-) rename src/components/utils/Dropdowns/{SelectbleDropdown.tsx => SelectableDropdown.tsx} (94%) diff --git a/src/components/homePage/HomePageLayout.tsx b/src/components/homePage/HomePageLayout.tsx index e54d730d..53bd5f18 100644 --- a/src/components/homePage/HomePageLayout.tsx +++ b/src/components/homePage/HomePageLayout.tsx @@ -20,7 +20,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => { const { query: queryParams, pathname, replace } = useRouter() const isMulti = useIsMulti() - const [activeTab, setActiveTab] = useState( + const [ activeTab, setActiveTab ] = useState( (queryParams?.tab as HomePageTabKeys) || 'portfolio' ) const sendEvent = useSendEvent() @@ -29,7 +29,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => { if (isMulti && activeTab === 'history') { setActiveTab('portfolio') } - }, [isMulti, activeTab]) + }, [ isMulti, activeTab ]) const tabs = useMemo(() => { const txHistoryTab = isMulti @@ -53,7 +53,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => { }, txHistoryTab, ] - }, [isMulti, addresses.join(',')]) + }, [ isMulti, addresses.join(',') ]) const onTabChanged = (tab: string) => { setActiveTab(tab as HomePageTabKeys) diff --git a/src/components/txHistory/filter/ListFilter.tsx b/src/components/txHistory/filter/ListFilter.tsx index e231dc3d..3d47cec1 100644 --- a/src/components/txHistory/filter/ListFilter.tsx +++ b/src/components/txHistory/filter/ListFilter.tsx @@ -1,6 +1,6 @@ import SelectbleDropdown, { DropdownActionKind, -} from '@/components/utils/Dropdowns/SelectbleDropdown' +} from '@/components/utils/Dropdowns/SelectableDropdown' import { MenuItem } from '@/components/utils/Dropdowns/types' import styles from '../Index.module.sass' import { LabelWithIcon } from '@/components/table/balancesTable/utils' diff --git a/src/components/txHistory/index.tsx b/src/components/txHistory/index.tsx index 7824bcc9..bb9fb4be 100644 --- a/src/components/txHistory/index.tsx +++ b/src/components/txHistory/index.tsx @@ -15,9 +15,9 @@ import ListFilter from './filter/ListFilter' import EventsIcon from '@/assets/icons/events.svg' import { eventsVariantsOpt, - networksVariantsWithIconOpt, + // networksVariantsWithIconOpt, } from './filter/filterItems' -import { PiShareNetworkLight } from 'react-icons/pi' +// import { PiShareNetworkLight } from 'react-icons/pi' const itemsByTxKind: Record = { TRANSFER_FROM: TransferRow, @@ -56,8 +56,10 @@ type TxHistoryLayoutProps = { addresses: string[] } +const supportedNetowrks = [ 'subsocial' ] + const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => { - const [ networks, setNetworks ] = useState([ 'all' ]) + // const [ networks, setNetworks ] = useState([ 'all' ]) const [ events, setEvents ] = useState([ 'all' ]) const address = addresses[0] const [ refresh, setRefresh ] = useState(false) @@ -82,7 +84,7 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => { ) } - const dataLoading = isEmptyArray(initialData.txs) && !initialData.actualData + const dataLoading = isEmptyArray(initialData.txs) const List = useCallback(() => { return ( @@ -94,7 +96,7 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => { address, page, size, - networks: networks.filter((x) => x !== 'all'), + networks: supportedNetowrks.filter((x) => x !== 'all'), events: events.filter((x) => x !== 'all'), }) } @@ -102,7 +104,7 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => { dataLoadingClassName={styles.InfiniteListLoading} noDataDesc='No transactions yet' dataSource={ - networks.includes('all') && events.includes('all') + supportedNetowrks.includes('all') && events.includes('all') ? initialData.txs : undefined } @@ -119,7 +121,7 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => { dataLoading, address, JSON.stringify(initialData.txs), - networks.join(','), + supportedNetowrks.join(','), events.join(','), ]) @@ -128,13 +130,13 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => {
- } - /> + /> */} { - let intervalRef = useRef(undefined) const [ initialData, setInitialData ] = useState(defaultInitialData) const [ lastUpdateDate, setLastUpdateDate ] = useState( @@ -35,7 +34,7 @@ const useGetInitialTxHistoryData = ({ useEffect(() => { if (!address || !refresh) return - intervalRef.current = setInterval(async () => { + const interval = setInterval(async () => { const history: InitialData = await getTxHistoryQueue({ address, offset: 0, @@ -43,9 +42,9 @@ const useGetInitialTxHistoryData = ({ }) setInitialData(history) + if (history?.actualData) { - clearInterval(intervalRef.current) - intervalRef.current = undefined + clearInterval(interval) setRefresh(false) setLastUpdateDate(new Date()) @@ -54,8 +53,7 @@ const useGetInitialTxHistoryData = ({ }, 2000) return () => { - clearInterval(intervalRef.current) - intervalRef.current = undefined + clearInterval(interval) } }, [ address, refresh ]) diff --git a/src/components/utils/Dropdowns/Index.module.sass b/src/components/utils/Dropdowns/Index.module.sass index dfd4db76..be595551 100644 --- a/src/components/utils/Dropdowns/Index.module.sass +++ b/src/components/utils/Dropdowns/Index.module.sass @@ -29,7 +29,7 @@ background: none !important -.SelectbleMenuItem +.SelectableMenuItem display: flex align-items: center justify-content: space-between \ No newline at end of file diff --git a/src/components/utils/Dropdowns/SelectbleDropdown.tsx b/src/components/utils/Dropdowns/SelectableDropdown.tsx similarity index 94% rename from src/components/utils/Dropdowns/SelectbleDropdown.tsx rename to src/components/utils/Dropdowns/SelectableDropdown.tsx index 391ab891..e17ec520 100644 --- a/src/components/utils/Dropdowns/SelectbleDropdown.tsx +++ b/src/components/utils/Dropdowns/SelectableDropdown.tsx @@ -7,12 +7,12 @@ import { IoCheckmarkSharp } from 'react-icons/io5' export type DropdownActionKind = 'select' | 'deselect' -type SelectbleMenuItem = MenuItem & { +type SelectableMenuItem = MenuItem & { className?: string } type MenuItemsProps = { - items: SelectbleMenuItem[] + items: SelectableMenuItem[] className?: string onChange?: (keys: string[], kind: DropdownActionKind) => void defaultValue: string @@ -40,7 +40,7 @@ const MenuItems = ({ return ( {label} {isSelected && }