From 31ba5f4ffa5ab66a48e556630888fe803781f070 Mon Sep 17 00:00:00 2001
From: aida-rodi <aida.rodi.1997@gmail.com>
Date: Thu, 17 Oct 2024 14:00:38 +0200
Subject: [PATCH] feature: added pencil icons to all components in the "My
 Profile" view

---
 .../studentProfile/StudentProfileContent.tsx  |  25 ++--
 .../MyProfileBootcampCard.tsx                 |  61 ++++++++
 .../MyProfileCollaborationCard.tsx            |  93 ++++++++++++
 .../MyProfileLanguagesCard.tsx                |  45 ++++++
 .../MyProfileModalityCard.tsx                 |  46 ++++++
 .../MyProfileProjectsCard.tsx                 | 113 ++++++++++++++
 .../MyProfileStudentDetailCard.tsx            | 140 ++++++++++++++++++
 7 files changed, 510 insertions(+), 13 deletions(-)
 create mode 100644 src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileBootcampCard.tsx
 create mode 100644 src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileCollaborationCard.tsx
 create mode 100644 src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileLanguagesCard.tsx
 create mode 100644 src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileModalityCard.tsx
 create mode 100644 src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileProjectsCard.tsx
 create mode 100644 src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileStudentDetailCard.tsx

diff --git a/src/components/students/studentDetail/studentProfile/StudentProfileContent.tsx b/src/components/students/studentDetail/studentProfile/StudentProfileContent.tsx
index 31614d4f..31225970 100644
--- a/src/components/students/studentDetail/studentProfile/StudentProfileContent.tsx
+++ b/src/components/students/studentDetail/studentProfile/StudentProfileContent.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import ProjectsCard from '../cards/ProjectsCard'
-import CollaborationCard from '../cards/CollaborationCard'
-import BootcampCard from '../cards/BootcampCard'
-import ModalityCard from '../cards/ModalityCard'
-import StudentDataCard from '../cards/StudentDetailCard'
-import LanguagesCard from '../cards/LanguagesCard'
+import MyProfileStudentDetailCard from './studentProfileCards/MyProfileStudentDetailCard'
+import MyProfileProjectsCard from './studentProfileCards/MyProfileProjectsCard'
+import MyProfileCollaborationCard from './studentProfileCards/MyProfileCollaborationCard'
+import MyProfileBootcampCard from './studentProfileCards/MyProfileBootcampCard'
 import AdditionalTrainingCard from '../cards/AdditionalTrainingCard'
