Feat#297/criar feed para grupo

src/components/ProfileInfo/ProfileBio/ProfileBio.tsx

@@ -1,11 +1,10 @@
 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 { type Profile, ProfileClass } from '@/types/Profile';
 import { TypeLinkToBootstrapIcon, type Link as Link_API } from '@/types/Link';
 import type { Group } from '@/types/Group';
 import './ProfileBio.less';
@@ -26,6 +25,8 @@
         ? { backgroundImage: `url(${groupBannerUrl(props.organization)})` }
         : { backgroundColor: "var(--primary-color)" }
 
+    const profile = new ProfileClass(props.profile);
+
     return (
         <div className="profile-bio-component card">
 
@@ -42,11 +43,11 @@
             </div>
 
             <div className="intro intro-section">
-                <ProfileImage className="image" imageUrl={getProfileImageUrl(props.profile)} noImageColor="#505050" />
+                <ProfileImage className="image" imageUrl={profile.imageUrl} noImageColor="#505050" />
                 {
                     isOnOwnProfile
-                        ? <h2 className="card-heading name">{ getFullName(props.profile) }</h2>
-                        : <Link className="card-heading name" to={linkToOwnProfile}>{ getFullName(props.profile) }</Link>
+                        ? <h2 className="card-heading name">{ profile.fullname }</h2>
+                        : <Link className="card-heading name" to={linkToOwnProfile}>{ profile.fullname }</Link>
                 }
                 {
                     props.profile.bio === null || props.profile.bio.length === 0

src/components/UniversiHeader/components/WelcomeUser/WelcomeUser.tsx

@@ -3,7 +3,6 @@ import { Link, redirect, useNavigate } from "react-router-dom";
 import { ProfileImage } from "@/components/ProfileImage/ProfileImage";
 import { AuthContext } from "@/contexts/Auth";
 import "./WelcomeUser.less"
-import { getProfileImageUrl } from "@/utils/profileUtils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 
 export function WelcomeUser() {
@@ -20,7 +19,7 @@ export function WelcomeUser() {
 
     return( !isLogged ? null
         :<div className="image-container">
-            <ProfileImage className="logged-user-image" imageUrl={auth.profile ? getProfileImageUrl(auth.profile) : undefined} noImageColor="var(--card-background-color)" onClick={() => {setProfileClicked(!profileClicked)}}/>
+            <ProfileImage className="logged-user-image" imageUrl={auth.profile ? auth.profile.imageUrl : undefined} noImageColor="var(--card-background-color)" onClick={() => {setProfileClicked(!profileClicked)}}/>
             {
                 profileClicked 
                 ?

src/contexts/Auth/AuthContext.tsx

@@ -1,18 +1,18 @@
 import { createContext } from "react";
 import { User } from "@/types/User";
-import { Profile } from "@/types/Profile";
+import { type ProfileClass } from "@/types/Profile";
 import type { Group } from "@/types/Group";
 
 export type AuthContextType = {
     user : User | null;
-    profile: Profile | null;
+    profile: ProfileClass | null;
     organization: Group | null;
 
-    signin: (email : string, password: string, recaptchaToken: string | null) => Promise<Profile | null>;
-    signinGoogle: () => Promise<Profile | null>;
+    signin: (email : string, password: string, recaptchaToken: string | null) => Promise<ProfileClass | null>;
+    signinGoogle: () => Promise<ProfileClass | null>;
     signout: () => Promise<void>;
 
-    updateLoggedUser: () => Promise<Profile | null>;
+    updateLoggedUser: () => Promise<ProfileClass | null>;
 }
 
 export const AuthContext = createContext<AuthContextType>(null!);

src/contexts/Auth/AuthProvider.tsx

@@ -1,12 +1,12 @@
 import { ReactNode, useEffect, useState } from "react";
 import { AuthContext } from "./AuthContext";
-import { Profile } from "@/types/Profile";
+import { ProfileClass } from "@/types/Profile";
 import { UniversimeApi } from "@/services/UniversimeApi";
 import { goTo } from "@/services/routes";
 import type { Group } from "@/types/Group";
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [profile, setProfile] = useState<Profile | null>(null);
+  const [profile, setProfile] = useState<ProfileClass | null>(null);
   const [organization, setOrganization] = useState<Group | null>(null);
   const [finishedLogin, setFinishedLogin] = useState<boolean>(false);
   const user = profile?.user ?? null;
@@ -91,5 +91,9 @@
     if(!await UniversimeApi.Auth.validateToken()) {
         return null;
     }
-    return (await UniversimeApi.Profile.profile()).body?.profile ?? null;
+
+    const responseProfile = (await UniversimeApi.Profile.profile()).body?.profile;
+    return responseProfile
+        ? new ProfileClass(responseProfile)
+        : null;
 }

src/pages/Group/Group.less

@@ -12,7 +12,10 @@
     max-width: 1920px;
 
     .tab-item{
-        border: 1px solid var(--secondary-color);
+        img{
+            border: none !important;
+        }
+        border: none !important;
         padding: 0.8rem;
         border-radius: var(--border-radius);
         filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

src/pages/Group/Group.tsx

@@ -5,16 +5,17 @@
 import { ProfileInfo } from "@/components/ProfileInfo/ProfileInfo";
 import { AuthContext } from "@/contexts/Auth";
 import "./Group.less";
+import { ProfileClass } from "@/types/Profile";
 
 export function GroupPage() {
     const page = useLoaderData() as GroupPageLoaderResponse;
     const authContext = useContext(AuthContext);
-    const [currentTab, setCurrentTab] = useState<AvailableTabs>("contents");
+    const [currentTab, setCurrentTab] = useState<AvailableTabs>("feed");
 
     const [context, setContext] = useState(makeContext(page));
     useEffect(() => {
         setContext(makeContext(page));
-        setCurrentTab("contents");
+        setCurrentTab("feed");
     }, [page]);
 
     if (!page.loggedData || !page.group) {
@@ -69,14 +70,15 @@
 
         return {
             folders: data.folders,
+            posts: data.posts,
             group: data.group!,
             loggedData: {
                 isParticipant: data.loggedData?.isParticipant!,
-                profile: data.loggedData?.profile!,
+                profile: new ProfileClass(data.loggedData?.profile!),
                 links: data.loggedData?.links ?? [],
                 groups: data.loggedData?.groups ?? [],
             },
-            participants: data.participants,
+            participants: data.participants.map(ProfileClass.new),
             subgroups: data.subGroups,
 
             currentContent: undefined,
@@ -99,6 +101,11 @@
                 setContext({...this, editGroup: c});
             },
 
+            editPost: undefined,
+            setEditPost(c){
+                setContext({...this, editPost: c})
+            },
+
             refreshData: refreshGroupData,
         };
     }

src/pages/Group/GroupContext.tsx

@@ -1,14 +1,16 @@
 import { createContext } from "react";
 import { Group } from "@/types/Group";
-import { Profile } from "@/types/Profile";
+import { type ProfileClass } from "@/types/Profile";
 import type { Content, Folder } from "@/types/Capacity";
 import { Link } from "@/types/Link";
+import { GroupPost } from "@/types/Feed";
 
 export type GroupContextType = null | {
     group:         Group;
     subgroups:     Group[];
-    participants:  Profile[];
+    participants:  ProfileClass[];
     folders:       Folder[];
+    posts:         GroupPost[];
 
     currentContent: Folder | undefined;
     setCurrentContent(content: Folder | undefined): any;
@@ -40,9 +42,18 @@ export type GroupContextType = null | {
     editGroup: Group | null | undefined;
     setEditGroup(group: Group | null | undefined) : any;
 
+    /**
+     * The post being edited/created.
+     *
+     * If `null`, should handle creation of a post. If has a value, should handle
+     * post edit. If `undefined`, no post is being edited nor created.
+     */
+    editPost: GroupPost | null | undefined;
+    setEditPost(post: GroupPost | null | undefined) : any;
+
     loggedData: {
         isParticipant: boolean;
-        profile:       Profile;
+        profile:       ProfileClass;
         links:         Link[];
         groups:        Group[];
     };

src/pages/Group/GroupTabs/GroupFeed/GroupFeed.less

@@ -0,0 +1,129 @@
+
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/fonts.less);
+
+#group-page #feed {
+    .feed-list {
+        .feed-item {
+            display: flex;
+            flex-direction: row;
+            align-items: start;
+
+            height: fit-content;
+
+            width: 100%;
+
+            &:not(:last-of-type) {
+                margin-bottom: 1.5rem;
+            }
+
+            .feed-image {
+                @side: 8rem !important;
+                width: @side;
+                height: @side;
+                aspect-ratio: 1;
+
+                border-radius: 100%;
+                object-fit: cover;
+            }
+
+            .info {
+                margin-left: 3rem;
+
+                color: @font-color-v2;
+                .group-name {
+                    color: inherit;
+                    text-decoration: none;
+                    font-weight: @font-weight-semibold;
+                    font-size: 1.5rem;
+                }
+
+                .group-description {
+                    margin-top: .75rem;
+                    text-align: justify;
+                }
+            }
+            .group-options-button {
+                margin-right: 1rem;
+                margin-left: auto;
+
+                display: flex;
+                padding-bottom: 3px;
+                align-items: center;
+                justify-content: center;
+
+                border: none;
+                border-radius: 50%;
+                background-color: transparent;
+
+                font-size: 1.5rem;
+                height: 2rem;
+                aspect-ratio: 1;
+
+                will-change: background-color;
+                cursor: pointer;
+
+                &:hover {
+                    background-color: #C1C1C1;
+                }
+            }
+
+            .group-options {
+                background-color: @card-background-color;
+                border-radius: .625rem;
+                padding: .25rem .5rem;
+
+                min-width: 7rem;
+
+                .group-options-arrow {
+                    fill: @card-background-color;
+                }
+
+                .dropdown-options-item {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    width: 100%;
+
+                    padding: .25rem .5rem;
+                    border-radius: .625rem;
+
+                    font-size: .9rem;
+
+                    cursor: pointer;
+
+                    &:hover {
+                        background-color: @button-hover-color;
+                        outline: none;
+
+                        &.delete {
+                            background-color: @alert-color;
+                            color: @font-color-v1;
+                        }
+                    }
+
+                    &[data-disabled] {
+                        color: @font-disabled-color;
+
+                        &:hover {
+                            background-color: transparent;
+                        }
+                    }
+
+                    &:not(:last-child) {
+                        margin-bottom: .25rem;
+                    }
+
+                    .right-slot {
+                        width: fit-content;
+                        margin-left: auto;
+
+                        &.bi {
+                            font-size: 1.2em;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}