Merge pull request #194 from universi-me/main

Atualizando branch
universi-me · Oct 28, 2023 · 553b685 · 553b685
2 parents 22906b1 + 62110b5
commit 553b685
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 68 deletions.
diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.less b/src/components/ProfileInfo/ProfileBio/ProfileBio.less
@@ -1,4 +1,5 @@
 @import url(/src/layouts/fonts.less);
+@import url(/src/layouts/colors.less);
 
 .profile-bio-component {
     background-color: transparent !important;
@@ -49,6 +50,7 @@
         width: 100%;
         padding: 0  !important;
         margin-top: -3em;
+        margin-bottom: 1rem;
     }
 
     .profile-header{
@@ -60,7 +62,32 @@
 
     .content-count{
         border-top: solid 1px var(--primary-color);
-        padding: 20px 30px;
-        margin-top: 40px;
+        padding: 1rem 1rem;
+
+        .links-wrapper {
+            width: fit-content;
+
+            .profile-bio-link {
+                color: @font-color-v2;
+                text-decoration: none;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                will-change: text-decoration;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+
+                &:not(:last-of-type) {
+                    margin-bottom: .5em;
+                }
+
+                .link-type-icon {
+                    margin-right: .5em;
+                }
+            }
+        }
     }
 }
diff --git a/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx b/src/components/ProfileInfo/ProfileBio/ProfileBio.tsx
@@ -1,30 +1,24 @@
-import { useEffect, useState } from 'react';
 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 UniversimeApi from '@/services/UniversimeApi';
 
 import type { Profile } from '@/types/Profile';
+import { TypeLinkToBootstrapIcon, type Link as Link_API } from '@/types/Link';
 import './ProfileBio.less';
 
 export type ProfileBioProps = {
     profile: Profile;
+    links: Link_API[];
 };
 
 
 export function ProfileBio(props: ProfileBioProps) {
-    const [contentCounter, setContentCounter] = useState(10)
     const linkToOwnProfile = `/profile/${props.profile.user.name}`;
     const isOnOwnProfile = location.pathname.replace(/\/+$/, "") == linkToOwnProfile;
     const renderEditButton = props.profile.user.ownerOfSession && isOnOwnProfile;
 
-    useEffect(() =>{
-    UniversimeApi.Profile.folders({assignedOnly: true, profileId: props.profile.id})
-    .then(res=>setContentCounter(res.body?.folders.length ?? 0))
-    }, [props.profile.user.name])
-
     return (
         <div className="profile-bio-component card">
 
@@ -51,7 +45,22 @@ export function ProfileBio(props: ProfileBioProps) {
                     : <p style={{whiteSpace: 'break-spaces', textAlign: 'center'}}>{ props.profile.bio }</p>
                 }
             </div>
-            <div className="content-count">Meus conteúdos: {contentCounter}</div>
+
+            { props.links.length === 0 ? null :
+                <div className="content-count">
+                    <div className="links-wrapper">
+                        {
+                            props.links.map((link) => {
+                                return <a href={link.url} className="profile-bio-link" target='_blank' key={link.id}>
+                                    <i className={`link-type-icon bi bi-${TypeLinkToBootstrapIcon[link.typeLink]}`}/>
+                                    { link.name }
+                                </a>
+                            })
+                        }
+                    </div>
+                </div>
+            }
+
         </div>
     );
 }
diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx
@@ -23,7 +23,7 @@ export function GroupPage() {
         <GroupContext.Provider value={context}>
         <div id="group-page">
             <div>
-                <ProfileBio profile={context.loggedData.profile} />
+                <ProfileBio profile={context.loggedData.profile} links={context.loggedData.links} />
                 <ProfileGroups groups={context.loggedData.groups} />
             </div>
             <div id="intro-tabs-wrapper">
@@ -57,7 +57,8 @@ export function GroupPage() {
             loggedData: {
                 isParticipant: data.loggedData?.isParticipant!,
                 profile: data.loggedData?.profile!,
-                groups: data.loggedData?.groups!,
+                links: data.loggedData?.links ?? [],
+                groups: data.loggedData?.groups ?? [],
             },
             participants: data.participants,
             subgroups: data.subGroups,

diff --git a/src/pages/Group/GroupContext.tsx b/src/pages/Group/GroupContext.tsx
@@ -2,6 +2,7 @@ import { createContext } from "react";
 import { Group } from "@/types/Group";
 import { Profile } from "@/types/Profile";
 import { Folder } from "@/types/Capacity";
+import { Link } from "@/types/Link";
 
 export type GroupContextType = null | {
     group:         Group;
@@ -15,6 +16,7 @@ export type GroupContextType = null | {
     loggedData: {
         isParticipant: boolean;
         profile:       Profile;
+        links:         Link[];
         groups:        Group[];
     };
 

diff --git a/src/pages/Group/loader.ts b/src/pages/Group/loader.ts
@@ -4,6 +4,7 @@ import UniversimeApi from "@/services/UniversimeApi";
 import type { Profile } from "@/types/Profile";
 import type { Group } from "@/types/Group";
 import type { Folder } from "@/types/Capacity";
+import { Link } from "@/types/Link";
 
 export type GroupPageLoaderResponse = {
     group: Group | undefined;
@@ -14,6 +15,7 @@ export type GroupPageLoaderResponse = {
     loggedData: undefined | {
         profile: Profile;
         groups: Group[];
+        links: Link[];
         isParticipant: boolean;
     };
 };
@@ -30,11 +32,12 @@ export async function fetchGroupPageData(props: {groupPath: string | undefined})
     const group = groupRes.body.group;
     const profile = profileRes.body.profile;
 
-    const [subgroupsRes, participantsRes, foldersRes, profileGroupsRes] = await Promise.all([
+    const [subgroupsRes, participantsRes, foldersRes, profileGroupsRes, profileLinksRes] = await Promise.all([
         UniversimeApi.Group.subgroups({groupId: group.id}),
         UniversimeApi.Group.participants({groupId: group.id}),
         UniversimeApi.Group.folders({groupId: group.id}),
         UniversimeApi.Profile.groups({profileId: profile.id}),
+        UniversimeApi.Profile.links({profileId: profile.id}),
     ]);
 
     return {
@@ -45,6 +48,7 @@ export async function fetchGroupPageData(props: {groupPath: string | undefined})
         loggedData: {
             profile: profile,
             groups: profileGroupsRes.body?.groups ?? [],
+            links: profileLinksRes.body?.links ?? [],
             isParticipant: participantsRes.body?.participants
             .find(p => p.user.name === profile.user?.name) !== undefined,
         }

diff --git a/src/pages/ManageProfile/ManageProfile.less b/src/pages/ManageProfile/ManageProfile.less
@@ -176,6 +176,18 @@
                     width: 100%;
                 }
             }
+
+            .counter-wrapper {
+                display: flex;
+                width: 100%;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: end;
+
+                .counter {
+                    font-size: .75em;
+                }
+            }
         }
 
         &#fieldset-bio {
@@ -187,11 +199,6 @@
 
                 .info-text {
                     font-size: .75em;
-
-                    &.full-bio {
-                        color: @wrong-invalid-color;
-                        font-weight: @font-weight-semibold;
-                    }
                 }
             }
 
@@ -335,6 +342,11 @@
             }
 
         }
+
+        .full-counter {
+            color: @wrong-invalid-color;
+            font-weight: @font-weight-semibold;
+        }
     }
 
 

diff --git a/src/pages/ManageProfile/ManageProfile.tsx b/src/pages/ManageProfile/ManageProfile.tsx
@@ -11,6 +11,8 @@ import * as SwalUtils from "@/utils/sweetalertUtils";
 import "./ManageProfile.less";
 
 const BIO_MAX_LENGTH = 140;
+const FIRST_NAME_MAX_LENGTH = 21;
+const LAST_NAME_MAX_LENGTH = 21;
 export function ManageProfilePage() {
     const navigate = useNavigate();
     const { genderOptions, links, profile, typeLinks } = useLoaderData() as ManageProfileLoaderResponse;
@@ -25,6 +27,8 @@ export function ManageProfilePage() {
         return <Navigate to="/login" />
 
     const isBioFull = (bio?.length ?? 0) >= BIO_MAX_LENGTH;
+    const isFirstnameFull = (firstname.length) >= FIRST_NAME_MAX_LENGTH;
+    const isLastnameFull = (lastname.length) >= LAST_NAME_MAX_LENGTH;
     const canSaveProfile = !!firstname && !!lastname;
 
     return <div id="manage-profile-page">
@@ -39,13 +43,20 @@ export function ManageProfilePage() {
                         <fieldset id="fieldset-name">
                             <legend>Altere seu nome</legend>
                             <label className="legend" htmlFor="firstname">
-                                <span className="required-input">Nome</span>
-                                <input type="text" name="firstname" id="firstname" defaultValue={profile.firstname ?? ""} onChange={setStateAsValue(setFirstname)} required maxLength={255} />
+                                <span className="counter-wrapper">
+                                    <span className="required-input">Nome</span>
+                                    <span className={`counter ${isFirstnameFull ? 'full-counter' : ''}`}>{firstname.length} / {FIRST_NAME_MAX_LENGTH}</span>
+                                </span>
+                                <input type="text" name="firstname" id="firstname" defaultValue={profile.firstname ?? ""} onChange={setStateAsValue(setFirstname)} required maxLength={FIRST_NAME_MAX_LENGTH} />
                             </label>
 
                             <label className="legend" htmlFor="lastname">
-                                <span className="required-input">Sobrenome</span>
-                                <input type="text" name="lastname" id="lastname" defaultValue={profile.lastname ?? ""} onChange={setStateAsValue(setLastname)} required maxLength={255} />
+                                <span className="counter-wrapper">
+                                    <span className="required-input">Sobrenome</span>
+                                    <span className={`counter ${isLastnameFull ? 'full-counter' : ''}`}>{lastname.length} / {LAST_NAME_MAX_LENGTH}</span>
+                                </span>
+
+                                <input type="text" name="lastname" id="lastname" defaultValue={profile.lastname ?? ""} onChange={setStateAsValue(setLastname)} required maxLength={LAST_NAME_MAX_LENGTH} />
                             </label>
                         </fieldset>
                     </div>
@@ -54,7 +65,7 @@ export function ManageProfilePage() {
                     <fieldset id="fieldset-bio">
                         <legend>
                             Biografia
-                            <span className={`info-text ${isBioFull ? 'full-bio' : ''}`}>{bio?.length ?? 0} / {BIO_MAX_LENGTH}</span>
+                            <span className={`info-text ${isBioFull ? 'full-counter' : ''}`}>{bio?.length ?? 0} / {BIO_MAX_LENGTH}</span>
                         </legend>
                         <textarea name="bio" id="bio" maxLength={BIO_MAX_LENGTH} defaultValue={bio} rows={6} onChange={setStateAsValue(setBio)} />
                     </fieldset>

diff --git a/src/pages/Profile/Profile.css b/src/pages/Profile/Profile.css
@@ -14,7 +14,8 @@
 }
 
 #profile-page .content {
-    margin: 40px 2.5em;
+    padding: 0 3.5rem;
+    margin-top: 2rem;
 
     display: grid;
     grid-template-columns: 20rem auto;

diff --git a/src/pages/Profile/ProfileContentListing/ProfileContentListing.tsx b/src/pages/Profile/ProfileContentListing/ProfileContentListing.tsx
@@ -13,9 +13,20 @@ export function ProfileContentListing({title = "Vídeo"} : {title : string}){
         setAvailableContents(profileContext?.profileListData.folders ?? []);
     }, [title])
 
+    const isOwnProfile = !!profileContext?.accessingLoggedUser;
+    const hasOtherProfile = !!profileContext?.profile.firstname;
+
+    const otherProfileText = hasOtherProfile
+        ? `${title} de ${profileContext.profile.firstname}`
+        : title;
+
+    const tabTitle = isOwnProfile
+        ? `Meus ${title}`
+        : otherProfileText;
+
       return(
         <div>
-            <h1 className="content-name">Meus {title}</h1>
+            <h1 className="content-name">{tabTitle}</h1>
             <div className="contents">
                 {
                     availableContents.length === 0 ? <p>Nenhum conteúdo no momento</p> :  

diff --git a/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.tsx b/src/pages/Profile/ProfileGroupListing/ProfileGroupListing.tsx
@@ -9,9 +9,20 @@ export function ProfileGroupListing(){
     if(profileContext == null)
         return null
 
+    const isOwnProfile = !!profileContext?.accessingLoggedUser;
+    const hasOtherProfile = !!profileContext?.profile.firstname;
+
+    const otherProfileText = hasOtherProfile
+        ? `Grupos de ${profileContext.profile.firstname}`
+        : "Grupos";
+
+    const tabTitle = isOwnProfile
+        ? `Meus Grupos`
+        : otherProfileText;
+
     return(
         <>
-        <h1 className="group-name">Meus Grupos</h1>
+        <h1 className="group-name">{tabTitle}</h1>
         <div className="groups-listing-container">
             {
                 profileContext.profileListData.groups.length <= 0

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