React Eth Challenge - Done

PULL_REQUEST_TEMPLATE.md

@@ -1,16 +1,97 @@
 ## DESCRIPTION
 
-Solución al reto:
+Solución al reto: React Eth Challenge
 
-Nombre:
-Usuario Platzi:
+Deploy: https://sass3r.github.io/react-eth-challenge
+
+Nombre: Rafael Ramirez
+
+Usuario Platzi: rafael116
+
+Correo Electronico: rafael@cryptostore.com.bo
 
 ## Reto:
 
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
-- [ ] Sexto Problema
-- [ ] Septimo Problema
+- [ :heavy_check_mark: ] Primer problema
+- [ :heavy_check_mark: ] Segundo problema
+- [ :heavy_check_mark: ] Tercer problema
+- [ :heavy_check_mark: ] Cuarto Problema
+- [ :heavy_check_mark: ] Quinto Problema
+- [ :heavy_check_mark: ] Sexto Problema
+- [ :heavy_check_mark: ] Septimo Problema
+
+## Documentacion:
+
+### Tests
+En cada test se reemplazo la llamada a la funcion mount por shallow
+de la biblioteca de pruebas 'enzyme'
+
+~~~~javascript
+import { shallow } from 'enzyme';¬
+~~~~
+
+### Componentes
+
+App.-
+
+El componente App es el principal y esta estructurado de la siguiente manera:
+
+~~~~javascript
+    <div>
+      <AppContext.Provider value={cvData}>
+        <Header>
+          <About />
+        </Header>
+        <Profile />
+        <Experience />
+        <div className="grid">
+          <Academic />
+          <Skills />
+          <Interest />
+          <Languages />
+        </div>
+      </AppContext.Provider>
+    </div> 
+~~~~
+
+Header:
+
+El componente header contiene informacion del nombre, profesion y foto.
+
+About:
+
+El componente about contiene informacion de los datos de contactos y redes sociales.
+
+Profile:
+
+El componente profile contiene informacion sobre la prensetacion del perfil.
+
+Experience:
+
+El componente Experience contiene informacion de la experiencia de trabajo.
+
+Academic:
+
+El componente Academic contiene informacion de la formacion academica.
+
+Skills:
+
+El componente Skills contiene informacion de las habilidades tecnicas.
+
+Interest:
+
+El componente Interest contiene informacion de los intereses.
+
+Languages:
+
+El componente Languages contiene informacion de los idiomas.
+
+## Api
+
+Se implemento la funcion getData.js que por medio de la funcion fetch se obtienen los datos necesarios.
+
+Mediante AppContext y el hook useDataHook se provee la informacion requerida a todos los componentes.
+
+## Estilos
+
+Se utilizo stylus y css grid para los estilos de los componentes.

data.json

@@ -1,57 +1,57 @@
 {
   "data": {
-    "name": "Melissa Walsh",
-    "profession": "FrontEnd Developer",
-    "address": "Bogotá, Colombia.",
-    "email": "melissa@example.com",
-    "website": "https://example.com",
-    "phone": "3042034240",
-    "avatar": "https://arepa.s3.amazonaws.com/melissa.jpg",
-    "Profile": "Ignore the squirrels, you'll never catch them anyway hack, for floof tum, tickle bum, jellybean footies curly toes climb leg roll over and sun my belly, ",
+    "name": "Rafael Ramirez",
+    "profession": "FullStack Developer",
+    "address": "Cochabamba, Bolivia",
+    "email": "rafael@cryptostore.com.bo",
+    "website": "https://cryptostore.com.bo",
+    "phone": "+591 75992745",
+    "avatar": "https://pbs.twimg.com/profile_images/1549482647449210880/8KfHw-oh_400x400.jpg",
+    "Profile": "FullStack Developer with +7 years of experience developing web applications using JavaScript, Python, PHP, Java, Angular, Nodejs, Ruby on Rails, and Flutter.",
     "certificate": [
       {
-        "date": "Jan 2021",
-        "description": "Hack up furballs try to jump onto window and fall while scratching at wall. ",
+        "date": "Feb 2022",
+        "description": "Learn the essentials of Ruby, the ideal language to start programming that many startups use as the basis of their platforms.",
         "institution": "Platzi",
-        "name": "FrontEnd Developer"
+        "name": "Ruby Course"
       },
       {
-        "date": "Jan 2021",
-        "description": "Scratch at the door then walk away wack the mini furry mouse",
+        "date": "Mar 2022",
+        "description": "Learn React.js, the most popular JavaScript library for building interactive web applications!",
         "institution": "Platzi",
-        "name": "Backend Developer"
+        "name": "Introduction to React.js Course"
       }
     ],
     "Academic": [
       {
-        "degree": "Atomic Master",
-        "description": " I’m so hungry i’m so hungry but ew not for that pelt around the house and up and down stairs chasing phantoms",
-        "endDate": "Jan 2017",
-        "institution": "MIT",
-        "startDate": "Jan 2018"
+        "degree": "Bachelor of Computer Engineering",
+        "description": "Computer Engineering involves the design and development of systems based on computers and complex digital logic devices. These systems find use in such diverse tasks as computation, communication, entertainment, information processing, artificial intelligence, and control.",
+        "endDate": "Jul 2022",
+        "institution": "UMSS",
+        "startDate": "Feb 2011"
       },
       {
-        "degree": "Space Engineering",
-        "description": "Meow in empty rooms. Find empty spot in cupboard and sleep all day check cat door for ambush 10 times before coming in for hack. ",
-        "endDate": "Decenber 2015",
-        "institution": "Harvard",
-        "startDate": "Jan 2017"
+        "degree": "FullStack Blockchain Developer",
+        "description": "Open program supported by the Ethereum Foundation and Road to Devcon.",
+        "endDate": "Present",
+        "institution": "Platzi",
+        "startDate": "Jun 2022"
       }
     ],
     "experience": [
       {
-        "company": "PugStar",
+        "company": "Sawers Technology",
         "endDate": "Present",
-        "jobDescription": "scratch the furniture. Good now the other hand, too lay on arms while you're using the keyboard.",
-        "jobTitle": "Frontend",
-        "startDate": "Jan 2020"
+        "jobDescription": "Development and maintenance of Ecommerce systems. Implementation of payment methods.",
+        "jobTitle": "FullStack Developer",
+        "startDate": "Jan 2021"
       },
       {
-        "company": "CatStore",
-        "endDate": "Jan 2016",
-        "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.",
-        "jobTitle": "Backend",
-        "startDate": "Sept 2019"
+        "company": "Freelancer",
+        "endDate": "Jan 2021",
+        "jobDescription": "Fullstack development of general purpose information systems for local companies: Sales and inventory systems.",
+        "jobTitle": "Ruby on Rails Full Stack Web Development",
+        "startDate": "may 2016"
       }
     ],
     "skills": [
@@ -91,20 +91,20 @@
     "social": [
       {
         "name": "facebook",
-        "url": "https://facebook.com/"
+        "url": "https://facebook.com/rrafalinux"
       },
       {
         "name": "twitter",
-        "url": "https://twitter.com/"
+        "url": "https://twitter.com/sass3r"
       },
       {
         "name": "github",
-        "url": "https://github.com/"
+        "url": "https://github.com/sass3r"
       },
       {
         "name": "linkedin",
-        "url": "https://www.linkedin.com/"
+        "url": "https://www.linkedin.com/in/rudyrafaelrc"
       }
     ]
   }
-}
+}

