Merge pull request #246 from colonial-heritage/revalidate-community

Revalidate '/communities' after new community is created

apps/researcher/src/app/[locale]/communities/[slug]/page.tsx

@@ -6,6 +6,7 @@ import {JoinCommunityButton, EditCommunityButton} from './buttons';
 import {getMemberships, getCommunityBySlug, isAdmin} from '@/lib/community';
 import ErrorMessage from '@/components/error-message';
 import {ClerkAPIResponseError} from '@clerk/shared';
+import {revalidatePath} from 'next/cache';
 
 interface Props {
   params: {
@@ -21,7 +22,11 @@ export default async function CommunityPage({params}: Props) {
   try {
     community = await getCommunityBySlug(params.slug);
   } catch (err) {
-    if ((err as ClerkAPIResponseError).status === 404) {
+    const errorStatus = (err as ClerkAPIResponseError).status;
+    if (errorStatus === 404 || errorStatus === 410) {
+      // This could be a sign of a deleted community in the cache.
+      // So, revalidate the communities page.
+      revalidatePath('/[locale]/communities', 'page');
       return <ErrorMessage error={t('noEntity')} testId="no-entity" />;
     }
     return <ErrorMessage error={t('error')} />;

apps/researcher/src/app/[locale]/communities/community-card.tsx

@@ -4,6 +4,8 @@ import {useTranslations} from 'next-intl';
 import Link from 'next-intl/link';
 import Image from 'next/image';
 import {Suspense} from 'react';
+import {revalidatePath} from 'next/cache';
+import {ClerkAPIResponseError} from '@clerk/shared';
 
 interface MembershipCountProps {
   communityId: string;
@@ -12,7 +14,18 @@ interface MembershipCountProps {
 
 async function MembershipCount({communityId, locale}: MembershipCountProps) {
   const t = await getTranslator(locale, 'Communities');
-  const memberships = await getMemberships(communityId);
+
+  let memberships = [];
+  try {
+    memberships = await getMemberships(communityId);
+  } catch (err) {
+    const errorStatus = (err as ClerkAPIResponseError).status;
+    if (errorStatus === 404 || errorStatus === 410) {
+      // This could be a sign of a deleted community in the cache.
+      // So, revalidate the communities page.
+      revalidatePath('/[locale]/communities', 'page');
+    }
+  }
 
   return t.rich('membershipCount', {
     count: memberships.length,

apps/researcher/src/app/[locale]/communities/page.tsx

@@ -5,6 +5,9 @@ import CommunityCard from './community-card';
 import {ClientListStore} from '@colonial-collections/list-store';
 import {Paginator, SearchField, OrderSelector} from 'ui/list';
 
+// 1 day = 60*60*24 = 86400
+export const revalidate = 86400;
+
 interface Props {
   params: {
     locale: string;

apps/researcher/src/app/[locale]/navigation.tsx

@@ -187,7 +187,15 @@ export default function Navigation({locales}: Props) {
                         );
                       })}
                       <SignedIn>
-                        <OrganizationSwitcher />
+                        <OrganizationSwitcher
+                          afterCreateOrganizationUrl={organization =>
+                            `/revalidate/?path=/[locale]/communities&redirect=/communities/${organization.slug}`
+                          }
+                          afterLeaveOrganizationUrl="/communities"
+                          afterSelectOrganizationUrl={organization =>
+                            `/communities/${organization.slug}`
+                          }
+                        />
                         <UserButton afterSignOutUrl="/" />
                       </SignedIn>
                       <SignedOut>

apps/researcher/src/app/[locale]/revalidate/page.tsx

@@ -0,0 +1,21 @@
+import {redirect} from 'next/navigation';
+import {revalidatePath} from 'next/cache';
+
+interface Props {
+  searchParams: {
+    path?: string;
+    redirect?: string;
+  };
+}
+
+export default function RevalidatePath({searchParams}: Props) {
+  if (searchParams.path) {
+    revalidatePath(searchParams.path, 'page');
+  }
+
+  if (!searchParams.redirect) {
+    return redirect('/');
+  }
+
+  redirect(searchParams.redirect);
+}