Reintroduce featureFlags object to avoid passing secret envs to the f…

…rontend
spliit-app · Feb 12, 2024 · 987ace9 · 987ace9
1 parent 8fdddb4
commit 987ace9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
@@ -6,7 +6,7 @@ import {
   getExpense,
   updateExpense,
 } from '@/lib/api'
-import { env } from '@/lib/env'
+import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -40,11 +40,6 @@ export default async function EditExpensePage({
     redirect(`/groups/${groupId}`)
   }
 
-  async function getEnvOnServer() {
-    'use server'
-    return env;
-  }
-
   return (
     <Suspense>
       <ExpenseForm
@@ -53,7 +48,7 @@ export default async function EditExpensePage({
         categories={categories}
         onSubmit={updateExpenseAction}
         onDelete={deleteExpenseAction}
-        env={await getEnvOnServer()}
+        runtimeFeatureFlags={await getRuntimeFeatureFlags()}
       />
     </Suspense>
   )

diff --git a/src/app/groups/[groupId]/expenses/create/page.tsx b/src/app/groups/[groupId]/expenses/create/page.tsx
@@ -1,7 +1,7 @@
 import { cached } from '@/app/cached-functions'
 import { ExpenseForm } from '@/components/expense-form'
 import { createExpense, getCategories } from '@/lib/api'
-import { env } from '@/lib/env'
+import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
@@ -27,18 +27,13 @@ export default async function ExpensePage({
     redirect(`/groups/${groupId}`)
   }
 
-  async function getEnvOnServer() {
-    'use server'
-    return env;
-  }
-
   return (
     <Suspense>
       <ExpenseForm
         group={group}
         categories={categories}
         onSubmit={createExpenseAction}
-        env={await getEnvOnServer()}
+        runtimeFeatureFlags={await getRuntimeFeatureFlags()}
       />
     </Suspense>
   )

diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
@@ -45,14 +45,15 @@ import { useForm } from 'react-hook-form'
 import { match } from 'ts-pattern'
 import { extractCategoryFromTitle } from './expense-form-actions'
 import type { env } from '@/lib/env'
+import { RuntimeFeatureFlags } from '@/lib/featureFlags'
 
 export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   expense?: NonNullable<Awaited<ReturnType<typeof getExpense>>>
   categories: NonNullable<Awaited<ReturnType<typeof getCategories>>>
   onSubmit: (values: ExpenseFormValues) => Promise<void>
   onDelete?: () => Promise<void>
-  env: typeof env
+  runtimeFeatureFlags: RuntimeFeatureFlags
 }
 
 export function ExpenseForm({
@@ -61,7 +62,7 @@ export function ExpenseForm({
   categories,
   onSubmit,
   onDelete,
-  env,
+  runtimeFeatureFlags,
 }: Props) {
   const isCreate = expense === undefined
   const searchParams = useSearchParams()
@@ -163,7 +164,7 @@ export function ExpenseForm({
                       {...field}
                       onBlur={async () => {
                         field.onBlur() // avoid skipping other blur event listeners since we overwrite `field`
-                        if (env.NEXT_PUBLIC_ENABLE_CATEGORY_EXTRACT) {
+                        if (runtimeFeatureFlags.enableCategoryExtract) {
                           setCategoryLoading(true)
                           const { categoryId } = await extractCategoryFromTitle(
                             field.value,
@@ -543,7 +544,7 @@ export function ExpenseForm({
           </CardContent>
         </Card>
 
-        {env.NEXT_PUBLIC_ENABLE_EXPENSE_DOCUMENTS && (
+        {runtimeFeatureFlags.enableExpenseDocuments && (
           <Card className="mt-4">
             <CardHeader>
               <CardTitle className="flex justify-between">

diff --git a/src/lib/featureFlags.ts b/src/lib/featureFlags.ts
@@ -0,0 +1,13 @@
+"use server"
+
+import { env } from "./env"
+
+export async function getRuntimeFeatureFlags() {
+  return {
+    enableExpenseDocuments: env.NEXT_PUBLIC_ENABLE_EXPENSE_DOCUMENTS,
+    enableReceiptExtract: env.NEXT_PUBLIC_ENABLE_RECEIPT_EXTRACT,
+    enableCategoryExtract: env.NEXT_PUBLIC_ENABLE_CATEGORY_EXTRACT,
+  };
+}
+
+export type RuntimeFeatureFlags = Awaited<ReturnType<typeof getRuntimeFeatureFlags>>;