Add Feature Flags (#251)

apps/resources/components/Card/Card.tsx

@@ -20,6 +20,7 @@ import { ResourceLink } from './ResourceLink';
 import { ShareButton } from './ShareButton';
 import { Title } from './Title';
 import { TypeButton } from './TypeButton';
+import { featureFlags } from 'lib/featureFlags';
 
 interface Props {
   resourceId: number;
@@ -43,7 +44,7 @@ interface Props {
   note?: string | null;
 }
 
-export const Card = ({
+export const Card = async ({
   resourceId,
   resourceType,
   showType,
@@ -57,6 +58,7 @@ export const Card = ({
   suggestion = false,
   note,
 }: Props) => {
+  const { collections } = await featureFlags();
   const resourceLink = tags?.at(0)?.url;
   const { userId } = auth();
 
@@ -154,12 +156,12 @@ export const Card = ({
           )}
 
           {/* Add to collection */}
-          {/* {userId && (
+          {collections && userId && (
             <CollectionButton
               resourceId={resourceId}
               resourceType={resourceType}
             />
-          )} */}
+          )}
         </div>
       </div>
 

apps/resources/components/Header/Navigation/Navigation.tsx

@@ -1,9 +1,11 @@
 import { Heading } from 'design-system';
+import { featureFlags } from 'lib/featureFlags';
 import Link from 'next/link';
 import { NavigationLink } from './NavigationLink';
 import { UserButton } from './UserButton';
 
-export const Navigation = () => {
+export const Navigation = async () => {
+  const { collections } = await featureFlags();
   return (
     <nav className="flex flex-wrap items-center justify-between gap-x-10 gap-y-4 px-6 py-6 sm:px-8 xl:px-10">
       <div className="font-serif text-2xl font-bold">
@@ -25,9 +27,11 @@ export const Navigation = () => {
         <li>
           <NavigationLink href="/resources">Resources</NavigationLink>
         </li>
-        {/* <li>
-          <NavigationLink href="/collections">Collections</NavigationLink>
-        </li> */}
+        {collections && (
+          <li>
+            <NavigationLink href="/collections">Collections</NavigationLink>
+          </li>
+        )}
         <li>
           <UserButton />
         </li>

apps/resources/lib/featureFlags.ts

@@ -0,0 +1,33 @@
+import { getAll } from '@vercel/edge-config';
+import { z } from 'zod';
+
+const projectKey = 'lcdNet';
+const nodeEnv = z
+  .enum(['development', 'production'])
+  .parse(process.env.NODE_ENV);
+const vercelEnv = z
+  .enum(['development', 'preview', 'production'])
+  .optional()
+  .parse(process.env.VERCEL_ENV);
+
+const env = vercelEnv || nodeEnv;
+
+const flagsSchema = z.object({
+  lcdNet: z.object({
+    production: z.object({
+      collections: z.boolean(),
+    }),
+    preview: z.object({
+      collections: z.boolean(),
+    }),
+    development: z.object({
+      collections: z.boolean(),
+    }),
+  }),
+});
+
+export const featureFlags = async () => {
+  const flags = await getAll();
+  const parsedFlags = flagsSchema.parse(flags);
+  return parsedFlags[projectKey][env];
+};

apps/resources/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-toggle": "^1.0.3",
+    "@vercel/edge-config": "^0.4.1",
     "class-variance-authority": "0.7.0",
     "contentlayer": "0.3.4",
     "database": "workspace:*",

turbo.json

@@ -32,6 +32,8 @@
     "MAILCHIMP_API_KEY",
     "MAILCHIMP_API_SERVER",
     "MAILCHIMP_AUDIENCE_ID",
-    "SUGGESTION_MAIL_PASSWORD"
+    "SUGGESTION_MAIL_PASSWORD",
+    "NODE_ENV",
+    "VERCEL_ENV"
   ]
 }