From ccb29a5acfd878d0f60bf3ef670c491a6778d21e Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:19:13 +0200
Subject: [PATCH] refactor: project archive card (#7859)

- Refactored "favorites" action, and fixed issue with "favorite" prop
- Refactored "owners" - simplified footer
---
 .../project/NewProjectCard/NewProjectCard.tsx | 10 ++--
 .../NewProjectCard/ProjectArchiveCard.tsx     | 10 +++-
 .../FavoriteAction/FavoriteAction.tsx         | 40 +++++++++++++
 .../ProjectCardFooter/ProjectCardFooter.tsx   | 58 +++----------------
 .../ProjectOwners/ProjectOwners.tsx           | 12 +++-
 5 files changed, 69 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/component/project/NewProjectCard/ProjectCardFooter/FavoriteAction/FavoriteAction.tsx

diff --git a/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx b/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
index f4ba5ce84c..43c19f8818 100644
--- a/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
+++ b/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
@@ -12,9 +12,9 @@ import {
 } from './NewProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge';
-import { ProjectOwners } from './ProjectOwners/ProjectOwners';
 import type { ProjectSchemaOwners } from 'openapi';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
+import { FavoriteAction } from './ProjectCardFooter/FavoriteAction/FavoriteAction';
 
 interface IProjectCardProps {
     name: string;
@@ -23,7 +23,7 @@ interface IProjectCardProps {
     memberCount?: number;
     id: string;
     onHover: () => void;
-    isFavorite?: boolean;
+    favorite?: boolean;
     mode: string;
     owners?: ProjectSchemaOwners;
 }
@@ -36,7 +36,7 @@ export const ProjectCard = ({
     onHover,
     id,
     mode,
-    isFavorite = false,
+    favorite = false,
     owners,
 }: IProjectCardProps) => (
     <StyledProjectCard onMouseEnter={onHover}>
@@ -78,8 +78,8 @@ export const ProjectCard = ({
                 </div>
             </StyledDivInfo>
         </StyledProjectCardBody>
-        <ProjectCardFooter id={id} isFavorite={isFavorite}>
-            <ProjectOwners owners={owners} />
+        <ProjectCardFooter id={id} owners={owners}>
+            <FavoriteAction id={id} isFavorite={favorite} />
         </ProjectCardFooter>
     </StyledProjectCard>
 );
diff --git a/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx b/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
index b00862630a..8a7a342158 100644
--- a/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
+++ b/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
@@ -12,7 +12,6 @@ import {
 } from './NewProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge';
-import { ProjectOwners } from './ProjectOwners/ProjectOwners';
 import type { ProjectSchemaOwners } from 'openapi';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import { formatDateYMDHM } from 'utils/formatDate';
@@ -132,8 +131,13 @@ export const ProjectArchiveCard: FC<IProjectArchiveCardProps> = ({
                     />
                 </StyledDivInfo>
             </StyledProjectCardBody>
-            <ProjectCardFooter id={id} Actions={Actions} disabled>
-                <ProjectOwners owners={owners} />
+            <ProjectCardFooter
+                id={id}
+                Actions={Actions}
+                disabled
+                owners={owners}
+            >
+                <Actions id={id} />
             </ProjectCardFooter>
         </StyledProjectCard>
     );
diff --git a/frontend/src/component/project/NewProjectCard/ProjectCardFooter/FavoriteAction/FavoriteAction.tsx b/frontend/src/component/project/NewProjectCard/ProjectCardFooter/FavoriteAction/FavoriteAction.tsx
new file mode 100644
index 0000000000..938c0575d4
--- /dev/null
+++ b/frontend/src/component/project/NewProjectCard/ProjectCardFooter/FavoriteAction/FavoriteAction.tsx
@@ -0,0 +1,40 @@
+import type { FC } from 'react';
+import useToast from 'hooks/useToast';
+import { useFavoriteProjectsApi } from 'hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
+import { styled } from '@mui/material';
+import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton';
+
+type FavoriteActionProps = { id: string; isFavorite?: boolean };
+
+const StyledFavoriteIconButton = styled(FavoriteIconButton)(({ theme }) => ({
+    margin: theme.spacing(1, 2, 0, 0),
+}));
+
+export const FavoriteAction: FC<FavoriteActionProps> = ({ id, isFavorite }) => {
+    const { setToastApiError } = useToast();
+    const { favorite, unfavorite } = useFavoriteProjectsApi();
+    const { refetch } = useProjects();
+
+    const onFavorite = async (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        try {
+            if (isFavorite) {
+                await unfavorite(id);
+            } else {
+                await favorite(id);
+            }
+            refetch();
+        } catch (error) {
+            setToastApiError('Something went wrong, could not update favorite');
+        }
+    };
+
+    return (
+        <StyledFavoriteIconButton
+            onClick={onFavorite}
+            isFavorite={Boolean(isFavorite)}
+            size='medium'
+        />
+    );
+};
diff --git a/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx b/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
index b64c60ce97..002339b17a 100644
--- a/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
+++ b/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
@@ -1,10 +1,10 @@
 import type React from 'react';
 import type { FC } from 'react';
 import { Box, styled } from '@mui/material';
-import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton';
-import useToast from 'hooks/useToast';
-import { useFavoriteProjectsApi } from 'hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi';
-import useProjects from 'hooks/api/getters/useProjects/useProjects';
+import {
+    type IProjectOwnersProps,
+    ProjectOwners,
+} from '../ProjectOwners/ProjectOwners';
 
 interface IProjectCardFooterProps {
     id: string;
@@ -12,6 +12,7 @@ interface IProjectCardFooterProps {
     children?: React.ReactNode;
     Actions?: FC<{ id: string; isFavorite?: boolean }>;
     disabled?: boolean;
+    owners: IProjectOwnersProps['owners'];
 }
 
 const StyledFooter = styled(Box)<{ disabled: boolean }>(
@@ -27,58 +28,15 @@ const StyledFooter = styled(Box)<{ disabled: boolean }>(
     }),
 );
 
-const StyledContainer = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(1.5, 0, 2.5, 3),
-    display: 'flex',
-    alignItems: 'center',
-}));
-
-const StyledFavoriteIconButton = styled(FavoriteIconButton)(({ theme }) => ({
-    margin: theme.spacing(1, 2, 0, 0),
-}));
-
-const FavoriteAction: FC<{ id: string; isFavorite?: boolean }> = ({
-    id,
-    isFavorite,
-}) => {
-    const { setToastApiError } = useToast();
-    const { favorite, unfavorite } = useFavoriteProjectsApi();
-    const { refetch } = useProjects();
-
-    const onFavorite = async (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        try {
-            if (isFavorite) {
-                await unfavorite(id);
-            } else {
-                await favorite(id);
-            }
-            refetch();
-        } catch (error) {
-            setToastApiError('Something went wrong, could not update favorite');
-        }
-    };
-
-    return (
-        <StyledFavoriteIconButton
-            onClick={onFavorite}
-            isFavorite={Boolean(isFavorite)}
-            size='medium'
-        />
-    );
-};
-
 export const ProjectCardFooter: FC<IProjectCardFooterProps> = ({
     children,
-    id,
-    isFavorite = false,
-    Actions = FavoriteAction,
+    owners,
     disabled = false,
 }) => {
     return (
         <StyledFooter disabled={disabled}>
-            <StyledContainer>{children}</StyledContainer>
-            <Actions id={id} isFavorite={isFavorite} />
+            <ProjectOwners owners={owners} />
+            {children}
         </StyledFooter>
     );
 };
diff --git a/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx b/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
index b96b01c87a..4082de18fb 100644
--- a/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
+++ b/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
@@ -5,7 +5,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { AvatarGroup } from 'component/common/AvatarGroup/AvatarGroup';
 
-interface IProjectOwnersProps {
+export interface IProjectOwnersProps {
     owners?: ProjectSchema['owners'];
 }
 
@@ -59,12 +59,18 @@ const StyledHeader = styled('h3')(({ theme }) => ({
     fontWeight: theme.typography.fontWeightRegular,
 }));
 
+const StyledWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(1.5, 0, 2.5, 3),
+    display: 'flex',
+    alignItems: 'center',
+}));
+
 export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
     const ownersMap = useOwnersMap();
     const users = owners.map(ownersMap);
 
     return (
-        <>
+        <StyledWrapper>
             <StyledContainer>
                 <StyledHeader>
                     {owners.length === 1 ? 'Owner' : 'Owners'}
@@ -76,6 +82,6 @@ export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
                 show={<StyledUserName>{users[0]?.name}</StyledUserName>}
                 elseShow={<div />}
             />
-        </>
+        </StyledWrapper>
     );
 };