All Feature's using Feature Flag Hook #324

HYDRO2070 · 2025-03-16T20:40:01Z

No description provided.

vercel · 2025-03-16T20:40:06Z

@HYDRO2070 is attempting to deploy a commit to the thieflord06's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-03-16T20:44:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clearsky-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 3, 2025 9:27am

noahm

the majority of these flags are associated with specific queries the app makes, but as coded here, a disabled flag does not prevent the app from making the query. this defeats the whole point of having the flags in the first place.

noahm · 2025-03-17T01:52:21Z

src/detail-panels/account-header/account-header.jsx

@@ -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);


the placement flag needs to conditionally disable this query rather than just hiding the ui it displays in

noahm · 2025-03-17T02:03:19Z

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

@@ -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)


likewise, this needs to disable the queries, but those are made elsewhere and passed by props, so this hook needs to be called elsewhere too

noahm · 2025-03-17T03:26:30Z

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

@@ -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')


same here as well. should be controlling whether a query is made

noahm · 2025-03-17T03:26:44Z

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

@@ -30,7 +31,7 @@ export function BlockingLists() {
  const listPages = data?.pages || [];
  const allLists = listPages.flatMap((page) => page.blocklist);
  const filteredLists = !search ? allLists : matchSearch(allLists, search, () => setTick(tick + 1));
-
+  const listsBlockingCount = useFeatureFlag('lists-blocking-count')


noahm · 2025-03-17T03:30:33Z

src/detail-panels/labeled/index.jsx

@@ -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')


this this is one last api call that wasn't addressed in the last round of changes

noahm · 2025-03-17T03:32:17Z

src/detail-panels/lists/lists.jsx

@@ -29,6 +30,7 @@ export function Lists() {
  const [tick, setTick] = useState(0);
  const search = (searchParams.get('q') || '').trim();
  const [showSearch, setShowSearch] = useState(!!search);
+  const listsOnListCounts = useFeatureFlag('lists-on-list-counts')


noahm · 2025-03-17T03:33:49Z

src/detail-panels/packs/packed.jsx

@@ -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');


and again here

noahm · 2025-03-17T03:34:00Z

src/detail-panels/packs/packs.jsx

@@ -30,6 +31,7 @@ export function Packs({ created = false }) {
  const [tick, setTick] = useState(0);
  const search = (searchParams.get('q') || '').trim();
  const [showSearch, setShowSearch] = useState(!!search);
+  const starterPacksMadeCount = useFeatureFlag('starter-packs-made-count');


HYDRO2070 · 2025-04-14T19:57:18Z

@noahm Done with the changes here. Please review it. (Name of the Variable are a bit long. I did it for Understanding Purpose.)
@thieflord06

noahm

This looks much better now. Very close to ready. There's one api call that got overlooked from last time, and two new places where you're now conditionally calling a hook. they should use the same pattern as the others where you can pass an enabled or skip parameter.

noahm · 2025-04-15T03:34:34Z

src/detail-panels/account-header/account-header.jsx

+  const userPlacement = useFeatureFlag('user-placement')
+
+  // call only if userPlacement is true
+  const placementquery = (userPlacement) ? usePlacement(resolved.data?.shortDID) : null;


you cannot conditionally call a hook. this breaks the rules of react hooks.

noahm · 2025-04-15T03:35:27Z

src/detail-panels/account-header/account-extra-info.jsx

+  const ishandleHistory = useFeatureFlag('handle-history')
+
+  // calls only if ishandleHistory is true
+  const handleHistoryQuery = (ishandleHistory) ? useHandleHistory(account?.shortDID) : null;


this is also breaking the rules of hooks

noahm · 2025-04-15T03:36:49Z

src/detail-panels/labeled/index.jsx

@@ -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')


this this is one last api call that wasn't addressed in the last round of changes

HYDRO2070 · 2025-04-15T19:11:22Z

@noahm @thieflord06
Done.

Regarding the label count: the API is fetching all the labels, not just calling it for the count. If we were to stop that call, the labels wouldn't be fetched at all—which we don’t want.

Signed-off-by: Shashank pandey <[email protected]>

noahm

You're totally right about the labels count, my apologies. (Seems like a completely pointless flag for us to have in that case) This looks good to go now!

thieflord06 · 2025-04-29T01:03:20Z

From testing it looks like the counts aren't behaving correctly when not enabled.

lists-blocking-count
blocked-by-count
blocking-count
lists-on-count
lists-blocked-by-count
lists-on-list-counts
starter-packs-in-count
labels-count

Labels-count is the only one I've been able to confirm is working as expected.

thieflord06 · 2025-06-19T15:37:16Z

@HYDRO2070 Any update on this?

HYDRO2070 · 2025-07-03T09:25:07Z

Done with the changes. Please check @thieflord06 @noahm

Copilot

Pull Request Overview

Most components and API hooks now respect feature flags for conditional data fetching and UI rendering.

Integrated useFeatureFlag in UI components to toggle stats, packs, lists, block panels, and account info features
Extended API hooks to accept feature-flag “enabled” parameters for conditional queries
Removed legacy commented checks and streamlined conditional rendering

Reviewed Changes

Copilot reviewed 18 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/landing/home-stats/home-stats-main.jsx	Added feature flag for total-users-wheel
src/detail-panels/packs/packs.jsx	Wrapped total count in `useFeatureFlag` guard
src/detail-panels/packs/packed.jsx	Introduced flag to control packs-in-count queries
src/detail-panels/lists/lists.jsx	Guarded list-count API and UI with feature flag
src/detail-panels/lists/list-view.jsx	Passed spam overlay flag to `ListViewEntry`
src/detail-panels/labeled/index.jsx	Wrapped labels-count header in feature-flag check
src/detail-panels/blocking/index.jsx	Conditional blocking count fetch and header
src/detail-panels/blocking-lists/blocking-lists-index.jsx	Feature-flag-guarded blocking-lists total
src/detail-panels/blocked-by/index.jsx	Guarded single block-by count with feature flag
src/detail-panels/blocked-by-lists/blocked-by-lists-index.jsx	Wrapped blocked-by-lists total in feature flag
src/detail-panels/block-panel-generic/block-panel-generic.jsx	Minor whitespace changes
src/detail-panels/account-header/account-header.jsx	Added flags for handle history and placement
src/detail-panels/account-header/account-extra-info.jsx	Wrapped description and handle history in flags
src/api/placement.js	Added `shoulduserPlacement` param to `usePlacement`
src/api/packs.js	Hook signatures updated for starter-packs totals
src/api/lists.js	Hook signature updated for list counts
src/api/handle-history.js	Hook signature updated for handle history
src/api/blocklist.js	Hook signatures updated for various blocklist totals

Comments suppressed due to low confidence (3)

src/detail-panels/packs/packs.jsx:27

[nitpick] The variable name shouldFetchstarterPacksMadeCount has inconsistent camelCase; consider shouldFetchStarterPacksMadeCount for readability.

  const shouldFetchstarterPacksMadeCount = useFeatureFlag('starter-packs-made-count');

src/api/placement.js:12

[nitpick] Parameter shoulduserPlacement should follow camelCase (shouldUserPlacement) to align with conventions.

export function usePlacement(handleOrDID,shoulduserPlacement) {

src/detail-panels/packs/packed.jsx:27

This assignment is split across two lines and will cause a syntax error. Combine into one statement, e.g.:
const shouldFetchStarterPacksInCount = useFeatureFlag('starter-packs-in-count');

  const shouldFetchstarterPacksInCount =

Copilot · 2025-07-03T16:41:16Z

src/detail-panels/account-header/account-header.jsx

@@ -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);


[nitpick] This unconditionally fetches handle history. It would be better to gate it behind a feature flag (as in AccountExtraInfo) instead of passing true directly.

Suggested change

const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID,true);

const shouldFetchHandleHistory = useFeatureFlag('handle-history');

const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID, shouldFetchHandleHistory);

Copilot · 2025-07-03T16:41:16Z

src/detail-panels/labeled/index.jsx

@@ -95,8 +96,11 @@ export default function LabeledPanel() {
  const did = accountQuery.data?.shortDID;
  const { data: labelers, isLoading: isLoadingLabelers } = useLabelers();

+  // this hook will be called to featch all the label


[nitpick] Typo in comment: featch should be fetch.

Suggested change

// this hook will be called to featch all the label

// this hook will be called to fetch all the label

All Feature's using Feature Flag Hook

c38903a

vercel bot deployed to Preview March 16, 2025 20:45 View deployment

thieflord06 requested review from thieflord06 and noahm March 16, 2025 21:33

noahm requested changes Mar 17, 2025

View reviewed changes

Optimize feature flag to skip unnecessary fetches

d21e848

vercel bot deployed to Preview April 14, 2025 19:52 View deployment

noahm requested changes Apr 15, 2025

View reviewed changes

Remove Conditional Hook to Simplify Logic

859fe9f

vercel bot deployed to Preview April 15, 2025 19:08 View deployment

Merge branch 'dev' into dev

3b8b6e2

Signed-off-by: Shashank pandey <[email protected]>

vercel bot deployed to Preview April 15, 2025 19:25 View deployment

noahm approved these changes Apr 17, 2025

View reviewed changes

Merge branch 'ClearskyApp06:dev' into dev

52bba9d

vercel bot deployed to Preview July 1, 2025 18:03 View deployment

Added the Conditional Rendering for False Flag

4d2a1c0

vercel bot deployed to Preview July 3, 2025 09:22 View deployment

vercel bot deployed to Preview July 3, 2025 09:26 View deployment

shashankpandey2070 force-pushed the dev branch from 0ae42a8 to 4d2a1c0 Compare July 3, 2025 09:35

thieflord06 requested review from noahm and Copilot July 3, 2025 16:39

Copilot AI reviewed Jul 3, 2025

View reviewed changes

thieflord06 enabled auto-merge July 3, 2025 16:43

	const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID,true);
	const shouldFetchHandleHistory = useFeatureFlag('handle-history');
	const handleHistoryQuery = useHandleHistory(resolved.data?.shortDID, shouldFetchHandleHistory);

	// this hook will be called to featch all the label
	// this hook will be called to fetch all the label

Uh oh!

All Feature's using Feature Flag Hook #324

Are you sure you want to change the base?

All Feature's using Feature Flag Hook #324

Uh oh!

Conversation

HYDRO2070 commented Mar 16, 2025

Uh oh!

vercel bot commented Mar 16, 2025

Uh oh!

vercel bot commented Mar 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noahm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HYDRO2070 commented Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noahm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HYDRO2070 commented Apr 15, 2025

Uh oh!

noahm left a comment

Choose a reason for hiding this comment

Uh oh!

thieflord06 commented Apr 29, 2025

Uh oh!

thieflord06 commented Jun 19, 2025

Uh oh!

HYDRO2070 commented Jul 3, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vercel bot commented Mar 16, 2025 •

edited

Loading

HYDRO2070 commented Apr 14, 2025 •

edited

Loading