PlatziMaster · DragapultLife · Mar 6, 2023 · Mar 6, 2023 · Mar 6, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,65 +1,36 @@
 {
-  "name": "frontend-test",
-  "version": "1.0.0",
-  "description": "frontend test",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production",
-    "start": "webpack-dev-server --open --mode development",
-    "server": "json-server data.json",
-    "format": "prettier --write '{*.js,src/**/*.{js,jsx}}'",
-    "lint": "eslint src/ --fix",
-    "test": "jest"
-  },
-  "keywords": [
-    "react",
-    "webpack"
-  ],
-  "author": "Oscar Barajas <[email protected]>",
-  "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/preset-react": "^7.8.3",
-    "babel-loader": "^8.0.6",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "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"
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.2",
+    "react-scripts": "^5.0.1"
   },
-  "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "css-loader": "^3.4.2",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.1",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jest": "^23.6.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.2",
-    "husky": "^2.7.0",
-    "jest": "^25.1.0",
-    "json-server": "^0.15.1",
-    "mini-css-extract-plugin": "^0.7.0",
-    "prettier": "^1.19.1",
-    "style-loader": "^0.23.1",
-    "stylus": "^0.54.7",
-    "stylus-loader": "^3.0.2"
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
-  "jest": {
-    "verbose": true,
-    "moduleNameMapper": {
-      "\\.(styl|css)$": "<rootDir>/src/__mocks__/styleMock.js"
-    },
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/__test__/setupTest.js"
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.3.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,13 @@
-<!DOCTYPE html>
-<html lang="es">
-  <head>
+<head>
     <meta charset="utf-8" />
     <title>React Base</title>
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Color+Emoji&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="app"></div>
-  </body>
-</html>
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js
@@ -1,20 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import About from '../../components/About';
+import { data } from '../../../data.json';
 
 describe('<About />', () => {
   const about = mount(<About />);
+  const about = mount(<About data={data} />);
 
   test('About render', () => {
     expect(about.length).toEqual(1);
-  });
-
-  test('About title', () => {
-    expect(about.find('.About-title').length).toEqual(1);
-  });
-
+@@ -16,5 +17,4 @@ describe('<About />', () => {
   test('About haves 3 items', () => {
     expect(about.find('.About-item').length).toBeGreaterThan(2);
   });
 
-});
+});
diff --git a/src/__test__/components/Courses.test.js b/src/__test__/components/Courses.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Courses from '../../components/Courses';
+import { data } from '../../../data.json';
+
+describe('<Courses />', () => {
+  const academic = mount(<Courses data={data} />);
+
+  test('Courses render', () => {
+    expect(academic.length).toEqual(1);
+  });
+
+  test('Courses title', () => {
+    expect(academic.find('.Courses-title').length).toEqual(1);
+  });
+
+  test('Courses has 3 items', () => {
+    expect(academic.find('.Courses-item').length).toBeGreaterThan(2);
+  });
+});
diff --git a/src/__test__/components/Header.test.js b/src/__test__/components/Header.test.js
@@ -1,16 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Header from '../../components/Header';
+import { data } from '../../../data.json';
 
 describe('<Header />', () => {
   const header = mount(<Header />);
+  const header = mount(<Header data={data} />);
 
   test('Header render', () => {
     expect(header.length).toEqual(1);
-  });
-
+@@ -12,5 +13,4 @@ describe('<Header />', () => {
   test('Header title', () => {
     expect(header.find('.Header-title').length).toEqual(1);
   });
 
-});
+});
diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js
@@ -1,20 +1,15 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Interest from '../../components/Interest';
+import { data } from '../../../data.json';
 
 describe('<Interest />', () => {
   const interest = mount(<Interest />);
+  const interest = mount(<Interest data={data} />);
 
   test('Interest render', () => {
     expect(interest.length).toEqual(1);
-  });
-
-  test('Interest title', () => {
-    expect(interest.find('.Interest-title').length).toEqual(1);
-  });
-
+@@ -16,5 +17,4 @@ describe('<Interest />', () => {
   test('Interest has 3 items', () => {
     expect(interest.find('.Interest-item').length).toBeGreaterThan(2);
-  });
-
-});
+  });
diff --git a/src/__test__/components/Languages.test.js b/src/__test__/components/Languages.test.js
@@ -1,20 +1,22 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Languages from '../../components/Languages';
+import { data } from '../../../data.json';
 
 describe('<Languages />', () => {
   const languages = mount(<Languages />);
+  const languages = mount(<Languages data={data} />);
 
   test('Languages render', () => {
     expect(languages.length).toEqual(1);
-  });
-
-  test('Languages title', () => {
+@@ -13,8 +14,7 @@ describe('<Languages />', () => {
     expect(languages.find('.Languages-title').length).toEqual(1);
   });
 
   test('Languages has 3 items', () => {
     expect(languages.find('.Languages-item').length).toBeGreaterThan(2);
+  test('Languages has more than 1 items', () => {
+    expect(languages.find('.Languages-item').length).toBeGreaterThan(1);
   });
 
-});
+});
diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js
@@ -1,20 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Profile from '../../components/Profile';
+import { data } from '../../../data.json';
 
 describe('<Profile />', () => {
   const profile = mount(<Profile />);
+  const profile = mount(<Profile data={data} />);
 
   test('Profile render', () => {
     expect(profile.length).toEqual(1);
-  });
-
-  test('Profile title', () => {
-    expect(profile.find('.Profile-title').length).toEqual(1);
-  });
-
+@@ -16,5 +17,4 @@ describe('<Profile />', () => {
   test('Profile have a description', () => {
     expect(profile.find('.Profile-desc').length).toEqual(1);
   });
 
-});
+});
diff --git a/src/__test__/components/Projects.test.js b/src/__test__/components/Projects.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Projects from '../../components/Projects';
+import { data } from '../../../data.json';
+
+describe('<Projects />', () => {
+  const experience = mount(<Projects data={data} />);
+
+  test('Projects render', () => {
+    expect(experience.length).toEqual(1);
+  });
+
+  test('Projects title', () => {
+    expect(experience.find('.Projects-title').length).toEqual(1);
+  });
+
+  test('Projects haves 3 items', () => {
+    expect(experience.find('.Projects-item').length).toBeGreaterThan(2);
+  });
+});
diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js
@@ -1,20 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Skills from '../../components/Skills';
+import { data } from '../../../data.json';
 
 describe('<Skills />', () => {
   const skills = mount(<Skills />);
+  const skills = mount(<Skills data={data} />);
 
   test('Skills render', () => {
     expect(skills.length).toEqual(1);
-  });
-
-  test('Skills title', () => {
-    expect(skills.find('.Skills-title').length).toEqual(1);
-  });
-
+@@ -16,5 +17,4 @@ describe('<Skills />', () => {
   test('Skills has 3 items', () => {
     expect(skills.find('.Skills-item').length).toBeGreaterThan(2);
   });
 
-});
+});
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+function About({ data }) {
+  return (
+    <section className='About'>
+      <h2 className='About-title'>
+        {data.name}
+        &nbsp;
+        <span>{data.profession}</span>
+      </h2>
+
+      <span>
+        <span className='emoji' role='img' aria-label='Mexico flag'>
+          🇲🇽
+        </span>
+        {data.address}
+      </span>
+
+      <ul className='About-social'>
+        {data.social?.map(({ name, url }) => (
+          <li key={name} className='About-item'>
+            <a href={url}>{name}</a>
+          </li>
+        ))}
+
+        <li className='About-item'>
+          <a href={`mailto:${data.email}`}>{data.email}</a>
+        </li>
+      </ul>
+    </section>
+  );
+}
+
+export default About;
diff --git a/src/components/Courses.jsx b/src/components/Courses.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+function Courses({ data }) {
+  return (
+    <section className='Courses'>
+      <h2 className='Courses-title'>Courses</h2>
+
+      <div className='Courses-list'>
+        {data.courses?.map(({ name, institution }) => (
+          <article key={name} className='Courses-item'>
+            <h3 className='Courses-item-title'>{name}</h3>
+
+            <span className='Courses-item-details'>{institution}</span>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default Courses;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,21 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import React from 'react';
+
+function Header({ children, data }) {
+  return (
+    <header className='Header'>
+      <img
+        src={data.avatar}
+        width='156'
+        alt='Avatar'
+        className='Header-avatar'
+      />
+
+      <h1 className='Header-title sr-only'>{data.name} CV</h1>
+
+      {children}
+    </header>
+  );
+}
+
+export default Header;