Remove RSC on environments page (#1250)

inngest · Mar 26, 2024 · 1e0bff8 · 1e0bff8
1 parent edc9918
commit 1e0bff8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/page.tsx b/ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { type Route } from 'next';
 import Link from 'next/link';
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
@@ -6,13 +8,30 @@ import { Button } from '@inngest/components/Button';
 import AppLink from '@/components/AppLink';
 import AppNavigation from '@/components/Navigation/AppNavigation';
 import Toaster from '@/components/Toaster';
-import getAllEnvironments from '@/queries/server-only/getAllEnvironments';
+import LoadingIcon from '@/icons/LoadingIcon';
+import { useEnvironments } from '@/queries';
 import { EnvironmentType, LEGACY_TEST_MODE_NAME } from '@/utils/environments';
 import { EnvironmentArchiveButton } from './EnvironmentArchiveButton';
 import EnvironmentListTable from './EnvironmentListTable';
 
-export default async function Envs() {
-  const environments = await getAllEnvironments();
+export default function Envs() {
+  const [{ data: environments, fetching, error }] = useEnvironments();
+  if (error) {
+    throw error;
+  }
+  if (fetching) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <LoadingIcon />
+      </div>
+    );
+  }
+  if (!environments) {
+    // Unreachable
+    throw new Error(
+      'Unable to load environments. Please try again or contact support if this continues.'
+    );
+  }
 
   // Break the environments into different groups
   const legacyTestMode = environments.find(

diff --git a/ui/apps/dashboard/src/components/Navigation/AppNavigation.tsx b/ui/apps/dashboard/src/components/Navigation/AppNavigation.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { type Route } from 'next';
 import Link from 'next/link';
 import {
@@ -8,7 +10,7 @@ import {
 } from '@heroicons/react/20/solid';
 import { Badge } from '@inngest/components/Badge';
 
-import { getBooleanFlag } from '@/components/FeatureFlags/ServerFeatureFlag';
+import { useBooleanFlag } from '@/components/FeatureFlags/hooks';
 import OrganizationDropdown from '@/components/Navigation/OrganizationDropdown';
 import UserDropdown from '@/components/Navigation/UserDropdown';
 import InngestLogo from '@/icons/InngestLogo';
@@ -32,8 +34,8 @@ type NavItem = {
 const ALL_ENVIRONMENTS_SLUG = 'all';
 const BRANCH_PARENT_SLUG = 'branch';
 
-export default async function AppNavigation({ environmentSlug }: AppNavigationProps) {
-  const isEventSearchEnabled = await getBooleanFlag('event-search');
+export default function AppNavigation({ environmentSlug }: AppNavigationProps) {
+  const { value: isEventSearchEnabled } = useBooleanFlag('event-search');
 
   let items: NavItem[] = [
     {