Add components Fixes PlatziMaster#1

package.json

@@ -21,20 +21,25 @@
     "@babel/core": "^7.8.4",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.8.3",
+    "@babel/runtime": "^7.14.0",
     "babel-loader": "^8.0.6",
+    "core-js": "^3.12.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "jest-fetch-mock": "^3.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "regenerator-runtime": "^0.13.7",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.2",
-    "enzyme": "^3.11.0",
-    "jest-fetch-mock": "^3.0.1",
-    "enzyme-adapter-react-16": "^1.15.2"
+    "webpack-dev-server": "^3.10.2"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.14.3",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "css-loader": "^3.4.2",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.1",

src/__test__/setupTest.js

@@ -1,5 +1,8 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 configure({ adapter: new Adapter() });
 global.fetch = require('jest-fetch-mock');

src/components/About.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const About = () => (
+  <>
+    <section className='About'>
+      <h3 className='About-title'>About</h3>
+      <p>Description</p>
+      <ul>
+        <li className='About-item'>Item</li>
+        <li className='About-item'>Item</li>
+        <li className='About-item'>Item</li>
+      </ul>
+    </section>
+  </>
+);
+
+export default About;

src/components/Academic.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Academic = () => (
+  <section className='Academic Card'>
+    <h1 className='Academic-title'>Estudios</h1>
+    <article className='Academic-item'>
+      <h3>School name</h3>
+      <p>date</p>
+    </article>
+    <article className='Academic-item'>
+      <h3>School name</h3>
+      <p>date</p>
+    </article>
+    <article className='Academic-item'>
+      <h3>School name</h3>
+      <p>date</p>
+    </article>
+  </section>
+);
+
+export default Academic;

src/components/ColumnGrid2.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ColumnFlex = ({ children }) => (
+  <div className='Column-2'>
+    { children }
+  </div>
+);
+
+export default ColumnFlex;

src/components/Container.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Container = ({ children }) => (
+  <div className='Container'>
+    { children }
+  </div>
+);
+
+export default Container;

src/components/Experience.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Experience = () => (
+  <section className='Experience Card'>
+    <h1 className='Experience-title'>Experience</h1>
+    <article className='Experience-item'>
+      <h3>Job</h3>
+      <p>Date</p>
+      <p>description</p>
+    </article>
+    <article className='Experience-item'>
+      <h3>Job</h3>
+      <p>Date</p>
+      <p>description</p>
+    </article>
+    <article className='Experience-item'>
+      <h3>Job</h3>
+      <p>Date</p>
+      <p>description</p>
+    </article>
+  </section>
+);
+
+export default Experience;

src/components/Header.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Container from './Container';
+
+const Header = ({ children }) => (
+  <section className='Header'>
+    <Container>
+      <div className='Header-flex'>
+        <img
+          src='https://avatars.githubusercontent.com/u/2994011?v=4'
+          alt='raulfbgomez'
+        />
+        <div className='Header-info'>
+          <h1 className='Header-title'>Raúl Bautista Gómez</h1>
+          <h2 className='Header-job-title'>Web Developer</h2>
+          <div className='Header-flex'>
+            <p className='Header-phone'>phone</p>
+            <p className='Header-email'>email</p>
+            <p className='Header-website'>website</p>
+          </div>
+          <p className='Header-website'>Address</p>
+          { children }
+        </div>
+
+      </div>
+    </Container>
+  </section>
+);
+
+export default Header;

src/components/Interest.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Interest = () => (
+  <section className='Interest Card'>
+    <h1 className='Interest-title'>Interest</h1>
+    <ul>
+      <li className='Interest-item'>Interest</li>
+      <li className='Interest-item'>Interest</li>
+      <li className='Interest-item'>Interest</li>
+    </ul>
+  </section>
+);
+
+export default Interest;

src/components/Languages.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Languages = () => (
+  <section className='Languajes Card'>
+    <h1 className='Languages-title'>Languages</h1>
+    <ul>
+      <li className='Languages-item'>language</li>
+      <li className='Languages-item'>language</li>
+      <li className='Languages-item'>language</li>
+    </ul>
+  </section>
+);
+
+export default Languages;

src/components/Profile.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Profile = () => (
+  <article className='Profile Card'>
+    <h1 className='Profile-title'>Profile</h1>
+    <p className='Profile-desc'>Description</p>
+  </article>
+);
+
+export default Profile;

src/components/Skills.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Skills = () => (
+  <section className='Skills Card'>
+    <h1 className='Skills-title'>Skills</h1>
+    <ul>
+      <li className='Skills-item'>skill</li>
+      <li className='Skills-item'>skill</li>
+      <li className='Skills-item'>skill</li>
+    </ul>
+  </section>
+);
+
+export default Skills;

src/containers/App.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 import '../styles/components/App.styl';
 import Header from '../components/Header';
 import About from '../components/About';
@@ -8,19 +11,32 @@ import Academic from '../components/Academic';
 import Skills from '../components/Skills';
 import Interest from '../components/Interest';
 import Languages from '../components/Languages';
+import Container from '../components/Container';
+import getData from '../utils/getData';
+import ColumnGrid2 from '../components/ColumnGrid2';
+
+
+const data = getData('https://google.com');
+console.log(data) 
 
 const App = () => {
   return (
     <>
       <Header>
         <About />
       </Header>
-      <Profile />
-      <Experience />
-      <Academic />
-      <Skills />
-      <Interest />
-      <Languages />
+      <Container>
+        <Profile />
+        <Experience />
+        <ColumnGrid2>
+          <Academic />
+          <Skills />
+        </ColumnGrid2>
+        <ColumnGrid2>
+          <Interest />
+          <Languages />
+        </ColumnGrid2>
+      </Container>
     </>
   )
 };

src/utils/getData.js

@@ -0,0 +1,13 @@
+const getData = async (url) => {
+  try {
+    const response = await fetch(url);
+    const data = await response.json();
+    return data;
+
+  } catch (err) {
+    console.log(err);
+    return {};
+  }
+};
+
+export default getData;