From 12e25d4eb11327d1d4e74f25979f329de483244b Mon Sep 17 00:00:00 2001 From: Leon Talbert Date: Fri, 12 Jul 2024 11:37:01 +0800 Subject: [PATCH 01/20] Update NameListView.tsx --- .../@molecules/NameListView/NameListView.tsx | 85 ++++++++++--------- 1 file changed, 45 insertions(+), 40 deletions(-) diff --git a/src/components/@molecules/NameListView/NameListView.tsx b/src/components/@molecules/NameListView/NameListView.tsx index c9d490bfb..e5cf3e65f 100644 --- a/src/components/@molecules/NameListView/NameListView.tsx +++ b/src/components/@molecules/NameListView/NameListView.tsx @@ -1,6 +1,7 @@ import { ReactNode, useCallback, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import styled, { css } from 'styled-components' +import { match, P } from 'ts-pattern' import type { Address } from 'viem' import { Name } from '@ensdomains/ensjs/subgraph' @@ -165,45 +166,6 @@ export const NameListView = ({ address, selfAddress, setError, setLoading }: Nam const isLoading = isNamesLoading || !address - let InnerContent: ReactNode - if (!isMounted) { - InnerContent = null - } else if (isLoading) { - InnerContent = ( - - - - ) - } else if (nameCount === 0 && searchQuery === '') { - InnerContent = {t('empty')} - } else if (nameCount === 0) { - InnerContent = {t('empty')} - } else if (nameCount) { - InnerContent = ( - -
- {names.map((name) => ( - selectedName.name === name.name!)} - disabled={isNameDisabled(name)} - onClick={handleClickName(name)} - /> - ))} -
- {isFetching && ( - - - - )} - - ) - } else { - InnerContent = `${names.length}` - } - return ( )} -
{InnerContent}
+
+ {match([isMounted, isLoading, nameCount, searchQuery]) + .with([false, P._, P._, P._], () => null) + .with([true, true, P._, P._], () => ( + + + + )) + .with([true, true, P._, P._], () => ( + + + + )) + .with([true, false, 0, ''], () => ( + {t('empty')} + )) + .with([true, false, 0, P._], () => ( + {t('empty')} + )) + .with([true, false, P.when((_nameCount) => _nameCount), P._], () => ( + +
+ {names.map((name) => ( + selectedName.name === name.name!) + } + disabled={isNameDisabled(name)} + onClick={handleClickName(name)} + /> + ))} +
+ {isFetching && ( + + + + )} + + )) + .otherwise(() => `${names.length}`)} +