Working with the api.

src/CV.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import Header from './Components/Header';
 import './Assets/scss/CV.scss'
 import Jobs from './Components/Jobs';
@@ -14,58 +14,53 @@ import {SideProjectCats} from './Model/side-project';
 import {JobAtCompany} from './Model/job-at-company';
 import {Interest} from './Model/interests';
 import {Profile} from './Model/profile';
+import { Me } from './Model/me';
 
 function CV() {
-    const tags: Tag[] = []
 
-    const langs: Lang[] = []
+    const [error, setError] = useState(null);
-
+    const [isLoaded, setIsLoaded] = useState(false);
-    const ed: EducationYear[] = []
+    const [cv, setCV] = useState<Me>(new Me());
-
-    const projs: SideProjectCats[] = []
-
-    const jobs: JobAtCompany[] = []
-
-    const interests: Interest[] = []
-
-    const profile: Profile = {
-        "name": "",
-        "title": "",
-        "quote": "",
-        "picture": ""
-    }
-
-    document.title = profile.name;
 
     useEffect(() => {
-        let link = document.querySelector("link[rel~='icon']");
+        fetch("http://localhost:7070/api/me")
-        if (!link) {
+            .then(res => res.json())
-            link = document.createElement('link');
+            .then(
-            // @ts-ignore
+                (result: Me) => {
-            link.rel = 'icon';
+                    setIsLoaded(true);
-            document.getElementsByTagName('head')[0].appendChild(link);
+                    setCV(result);
-        }
+                    document.title = result.profile.name;
-        // @ts-ignore
+                },
-        link.href = profile.picture
+                (error) => {
-    }, []);
+                    setIsLoaded(true);
+                    setError(error);
+                }
+            )
+    }, [])
 
-    return (
+    if (error) {
-        <div className="CV">
+        return <div>Error: {error}</div>;
-            <Header tags={tags} profile={profile}/>
+    } else if (!isLoaded) {
-            <div className="card flex divide-x divide-gray-600">
+        return <div>Loading...</div>;
-                <div className="basis-3/4 pr-2 divide-y divide-gray-400 details">
+    } else {
-                    <Jobs jobs={jobs}/>
+
-                    <Education education={ed}/>
+        return (<div className="CV">
-                    <SideProjects projs={projs}/>
+                <Header tags={cv.tags.filter(t => t.workThing)} profile={cv.profile}/>
-                </div>
+                <div className="card flex divide-x divide-gray-600">
-                <div className="basis-1/4 pl-2  divide-y divide-gray-400 details">
+                    <div className="basis-3/4 pr-2 divide-y divide-gray-400 details">
-                    <Skills tags={tags}/>
+                        <Jobs jobs={cv.jobs}/>
-                    <Languages langs={langs}/>
+                        <Education education={cv.educationYears}/>
-                    <Interests interests={interests}/>
+                        <SideProjects projs={cv.sideProjects}/>
+                    </div>
+                    <div className="basis-1/4 pl-2  divide-y divide-gray-400 details">
+                        <Skills tags={cv.tags}/>
+                        <Languages langs={cv.languages}/>
+                        <Interests interests={cv.interests}/>
+                    </div>
                 </div>
             </div>
-        </div>
+        );
-    );
+    }
 }
 
 export default CV;

src/Components/Job.tsx

@@ -8,7 +8,7 @@ function Job(props: ComponentProps<any>) {
         </div>
         <h5>{props.company}</h5>
         <ul>
-            {props.tasks.map((task: string) => <li key={task}>{task}</li>)}
+            {props.tasks.split("|").map((task: string) => <li key={task}>{task}</li>)}
         </ul>
     </div>);
 }

src/Components/SideProjects.tsx

@@ -1,15 +1,18 @@
 import React, {ComponentProps} from 'react';
 import {BeakerIcon} from '@heroicons/react/24/outline';
-import {SideProjectCats} from '../Model/side-project';
+import {SideProject} from '../Model/side-project';
+import {each, keys, map} from 'lodash';
 
 function SideProjects(props: ComponentProps<any>) {
     return (<div className="prose">
         <h3><BeakerIcon className="icon"/> Projets personnels</h3>
-        {props.projs.map((proj: SideProjectCats) => {
+        {Object.entries(props.projs).map(projectsOfCat => {
-            return (<div  key={proj.category}>
+            const cat = projectsOfCat[0];
-                <h4>{proj.category}</h4>
+            const projs = projectsOfCat[1] as SideProject[];
+            return (<div  key={cat}>
+                <h4>{cat}</h4>
                 <ul>
-                    {proj.projects.map(p => {
+                    {projs.map((p: SideProject) => {
                         return (<li  key={p.description}>
                             {p.title ? <div><a href={p.url}>{p.title}</a> {p.description}</div> : <div>{p.description}</div>}
                         </li>)

src/Components/Skills.tsx

@@ -1,6 +1,6 @@
 import React, {ComponentProps} from 'react';
 import {CalendarDaysIcon, CheckBadgeIcon, LanguageIcon} from '@heroicons/react/24/outline';
-import {getTagColor, Tag, TagCategory} from '../Model/tag';
+import {getTagColor, getTagTitle, Tag, TagCategory} from '../Model/tag';
 import {forIn, groupBy, map} from 'lodash';
 
 function Skills(props: ComponentProps<any>) {
@@ -10,7 +10,7 @@ function Skills(props: ComponentProps<any>) {
         <div className="flex flex-wrap justify-between">
             {map(tagsByCat, (tags, cat) => {
                 return (<div key={cat}>
-                    <h4 className="m-0 mb-1.5">{cat}</h4>
+                    <h4 className="m-0 mb-1.5">{getTagTitle(cat)}</h4>
                     <div>
                         {tags.map((t: Tag) => <button key={t.name} className={"tag " + getTagColor(t)}>{t.name}</button>)}
                     </div>

src/Model/me.ts

@@ -0,0 +1,17 @@
+import {EducationYear} from './education';
+import {SideProject} from './side-project';
+import {Interest} from './interests';
+import {Profile} from './profile';
+import {Tag} from './tag';
+import {Lang} from './lang';
+import {JobAtCompany} from './job-at-company';
+
+export class Me {
+    profile!: Profile
+    interests!: Interest[]
+    jobs!: JobAtCompany[]
+    sideProjects!: Map<string, SideProject[]>
+    educationYears!: EducationYear[]
+    languages!: Lang[]
+    tags!: Tag[]
+}

src/Model/side-project.ts

@@ -2,6 +2,7 @@ export class SideProject {
     title?: string
     url?: string
     description!: string
+    category!: string
 }
 
 export class SideProjectCats {

src/Model/tag.ts

@@ -13,12 +13,27 @@ export function getTagColor(t: Tag) {
     }
 };
 
+export function getTagTitle(cat: string) {
+    switch (cat) {
+        case TagCategory.FRONT:
+            return 'Developpement Front'
+        case TagCategory.BACK:
+            return 'Developpement Back'
+        case TagCategory.MOBILE:
+            return 'Developpement Mobile'
+        case TagCategory.DB:
+            return 'Bases de données'
+        case TagCategory.OTHER:
+            return 'Autre'
+    }
+};
+
 export enum TagCategory {
-    FRONT = 'Developpement Front',
+    FRONT = 'FRONT',
-    BACK = 'Developpement Back',
+    BACK = 'BACK',
-    MOBILE = 'Developpement Mobile',
+    MOBILE = 'MOBILE',
-    DB = 'Bases de données',
+    DB = 'DB',
-    OTHER = 'Autre'
+    OTHER = 'OTHER'
 }
 
 export class Tag {