Merge pull request #953 from cultuurnet/feature/III-6393

III-6393 - Display creator email
cultuurnet · Nov 22, 2024 · fef547a · fef547a
2 parents b2ba463 + f38f2ca
commit fef547a
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 41 deletions.
diff --git a/src/hooks/api/ownerships.ts b/src/hooks/api/ownerships.ts
@@ -18,6 +18,11 @@ export type OwnershipRequest = {
   state: RequestState;
 };
 
+export type OwnershipCreator = {
+  userId: string;
+  email: string;
+};
+
 export const RequestState = {
   APPROVED: 'approved',
   REQUESTED: 'requested',
@@ -108,9 +113,42 @@ const useDeleteOwnershipRequestMutation = (configuration = {}) =>
     ...configuration,
   });
 
+const getOwnershipCreator = async ({ headers, organizerId }) => {
+  const res = await fetchFromApi({
+    path: `/organizers/${organizerId}/creator`,
+    options: {
+      headers,
+    },
+  });
+  if (isErrorObject(res)) {
+    // eslint-disable-next-line no-console
+    return console.error(res);
+  }
+  return await res.json();
+};
+
+type UseGetOwnershipCreatorArguments = ServerSideQueryOptions & {
+  organizerId: string;
+};
+
+const useGetOwnershipCreatorQuery = (
+  { req, queryClient, organizerId }: UseGetOwnershipCreatorArguments,
+  configuration: UseQueryOptions = {},
+) =>
+  useAuthenticatedQuery<OwnershipCreator>({
+    req,
+    queryClient,
+    queryKey: ['ownership-creator'],
+    queryFn: getOwnershipCreator,
+    queryArguments: { organizerId },
+    refetchOnWindowFocus: false,
+    ...configuration,
+  });
+
 export {
   useApproveOwnershipRequestMutation,
   useDeleteOwnershipRequestMutation,
+  useGetOwnershipCreatorQuery,
   useGetOwnershipRequestsQuery,
   useRejectOwnershipRequestMutation,
 };
diff --git a/src/pages/organizers/[organizerId]/ownerships/OwnershipsTable.tsx b/src/pages/organizers/[organizerId]/ownerships/OwnershipsTable.tsx
@@ -1,20 +1,25 @@
 import { useTranslation } from 'react-i18next';
 
-import { OwnershipRequest } from '@/hooks/api/ownerships';
+import { OwnershipCreator, OwnershipRequest } from '@/hooks/api/ownerships';
 import { Inline } from '@/ui/Inline';
 import { List } from '@/ui/List';
 import { Stack } from '@/ui/Stack';
 import { colors, getValueFromTheme } from '@/ui/theme';
 import { Title } from '@/ui/Title';
 
 type Props = {
+  creator?: OwnershipCreator;
   requests: OwnershipRequest[];
   renderActions: (request: OwnershipRequest) => JSX.Element;
 };
 
 const getGlobalValue = getValueFromTheme('global');
 
