Merge pull request #231 from universi-me/change#230/banner-organizaca…

…o-card-usuario CHANGE #230: Exibir banner da organização atrás do card de usuário
universi-me · Nov 11, 2023 · 26aeb72 · 26aeb72
2 parents 2a5fdb4 + 0779d9d
commit 26aeb72
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.less b/src/components/ProfileInfo/ProfileBio/ProfileBio.less
@@ -57,7 +57,9 @@
     .profile-header{
         width: 100%;
         height: 5rem;
-        background-color: var(--primary-color);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
         border-radius: 10px 10px 0px 0px;
     }
 

diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
@@ -3,13 +3,16 @@ import { Link } from 'react-router-dom';
 import { ProfileImage } from '@/components/ProfileImage/ProfileImage';
 import { getFullName, getProfileImageUrl } from '@/utils/profileUtils';
 import { ICON_EDIT_WHITE } from '@/utils/assets';
+import { groupBannerUrl } from '@/utils/apiUtils';
 
 import type { Profile } from '@/types/Profile';
 import { TypeLinkToBootstrapIcon, type Link as Link_API } from '@/types/Link';
+import type { Group } from '@/types/Group';
 import './ProfileBio.less';
 
 export type ProfileBioProps = {
     profile: Profile;
+    organization?: Group | null;
     links: Link_API[];
 };
 
@@ -19,15 +22,23 @@ export function ProfileBio(props: ProfileBioProps) {
     const isOnOwnProfile = location.pathname.replace(/\/+$/, "") == linkToOwnProfile;
     const renderEditButton = props.profile.user.ownerOfSession && isOnOwnProfile;
 
+    const headerBackground = props.organization
+        ? { backgroundImage: `url(${groupBannerUrl(props.organization)})` }
+        : { backgroundColor: "var(--primary-color)" }
+
+    console.dir({headerBackground});
+
     return (
         <div className="profile-bio-component card">
 
-            <div className='profile-header'>
+            <div className='profile-header' style={headerBackground}>
                 {
                     renderEditButton ?
-                        <Link className="edit-button" to="/manage-profile" title="Editar seu perfil">
-                            <img src={ICON_EDIT_WHITE} alt="Editar" />
-                        </Link>
+                        <div className="edit-button">
+                            <Link to="/manage-profile" title="Editar seu perfil">
+                                <img src={ICON_EDIT_WHITE} alt="Editar" />
+                            </Link>
+                        </div>
                     : null
                 }
             </div>

diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx
@@ -1,12 +1,14 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Navigate, useLoaderData } from "react-router-dom";
 
 import { GroupContext, GroupIntro, GroupTabRenderer, GroupTabs, fetchGroupPageData, type AvailableTabs, type GroupContextType, type GroupPageLoaderResponse } from "@/pages/Group";
 import { ProfileBio, ProfileGroups } from "@/components/ProfileInfo";
+import { AuthContext } from "@/contexts/Auth";
 import "./Group.less";
 
 export function GroupPage() {
     const page = useLoaderData() as GroupPageLoaderResponse;
+    const authContext = useContext(AuthContext);
     const [currentTab, setCurrentTab] = useState<AvailableTabs>("contents");
 
     const [context, setContext] = useState(makeContext(page));
@@ -24,7 +26,7 @@ export function GroupPage() {
         <div className="group-page-container">
             <div id="group-page">
                 <div>
-                    <ProfileBio profile={context.loggedData.profile} links={context.loggedData.links} />
+                    <ProfileBio profile={context.loggedData.profile} links={context.loggedData.links} organization={authContext.organization} />
                     <ProfileGroups groups={context.loggedData.groups} />
                 </div>
                 <div id="intro-tabs-wrapper">

diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
@@ -66,7 +66,7 @@ export function ProfilePage() {
         <div id="profile-page">
             <div className="content">
                 <div id="left-side">
-                    <ProfileBio profile={profileContext.profile} links={profileContext.profileListData.links} />
+                    <ProfileBio profile={profileContext.profile} links={profileContext.profileListData.links} organization={auth.organization} />
                 </div>
 
                 <div id="right-side">