From c38903a0907c85fa2ac32c09ee575f4a2945dba5 Mon Sep 17 00:00:00 2001 From: Hydrogen Date: Mon, 17 Mar 2025 02:08:20 +0530 Subject: [PATCH 1/3] All Feature's using Feature Flag Hook --- .../account-header/account-extra-info.jsx | 11 +++++++---- src/detail-panels/account-header/account-header.jsx | 5 ++++- .../block-panel-generic/block-panel-generic.jsx | 9 +++++++-- .../blocked-by-lists/blocked-by-lists-index.jsx | 6 ++++-- .../blocking-lists/blocking-lists-index.jsx | 7 ++++--- src/detail-panels/labeled/index.jsx | 4 +++- src/detail-panels/lists/list-view.jsx | 11 +++++++---- src/detail-panels/lists/lists.jsx | 4 +++- src/detail-panels/packs/packed.jsx | 6 ++++-- src/detail-panels/packs/packs.jsx | 6 ++++-- src/landing/home-stats/home-stats-main.jsx | 5 +++-- 11 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/detail-panels/account-header/account-extra-info.jsx b/src/detail-panels/account-header/account-extra-info.jsx index 129e12ea..22cf2aff 100644 --- a/src/detail-panels/account-header/account-extra-info.jsx +++ b/src/detail-panels/account-header/account-extra-info.jsx @@ -12,6 +12,7 @@ import { useAccountResolver } from '../account-resolver'; import './account-extra-info.css'; import { HandleHistory } from './handle-history'; import { PDSName } from './handle-history/pds-name'; +import { useFeatureFlag } from '../../api/featureFlags'; /** * @param {{ @@ -24,23 +25,25 @@ export function AccountExtraInfo({ className, onInfoClick, ...rest }) { const account = accountQuery.data; const handleHistoryQuery = useHandleHistory(account?.shortDID); const handleHistory = handleHistoryQuery.data?.handle_history; + const ishandleHistory = useFeatureFlag('handle-history') + const profileDescription = useFeatureFlag('profile-description') return (
×
-
+ {profileDescription && (
{!account?.description ? undefined : ( )} -
+
)}
-
+ {ishandleHistory && (
{!handleHistory ? undefined : ( <> @@ -51,7 +54,7 @@ export function AccountExtraInfo({ className, onInfoClick, ...rest }) { )} -
+
)}
); } diff --git a/src/detail-panels/account-header/account-header.jsx b/src/detail-panels/account-header/account-header.jsx index 0b1045b3..7ea6efd4 100644 --- a/src/detail-panels/account-header/account-header.jsx +++ b/src/detail-panels/account-header/account-header.jsx @@ -14,6 +14,7 @@ import { Button } from '@mui/material'; import { useAccountResolver } from '../account-resolver'; import { useHandleHistory } from '../../api/handle-history'; import { usePlacement } from '../../api/placement'; +import { useFeatureFlag } from '../../api/featureFlags'; /** * @param {{ @@ -28,6 +29,8 @@ export function AccountHeader({ className, onInfoClick }) { const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID); const handleHistory = handleHistoryQuery.data?.handle_history; + const userPlacement = useFeatureFlag('user-placement') + const placementquery = usePlacement(resolved.data?.shortDID); const placement = placementquery.data?.placement?.toLocaleString() ?? ''; @@ -114,7 +117,7 @@ export function AccountHeader({ className, onInfoClick }) { )} - {placement && ( + {userPlacement && placement && (
User #{placement}
)} diff --git a/src/detail-panels/block-panel-generic/block-panel-generic.jsx b/src/detail-panels/block-panel-generic/block-panel-generic.jsx index c3d44378..64b5f2a0 100644 --- a/src/detail-panels/block-panel-generic/block-panel-generic.jsx +++ b/src/detail-panels/block-panel-generic/block-panel-generic.jsx @@ -14,6 +14,7 @@ import { VisibleWithDelay } from '../../common-components/visible'; import './block-panel-generic.css'; import { localise } from '../../localisation'; +import { useFeatureFlag } from '../../api/featureFlags'; /** @typedef {import('@tanstack/react-query').InfiniteData<{ blocklist: (BlockedByRecord | { did: string; blocked_date: string })[]; count?: number }>} InfBlockData */ @@ -41,6 +42,8 @@ export function BlockPanelGeneric({ const blocklistPages = data?.pages || []; const blocklist = blocklistPages.flatMap((page) => page.blocklist); const count = totalData?.count; + const pageName = (className == 'blocked-by-panel') ? 'blocked-by-count' : 'blocking-count'; + const pageCount = useFeatureFlag(pageName) // const [searchParams, setSearchParams] = useSearchParams(); // const [tick, setTick] = useState(0); @@ -74,6 +77,7 @@ export function BlockPanelGeneric({ header={header} // Ironically this hides the search button showSearch={true} + pagecount={pageCount} // setShowSearch={setShowSearch} // onShowSearch={() => setShowSearch(true)} // onToggleView={() => setTableView(!tableView)} @@ -118,7 +122,8 @@ class PanelHeader extends React.Component { count = this.state?.count || 0; } - const { blocklist, header } = this.props; + const { blocklist, header, pagecount } = this.props; + return (

- {typeof header === 'function' ? header({ count, blocklist }) : header} + {pagecount && (typeof header === 'function' ? header({ count, blocklist }) : header)} {this.props.showSearch ? undefined : ( diff --git a/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx b/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx index 9f159b41..089521f2 100644 --- a/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx +++ b/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx @@ -14,6 +14,7 @@ import { SearchHeaderDebounced } from '../history/search-header'; import { VisibleWithDelay } from '../../common-components/visible'; import { resolveHandleOrDID } from '../../api'; import { useAccountResolver } from '../account-resolver'; +import { useFeatureFlag } from '../../api/featureFlags'; export function BlockedByLists() { const accountQuery = useAccountResolver(); @@ -30,6 +31,7 @@ export function BlockedByLists() { const listPages = data?.pages || []; const allLists = listPages.flatMap((page) => page.blocklist); const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1)); + const listsBlockedByCount = useFeatureFlag('lists-blocked-by-count') // Show loader for initial load if (isLoading) { @@ -55,7 +57,7 @@ export function BlockedByLists() { -

+ {listsBlockedByCount && (

{(isLoadingTotal && !listsTotal) && {"Counting block lists..."}} {listsTotal ? <> @@ -72,7 +74,7 @@ export function BlockedByLists() { : isLoadingTotal ? null : 'Not blocked by any users via lists' } -

+

)} page.blocklist); const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1)); - + const listsBlockingCount = useFeatureFlag('lists-blocking-count') // Show loader for initial load if (isLoading) { return ( @@ -55,7 +56,7 @@ export function BlockingLists() { -

+ {listsBlockingCount && (

{(isLoadingTotal && !listTotalBlocks) && {"Counting lists..."}} {listTotalBlocks ? <> @@ -72,7 +73,7 @@ export function BlockingLists() { : isLoadingTotal ? null : 'Not blocking any users via lists' } -

+ )} diff --git a/src/detail-panels/labeled/index.jsx b/src/detail-panels/labeled/index.jsx index c824fffb..21010854 100644 --- a/src/detail-panels/labeled/index.jsx +++ b/src/detail-panels/labeled/index.jsx @@ -7,6 +7,7 @@ import { AccountShortEntry } from '../../common-components/account-short-entry'; import { FormatTimestamp } from '../../common-components/format-timestamp'; import { useAccountResolver } from '../account-resolver'; import './labeled.css'; +import { useFeatureFlag } from '../../api/featureFlags'; /** * @param {{ @@ -96,6 +97,7 @@ export default function LabeledPanel() { const { data: labelers, isLoading: isLoadingLabelers } = useLabelers(); const { data: labels, isLoading } = useLabeled(did, labelers); + const labelsCount = useFeatureFlag('labels-count') return (
-

Labeled {labels?.length} Times

+ {labelsCount && (

Labeled {labels?.length} Times

)} {isLoadingLabelers || isLoading ? (
Loading...
diff --git a/src/detail-panels/lists/list-view.jsx b/src/detail-panels/lists/list-view.jsx index 8b758594..e54f0230 100644 --- a/src/detail-panels/lists/list-view.jsx +++ b/src/detail-panels/lists/list-view.jsx @@ -12,6 +12,7 @@ import './list-view.css'; import { ProgressiveRender } from '../../common-components/progressive-render'; import { ConditionalAnchor } from '../../common-components/conditional-anchor'; import { useResolveHandleOrDid } from '../../api'; +import { useFeatureFlag } from '../../api/featureFlags'; /** * @param {{ @@ -20,6 +21,7 @@ import { useResolveHandleOrDid } from '../../api'; * }} _ */ export function ListView({ className, list }) { + const spamListOverlay = useFeatureFlag('spam-list-overlay') return (
    } + renderItem={(entry) => } />
); @@ -37,9 +39,10 @@ export function ListView({ className, list }) { * @param {{ * className?: string, * entry: AccountListEntry + * SpamOverlay : boolean * }} _ */ -export function ListViewEntry({ className, entry }) { +export function ListViewEntry({ className, entry, SpamOverlay }) { const { data: sizeData, isLoading } = useListSize(entry?.url); const count = sizeData?.count?.toLocaleString() || ''; @@ -53,7 +56,7 @@ export function ListViewEntry({ className, entry }) { setOpen(true); }; - const opacity = entry.spam ? 0.4 : 1; + const opacity = (entry.spam && SpamOverlay) ? 0.4 : 1; const resolved = useResolveHandleOrDid(entry.did); return ( @@ -80,7 +83,7 @@ export function ListViewEntry({ className, entry }) { > {entry.name} - {entry.spam && ( + {entry.spam && SpamOverlay && ( )} - {listsTotal ? ( + {listsOnListCounts && listsTotal ? ( <> {localise( 'Member of ' + diff --git a/src/detail-panels/packs/packed.jsx b/src/detail-panels/packs/packed.jsx index 73a536ff..8df21a38 100644 --- a/src/detail-panels/packs/packed.jsx +++ b/src/detail-panels/packs/packed.jsx @@ -14,6 +14,7 @@ import { VisibleWithDelay } from '../../common-components/visible'; import { localise, localiseNumberSuffix } from '../../localisation'; import { useAccountResolver } from '../account-resolver'; import { SearchHeaderDebounced } from '../history/search-header'; +import { useFeatureFlag } from '../../api/featureFlags'; export default function Packed() { // STARTER PACKS CONTAINING USERS @@ -30,6 +31,7 @@ export default function Packed() { const search = (searchParams.get('q') || '').trim(); const [tick, setTick] = useState(0); const [showSearch, setShowSearch] = useState(!!search); + const starterPacksInCount = useFeatureFlag('starter-packs-in-count'); const packsTotal = totalData?.count; const Packlist = data?.pages || []; @@ -70,11 +72,11 @@ export default function Packed() { {packsTotal ? ( <> - {'Member of ' + + {starterPacksInCount && ('Member of ' + packsTotal.toLocaleString() + ' ' + localiseNumberSuffix('pack', packsTotal) + - ':'} + ':')} {!showSearch && (
); } diff --git a/src/detail-panels/account-header/account-header.jsx b/src/detail-panels/account-header/account-header.jsx index 7ea6efd4..cde00028 100644 --- a/src/detail-panels/account-header/account-header.jsx +++ b/src/detail-panels/account-header/account-header.jsx @@ -30,9 +30,10 @@ export function AccountHeader({ className, onInfoClick }) { const handleHistory = handleHistoryQuery.data?.handle_history; const userPlacement = useFeatureFlag('user-placement') - - const placementquery = usePlacement(resolved.data?.shortDID); - const placement = placementquery.data?.placement?.toLocaleString() ?? ''; + + // call only if userPlacement is true + const placementquery = (userPlacement) ? usePlacement(resolved.data?.shortDID) : null; + const placement = placementquery?.data?.placement?.toLocaleString() ?? ''; const firstHandleChangeTimestamp = handleHistory?.length && handleHistory[handleHistory.length - 1][1]; @@ -117,7 +118,7 @@ export function AccountHeader({ className, onInfoClick }) { )} - {userPlacement && placement && ( + {placement && (
User #{placement}
)} diff --git a/src/detail-panels/block-panel-generic/block-panel-generic.jsx b/src/detail-panels/block-panel-generic/block-panel-generic.jsx index 64b5f2a0..a4b7dec3 100644 --- a/src/detail-panels/block-panel-generic/block-panel-generic.jsx +++ b/src/detail-panels/block-panel-generic/block-panel-generic.jsx @@ -14,7 +14,6 @@ import { VisibleWithDelay } from '../../common-components/visible'; import './block-panel-generic.css'; import { localise } from '../../localisation'; -import { useFeatureFlag } from '../../api/featureFlags'; /** @typedef {import('@tanstack/react-query').InfiniteData<{ blocklist: (BlockedByRecord | { did: string; blocked_date: string })[]; count?: number }>} InfBlockData */ @@ -42,8 +41,7 @@ export function BlockPanelGeneric({ const blocklistPages = data?.pages || []; const blocklist = blocklistPages.flatMap((page) => page.blocklist); const count = totalData?.count; - const pageName = (className == 'blocked-by-panel') ? 'blocked-by-count' : 'blocking-count'; - const pageCount = useFeatureFlag(pageName) + // const [searchParams, setSearchParams] = useSearchParams(); // const [tick, setTick] = useState(0); @@ -77,7 +75,6 @@ export function BlockPanelGeneric({ header={header} // Ironically this hides the search button showSearch={true} - pagecount={pageCount} // setShowSearch={setShowSearch} // onShowSearch={() => setShowSearch(true)} // onToggleView={() => setTableView(!tableView)} @@ -122,7 +119,7 @@ class PanelHeader extends React.Component { count = this.state?.count || 0; } - const { blocklist, header, pagecount } = this.props; + const { blocklist, header } = this.props; return ( @@ -134,7 +131,7 @@ class PanelHeader extends React.Component { : ' blocking-panel-header-loading') } > - {pagecount && (typeof header === 'function' ? header({ count, blocklist }) : header)} + {typeof header === 'function' ? header({ count, blocklist }) : header} {this.props.showSearch ? undefined : ( diff --git a/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx b/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx index 089521f2..c0a9281c 100644 --- a/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx +++ b/src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx @@ -20,7 +20,8 @@ export function BlockedByLists() { const accountQuery = useAccountResolver(); const shortHandle = accountQuery.data?.shortHandle; const { data, fetchNextPage, hasNextPage, isLoading, isFetching } = useBlockedByLists(shortHandle); - const { data: totalData, isLoading: isLoadingTotal } = useBlockedByListsTotal(shortHandle); + const shouldFetchlistsBlockedByCount = useFeatureFlag('lists-blocked-by-count') + const { data: totalData, isLoading: isLoadingTotal } = useBlockedByListsTotal(shortHandle,shouldFetchlistsBlockedByCount); const [searchParams, setSearchParams] = useSearchParams(); const [tick, setTick] = useState(0); @@ -31,7 +32,6 @@ export function BlockedByLists() { const listPages = data?.pages || []; const allLists = listPages.flatMap((page) => page.blocklist); const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1)); - const listsBlockedByCount = useFeatureFlag('lists-blocked-by-count') // Show loader for initial load if (isLoading) { @@ -57,7 +57,7 @@ export function BlockedByLists() { - {listsBlockedByCount && (

+

{(isLoadingTotal && !listsTotal) && {"Counting block lists..."}} {listsTotal ? <> @@ -74,7 +74,7 @@ export function BlockedByLists() { : isLoadingTotal ? null : 'Not blocked by any users via lists' } -

)} + page.blocklist); const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1)); - const listsBlockingCount = useFeatureFlag('lists-blocking-count') // Show loader for initial load if (isLoading) { return ( @@ -56,7 +56,7 @@ export function BlockingLists() { - {listsBlockingCount && (

+

{(isLoadingTotal && !listTotalBlocks) && {"Counting lists..."}} {listTotalBlocks ? <> @@ -73,7 +73,7 @@ export function BlockingLists() { : isLoadingTotal ? null : 'Not blocking any users via lists' } -

)} + diff --git a/src/detail-panels/blocking/index.jsx b/src/detail-panels/blocking/index.jsx index 40f664c5..65bda374 100644 --- a/src/detail-panels/blocking/index.jsx +++ b/src/detail-panels/blocking/index.jsx @@ -5,12 +5,14 @@ import { BlockPanelGeneric } from '../block-panel-generic'; import { localise } from '../../localisation'; import { useBlocklistCount } from '../../api/blocklist'; import { useAccountResolver } from '../account-resolver'; +import { useFeatureFlag } from '../../api/featureFlags'; export default function BlockingPanel() { const accountQuery = useAccountResolver(); const did = accountQuery.data?.shortDID; const blocklistQuery = useBlocklist(did); - const totalQuery = useBlocklistCount(did); + const shouldFetchBlockingCount = useFeatureFlag('blocking-count') + const totalQuery = useBlocklistCount(did,shouldFetchBlockingCount); return ( page.lists); const filteredLists = !search @@ -71,7 +72,7 @@ export function Lists() { {localise('Counting lists...', {})} )} - {listsOnListCounts && listsTotal ? ( + {listsTotal ? ( <> {localise( 'Member of ' + diff --git a/src/detail-panels/packs/packed.jsx b/src/detail-panels/packs/packed.jsx index 8df21a38..74cfd45e 100644 --- a/src/detail-panels/packs/packed.jsx +++ b/src/detail-panels/packs/packed.jsx @@ -24,14 +24,15 @@ export default function Packed() { const shortHandle = accountQuery.data?.shortHandle; const { data, fetchNextPage, hasNextPage, isLoading, isFetching } = usePacksPopulated(shortHandle); + const shouldFetchstarterPacksInCount = + useFeatureFlag('starter-packs-in-count'); const { data: totalData, isLoading: isLoadingTotal } = - usePacksPopulatedTotal(shortHandle); + usePacksPopulatedTotal(shortHandle,shouldFetchstarterPacksInCount); const [searchParams, setSearchParams] = useSearchParams(); const search = (searchParams.get('q') || '').trim(); const [tick, setTick] = useState(0); const [showSearch, setShowSearch] = useState(!!search); - const starterPacksInCount = useFeatureFlag('starter-packs-in-count'); const packsTotal = totalData?.count; const Packlist = data?.pages || []; @@ -72,11 +73,11 @@ export default function Packed() { {packsTotal ? ( <> - {starterPacksInCount && ('Member of ' + + {'Member of ' + packsTotal.toLocaleString() + ' ' + localiseNumberSuffix('pack', packsTotal) + - ':')} + ':'} {!showSearch && (