Add render actions

cultuurnet · Oct 22, 2024 · b0ad2e4 · b0ad2e4
1 parent 2f1e8d8
commit b0ad2e4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/src/pages/organizers/[organizerId]/ownerships/OwnershipsTable.tsx b/src/pages/organizers/[organizerId]/ownerships/OwnershipsTable.tsx
@@ -9,10 +9,10 @@ import { Title } from '@/ui/Title';
 
 type Props = {
   requests: OwnershipRequest[];
-  actions: JSX.Element;
+  renderActions: (request: OwnershipRequest) => JSX.Element;
 };
 
-export const OwnershipsTable = ({ requests, actions }: Props) => {
+export const OwnershipsTable = ({ requests, renderActions }: Props) => {
   const getGlobalValue = getValueFromTheme('global');
   const { grey3 } = colors;
   const { t } = useTranslation();
@@ -52,7 +52,7 @@ export const OwnershipsTable = ({ requests, actions }: Props) => {
             `}
           >
             <List.Item>{request.ownerEmail}</List.Item>
-            <List.Item>{actions}</List.Item>
+            <List.Item>{renderActions(request)}</List.Item>
           </Inline>
         ))}
       </List>

diff --git a/src/pages/organizers/[organizerId]/ownerships/index.page.tsx b/src/pages/organizers/[organizerId]/ownerships/index.page.tsx
@@ -74,24 +74,23 @@ const Ownership = () => {
               <Title size={3}>{t('organizers.ownerships.owners')}</Title>
               <OwnershipsTable
                 requests={approvedRequests}
-                actions={
+                renderActions={() => (
                   <Button variant={ButtonVariants.ICON}>
                     <Icon name={Icons.TRASH} />
                   </Button>
-                }
+                )}
               />
             </Stack>
             {pendingRequests.length > 0 && (
               <Stack spacing={4}>
                 <Title size={3}>{t('organizers.ownerships.pending')}</Title>
                 <OwnershipsTable
                   requests={pendingRequests}
-                  actions={
+                  renderActions={(request) => (
                     <Inline spacing={3}>
                       <Button
                         variant={ButtonVariants.SUCCESS}
                         iconName={Icons.CHECK_CIRCLE}
-                        spacing={3}
                       >
                         {t('organizers.ownerships.table.actions.approve')}
                       </Button>
@@ -103,7 +102,7 @@ const Ownership = () => {
                         {t('organizers.ownerships.table.actions.reject')}
                       </Button>
                     </Inline>
-                  }
+                  )}
                 />
               </Stack>
             )}