change: show contents tab on profile page

src/pages/Profile/ProfileContentItem/ProfileContentItem.css

@@ -4,7 +4,7 @@
     width: 320px;
     height: 280px;
     background-color: var(--secondary-color);
-
+    text-decoration: none;
 }
 
 .profile-content-thumbnail{

src/pages/Profile/ProfileContentItem/ProfileContentItem.tsx

@@ -1,17 +1,24 @@
 import { Folder } from "@/types/Capacity";
 import './ProfileContentItem.css'
 import { Link } from "react-router-dom";
+import { IMG_DEFAULT_CONTENT } from "@/utils/assets";
 
-export function ProfileContentItem({content} : {content : Folder}){
+export type ProfileContentItemProps = {
+    content: Folder;
+};
+
+export function ProfileContentItem({content} : Readonly<ProfileContentItemProps>){
+    const imageUrl = content.image
+        ? import.meta.env.VITE_UNIVERSIME_API + content.image
+        : IMG_DEFAULT_CONTENT;
 
     return(
 
-        <div className="profile-content">
-            <Link to={`/capacitacao/folder/${content.id}`}>
-                <img src={content.image ?? undefined} className="profile-content-thumbnail"/>
-            </Link>
+        <Link className="profile-content" to={`/capacitacao/folder/${content.id}`}>
+            {/* todo: fix content URL */}
+            <img src={imageUrl} className="profile-content-thumbnail" alt=""/>
             <p className="profile-content-title">{content.name}</p>
-        </div>
+        </Link>
     )
 
 }

src/pages/Profile/ProfileContentListing/ProfileContentListing.css

@@ -1,7 +1,7 @@
 .contents{
     display: flex;
     flex-wrap: wrap;
-    margin-top: 2%;
+    margin-top: .5rem;
     gap: 40px;
 }
 

src/pages/Profile/ProfileContentListing/ProfileContentListing.tsx

@@ -1,44 +1,41 @@
-import { Folder } from "@/types/Capacity";
-import { useEffect, useState, useContext } from "react";
+import { useContext } from "react";
 import { ProfileContentItem } from "../ProfileContentItem/ProfileContentItem";
 import "./ProfileContentListing.css"
 import { ProfileContext } from "../ProfileContext";
 
-export function ProfileContentListing({title = "Vídeo"} : {title : string}){
+export function ProfileContentListing(){
 
     const profileContext = useContext(ProfileContext);
-    const [availableContents, setAvailableContents] = useState<Folder[]>([])
+    if (profileContext == null)
+        return null;
 
-    useEffect( () =>{
-        setAvailableContents(profileContext?.profileListData.folders ?? []);
-    }, [title])
+    const availableContents = profileContext.profileListData.folders
+        .slice(0)
+        .sort((content1, content2) => {
+            return content1.name.localeCompare(content2.name);
+        })
 
     const isOwnProfile = !!profileContext?.accessingLoggedUser;
     const hasOtherProfile = !!profileContext?.profile.firstname;
 
     const otherProfileText = hasOtherProfile
-        ? `${title} de ${profileContext.profile.firstname}`
-        : title;
+        ? `Conteúdos de ${profileContext.profile.firstname}`
+        : "Conteúdos";
 
     const tabTitle = isOwnProfile
-        ? `Meus ${title}`
+        ? "Meus Conteúdos"
         : otherProfileText;
 
       return(
         <div>
             <h1 className="content-name">{tabTitle}</h1>
             <div className="contents">
-                {
-                    availableContents.length === 0 ? <p>Nenhum conteúdo no momento</p> :  
-
-                    availableContents.map((content) =>(
-                          <ProfileContentItem content={content} key={content.id} />
+                { availableContents.length === 0 ? <p>Nenhum conteúdo atribuído no momento.</p> :
+                    availableContents.map(content => (
+                        <ProfileContentItem content={content} key={content.id} />
                     ))
                 }
             </div>
         </div>
       )
-
-
-
-}
+}

src/pages/Profile/SelectionBar/SelectionBar.css

@@ -8,10 +8,17 @@
     margin-bottom: 40px;
 }
 
-.select-element{
+.selection-bar .select-element {
+    background: transparent;
+    border: none;
+    color: var(--font-color-v1);
     padding: 20px 20px;
     border-right: solid 1px white ;
     font-size: large;
     font-weight: 500;
     cursor: pointer;
 }
+
+.selection-bar .select-element.current-tab {
+    text-decoration: underline;
+}

src/pages/Profile/SelectionBar/SelectionBar.tsx

@@ -3,9 +3,10 @@ import {useState} from "react"
 import "./SelectionBar.css"
 import { ProfileContentListing } from "../ProfileContentListing/ProfileContentListing"
 import { ProfileGroupListing } from "../ProfileGroupListing/ProfileGroupListing"
+import { makeClassName } from "@/utils/tsxUtils";
 
 export function SelectionBar(){
-    const [currentTab, setCurrentTab] = useState("groups");
+    const [currentTab, setCurrentTab] = useState<AvailableTabs>("groups");
     const renderTabs = TABS.length > 1;
 
     return(
@@ -15,7 +16,8 @@ export function SelectionBar(){
                 <div className="selection-bar">
                     {
                         TABS.map((tab) => {
-                            return <div key={tab.value} className="select-element" onClick={() => setCurrentTab(tab.value)}>{tab.name}</div>
+                            const className = makeClassName("select-element", tab.value === currentTab && "current-tab")
+                            return <button key={tab.value} className={className} onClick={() => setCurrentTab(tab.value)}>{tab.name}</button>
                         })
                     }
                 </div>
@@ -25,32 +27,28 @@ export function SelectionBar(){
     )
 }
 
+export type AvailableTabs = "groups" | "contents";
+
 type TabDefinition = {
     name: string;
-    value: string;
+    value: AvailableTabs;
 };
 
 const TABS: TabDefinition[] = [
-    // {
-    //     name: "Conteúdos",
-    //     value: "content",
-    // },
-    // {
-    //     name: "Arquivos",
-    //     value: "files",
-    // },
     {
         name: "Grupos",
         value: "groups",
     },
+    {
+        name: "Conteúdos",
+        value: "contents",
+    },
 ];
 
-
-function renderTab(tabValue : string){
-    if(tabValue == "content")
-        return <ProfileContentListing title="Conteúdos"/>
-    if(tabValue == "files")
-        return <ProfileContentListing title="Arquivos"/>
-    if(tabValue == "groups")
-        return <ProfileGroupListing/>
+function renderTab(tab: AvailableTabs) {
+    switch (tab) {
+        case "contents": return <ProfileContentListing />;
+        case "groups":   return <ProfileGroupListing />;
+        default: return null;
+    }
 }

src/utils/assets.ts

@@ -1,6 +1,7 @@
 export const IMG_UNIVERSI_LOGO =   "/assets/imgs/universi-me2.png";
 export const IMG_DCX_LOGO =        "/assets/imgs/dcx-png 1.png";
 export const IMG_DEFAULT_PROFILE = "/assets/imgs/default_avatar.png";
+export const IMG_DEFAULT_CONTENT = "/assets/imgs/default-content.png";
 
 export const ICON_CHEVRON_DOWN =     "/assets/icons/chevron-down-1.svg";
 export const ICON_CHEVRON_UP_BLACK = "/assets/icons/chevron-up-black.svg";