package.json

@@ -9,7 +9,9 @@
     "server": "json-server data.json",
     "format": "prettier --write '{*.js,src/**/*.{js,jsx}}'",
     "lint": "eslint src/ --fix",
-    "test": "jest"
+    "test": "jest",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist"
   },
   "keywords": [
     "react",
@@ -29,6 +31,7 @@
     "jest-fetch-mock": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.4.0",
     "webpack": "5.73.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.9.3"
@@ -44,8 +47,12 @@
     "eslint-plugin-jsx-a11y": "6.6.0",
     "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-react": "7.30.1",
+    "gh-pages": "^4.0.0",
     "husky": "8.0.1",
     "jest": "28.1.2",
+    "jest-environment-jsdom": "28.1.3",
+    "jsdom": "20.0.0",
+    "jsdom-global": "3.0.2",
     "json-server": "^0.17.0",
     "mini-css-extract-plugin": "2.6.1",
     "prettier": "2.7.1",
@@ -61,5 +68,7 @@
     "setupFilesAfterEnv": [
       "<rootDir>/src/__test__/setupTest.js"
     ]
-  }
+  },
+  "homepage": "https://sass3r.github.io/react-eth-challenge"
+
 }

src/__test__/components/About.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import About from '../../components/About';
 
 describe('<About />', () => {
-  const about = mount(<About />);
+  const about = shallow(<About />);
 
   test('About render', () => {
     expect(about.length).toEqual(1);

src/__test__/components/Academic.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Academic from '../../components/Academic';
 
 describe('<Academic />', () => {
-  const academic = mount(<Academic />);
+  const academic = shallow(<Academic />);
 
   test('Academic render', () => {
     expect(academic.length).toEqual(1);

src/__test__/components/Experience.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Experience from '../../components/Experience';
 
 describe('<Experience />', () => {
-  const experience = mount(<Experience />);
+  const experience = shallow(<Experience />);
 
   test('Experience render', () => {
     expect(experience.length).toEqual(1);

src/__test__/components/Header.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Header from '../../components/Header';
 
 describe('<Header />', () => {
-  const header = mount(<Header />);
+  const header = shallow(<Header />);
 
   test('Header render', () => {
     expect(header.length).toEqual(1);

src/__test__/components/Interest.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Interest from '../../components/Interest';
 
 describe('<Interest />', () => {
-  const interest = mount(<Interest />);
+  const interest = shallow(<Interest />);
 
   test('Interest render', () => {
     expect(interest.length).toEqual(1);

src/__test__/components/Languages.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Languages from '../../components/Languages';
 
 describe('<Languages />', () => {
-  const languages = mount(<Languages />);
+  const languages = shallow(<Languages />);
 
   test('Languages render', () => {
     expect(languages.length).toEqual(1);

src/__test__/components/Profile.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Profile from '../../components/Profile';
 
 describe('<Profile />', () => {
-  const profile = mount(<Profile />);
+  const profile = shallow(<Profile />);
 
   test('Profile render', () => {
     expect(profile.length).toEqual(1);

src/__test__/components/Skills.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Skills from '../../components/Skills';
 
 describe('<Skills />', () => {
-  const skills = mount(<Skills />);
+  const skills = shallow(<Skills />);
 
   test('Skills render', () => {
     expect(skills.length).toEqual(1);