+import MyProfileLanguagesCard from './studentProfileCards/MyProfileLanguagesCard'
+import MyProfileModalityCard from './studentProfileCards/MyProfileModalityCard'
 import { useStudentDetailHook } from '../../../../hooks/useStudentDetailHook'
 
 const StudentProfileContent: React.FC = () => {
@@ -23,19 +23,18 @@ const StudentProfileContent: React.FC = () => {
                     <h3 className="hidden text-2xl font-bold md:block">
                         Mi Perfil
                     </h3>
-                    <StudentDataCard />
+                    {<MyProfileStudentDetailCard />}
                     <span className="h-0.5 w-full bg-gray-4-base" />
-                    <ProjectsCard />
+                    <MyProfileProjectsCard />
                     <span className="h-0.5 w-full bg-gray-4-base" />
-                    <CollaborationCard />
-                    <span className="h-0.5 w-full bg-gray-4-base" />
-                    <BootcampCard />
+                    <MyProfileCollaborationCard />
                     <span className="h-0.5 w-full bg-gray-4-base" />
+                    <MyProfileBootcampCard />
                     <AdditionalTrainingCard />
                     <span className="h-0.5 w-full bg-gray-4-base" />
-                    <LanguagesCard />
+                    <MyProfileLanguagesCard />
                     <span className="h-0.5 w-full bg-gray-4-base" />
-                    <ModalityCard />
+                    <MyProfileModalityCard />
                 </div>
             </div>
         </div>
diff --git a/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileBootcampCard.tsx b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileBootcampCard.tsx
new file mode 100644
index 00000000..64ee2d36
--- /dev/null
+++ b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileBootcampCard.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { Pencil } from '../../../../../assets/svg'
+import medal from '../../../../../assets/img/medal-dynamic-color.png'
+import { useAppSelector } from '../../../../../hooks/ReduxHooks'
+import LoadingSpiner from '../../../../atoms/LoadingSpiner'
+
+const MyProfileBootcampCard: React.FC = () => {
+    const { studentBootcamps } = useAppSelector((state) => state.ShowStudentReducer)
+    const { bootcampData, isErrorBootcamp, isLoadingBootcamp } = studentBootcamps
+
+    return (
+        <div className="flex flex-col gap-4" data-testid="BootcampCard">
+            <div className='flex'>
+                <h3 className="text-lg font-bold">Datos del bootcamp</h3>
+                <button className='ml-auto'>
+                    <img src={Pencil} alt="edit training information" />
+                </button>
+            </div>
+            {isLoadingBootcamp && <LoadingSpiner />}
+            {isErrorBootcamp && (
+                <LoadingSpiner
+                    textContent="Upss!!"
+                    type="loading-bars"
+                    textColor="red"
+                />
+            )}
+            {!isLoadingBootcamp &&
+                (bootcampData.length === 0 ? (
+                    <div className="flex flex-col gap-1 rounded-md bg-gray-5-background p-5 shadow-[0_4px_0_0_rgba(0,0,0,0.25)]">
+                        <p className="text- font-medium text-black-3">
+                            - Bootcamp no terminado -
+                        </p>
+                    </div>
+                ) : (
+                    bootcampData.map((bootcamp) => (
+                        <div className="flex flex-col gap-1 rounded-md bg-gray-5-background p-5 shadow-[0_4px_0_0_rgba(0,0,0,0.25)]">
+                            <div
+                                className="flex items-center"
+                                key={bootcamp.bootcamp_id}
+                            >
+                                <img
+                                    src={medal}
+                                    alt="Medal"
+                                    className="w-16 pe-1"
+                                />
+                                <div className="flex flex-col gap-1">
+                                    <p className="text-base font-semibold leading-tight text-black-3">
+                                        {bootcamp.name}
+                                    </p>
+                                    <p className="text-sm font-medium text-black-2">
+                                        Finalizado: {bootcamp.bootcamp_end_date}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    ))
+                ))}
+        </div>
+    )
+}
+export default MyProfileBootcampCard
diff --git a/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileCollaborationCard.tsx b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileCollaborationCard.tsx
new file mode 100644
index 00000000..ce67941f
--- /dev/null
+++ b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileCollaborationCard.tsx
@@ -0,0 +1,93 @@
+import target from '../../../../../assets/img/target.png'
+import folder from '../../../../../assets/img/folder.png'
+import { Pencil } from '../../../../../assets/svg'
+import { useAppSelector } from '../../../../../hooks/ReduxHooks'
+import LoadingSpiner from '../../../../atoms/LoadingSpiner'
+
+const MyProfileCollaborationCard: React.FC = () => {
+    const { studentCollaborations } = useAppSelector((state) => state.ShowStudentReducer)
+    const {collaborationsData, isLoadingCollaborations, isErrorCollaborations} = studentCollaborations
+    const [resourcesCard, challengesCard] = collaborationsData
+
+    return (
+        <div className="flex flex-col gap-4" data-testid="CollaborationCard">
+            <div className='flex'>
+                <h3 className="text-lg font-bold text-black-3">Colaboración</h3>
+                <button className='ml-auto'>
+                    <img src={Pencil} alt="edit collaboration information" />
+                </button>
+            </div>            
+            <div className="flex flex-col gap-4 md:flex-row">
+                {isLoadingCollaborations && <LoadingSpiner />}
+                {isErrorCollaborations && (
+                    <LoadingSpiner
+                        textContent="Upss!!"
+                        type="loading-bars"
+                        textColor="red"
+                    />
+                )}
+                {!isLoadingCollaborations && (
+                    <>
+                        {/* <ResourcesCard /> */}
+                        <div className="flex w-2/3 md:w-1/2 items-start justify-between rounded-md bg-ita-wiki p-3 pl-7 pt-3">
+                            <div className="flex flex-col">
+                                {resourcesCard === undefined ? (
+                                    <p className="py-2 text-l text-white">
+                                        -loading-
+                                    </p>
+                                ) : (
+                                    <p className="text-2xl text-white">
+                                        {resourcesCard.quantity}
+                                    </p>
+                                )}
+                                <p className="text-md text-white">
+                                    Recursos subidos
+                                </p>
+                                <p className="mt-2 text-sm font-light text-white">
+                                    ita-wiki
+                                </p>
+                            </div>
+                            <div className="w-9 -mt-1">
+                                <img
+                                    src={folder}
+                                    alt="folder"
+                                    className="h-full"
+                                />
+                            </div>
+                        </div>
+
+                        {/* <ChallengesCard /> */}
+                        <div className="flex w-2/3 md:w-1/2 items-start justify-between rounded-md bg-ita-challenges p-3 pl-7 pt-3">
+                            <div className="flex flex-col ">
+                                {challengesCard === undefined ? (
+                                    <p className="py-2 text-l text-white">
+                                        -loading-
+                                    </p>
+                                ) : (
+                                    <p className="text-2xl text-white">
+                                        {challengesCard.quantity}
+                                    </p>
+                                )}
+                                <p className="text-md text-white">
+                                    Retos completados
+                                </p>
+                                <p className="mt-2 text-sm font-light text-white">
+                                    ita-challenges
+                                </p>
+                            </div>
+                            <div className="w-10 -mt-2">
+                                <img
+                                    src={target}
+                                    alt="folder"
+                                    className="w-full"
+                                />
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default MyProfileCollaborationCard
diff --git a/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileLanguagesCard.tsx b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileLanguagesCard.tsx
new file mode 100644
index 00000000..605d98a3
--- /dev/null
+++ b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileLanguagesCard.tsx
@@ -0,0 +1,45 @@
+import { Pencil } from '../../../../../assets/svg'
+import { useAppSelector } from '../../../../../hooks/ReduxHooks'
+import LoadingSpiner from '../../../../atoms/LoadingSpiner'
+
+const MyProfileLanguagesCard: React.FC = () => {
+    const { studentLanguages } = useAppSelector((state) => state.ShowStudentReducer)
+    const { languagesData, isLoadingLanguages, isErrorLanguages } = studentLanguages
+
+    return (
+        <div data-testid="LanguagesCard">
+            <div className='flex mb-4'>
+                <h3 className="text-lg font-bold">Idiomas</h3>
+                <button className='ml-auto'>
+                    <img src={Pencil} alt="edit languages information" />
+                </button>
+            </div>            
+            {isLoadingLanguages && <LoadingSpiner />}
+            {isErrorLanguages && (
+                <LoadingSpiner
+                    textContent="Upss!!"
+                    type="loading-bars"
+                    textColor="red"
+                />
+            )}
+            {!isLoadingLanguages && (
+                <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-1">
+                        {languagesData.map((language) => (
+                            <ul
+                                key={language.id}
+                                className="flex flex-col"
+                            >
+                                <li className="text-sm font-semibold text-black-2">
+                                    {language.name} - {language.level}
+                                </li>
+                            </ul>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default MyProfileLanguagesCard
diff --git a/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileModalityCard.tsx b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileModalityCard.tsx
new file mode 100644
index 00000000..048a36b3
--- /dev/null
+++ b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileModalityCard.tsx
@@ -0,0 +1,46 @@
+import { v4 as uuidv4 } from 'uuid'
+import remoto from '../../../../../assets/svg/remoto.svg'
+import { Pencil } from '../../../../../assets/svg'
+import { useAppSelector } from '../../../../../hooks/ReduxHooks'
+import LoadingSpiner from '../../../../atoms/LoadingSpiner'
+
+const MyProfileModalityCard: React.FC = () => {
+    const {
+        modality: modalityData,
+        isLoadingModality,
+        isErrorModality,
+    } = useAppSelector((state) => state.ShowStudentReducer.studentAdditionalModality)
+
+    return (
+        <div className="flex flex-col gap-3" data-testid="ModalityCard">
+            <div className='flex'>
+                <h3 className="font-bold text-lg">Modalidad</h3>
+                <button className='ml-auto'>
+                    <img src={Pencil} alt="edit modality information" />
+                </button>
+            </div>
+            {isLoadingModality && <LoadingSpiner />}
+            {isErrorModality && (
+                <LoadingSpiner
+                    textContent="Upss!!"
+                    type="loading-bars"
+                    textColor="red"
+                />
+            )}
+            {!isLoadingModality && (
+                <div className="flex-col items-center ">
+                    {modalityData.map((modality) => (
+                        <div key={uuidv4()} className="flex gap-3 py-1">
+                            <img src={remoto} className="pr-2" alt="remoto" />
+                            <p className="text-sm font-semibold text-black-2">
+                                {modality.toString()}
+                            </p>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default MyProfileModalityCard
diff --git a/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileProjectsCard.tsx b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileProjectsCard.tsx
new file mode 100644
index 00000000..7af93b00
--- /dev/null
+++ b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileProjectsCard.tsx
@@ -0,0 +1,113 @@
+import { Github, Pencil, ArrowLeft, ArrowRight } from '../../../../../assets/svg'
+import { ArrowRightProjects } from '../../../../../assets/img'
+import { useAppSelector } from '../../../../../hooks/ReduxHooks'
+import LoadingSpiner from '../../../../atoms/LoadingSpiner'
+import { Carousel } from '../../../../atoms/Carousel'
+
+const MyProfileProjectsCard: React.FC = () => {
+    const { studentProjects } = useAppSelector((state) => state.ShowStudentReducer)
+    const { projectsData, isLoadingProjects, isErrorProjects } = studentProjects
+
+    const { scrollLeft, scrollRight, carouselRef } = Carousel()
+
+    return (
+        <div
+            className="carousel-item flex flex-col gap-4"
+            data-testid="ProjectsCard"
+        >
+            <div className="flex justify-between">
+                <h3 className="text-lg font-bold">Proyectos</h3>
+                {projectsData && (
+                    <button 
+                        className='flex items-center text-xs font-semibold rounded-md border border-gray-3 px-2 py-0 mr-auto ml-4'
+                        type='button'
+                        >                        
+                        Nuevo proyecto                       
+                    </button>
+                )}
+                <div className="h-3 self-end">
+                    <button type="button" onClick={scrollLeft}>
+                        <img src={ArrowLeft} alt="arrow left" className="w-5" />
+                    </button>
+                    <button type="button" onClick={scrollRight}>
+                        <img
+                            src={ArrowRight}
+                            alt="arrow right"
+                            className="w-5"
+                        />
+                    </button>
+                </div>
+            </div>
+            {isLoadingProjects && <LoadingSpiner />}
+            {isErrorProjects && (
+                <LoadingSpiner
+                    textContent="Upss!!"
+                    type="loading-bars"
+                    textColor="red"
+                />
+            )}
+            {projectsData && (
+                <div ref={carouselRef} className="flex gap-3 overflow-x-hidden">
+                    {projectsData.map((project) => (
+                        <div
+                            key={project.uuid}
+                            className="flex flex-col gap-1 rounded-xl border border-gray-3 px-5 py-3.5 "
+                        >
+                            <div className="flex items-center justify-between">
+                                <div className="flex w-48 items-center gap-3">
+                                    <p className="text-md font-semibold ">
+                                        {project.name.slice(0, 15)}
+                                    </p>
+                                    <a
+                                        href={project.github_url}
+                                        className="flex items-center"
+                                    >
+                                        <img
+                                            src={Github}
+                                            alt="github link"
+                                            className="w-6"
+                                        />
+                                    </a>
+                                </div>
+                                <button
+                                    type="button"
+                                    className="-mt-1 flex w-6 self-start"
+                                >
+                                    <img src={Pencil} alt="edit project information" />
+                                </button>
+                            </div>
+                            <p className="text-sm text-gray-3">
+                                {project.company_name}
+                            </p>
+                            <div className="flex items-center justify-between pt-3">
+                                <div className="text-sm rounded-lg border border-black-3 px-2 py-1 font-semibold">
+                                    {project.tags
+                                        .slice(0, 2)
+                                        .map((tag, index) => (
+                                            <span key={tag.id}>
+                                                {tag.name}
+                                                {index !== 1 && ' · '}
+                                            </span>
+                                        ))}
+                                </div>
+                                <a
+                                    href={project.project_url}
+                                    type="button"
+                                    className="h-8 rounded-lg border border-black-3"
+                                >
+                                    <img
+                                        src={ArrowRightProjects}
+                                        alt="right arrow button"
+                                        className="h-full"
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default MyProfileProjectsCard
diff --git a/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileStudentDetailCard.tsx b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileStudentDetailCard.tsx
new file mode 100644
index 00000000..2c5927f6
--- /dev/null
+++ b/src/components/students/studentDetail/studentProfile/studentProfileCards/MyProfileStudentDetailCard.tsx
@@ -0,0 +1,140 @@
+import { useState } from 'react'
+import { Github, Linkedin, Pencil } from '../../../../../assets/svg'
+import { Stud1 as ProfilePicture } from '../../../../../assets/img'
+import { ITag } from '../../../../../interfaces/interfaces'
+import { useAppSelector } from '../../../../../hooks/ReduxHooks'
+import LoadingSpiner from '../../../../atoms/LoadingSpiner'
+
+const MyProfileStudentDetailCard: React.FC = () => {
+    const [showFullDescription, setShowFullDescription] = useState(false)
+
+    const toggleDescription = () => {
+        setShowFullDescription(!showFullDescription)
+    }
+    const { aboutData, isLoadingAboutData, isErrorAboutData } = useAppSelector(
+        (state) => state.ShowStudentReducer.studentDetails,
+    )
+    return (
+        <div data-testid="StudentDataCard">
+            {isLoadingAboutData && <LoadingSpiner />}
+            {isErrorAboutData && <LoadingSpiner />}
+            {!isLoadingAboutData && (
+                <div className="flex flex-col gap-4">
+                    <div className="flex gap-3">
+                        <img
+                            src={ProfilePicture}
+                            alt="Profile"
+                            className="h-20 w-20 flex-none rounded-lg"
+                        />
+                        <div className="flex w-full">
+                            <div className="flex flex-col gap-2 w-full">
+                                <div className="flex flex-col">
+                                    <div className='flex'>
+                                        <h2 className="text-xl font-bold">
+                                            {aboutData.fullname}
+                                        </h2>
+                                        <button 
+                                            className='ml-auto'
+                                            type='button'
+                                            >
+                                                <img 
+                                                    src={Pencil} 
+                                                    alt="edit profile information" 
+                                                />
+                                        </button>
+                                    </div>
+                                    
+                                    <p className="text-gray-2">
+                                        {aboutData.resume.subtitle}
+                                    </p>
+                                </div>
+                                <div className="flex gap-4">
+                                    <a
+                                        href={aboutData.resume.social_media.github.url}
+                                        className="flex gap-1"
+                                    >
+                                        <img 
+                                            src={Github} 
+                                            alt="github icon" 
+                                        />
+                                        Github
+                                    </a>
+                                    <a
+                                        href={aboutData.resume.social_media.linkedin.url}
+                                        className="flex gap-1"
+                                    >
+                                        <img
+                                            src={Linkedin}
+                                            alt="linkedin icon"
+                                        />
+                                        LinkedIn
+                                    </a>
+                                </div>
+                            </div>
+                        </div>                        
+                    </div>
+                    <div className="flex flex-col gap-6">
+                        <div className="flex flex-col gap-2">
+                            <h3 className="text-lg font-bold">About</h3>
+                            <div>
+                                <p className="text-sm">
+                                    {showFullDescription
+                                        ? aboutData && aboutData.resume.about
+                                        : `${aboutData.resume.about
+                                              .split(' ')
+                                              .slice(0, 15)
+                                              .join(' ')}...`}
+                                    {!showFullDescription && (
+                                        <button
+                                            type="button"
+                                            onClick={toggleDescription}
+                                            className="text-sm text-gray-3"
+                                        >
+                                            ver más
+                                        </button>
+                                    )}
+                                </p>
+                                {showFullDescription && (
+                                    <p className="text-sm">
+                                        <button
+                                            type="button"
+                                            onClick={toggleDescription}
+                                            className="text-sm text-gray-3"
+                                        >
+                                            ver menos
+                                        </button>
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+                        <span className="h-0.5 w-full bg-gray-4-base" />
+                        <div className='flex'>
+                            <ul className="flex flex-wrap gap-2">
+                                {aboutData &&
+                                    aboutData.tags.map((tag: ITag) => (
+                                        <li
+                                            key={tag.id}
+                                            className="rounded-md bg-gray-5-background px-2 py-1 text-sm"
+                                        >
+                                            {tag.name}
+                                        </li>
+                                    ))}
+                            </ul>
+                            <button 
+                                className='ml-auto'
+                                type='button'
+                                >
+                                    <img 
+                                        src={Pencil} 
+                                        alt="edit tags" 
+                                    />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default MyProfileStudentDetailCard