get data from cloud service with my curriculum and set components Pla…

…tziMaster#5
felipedc09 · May 19, 2021 · f1638e7 · f1638e7
1 parent c54be25
commit f1638e7
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 31 deletions.
diff --git a/src/components/Academic/index.jsx b/src/components/Academic/index.jsx
@@ -2,13 +2,30 @@ import React from 'react';
 import Box from '../Box/Box';
 import ListItems from '../ListItems/ListItems';
 
-const Academic = () => {
-  const items = ['.Academic-Item 1', '.Academic-Item 2', '.Academic-Item 3'];
+const Academic = ({ data }) => {
+
+  const createAcademicItem = (academics) => {
+    return academics.map(academic => (
+      <div>
+        <b>{academic.degree}</b>
+        <br />
+        {academic.description}
+        <br />
+        {academic.institution}
+        <br />
+        {academic.startDate}
+        <br />
+        {academic.endDate}
+      </div>
+    ));
+  };
+
+  const items = [...createAcademicItem(data), '', ''];
 
   return (
     <Box>
       <h1 className='Academic-title'>
-        .Academic-title
+        Academic
       </h1>
       <ListItems listName='Academic' items={items} />
     </Box>

diff --git a/src/components/Experience/index.jsx b/src/components/Experience/index.jsx
@@ -2,13 +2,30 @@ import React from 'react';
 import Box from '../Box/Box';
 import ListItems from '../ListItems/ListItems';
 
-const Experience = () => {
-  const items = ['.Experience-item 1', '.Experience-item 2', '.Experience-item 3', '.Experience-item 4'];
+const Experience = ({ data }) => {
+
+  const createExperienceItem = (experiences) => {
+    return experiences.map(experience => (
+      <div>
+        <b>{experience.jobTitle}</b>
+        <br />
+        {experience.jobDescription}
+        <br />
+        {experience.company}
+        <br />
+        {experience.startDate}
+        <br />
+        {experience.endDate}
+      </div>
+    ));
+  };
+
+  const items = [...createExperienceItem(data), '', '', ''];
 
   return (
     <Box>
       <h1 className='Experience-title'>
-        .Experience-title
+        Experience
       </h1>
       <ListItems listName='Experience' items={items} columnsNumber={2} />
     </Box>

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -2,24 +2,25 @@ import React from 'react';
 import Box from '../Box/Box';
 import '../../styles/components/Header.styl';
 
-const Header = () => {
+const Header = ({ data }) => {
+  const { name, avatar, profession, phone, address, email, website } = data;
   return (
     <Box className='Header'>
-      <img className='Profile-image' src='public/avatar.jpg' alt='profile' />
+      <img className='Profile-image' src={avatar} alt='profile' />
       <div>
-        <h1 className='Header-title'>.Header-title</h1>
-        .Header-job-title
+        <h1 className='Header-title'>{name}</h1>
+        {profession}
         <div className='Header-data'>
           <div className='Header-item'>
-            .Header-phone
+            {phone}
             <br />
-            .Header-adress
+            {address}
           </div>
           <div className='Header-item'>
-            .Header-email
+            {email}
           </div>
           <div className='Header-item'>
-            .Header-website
+            {website}
           </div>
         </div>
       </div>

diff --git a/src/components/Interest/index.jsx b/src/components/Interest/index.jsx
@@ -2,12 +2,22 @@ import React from 'react';
 import Box from '../Box/Box';
 import ListItems from '../ListItems/ListItems';
 
-const Interest = () => {
-  const items = ['.Interest-Item 1', '.Interest-Item 2', '.Interest-Item 3'];
+const Interest = ({ data }) => {
+
+  const createInterestsItem = (interest) => {
+    return interest.map(interestItem => (
+      <div>
+        {interestItem}
+      </div>
+    ));
+  };
+
+  const items = [...createInterestsItem(data)];
+
   return (
     <Box>
       <h1 className='Interest-title'>
-        .Interest-title
+        Interest
       </h1>
       <ListItems listName='Interest' items={items} columnsNumber={2} />
     </Box>

diff --git a/src/components/Languages/index.jsx b/src/components/Languages/index.jsx
@@ -2,17 +2,28 @@ import React from 'react';
 import Box from '../Box/Box';
 import ListItems from '../ListItems/ListItems';
 
-const Lenguages = () => {
-  const items = ['.Lenguages-Item 1', '.Lenguages-Item 2', '.Lenguages-Item 3'];
+const Languages = ({ data }) => {
+  console.log(data);
+  const createLanguagesItem = (languages) => {
+    return languages.map(language => (
+      <div>
+        <b>{language.name}</b>
+        <br />
+        {language.percentage}
+      </div>
+    ));
+  };
+
+  const items = [...createLanguagesItem(data)];
 
   return (
     <Box>
       <h1 className='Languages-title'>
-        .Lenguages-title
+        Languages
       </h1>
       <ListItems listName='Languages' items={items} columnsNumber={3} />
     </Box>
   );
 };
 
-export default Lenguages;
+export default Languages;
diff --git a/src/components/ListItems/ListItems.jsx b/src/components/ListItems/ListItems.jsx
@@ -3,7 +3,7 @@ import '../../styles/components/ListItems.styl';
 
 const ListItems = ({ listName, items, columnsNumber = 1 }) => {
   const renderItems = () => {
-    return items.map(item => <li key={item} className={`${listName}-item`}>{item}</li>);
+    return items.map((item, index) => <li key={`${item}-${index * 2}`} className={`${listName}-item`}>{item}</li>);
   };
   return (
     <div className='List'>

diff --git a/src/components/Profile/index.jsx b/src/components/Profile/index.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import Box from '../Box/Box';
 
-const Profile = () => {
+const Profile = ({ data }) => {
   return (
     <Box>
       <h1 className='Profile-title'>
-        .Profile-title
+        Profile
       </h1>
       <div className='Profile-desc'>
-        .Profile-desc
+        {data}
       </div>
     </Box>
   );

diff --git a/src/components/Skills/index.jsx b/src/components/Skills/index.jsx
@@ -2,15 +2,25 @@ import React from 'react';
 import Box from '../Box/Box';
 import ListItems from '../ListItems/ListItems';
 
-const Skills = () => {
-  const items = ['.Experience-Item 1', '.Experience-Item 2', '.Experience-Item 3'];
+const Skills = ({ data }) => {
+
+  const createSkillsItem = (skills) => {
+    return skills.map(skill => (
+      <div>
+        <b>{skill.name}</b>
+        <br />
+        {skill.percentage}
+      </div>
+    ));
+  };
+  const items = [...createSkillsItem(data)];
 
   return (
     <Box>
       <h1 className='Skills-title'>
-        .Skills-title
+        Skills
       </h1>
-      <ListItems listName='Skills' items={items} />
+      <ListItems listName='Skills' items={items} columnsNumber={3} />
     </Box>
   );
 };

diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl
@@ -4,8 +4,8 @@
     background-color #e1f4fe
 
 .Profile-image
-    height 120px
-    margin 0px 40px
+    height 150px
+    margin 0px 20px
 
 .Header-data
     margin-top 10px