Fix feature flag bug (#3092)

Co-authored-by: Saliou Diallo <saliou@audius.co>
AudiusProject · Mar 23, 2023 · f90a26e · f90a26e
1 parent 46a9468
commit f90a26e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 24 deletions.
diff --git a/apps/audius-client/packages/common/src/hooks/useFeatureFlag.ts b/apps/audius-client/packages/common/src/hooks/useFeatureFlag.ts
@@ -19,19 +19,19 @@ export const useRecomputeToggle = (
   configLoaded: boolean,
   remoteConfigInstance: RemoteConfigInstance
 ) => {
-  const [recomputeToggle, setRecomputeToggle] = useState(false)
+  const [recomputeToggle, setRecomputeToggle] = useState(0)
 
   const hasAccount = useHasAccount()
 
   // Flip recompute bool whenever account or config state changes
   useEffect(() => {
-    setRecomputeToggle((recompute) => !recompute)
+    setRecomputeToggle((recompute) => recompute + 1)
   }, [hasAccount, configLoaded])
 
   // Register callback for remote config account set,
   // which flips recompute bool
   const onUserStateChange = useCallback(() => {
-    setRecomputeToggle((recompute) => !recompute)
+    setRecomputeToggle((recompute) => recompute + 1)
   }, [])
 
   useEffect(() => {

diff --git a/apps/audius-client/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx b/apps/audius-client/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
@@ -14,6 +14,7 @@ import {
   formatDate,
   OverflowAction,
   imageBlank as placeholderArt,
+  FeatureFlags,
   PremiumConditions,
   Nullable
 } from '@audius/common'
@@ -39,6 +40,7 @@ import TrackBannerIcon, {
   TrackBannerIconType
 } from 'components/track/TrackBannerIcon'
 import UserBadges from 'components/user-badges/UserBadges'
+import { useFlag } from 'hooks/useRemoteConfig'
 import { useTrackCoverArt } from 'hooks/useTrackCoverArt'
 import { moodMap } from 'utils/moods'
 import { isDarkMode, isMatrix } from 'utils/theme/theme'
@@ -171,7 +173,11 @@ const TrackHeader = ({
   goToFavoritesPage,
   goToRepostsPage
 }: TrackHeaderProps) => {
-  const showSocials = !isUnlisted && doesUserHaveAccess
+  const { isEnabled: isGatedContentEnabled } = useFlag(
+    FeatureFlags.GATED_CONTENT_ENABLED
+  )
+  const showSocials =
+    !isUnlisted && (!isGatedContentEnabled || doesUserHaveAccess)
 
   const image = useTrackCoverArt(
     trackId,
@@ -228,7 +234,9 @@ const TrackHeader = ({
         : isSaved
         ? OverflowAction.UNFAVORITE
         : OverflowAction.FAVORITE,
-      !isPremium ? OverflowAction.ADD_TO_PLAYLIST : null,
+      !isGatedContentEnabled || !isPremium
+        ? OverflowAction.ADD_TO_PLAYLIST
+        : null,
       isFollowing
         ? OverflowAction.UNFOLLOW_ARTIST
         : OverflowAction.FOLLOW_ARTIST,
@@ -311,7 +319,10 @@ const TrackHeader = ({
 
   const renderCornerTag = () => {
     const showPremiumCornerTag =
-      !isLoading && premiumConditions && (isOwner || !doesUserHaveAccess)
+      isGatedContentEnabled &&
+      !isLoading &&
+      premiumConditions &&
+      (isOwner || !doesUserHaveAccess)
     const cornerTagIconType = showPremiumCornerTag
       ? isOwner
         ? premiumConditions.nft_collection
@@ -332,7 +343,7 @@ const TrackHeader = ({
   }
 
   const renderHeaderText = () => {
-    if (isPremium) {
+    if (isGatedContentEnabled && isPremium) {
       return (
         <div className={cn(styles.typeLabel, styles.premiumContentLabel)}>
           {premiumConditions?.nft_collection ? (
@@ -377,7 +388,10 @@ const TrackHeader = ({
         />
       </div>
       <div className={styles.buttonSection}>
-        {!doesUserHaveAccess && premiumConditions && trackId ? (
+        {isGatedContentEnabled &&
+        !doesUserHaveAccess &&
+        premiumConditions &&
+        trackId ? (
           <PremiumTrackSection
             isLoading={false}
             trackId={trackId}
@@ -389,7 +403,7 @@ const TrackHeader = ({
             buttonClassName={styles.premiumTrackSectionButton}
           />
         ) : null}
-        {doesUserHaveAccess ? (
+        {!isGatedContentEnabled || doesUserHaveAccess ? (
           <PlayButton playing={isPlaying} onPlay={onPlay} />
         ) : null}
         <ActionButtonRow
@@ -408,21 +422,24 @@ const TrackHeader = ({
           darkMode={isDarkMode()}
         />
       </div>
-      {doesUserHaveAccess && premiumConditions && trackId && (
-        <PremiumTrackSection
-          isLoading={false}
-          trackId={trackId}
-          premiumConditions={premiumConditions}
-          doesUserHaveAccess={doesUserHaveAccess}
-          isOwner={isOwner}
-          wrapperClassName={cn(
-            styles.premiumTrackSectionWrapper,
-            styles.unlockedSection
-          )}
-          className={styles.premiumTrackSection}
-          buttonClassName={styles.premiumTrackSectionButton}
-        />
-      )}
+      {isGatedContentEnabled &&
+        doesUserHaveAccess &&
+        premiumConditions &&
+        trackId && (
+          <PremiumTrackSection
+            isLoading={false}
+            trackId={trackId}
+            premiumConditions={premiumConditions}
+            doesUserHaveAccess={doesUserHaveAccess}
+            isOwner={isOwner}
+            wrapperClassName={cn(
+              styles.premiumTrackSectionWrapper,
+              styles.unlockedSection
+            )}
+            className={styles.premiumTrackSection}
+            buttonClassName={styles.premiumTrackSectionButton}
+          />
+        )}
       {coSign && (
         <div className={styles.coSignInfo}>
           <HoverInfo