All Feature's using Feature Flag Hook

src/api/blocklist.js

@@ -73,11 +73,12 @@ export function useSingleBlocklist(did) {
 /**
  * given the did of an account, return the total number of accounts which are being blocked by the given account
  * @param {string | undefined} did
+ * @param {Boolean | undefined} shouldFetchBlockingCount
  */
-export function useBlocklistCount(did) {
+export function useBlocklistCount(did,shouldFetchBlockingCount) {
   const fullDid = unwrapShortDID(did);
   return useQuery({
-    enabled: !!fullDid,
+    enabled: !!fullDid && shouldFetchBlockingCount,
     queryKey: ['blocklist-count', fullDid],
     // @ts-expect-error fullDid will be a string because the query will be disabled otherwise
     queryFn: () => blocklistCountCall(fullDid, 'blocklist'),
@@ -87,11 +88,12 @@ export function useBlocklistCount(did) {
 /**
  * given the did of an account, return the total number of other accounts which are blocking the given account
  * @param {string | undefined} did
+ * @param {Boolean | undefined} shouldFetchBlockedbyCount
  */
-export function useSingleBlocklistCount(did) {
+export function useSingleBlocklistCount(did,shouldFetchBlockedbyCount) {
   const fullDid = unwrapShortDID(did);
   return useQuery({
-    enabled: !!fullDid,
+    enabled: !!fullDid && shouldFetchBlockedbyCount,
     queryKey: ['single-blocklist-count', fullDid],
     // @ts-expect-error fullDid will be a string because the query will be disabled otherwise
     queryFn: () => blocklistCountCall(fullDid, 'single-blocklist'),
@@ -203,12 +205,13 @@ async function getBlockingLists(shortHandle, currentPage = 1) {
 
 /**
  * @param {string | undefined} handleOrDID
+ * @param {Boolean | undefined} shouldFetchlistsBlockingCount
  */
-export function useBlockingListsTotal(handleOrDID) {
+export function useBlockingListsTotal(handleOrDID,shouldFetchlistsBlockingCount) {
   const profileQuery = useResolveHandleOrDid(handleOrDID);
   const shortHandle = profileQuery.data?.shortHandle;
   return useQuery({
-    enabled: !!shortHandle,
+    enabled: !!shortHandle && shouldFetchlistsBlockingCount,
     queryKey: ['blocking-lists-total', shortHandle],
     queryFn: () => getBlockingListsTotal(shortHandle),
   });
@@ -275,12 +278,13 @@ async function getBlockedByLists(shortHandle, currentPage = 1) {
 
 /**
  * @param {string | undefined} handleOrDID
+ * @param {Boolean | undefined} shouldFetchlistsBlockedByCount
  */
-export function useBlockedByListsTotal(handleOrDID) {
+export function useBlockedByListsTotal(handleOrDID,shouldFetchlistsBlockedByCount) {
   const profileQuery = useResolveHandleOrDid(handleOrDID);
   const shortHandle = profileQuery.data?.shortHandle;
   return useQuery({
-    enabled: !!shortHandle,
+    enabled: !!shortHandle && shouldFetchlistsBlockedByCount,
     queryKey: ['blocked-by-lists-total', shortHandle],
     queryFn: () => getBlockedByListsTotal(shortHandle),
   });

src/api/handle-history.js

@@ -16,10 +16,11 @@ import { fetchClearskyApi } from './core';
 /**
  *
  * @param {string | undefined} shortDid
+ * @param {Boolean | undefined} shouldIshandleHistory
  */
-export function useHandleHistory(shortDid) {
+export function useHandleHistory(shortDid,shouldIshandleHistory) {
   return useQuery({
-    enabled: !!shortDid,
+    enabled: !!shortDid && shouldIshandleHistory,
     queryKey: ['get-handle-history', shortDid],
     // @ts-expect-error shortDid will be a string, as query is skipped otherwise
     queryFn: () => getHandleHistoryRaw(shortDid, false),

src/api/lists.js

@@ -27,12 +27,13 @@ export function useList(handleOrDID) {
 /**
  * Look up the total number of lists to which a given handle/DID belongs
  * @param {string | undefined} handleOrDID
+ * @param {Boolean} shouldFetchListCounts
  */
-export function useListCount(handleOrDID) {
+export function useListCount(handleOrDID,shouldFetchListCounts) {
   const profileQuery = useResolveHandleOrDid(handleOrDID);
   const shortHandle = profileQuery.data?.shortHandle;
   return useQuery({
-    enabled: !!shortHandle,
+    enabled: !!shortHandle && shouldFetchListCounts,
     queryKey: ['list-total', shortHandle],
     // @ts-expect-error shortHandle won't really be undefined because the query will be disabled
     queryFn: () => getListCount(shortHandle),

src/api/packs.js

@@ -21,12 +21,13 @@ export function usePacksCreated(handleOrDID) {
 
 /**
  * @param {string | undefined} handleOrDID
+ * @param {boolean | undefined} shouldFetchstarterPacksMadeCount
  */
-export function usePacksCreatedTotal(handleOrDID) {
+export function usePacksCreatedTotal(handleOrDID,shouldFetchstarterPacksMadeCount){  
   const profileQuery = useResolveHandleOrDid(handleOrDID);
   const shortHandle = profileQuery.data?.shortHandle;
   return useQuery({
-    enabled: !!shortHandle,
+    enabled: !!shortHandle && shouldFetchstarterPacksMadeCount,
     queryKey: ['starter-packs-total', shortHandle],
     queryFn: () => getPacksCreatedTotal(shortHandle),
   });
@@ -49,16 +50,18 @@ export function usePacksPopulated(handleOrDID) {
 }
 
 /**
- * @param {string | undefined} handleOrDID
+ * @param {string | undefined} handleOrDID 
+ * @param {Boolean | undefined} shouldFetchstarterPacksInCount 
  */
-export function usePacksPopulatedTotal(handleOrDID) {
+export  function usePacksPopulatedTotal(handleOrDID,shouldFetchstarterPacksInCount){  
   const profileQuery = useResolveHandleOrDid(handleOrDID);
   const shortHandle = profileQuery.data?.shortHandle;
-  return useQuery({
-    enabled: !!shortHandle,
-    queryKey: ['starter-pack-total', shortHandle],
-    queryFn: () => getPacksPopulatedTotal(shortHandle),
-  });
+    return useQuery({
+        enabled: !!shortHandle && shouldFetchstarterPacksInCount,
+        queryKey: ['starter-pack-total', shortHandle],
+        // @ts-expect-error shortHandle won't really be undefined because the query will be disabled
+        queryFn: () => getPacksPopulatedTotal(shortHandle),
+      }); 
 }
 
 /**

src/api/placement.js

@@ -7,13 +7,14 @@ import { useQuery } from '@tanstack/react-query';
 
 /**
  * @param {string | undefined} handleOrDID
+ * @param {Boolean | undefined} shoulduserPlacement
  */
-export function usePlacement(handleOrDID) {
+export function usePlacement(handleOrDID,shoulduserPlacement) {
   const profileQuery = useResolveHandleOrDid(handleOrDID);
   const shortHandle = profileQuery.data?.shortHandle;
 
   return useQuery({
-    enabled: !!shortHandle,
+    enabled: !!shortHandle && shoulduserPlacement,
     queryKey: ['place', shortHandle],
     // @ts-expect-error shortHandle will be a string, as the query is skipped otherwise
     queryFn: () => getPlacement(shortHandle),

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 {{
@@ -22,18 +23,23 @@ import { PDSName } from './handle-history/pds-name';
 export function AccountExtraInfo({ className, onInfoClick, ...rest }) {
   const accountQuery = useAccountResolver();
   const account = accountQuery.data;
-  const handleHistoryQuery = useHandleHistory(account?.shortDID);
-  const handleHistory = handleHistoryQuery.data?.handle_history;
+  const shouldIshandleHistory = useFeatureFlag('handle-history')
+
+  // calls only if ishandleHistory is true
+  const handleHistoryQuery = useHandleHistory(account?.shortDID,shouldIshandleHistory);
+  const handleHistory = handleHistoryQuery?.data?.handle_history;
+
+  const profileDescription = useFeatureFlag('profile-description')
   return (
     <div className={'account-extra-info ' + (className || '')} {...rest}>
       <div className="close-opt" onClick={onInfoClick}>
         &times;
       </div>
-      <div className="bio-section">
+      {profileDescription && (<div className="bio-section">
         {!account?.description ? undefined : (
           <MultilineFormatted text={account?.description} />
         )}
-      </div>
+      </div>)}
       <div className="did-section">
         <DidWithCopyButton
           shortDID={account?.shortDID}

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 {{
@@ -25,11 +26,15 @@ export function AccountHeader({ className, onInfoClick }) {
   const [isCopied, setIsCopied] = useState(false);
   // const [handleHistoryExpanded, setHandleHistoryExpanded] = useState(false);
   const resolved = useAccountResolver();
-  const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID);
+  const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID,true);
   const handleHistory = handleHistoryQuery.data?.handle_history;
 
-  const placementquery = usePlacement(resolved.data?.shortDID);
-  const placement = placementquery.data?.placement?.toLocaleString() ?? '';
+  const shoulduserPlacement = useFeatureFlag('user-placement')
+
+  // call only if userPlacement is true
+  const placementquery = usePlacement(resolved.data?.shortDID,shoulduserPlacement);
+  // console.log(placementquery)
+  const placement = placementquery?.data?.placement?.toLocaleString() ?? '';
 
   const firstHandleChangeTimestamp =
     handleHistory?.length && handleHistory[handleHistory.length - 1][1];

src/detail-panels/block-panel-generic/block-panel-generic.jsx

@@ -41,6 +41,7 @@ export function BlockPanelGeneric({
   const blocklistPages = data?.pages || [];
   const blocklist = blocklistPages.flatMap((page) => page.blocklist);
   const count = totalData?.count;
+
 
   // const [searchParams, setSearchParams] = useSearchParams();
   // const [tick, setTick] = useState(0);
@@ -119,6 +120,7 @@ class PanelHeader extends React.Component {
     }
 
     const { blocklist, header } = this.props;
+
 
     return (
       <h3

src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx

@@ -14,12 +14,14 @@ 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();
   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);
@@ -37,7 +39,7 @@ export function BlockedByLists() {
       <div style={{ padding: '1em', textAlign: 'center', opacity: '0.5' }}>
         <CircularProgress size="1.5em" /> 
         <div style={{ marginTop: '0.5em' }}>
-          {'Loading blocked by lists...'}
+          {shouldFetchlistsBlockedByCount && ('Loading blocked by lists...')}
         </div>
       </div>
     );
@@ -57,7 +59,7 @@ export function BlockedByLists() {
 
       <h3 className='lists-header'>
         {(isLoadingTotal && !listsTotal) && <span style={{ opacity: 0.5 }}>{"Counting block lists..."}</span>}
-        {listsTotal ?
+        {shouldFetchlistsBlockedByCount && (listsTotal ?
           <>
             {`Blocked by ${Intl.NumberFormat().format(listsTotal)} users via lists`}
             <span className='panel-toggles'>
@@ -70,7 +72,7 @@ export function BlockedByLists() {
               }
             </span>
           </> : 
-          isLoadingTotal ? null : 'Not blocked by any users via lists'
+          isLoadingTotal ? null : 'Not blocked by any users via lists')
         }
       </h3>
 

src/detail-panels/blocked-by/index.jsx

@@ -5,23 +5,24 @@ import { BlockPanelGeneric } from '../block-panel-generic';
 import { localise } from '../../localisation';
 import { useSingleBlocklistCount } from '../../api/blocklist';
 import { useAccountResolver } from '../account-resolver';
+import { useFeatureFlag } from '../../api/featureFlags';
 
 export default function BlockedByPanel() {
   const accountQuery = useAccountResolver();
   const did = accountQuery.data?.shortDID;
   const blocklistQuery = useSingleBlocklist(did);
-  const totalQuery = useSingleBlocklistCount(did);
+  const shouldFetchBlockedbyCount = useFeatureFlag('blocked-by-count')
+  const totalQuery = useSingleBlocklistCount(did, shouldFetchBlockedbyCount);
   return (
     <BlockPanelGeneric
       className="blocked-by-panel"
       blocklistQuery={blocklistQuery}
       totalQuery={totalQuery}
-      header={({ count }) => (
-        <>
-          {localise(`Blocked by ${count.toLocaleString()}`, {
-            uk: `Блокують ${count.toLocaleString()}`,
+      header={({ count }) => (shouldFetchBlockedbyCount ? (<>
+        {localise(`Blocked by ${count.toLocaleString()}`, {
+          uk: `Блокують ${count.toLocaleString()}`,
           })}
-        </>
+        </>) : null
       )}
     />
   );

src/detail-panels/blocking-lists/blocking-lists-index.jsx

@@ -14,12 +14,14 @@ 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 BlockingLists() {
   const accountQuery = useAccountResolver();
   const shortHandle = accountQuery.data?.shortHandle;
   const { data, fetchNextPage, hasNextPage, isLoading, isFetching } = useBlockingLists(shortHandle);
-  const { data: totalData, isLoading: isLoadingTotal } = useBlockingListsTotal(shortHandle);
+  const shouldFetchlistsBlockingCount = useFeatureFlag('lists-blocking-count')
+  const { data: totalData, isLoading: isLoadingTotal } = useBlockingListsTotal(shortHandle,shouldFetchlistsBlockingCount);
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [tick, setTick] = useState(0);
@@ -30,15 +32,14 @@ export function BlockingLists() {
   const listPages = data?.pages || [];
   const allLists = listPages.flatMap((page) => page.blocklist);
   const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1));
-
   // Show loader for initial load
   if (isLoading) {
     return (
       <div style={{ padding: '1em', textAlign: 'center', opacity: '0.5' }}>
         <CircularProgress size="1.5em" /> 
-        <div style={{ marginTop: '0.5em' }}>
+       { shouldFetchlistsBlockingCount &&( <div style={{ marginTop: '0.5em' }}>
           {'Loading blocking lists...'}
-        </div>
+        </div>)}
       </div>
     );
   }
@@ -57,7 +58,7 @@ export function BlockingLists() {
 
       <h3 className='lists-header'>
         {(isLoadingTotal && !listTotalBlocks) && <span style={{ opacity: 0.5 }}>{"Counting lists..."}</span>}
-        {listTotalBlocks ?
+        {shouldFetchlistsBlockingCount && (listTotalBlocks ?
           <>
             {`Blocking ${Intl.NumberFormat().format(listTotalBlocks)} total users via lists`}
             <span className='panel-toggles'>
@@ -70,7 +71,7 @@ export function BlockingLists() {
               }
             </span>
           </> : 
-          isLoadingTotal ? null : 'Not blocking any users via lists'
+          isLoadingTotal ? null : 'Not blocking any users via lists')
         }
       </h3>