-export const OwnershipsTable = ({ requests, renderActions }: Props) => {
+export const OwnershipsTable = ({
+  creator,
+  requests,
+  renderActions,
+}: Props) => {
   const { grey3 } = colors;
   const { t } = useTranslation();
   return (
@@ -38,13 +43,13 @@ export const OwnershipsTable = ({ requests, renderActions }: Props) => {
         <Title size={3}>{t('organizers.ownerships.table.user')}</Title>
         <Title size={3}>{t('organizers.ownerships.table.actions.title')}</Title>
       </Inline>
-      <List>
+      <List paddingY={3}>
+        <List.Item>{creator.email}</List.Item>
         {requests.map((request) => (
           <Inline
             key={request.id}
             justifyContent="space-between"
             alignItems="center"
-            paddingY={3}
             css={`
               &:not(:last-child) {
                 border-bottom: 1px solid ${grey3};

diff --git a/src/pages/organizers/[organizerId]/ownerships/index.page.tsx b/src/pages/organizers/[organizerId]/ownerships/index.page.tsx
@@ -10,6 +10,7 @@ import {
   RequestState,
   useApproveOwnershipRequestMutation,
   useDeleteOwnershipRequestMutation,
+  useGetOwnershipCreatorQuery,
   useGetOwnershipRequestsQuery,
   useRejectOwnershipRequestMutation,
 } from '@/hooks/api/ownerships';
@@ -62,12 +63,17 @@ const Ownership = () => {
   const organizer: Organizer = getOrganizerByIdQuery?.data;
   const organizerName =
     organizer?.name?.[i18n.language] ??
-    organizer?.name?.[organizer.mainLanguage];
+    organizer?.name?.[organizer.mainLanguage] ??
+    organizer?.name;
 
   const getOwnershipRequestsQuery = useGetOwnershipRequestsQuery({
     organizerId: organizerId,
   });
 
+  const getOwnershipCreatorQuery = useGetOwnershipCreatorQuery({
+    organizerId: organizerId,
+  });
+
   const requestsByState: { [key: string]: OwnershipRequest[] } = useMemo(
     () =>
       groupBy(
@@ -79,6 +85,9 @@ const Ownership = () => {
     [getOwnershipRequestsQuery.data],
   );
 
+  // @ts-expect-error
+  const creator = getOwnershipCreatorQuery.data;
+
   const approvedRequests = requestsByState[RequestState.APPROVED] ?? [];
   const pendingRequests = requestsByState[RequestState.REQUESTED] ?? [];
 
@@ -150,42 +159,45 @@ const Ownership = () => {
                 />
               </Alert>
             )}
-            <Stack spacing={4}>
-              <Title size={3}>{t('organizers.ownerships.owners')}</Title>
-              <OwnershipsTable
-                requests={approvedRequests}
-                renderActions={(request) => (
-                  <Button
-                    variant={ButtonVariants.ICON}
-                    iconName={Icons.TRASH}
-                    onClick={() => setRequestToBeDeleted(request)}
-                  />
-                )}
-              />
-              <Modal
-                title={t('organizers.ownerships.delete_modal.title')}
-                confirmTitle={t('organizers.ownerships.delete_modal.confirm')}
-                cancelTitle={t('organizers.ownerships.delete_modal.cancel')}
-                visible={!!requestToBeDeleted}
-                variant={ModalVariants.QUESTION}
-                onConfirm={() =>
-                  deleteOwnershipRequestMutation.mutate({
-                    ownershipId: requestToBeDeleted.id,
-                  })
-                }
-                onClose={() => setRequestToBeDeleted(undefined)}
-                size={ModalSizes.MD}
-              >
-                <Box padding={4}>
-                  <Trans
-                    i18nKey="organizers.ownerships.delete_modal.body"
-                    values={{
-                      ownerEmail: requestToBeDeleted?.ownerEmail,
-                    }}
-                  />
-                </Box>
-              </Modal>
-            </Stack>
+            {(approvedRequests.length > 0 || !!creator) && (
+              <Stack spacing={4}>
+                <Title size={3}>{t('organizers.ownerships.owners')}</Title>
+                <OwnershipsTable
+                  creator={creator}
+                  requests={approvedRequests}
+                  renderActions={(request) => (
+                    <Button
+                      variant={ButtonVariants.ICON}
+                      iconName={Icons.TRASH}
+                      onClick={() => setRequestToBeDeleted(request)}
+                    />
+                  )}
+                />
+                <Modal
+                  title={t('organizers.ownerships.delete_modal.title')}
+                  confirmTitle={t('organizers.ownerships.delete_modal.confirm')}
+                  cancelTitle={t('organizers.ownerships.delete_modal.cancel')}
+                  visible={!!requestToBeDeleted}
+                  variant={ModalVariants.QUESTION}
+                  onConfirm={() =>
+                    deleteOwnershipRequestMutation.mutate({
+                      ownershipId: requestToBeDeleted.id,
+                    })
+                  }
+                  onClose={() => setRequestToBeDeleted(undefined)}
+                  size={ModalSizes.MD}
+                >
+                  <Box padding={4}>
+                    <Trans
+                      i18nKey="organizers.ownerships.delete_modal.body"
+                      values={{
+                        ownerEmail: requestToBeDeleted?.ownerEmail,
+                      }}
+                    />
+                  </Box>
+                </Modal>
+              </Stack>
+            )}
             {pendingRequests.length > 0 && (
               <Stack spacing={4}>
                 <Title size={3}>{t('organizers.ownerships.pending')}</Title>
@@ -275,6 +287,11 @@ export const getServerSideProps = getApplicationServerSideProps(
         queryClient,
         organizerId: query.organizerId,
       }),
+      await useGetOwnershipCreatorQuery({
+        req,
+        queryClient,
+        organizerId: query.organizerId,
+      }),
     ]);
     return {
       props: {