Revalidate pages after joining and some small code refactors

apps/researcher/src/app/[locale]/communities/[slug]/actions.ts

@@ -3,21 +3,34 @@
 import {joinCommunity, updateDescription} from '@/lib/community';
 import {revalidatePath} from 'next/cache';
 
-interface UpdateDescriptionActionProps {
+interface UpdateDescriptionAndRevalidateProps {
   communityId: string;
   communitySlug: string;
   description: string;
 }
 
-export async function updateDescriptionAction({
+export async function updateDescriptionAndRevalidate({
   communityId,
   communitySlug,
   description,
-}: UpdateDescriptionActionProps) {
+}: UpdateDescriptionAndRevalidateProps) {
   await updateDescription({communityId, description});
   revalidatePath(`/[locale]/communities/${communitySlug}`, 'page');
   revalidatePath('/[locale]/communities', 'page');
 }
 
-// Export as server actions.
-export {joinCommunity as joinCommunityAction};
+interface JoinCommunityAndRevalidateProps {
+  communityId: string;
+  communitySlug: string;
+  userId: string;
+}
+
+export async function joinCommunityAndRevalidate({
+  communityId,
+  communitySlug,
+  userId,
+}: JoinCommunityAndRevalidateProps) {
+  await joinCommunity({communityId, userId});
+  revalidatePath(`/[locale]/communities/${communitySlug}`, 'page');
+  revalidatePath('/[locale]/communities', 'page');
+}

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

@@ -4,14 +4,15 @@ import {useState} from 'react';
 import {useTranslations} from 'next-intl';
 import {useClerk, useUser} from '@clerk/nextjs';
 import {useTransition} from 'react';
-import {joinCommunityAction} from './actions';
+import {joinCommunityAndRevalidate} from './actions';
 
 interface Props {
   communityId: string;
+  communitySlug: string;
 }
 
 // If logged in and not part of the community, show the join button
-export function JoinCommunityButton({communityId}: Props) {
+export function JoinCommunityButton({communityId, communitySlug}: Props) {
   const {isLoaded, isSignedIn, user} = useUser();
   const [isClicked, setIsClicked] = useState(false);
   const [hasError, setHasError] = useState(false);
@@ -34,8 +35,9 @@ export function JoinCommunityButton({communityId}: Props) {
     setIsClicked(true);
     startTransition(async () => {
       try {
-        await joinCommunityAction({
-          organizationId: communityId,
+        await joinCommunityAndRevalidate({
+          communityId,
+          communitySlug,
           userId: user!.id,
         });
       } catch (err) {

apps/researcher/src/app/[locale]/communities/[slug]/edit-description-form.tsx

@@ -3,7 +3,7 @@
 import {useForm, SubmitHandler} from 'react-hook-form';
 import {useTranslations} from 'next-intl';
 import {useSlideOut, useNotifications} from 'ui';
-import {updateDescriptionAction} from './actions';
+import {updateDescriptionAndRevalidate} from './actions';
 
 interface Props {
   communityId: string;
@@ -43,7 +43,7 @@ export default function EditDescriptionForm({
 
   const onSubmit: SubmitHandler<FormValues> = async descriptionFormValues => {
     try {
-      await updateDescriptionAction(descriptionFormValues);
+      await updateDescriptionAndRevalidate(descriptionFormValues);
       addNotification({
         id: 'add-object-list-success',
         message: <>{t('descriptionUpdated')}</>,

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

@@ -109,7 +109,10 @@ export default async function CommunityPage({params}: Props) {
               </SlideOut>
             </div>
             <div className="flex flex-col items-start md:justify-center md:items-center w-full mb-4">
-              <JoinCommunityButton communityId={community.id} />
+              <JoinCommunityButton
+                communityId={community.id}
+                communitySlug={params.slug}
+              />
               <SlideOutButton
                 hideIfOpen
                 id={slideOutDescriptionId}

apps/researcher/src/lib/community.ts

@@ -143,16 +143,13 @@ export function isAdmin(memberships: ReadonlyArray<Membership>): boolean {
 }
 
 interface JoinCommunityProps {
-  organizationId: string;
+  communityId: string;
   userId: string;
 }
 
-export async function joinCommunity({
-  organizationId,
-  userId,
-}: JoinCommunityProps) {
+export async function joinCommunity({communityId, userId}: JoinCommunityProps) {
   await clerkClient.organizations.createOrganizationMembership({
-    organizationId,
+    organizationId: communityId,
     userId,
     role: 'basic_member',
   });