fix: Client side feature flag check

src/app/student/events/[id]/page.tsx

@@ -42,7 +42,7 @@ export default async function EventDetailsPage({
 }: {
   params: { id: string }
 }) {
-  if (!feature("EVENT_PAGE")) {
+  if (!(await feature("EVENT_PAGE"))) {
     return notFound()
   }
 

src/app/student/events/page.tsx

@@ -5,7 +5,7 @@ import { fetchEvents } from "@/components/shared/hooks/api/useEvents"
 import { notFound } from "next/navigation"
 
 export default async function StudentEventPage() {
-  if (!feature("EVENT_PAGE")) {
+  if (!(await feature("EVENT_PAGE"))) {
     return notFound()
   }
   const events = await fetchEvents()

src/components/shared/feature.ts

@@ -2,13 +2,17 @@ import featureFlags, { FEATURE_FLAGS } from "@/feature_flags"
 import { decrypt, FlagOverridesType } from "@vercel/flags"
 import { cookies } from "next/headers"
 
-export async function feature(feature: keyof typeof featureFlags) {
+export async function features() {
   const overrideCookie = cookies().get("vercel-flag-overrides")?.value
   const overrides = overrideCookie
     ? await decrypt<FlagOverridesType>(overrideCookie)
     : {}
+  return {
+    ...FEATURE_FLAGS,
+    ...overrides
+  }
+}
 
-  const result = overrides?.[feature] ?? FEATURE_FLAGS[feature] ?? false
-  console.log("RESULT", result)
-  return result
+export async function feature(feature: keyof typeof featureFlags) {
+  return (await features())[feature] ?? false
 }

src/components/shared/hooks/useFeature.tsx

@@ -0,0 +1,16 @@
+import { features } from "@/components/shared/feature"
+import FEATURE_FLAGS from "@/feature_flags"
+import { useQuery } from "@tanstack/react-query"
+
+export function useFeature(feature?: keyof typeof FEATURE_FLAGS) {
+  const { data, isLoading } = useQuery({
+    queryKey: ["feature-flags"],
+    queryFn: async () => await features()
+  })
+
+  return {
+    isLoading,
+    enabled: feature ? data?.[feature] : null,
+    flags: data
+  }
+}