feat: merge getff to getpref

heyxyz · Nov 26, 2023 · 7e3381b · 7e3381b
1 parent 056763e
commit 7e3381b
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 163 deletions.
diff --git a/apps/api/pages/api/feature/getFeatureFlags.ts b/apps/api/pages/api/feature/getFeatureFlags.ts
diff --git a/apps/api/pages/api/internal/cloudflare/purge.ts b/apps/api/pages/api/internal/cloudflare/purge.ts
@@ -25,9 +25,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       {
         method: 'POST',
         body: JSON.stringify({ purge_everything: true }),
-        headers: {
-          Authorization: `Bearer ${process.env.CLOUDFLARE_API_KEY}`
-        }
+        headers: { Authorization: `Bearer ${process.env.CLOUDFLARE_API_KEY}` }
       }
     );
 

diff --git a/apps/api/pages/api/preference/getPreferences.ts b/apps/api/pages/api/preference/getPreferences.ts
@@ -26,14 +26,23 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         .json({ success: true, cached: true, result: JSON.parse(cache) });
     }
 
-    const [preference, pro] = await prisma.$transaction([
+    const [preference, pro, features] = await prisma.$transaction([
       prisma.preference.findUnique({ where: { id: id as string } }),
-      prisma.pro.findFirst({ where: { profileId: id as string } })
+      prisma.pro.findFirst({ where: { profileId: id as string } }),
+      prisma.profileFeature.findMany({
+        where: {
+          profileId: id as string,
+          enabled: true,
+          feature: { enabled: true }
+        },
+        select: { feature: { select: { key: true } } }
+      })
     ]);
 
     const response = {
       preference,
-      pro: { enabled: Boolean(pro) }
+      pro: { enabled: Boolean(pro) },
+      features: features.map((feature: any) => feature.feature?.key)
     };
 
     await redis.set(`preferences:${id}`, JSON.stringify(response));

diff --git a/apps/web/src/components/Common/Providers/FeatureFlagsProvider.tsx b/apps/web/src/components/Common/Providers/FeatureFlagsProvider.tsx
diff --git a/apps/web/src/components/Common/Providers/PreferencesProvider.tsx b/apps/web/src/components/Common/Providers/PreferencesProvider.tsx
@@ -1,10 +1,12 @@
 import { HEY_API_URL } from '@hey/data/constants';
+import { FeatureFlag } from '@hey/data/feature-flags';
 import getCurrentSession from '@lib/getCurrentSession';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { type FC } from 'react';
 import { usePreferencesStore } from 'src/store/non-persisted/usePreferencesStore';
 import { useProStore } from 'src/store/non-persisted/useProStore';
+import { useFeatureFlagsStore } from 'src/store/persisted/useFeatureFlagsStore';
 import { useVerifiedMembersStore } from 'src/store/persisted/useVerifiedMembersStore';
 import { isAddress } from 'viem';
 
@@ -18,6 +20,13 @@ const PreferencesProvider: FC = () => {
     (state) => state.setHighSignalNotificationFilter
   );
   const setIsPro = useProStore((state) => state.setIsPro);
+  const setFeatureFlags = useFeatureFlagsStore(
+    (state) => state.setFeatureFlags
+  );
+  const setStaffMode = useFeatureFlagsStore((state) => state.setStaffMode);
+  const setGardenerMode = useFeatureFlagsStore(
+    (state) => state.setGardenerMode
+  );
 
   const fetchPreferences = async () => {
     try {
@@ -33,6 +42,11 @@ const PreferencesProvider: FC = () => {
           data.result?.preference.highSignalNotificationFilter || false
         );
         setIsPro(data.result?.pro.enabled || false);
+        setFeatureFlags(data?.result.features || []);
+        setStaffMode(data?.result.features.includes(FeatureFlag.StaffMode));
+        setGardenerMode(
+          data?.result.features.includes(FeatureFlag.GardenerMode)
+        );
       }
     } catch {}
   };

diff --git a/apps/web/src/components/Common/Providers/index.tsx b/apps/web/src/components/Common/Providers/index.tsx
@@ -13,7 +13,6 @@ import { type ReactNode } from 'react';
 import ErrorBoundary from '../ErrorBoundary';
 import Layout from '../Layout';
 import FeaturedGroupsProvider from './FeaturedGroupsProvider';
-import FeatureFlagsProvider from './FeatureFlagsProvider';
 import LeafwatchProvider from './LeafwatchProvider';
 import LensSubscriptionsProvider from './LensSubscriptionsProvider';
 import PreferencesProvider from './PreferencesProvider';
@@ -37,7 +36,6 @@ const Providers = ({ children }: { children: ReactNode }) => {
         <ApolloProvider client={lensApolloClient}>
           <LensSubscriptionsProvider />
           <QueryClientProvider client={queryClient}>
-            <FeatureFlagsProvider />
             <PreferencesProvider />
             <FeaturedGroupsProvider />
             <LivepeerConfig client={livepeerClient} theme={getLivepeerTheme}>

diff --git a/apps/web/src/components/Shared/Navbar/NavItems/GardenerMode.tsx b/apps/web/src/components/Shared/Navbar/NavItems/GardenerMode.tsx
@@ -32,7 +32,7 @@ const GardenerMode: FC<ModModeProps> = ({ className = '' }) => {
       {
         loading: 'Toggling gardener mode...',
         success: () => {
-          axios.get(`${HEY_API_URL}/feature/getFeatureFlags`, {
+          axios.get(`${HEY_API_URL}/preference/getPreferences`, {
             params: { id: currentProfile?.id }
           });
           setGardenerMode(!gardenerMode);

diff --git a/apps/web/src/components/Shared/Navbar/NavItems/StaffMode.tsx b/apps/web/src/components/Shared/Navbar/NavItems/StaffMode.tsx
@@ -30,7 +30,7 @@ const StaffMode: FC<StaffModeProps> = ({ className = '' }) => {
       {
         loading: 'Toggling staff mode...',
         success: () => {
-          axios.get(`${HEY_API_URL}/feature/getFeatureFlags`, {
+          axios.get(`${HEY_API_URL}/preference/getPreferences`, {
             params: { id: currentProfile?.id }
           });
           setStaffMode(!staffMode);

diff --git a/apps/web/src/components/StaffTools/Panels/Profile/Access/ActivateLifetimePro.tsx b/apps/web/src/components/StaffTools/Panels/Profile/Access/ActivateLifetimePro.tsx
@@ -2,41 +2,29 @@ import { HEY_API_URL } from '@hey/data/constants';
 import type { Profile } from '@hey/lens';
 import { Toggle } from '@hey/ui';
 import getAuthWorkerHeaders from '@lib/getAuthWorkerHeaders';
-import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import type { FC } from 'react';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
+import { useUpdateEffect } from 'usehooks-ts';
 
 import ToggleWrapper from '../ToggleWrapper';
 
 interface ActivateLifetimeProProps {
   profile: Profile;
+  isPro: boolean;
 }
 
-const ActivateLifetimePro: FC<ActivateLifetimeProProps> = ({ profile }) => {
-  const [isPro, setIsPro] = useState(false);
+const ActivateLifetimePro: FC<ActivateLifetimeProProps> = ({
+  profile,
+  isPro: enabled
+}) => {
   const [loading, setLoading] = useState(false);
+  const [isPro, setIsPro] = useState(false);
 
-  const fetchProEnabled = async () => {
-    try {
-      setLoading(true);
-      const response = await axios.get(
-        `${HEY_API_URL}/preference/getPreferences`,
-        { params: { id: profile.id } }
-      );
-      const { data } = response;
-      setIsPro(data.result?.pro.enabled || false);
-    } catch {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useQuery({
-    queryKey: ['fetchProEnabled', profile.id || ''],
-    queryFn: fetchProEnabled
-  });
+  useUpdateEffect(() => {
+    setIsPro(enabled);
+  }, [enabled]);
 
   const updatePro = async () => {
     setLoading(true);

diff --git a/apps/web/src/components/StaffTools/Panels/Profile/Access/index.tsx b/apps/web/src/components/StaffTools/Panels/Profile/Access/index.tsx
@@ -7,9 +7,10 @@ import Verify from './Verify';
 
 interface RankProps {
   profile: Profile;
+  isPro: boolean;
 }
 
-const Access: FC<RankProps> = ({ profile }) => {
+const Access: FC<RankProps> = ({ profile, isPro }) => {
   return (
     <>
       <div className="mt-5 flex items-center space-x-2 text-yellow-600">
@@ -18,7 +19,7 @@ const Access: FC<RankProps> = ({ profile }) => {
       </div>
       <div className="mt-3 space-y-2 font-bold">
         <Verify profile={profile} />
-        <ActivateLifetimePro profile={profile} />
+        <ActivateLifetimePro profile={profile} isPro={isPro} />
       </div>
     </>
   );

diff --git a/apps/web/src/components/StaffTools/Panels/Profile/FeatureFlags.tsx b/apps/web/src/components/StaffTools/Panels/Profile/FeatureFlags.tsx
@@ -1,43 +1,30 @@
 import { FlagIcon } from '@heroicons/react/24/outline';
-import { HEY_API_URL } from '@hey/data/constants';
 import { FeatureFlag } from '@hey/data/feature-flags';
 import type { Profile } from '@hey/lens';
 import { Modal } from '@hey/ui';
 import isFeatureEnabled from '@lib/isFeatureEnabled';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
 import { type FC, useState } from 'react';
+import { useUpdateEffect } from 'usehooks-ts';
 
 import UpdateFeatureFlags from './UpdateFeatureFlags';
 
 interface FeatureFlagsProps {
   profile: Profile;
+  loading: boolean;
+  features: string[];
 }
 
-const FeatureFlags: FC<FeatureFlagsProps> = ({ profile }) => {
+const FeatureFlags: FC<FeatureFlagsProps> = ({
+  profile,
+  loading,
+  features
+}) => {
   const [showFeatureFlagsModal, setShowFeatureFlagsModal] = useState(false);
   const [flags, setFlags] = useState<string[]>([]);
 
-  const getFeatureFlags = async () => {
-    try {
-      const response = await axios.get(
-        `${HEY_API_URL}/feature/getFeatureFlags`,
-        { params: { id: profile.id } }
-      );
-      const { data } = response;
-
-      setFlags(data?.features || []);
-      return true;
-    } catch (error) {
-      return false;
-    }
-  };
-
-  const { isLoading } = useQuery({
-    queryKey: ['getFeatureFlags', profile.id],
-    queryFn: getFeatureFlags,
-    enabled: Boolean(profile.id)
-  });
+  useUpdateEffect(() => {
+    setFlags(features);
+  }, [features]);
 
   return (
     <>
@@ -46,9 +33,9 @@ const FeatureFlags: FC<FeatureFlagsProps> = ({ profile }) => {
         <div className="text-lg font-bold">Feature flags</div>
       </div>
       <div className="mt-3 space-y-2 font-bold">
-        {isLoading ? (
+        {loading ? (
           <div>Loading...</div>
-        ) : flags.length > 0 ? (
+        ) : flags?.length > 0 ? (
           <div>
             {flags.map((flag) => (
               <div key={flag}>{flag}</div>

diff --git a/apps/web/src/components/StaffTools/Panels/Profile/index.tsx b/apps/web/src/components/StaffTools/Panels/Profile/index.tsx
@@ -45,6 +45,25 @@ const ProfileStaffTool: FC<ProfileStaffToolProps> = ({ profile }) => {
     queryFn: getHaveUsedHey
   });
 
+  const fetchPreferences = async () => {
+    try {
+      const response = await axios.get(
+        `${HEY_API_URL}/preference/getPreferences`,
+        { params: { id: profile.id } }
+      );
+      const { data } = response;
+
+      return data.result;
+    } catch {
+      return null;
+    }
+  };
+
+  const { data: preferences, isLoading: preferencesLoading } = useQuery({
+    queryKey: ['fetchPreferences', profile.id || ''],
+    queryFn: fetchPreferences
+  });
+
   return (
     <Card
       as="aside"
@@ -134,8 +153,12 @@ const ProfileStaffTool: FC<ProfileStaffToolProps> = ({ profile }) => {
           <Rank profile={profile} />
         </>
       ) : null}
-      <Access profile={profile} />
-      <FeatureFlags profile={profile} />
+      <Access profile={profile} isPro={preferences?.pro.enabled} />
+      <FeatureFlags
+        profile={profile}
+        features={preferences?.features}
+        loading={preferencesLoading}
+      />
     </Card>
   );
 };