From a1b5511ab6d55974dc1375307bb2fea1344594f8 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 5 Aug 2022 20:00:33 -0300 Subject: [PATCH 1/6] created components & fixed test/react issues --- .eslintrc | 4 +- data.json | 102 +++++++++------- package-lock.json | 136 +++++++++++++-------- package.json | 4 +- public/index.html | 6 +- src/__test__/components/About.test.js | 4 +- src/__test__/components/Academic.test.js | 4 +- src/__test__/components/Experience.test.js | 4 +- src/__test__/components/Header.test.js | 4 +- src/__test__/components/Interest.test.js | 4 +- src/__test__/components/Languages.test.js | 4 +- src/__test__/components/Profile.test.js | 4 +- src/__test__/components/Skills.test.js | 4 +- src/components/About.jsx | 14 +++ src/components/Academic.jsx | 14 +++ src/components/Experience.jsx | 14 +++ src/components/Header.jsx | 11 ++ src/components/Interest.jsx | 14 +++ src/components/Languages.jsx | 14 +++ src/components/Profile.jsx | 14 +++ src/components/Skills.jsx | 14 +++ src/containers/App.jsx | 16 ++- src/index.js | 8 +- src/styles/App.styl | 27 ++++ src/styles/components/App.styl | 2 - src/utils/getData.js | 15 +++ 26 files changed, 332 insertions(+), 129 deletions(-) create mode 100644 src/components/About.jsx create mode 100644 src/components/Academic.jsx create mode 100644 src/components/Experience.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Interest.jsx create mode 100644 src/components/Languages.jsx create mode 100644 src/components/Profile.jsx create mode 100644 src/components/Skills.jsx create mode 100644 src/styles/App.styl delete mode 100644 src/styles/components/App.styl diff --git a/.eslintrc b/.eslintrc index 316d5e03..169f82ae 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,6 +7,8 @@ "extends": [ "airbnb" ], + "eol-last": 0, + "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }], "globals": { "document": false, "escape": false, @@ -19,7 +21,7 @@ "expect": true, "sinon": true }, - "parser": "babel-eslint", + "parser": "@babel/eslint-parser", "plugins": [ "react", "jsx-a11y", diff --git a/data.json b/data.json index 94dbaad5..4248d2b8 100644 --- a/data.json +++ b/data.json @@ -1,57 +1,43 @@ { "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": "Sasha Racagni", + "profession": "FullStack Developer", + "address": "Santa Fe, Argentina.", + "email": "racagnisasha@gmail.com", + "website": "https://github.com/sxshita", + "phone": "+543425400184", + "avatar": "https://data.whicdn.com/images/362729613/original.jpg", + "Profile": "I'm ready for new challenges!", "certificate": [ { - "date": "Jan 2021", - "description": "Hack up furballs try to jump onto window and fall while scratching at wall. ", - "institution": "Platzi", - "name": "FrontEnd Developer" + "date": "Apr 2022", + "description": "NodeJS Backend Development", + "institution": "Coderhouse", + "name": "Backend Developer" }, { - "date": "Jan 2021", - "description": "Scratch at the door then walk away wack the mini furry mouse", - "institution": "Platzi", - "name": "Backend Developer" + "date": "Mar 2022", + "description": "ReactJS Development", + "institution": "Coderhouse", + "name": "FrontEnd Developer" } ], "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": "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": "Computer Science", + "description": "Software Engineer", + "endDate": "Present", + "institution": "FICH - UNL", + "startDate": "Jan 2020" } ], "experience": [ { - "company": "PugStar", + "company": "Q4Tech", "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" - }, - { - "company": "CatStore", - "endDate": "Jan 2016", - "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.", - "jobTitle": "Backend", - "startDate": "Sept 2019" + "jobDescription": "Model software requirements through a programming language or tool, guaranteeing compliance with the standards set forth in the project and complying with the company's quality standards.", + "jobTitle": "Analyst Programmer", + "startDate": "April 2020" } ], "skills": [ @@ -63,6 +49,10 @@ "name": "CSS", "percentage": "25%" }, + { + "name": "SASS", + "percentage": "25%" + }, { "name": "JavaScript", "percentage": "55%" @@ -70,13 +60,35 @@ { "name": "React", "percentage": "90%" + }, + { + "name": "AngularJS", + "percentage": "90%" + }, + { + "name": "C++", + "percentage": "90%" + }, + { + "name": "C#", + "percentage": "90%" + }, + { + "name": "SQL", + "percentage": "90%" + }, + { + "name": "NodeJS", + "percentage": "90%" } ], "interest": [ "javascript", "develop", "backend", - "frontend" + "frontend", + "web3", + "solidity" ], "languages": [ { @@ -85,25 +97,21 @@ }, { "name": "English", - "percentage": "50%" + "percentage": "70%" } ], "social": [ - { - "name": "facebook", - "url": "https://facebook.com/" - }, { "name": "twitter", "url": "https://twitter.com/" }, { "name": "github", - "url": "https://github.com/" + "url": "https://github.com/sxshita" }, { "name": "linkedin", - "url": "https://www.linkedin.com/" + "url": "https://www.linkedin.com/in/sasharacagni/" } ] } diff --git a/package-lock.json b/package-lock.json index 75c4a203..19901ac3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "webpack-dev-server": "4.9.3" }, "devDependencies": { - "babel-eslint": "10.1.0", + "@babel/eslint-parser": "^7.16.3", "css-loader": "6.7.1", "eslint": "8.19.0", "eslint-config-airbnb": "19.0.4", @@ -105,6 +105,55 @@ "url": "https://opencollective.com/babel" } }, + "node_modules/@babel/eslint-parser": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz", + "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==", + "dev": true, + "dependencies": { + "eslint-scope": "^5.1.1", + "eslint-visitor-keys": "^2.1.0", + "semver": "^6.3.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || >=14.0.0" + }, + "peerDependencies": { + "@babel/core": ">=7.11.0", + "eslint": "^7.5.0 || ^8.0.0" + } + }, + "node_modules/@babel/eslint-parser/node_modules/eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/@babel/eslint-parser/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, "node_modules/@babel/generator": { "version": "7.18.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.7.tgz", @@ -3571,27 +3620,6 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, "node_modules/babel-jest": { "version": "28.1.2", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.2.tgz", @@ -5757,15 +5785,6 @@ "node": ">=10" } }, - "node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/eslint/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -13360,6 +13379,41 @@ "semver": "^6.3.0" } }, + "@babel/eslint-parser": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz", + "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==", + "dev": true, + "requires": { + "eslint-scope": "^5.1.1", + "eslint-visitor-keys": "^2.1.0", + "semver": "^6.3.0" + }, + "dependencies": { + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, + "eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", + "dev": true + }, + "estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true + } + } + }, "@babel/generator": { "version": "7.18.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.7.tgz", @@ -15917,20 +15971,6 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, - "babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - } - }, "babel-jest": { "version": "28.1.2", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.2.tgz", @@ -17707,12 +17747,6 @@ } } }, - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true - }, "espree": { "version": "9.3.2", "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz", diff --git a/package.json b/package.json index d56de193..f84e3880 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "react", "webpack" ], - "author": "Oscar Barajas ", + "author": "Sasha Racagni ", "license": "MIT", "dependencies": { "@babel/core": "7.18.6", @@ -34,7 +34,7 @@ "webpack-dev-server": "4.9.3" }, "devDependencies": { - "babel-eslint": "10.1.0", + "@babel/eslint-parser": "^7.16.3", "css-loader": "6.7.1", "eslint": "8.19.0", "eslint-config-airbnb": "19.0.4", diff --git a/public/index.html b/public/index.html index b76b4f47..3d8dd712 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,11 @@ - React Base + Sasha Racagni - Fullstack Dev + + + +
diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 4f3bd51a..2fb74860 100644 --- a/src/__test__/components/About.test.js +++ b/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('', () => { - const about = mount(); + const about = shallow(); test('About render', () => { expect(about.length).toEqual(1); diff --git a/src/__test__/components/Academic.test.js b/src/__test__/components/Academic.test.js index 10718e5d..fd929310 100644 --- a/src/__test__/components/Academic.test.js +++ b/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('', () => { - const academic = mount(); + const academic = shallow(); test('Academic render', () => { expect(academic.length).toEqual(1); diff --git a/src/__test__/components/Experience.test.js b/src/__test__/components/Experience.test.js index 6ddf5fbf..2f4f4bda 100644 --- a/src/__test__/components/Experience.test.js +++ b/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('', () => { - const experience = mount(); + const experience = shallow(); test('Experience render', () => { expect(experience.length).toEqual(1); diff --git a/src/__test__/components/Header.test.js b/src/__test__/components/Header.test.js index 894ec0ab..51864583 100644 --- a/src/__test__/components/Header.test.js +++ b/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('
', () => { - const header = mount(
); + const header = shallow(
); test('Header render', () => { expect(header.length).toEqual(1); diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js index cbf665b3..ce24af5f 100644 --- a/src/__test__/components/Interest.test.js +++ b/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('', () => { - const interest = mount(); + const interest = shallow(); test('Interest render', () => { expect(interest.length).toEqual(1); diff --git a/src/__test__/components/Languages.test.js b/src/__test__/components/Languages.test.js index 1d10e137..d43e5621 100644 --- a/src/__test__/components/Languages.test.js +++ b/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('', () => { - const languages = mount(); + const languages = shallow(); test('Languages render', () => { expect(languages.length).toEqual(1); diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js index f71ed22b..28b1781a 100644 --- a/src/__test__/components/Profile.test.js +++ b/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('', () => { - const profile = mount(); + const profile = shallow(); test('Profile render', () => { expect(profile.length).toEqual(1); diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js index 4c3d9a53..872b1ca3 100644 --- a/src/__test__/components/Skills.test.js +++ b/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('', () => { - const skills = mount(); + const skills = shallow(); test('Skills render', () => { expect(skills.length).toEqual(1); diff --git a/src/components/About.jsx b/src/components/About.jsx new file mode 100644 index 00000000..51f16f20 --- /dev/null +++ b/src/components/About.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function About() { + return ( +
+

About

+

+

+

+
+ ) +} + +export default About; \ No newline at end of file diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx new file mode 100644 index 00000000..0a0e8a94 --- /dev/null +++ b/src/components/Academic.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Academic() { + return ( +
+

Academic

+

+

+

+
+ ) +} + +export default Academic \ No newline at end of file diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx new file mode 100644 index 00000000..6752b4a3 --- /dev/null +++ b/src/components/Experience.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Experience() { + return ( +
+

Experience

+

+

+

+
+ ) +} + +export default Experience \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..38ced927 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +function Header() { + return ( +
+

Header

+
+ ); +} + +export default Header; \ No newline at end of file diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx new file mode 100644 index 00000000..56cfbb88 --- /dev/null +++ b/src/components/Interest.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Interest() { + return ( +
+

Interest

+

+

+

+
+ ) +} + +export default Interest \ No newline at end of file diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx new file mode 100644 index 00000000..637d0d04 --- /dev/null +++ b/src/components/Languages.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Languages() { + return ( +
+

Languages

+

+

+

+
+ ) +} + +export default Languages \ No newline at end of file diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 00000000..7dd3c504 --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Profile() { + return ( +
+

Profile

+

+

+

+
+ ) +} + +export default Profile \ No newline at end of file diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx new file mode 100644 index 00000000..b10b97fa --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Skills() { + return ( +
+

Skills

+

+

+

+
+ ) +} + +export default Skills \ No newline at end of file diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..52e854af 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import '../styles/components/App.styl'; +import '../styles/App.styl' import Header from '../components/Header'; import About from '../components/About'; import Profile from '../components/Profile'; @@ -8,21 +8,25 @@ import Academic from '../components/Academic'; import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; +import getData from '../utils/getData' -const App = () => { +function App() { + const api = ''; + + getData(api); return ( <>
- + - + - ) -}; + ); +} export default App; diff --git a/src/index.js b/src/index.js index 9077e5ff..f85e4ada 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './containers/App'; +import { createRoot } from 'react-dom/client'; +import App from './containers/App' -ReactDOM.render(, document.getElementById('app')); +const container = document.getElementById('app') +const root = createRoot(container) +root.render() diff --git a/src/styles/App.styl b/src/styles/App.styl new file mode 100644 index 00000000..b630c086 --- /dev/null +++ b/src/styles/App.styl @@ -0,0 +1,27 @@ +* + font-family 'Poppins', sans-serif; + box-sizing border-box + padding 0 + margin 0 + +body + background-color #EAD7D1 + margin 2rem + +.card + color white + padding 2rem + border-radius 5px + margin 1rem + +.bg-dark + background #7B506F + +.bg-black + background #1F1A38 + +.bg-primary + background #DD99BB + +.bg-secondary + background #C9F299 \ No newline at end of file diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl deleted file mode 100644 index 4f92eccb..00000000 --- a/src/styles/components/App.styl +++ /dev/null @@ -1,2 +0,0 @@ -body - background-color blue \ No newline at end of file diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..2cc85cc3 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,15 @@ + +const getData = async (url) => { + try { + const response = await fetch(url); + const data = await response.json(); + console.log(data); + return data; + } + catch(err) { + console.log(err); + } +}; + +export default getData; + \ No newline at end of file From c95e2d50755cdc7d1314c1743800529321f90c38 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 6 Aug 2022 00:46:41 -0300 Subject: [PATCH 2/6] finishing tasks --- data.json | 8 ++++---- package-lock.json | 15 +++++++++++++++ package.json | 1 + src/components/About.jsx | 18 ++++++++++++------ src/components/Academic.jsx | 11 +++++++---- src/components/Experience.jsx | 13 +++++++++---- src/components/Header.jsx | 20 ++++++++++++++++---- src/components/Interest.jsx | 12 ++++++++---- src/components/Languages.jsx | 23 +++++++++++++++-------- src/components/Profile.jsx | 10 +++++----- src/components/Skills.jsx | 19 +++++++++++++++---- src/containers/App.jsx | 24 +++++++++++++----------- src/context/DataContext.js | 25 +++++++++++++++++++++++++ src/styles/App.styl | 25 +++++++++++++++++++++++-- src/utils/getData.js | 2 -- 15 files changed, 168 insertions(+), 58 deletions(-) create mode 100644 src/context/DataContext.js diff --git a/data.json b/data.json index 4248d2b8..6d4903d4 100644 --- a/data.json +++ b/data.json @@ -1,7 +1,7 @@ { "data": { "name": "Sasha Racagni", - "profession": "FullStack Developer", + "profession": "Fulltack Developer", "address": "Santa Fe, Argentina.", "email": "racagnisasha@gmail.com", "website": "https://github.com/sxshita", @@ -35,7 +35,7 @@ { "company": "Q4Tech", "endDate": "Present", - "jobDescription": "Model software requirements through a programming language or tool, guaranteeing compliance with the standards set forth in the project and complying with the company's quality standards.", + "jobDescription": "In charge of model software requirements using AngularJS and .NET, guaranteeing compliance with the standards set forth in the project and complying with the company's quality standards.", "jobTitle": "Analyst Programmer", "startDate": "April 2020" } @@ -93,11 +93,11 @@ "languages": [ { "name": "Spanish", - "percentage": "90%" + "percentage": "Native" }, { "name": "English", - "percentage": "70%" + "percentage": "B2" } ], "social": [ diff --git a/package-lock.json b/package-lock.json index 19901ac3..d2d19213 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,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" @@ -11010,6 +11011,14 @@ "loose-envify": "^1.1.0" } }, + "node_modules/react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -21447,6 +21456,12 @@ } } }, + "react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index f84e3880..56bdac59 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,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" diff --git a/src/components/About.jsx b/src/components/About.jsx index 51f16f20..60d49a72 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -1,12 +1,18 @@ -import React from 'react' +import {AiFillPhone, AiOutlineLink} from 'react-icons/ai'; +import {MdMail, MdLocationPin} from 'react-icons/md'; +import { useDataContext } from '../context/DataContext'; +import React from 'react'; function About() { + const { data } = useDataContext() + return ( -
-

About

-

-

-

+
+

+

{data.data?.phone}

+

{data.data?.email}

+ {data.data?.website} +

{data.data?.address}

) } diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx index 0a0e8a94..dcb71b02 100644 --- a/src/components/Academic.jsx +++ b/src/components/Academic.jsx @@ -1,12 +1,15 @@ import React from 'react' +import { useDataContext } from '../context/DataContext'; function Academic() { + const { data } = useDataContext() + return ( -
+

Academic

-

-

-

+

{data.data?.Academic[0].institution}

+

{data.data?.Academic[0].startDate} - {data.data?.Academic[0].endDate}

+

{data.data?.Academic[0].degree}

) } diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 6752b4a3..dfcb0998 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -1,12 +1,17 @@ -import React from 'react' +import React from 'react'; +import { useDataContext } from '../context/DataContext'; +import { MdLocationCity, MdDescription } from 'react-icons/md'; +import {BsCalendarDateFill} from 'react-icons/bs'; function Experience() { + const { data } = useDataContext() + return (

Experience

-

-

-

+

{data.data?.experience[0].company} - {data.data?.experience[0].endDate}

+

{data.data?.experience[0].jobTitle}

+

{data.data?.experience[0].jobDescription}

) } diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 38ced927..b601f436 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,9 +1,21 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import { useDataContext } from '../context/DataContext'; -function Header() { +function Header({children}) { + const { data } = useDataContext() + return ( -
-

Header

+
+
+ {data.data?.name}/ +
+
+

{data.data?.name}

+

{data.data?.profession}

+ {children} +
+ +
); } diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx index 56cfbb88..a84b237a 100644 --- a/src/components/Interest.jsx +++ b/src/components/Interest.jsx @@ -1,12 +1,16 @@ import React from 'react' +import { useDataContext } from '../context/DataContext' function Interest() { + const { data } = useDataContext() return ( -
+

Interest

-

-

-

+
    + {data.data?.interest.map(item => { + return
  • {item}
    • + })} +
) } diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx index 637d0d04..3a5a793c 100644 --- a/src/components/Languages.jsx +++ b/src/components/Languages.jsx @@ -1,14 +1,21 @@ import React from 'react' +import { useDataContext } from '../context/DataContext' function Languages() { - return ( -
-

Languages

-

-

-

-
- ) + const { data } = useDataContext() + + if(data){ + return ( +
+

Languages

+ {data.data?.languages.map(lang => { + return

{lang.name} - {lang.percentage}

+ })} + +
+ ) + } + } export default Languages \ No newline at end of file diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx index 7dd3c504..3cf2e7b1 100644 --- a/src/components/Profile.jsx +++ b/src/components/Profile.jsx @@ -1,12 +1,12 @@ import React from 'react' +import { useDataContext } from '../context/DataContext'; function Profile() { + const { data } = useDataContext() return ( -
-

Profile

-

-

-

+
+

{data.data?.Profile} 💗

+

) } diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx index b10b97fa..ffb8348c 100644 --- a/src/components/Skills.jsx +++ b/src/components/Skills.jsx @@ -1,12 +1,23 @@ import React from 'react' +import { useDataContext } from '../context/DataContext'; function Skills() { + const { data } = useDataContext() return ( -
+

Skills

-

-

-

+
+
    +
  • {data.data?.skills[3].name}
    • +
  • {data.data?.skills[4].name}
    • +
  • {data.data?.skills[5].name}
    • +
+
    +
  • {data.data?.skills[6].name}
    • +
  • {data.data?.skills[7].name}
    • +
  • {data.data?.skills[8].name}
    • +
+
) } diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 52e854af..3a74514d 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -8,24 +8,26 @@ import Academic from '../components/Academic'; import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; -import getData from '../utils/getData' +import {DataContext} from '../context/DataContext'; function App() { - const api = ''; - - getData(api); + return ( - <> -
+ +
- - - - - +
+ + +
+
+ + +
+ ); } diff --git a/src/context/DataContext.js b/src/context/DataContext.js new file mode 100644 index 00000000..ed82443e --- /dev/null +++ b/src/context/DataContext.js @@ -0,0 +1,25 @@ +import React, { useState, createContext, useContext, useEffect } from 'react'; +import getData from '../utils/getData' + +const Context = createContext(); + +export const DataContext = ({children}) => { + const [data, setData] = useState({}); + const api = 'https://raw.githubusercontent.com/sxshita/react-eth-challenge/main/data.json'; + + useEffect(() => { + getData(api).then(data => { + setData(data); + }) + },[]); + + return ( + + {children} + + ); +}; + +export const useDataContext = () => { + return useContext(Context); +}; \ No newline at end of file diff --git a/src/styles/App.styl b/src/styles/App.styl index b630c086..70a28457 100644 --- a/src/styles/App.styl +++ b/src/styles/App.styl @@ -12,7 +12,11 @@ body color white padding 2rem border-radius 5px - margin 1rem + margin-top 1rem + +.d-flex + display: flex + gap: 1rem .bg-dark background #7B506F @@ -24,4 +28,21 @@ body background #DD99BB .bg-secondary - background #C9F299 \ No newline at end of file + background #C9F299 + +.avatar + width: 100px + height: 100px + border-radius: 50% + +.m-5 { + margin-right 5px +} + +a { + color white +} + +#w-50 { + width: 50% +} \ No newline at end of file diff --git a/src/utils/getData.js b/src/utils/getData.js index 2cc85cc3..6d11dacd 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -1,9 +1,7 @@ - const getData = async (url) => { try { const response = await fetch(url); const data = await response.json(); - console.log(data); return data; } catch(err) { From f00a6af9f2ee3c5701fc28a793c78c45648d297d Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 6 Aug 2022 11:14:39 -0300 Subject: [PATCH 3/6] fixin data undefined issue --- src/components/About.jsx | 29 ++++++++++++++++-------- src/components/Academic.jsx | 26 ++++++++++++++-------- src/components/Experience.jsx | 26 ++++++++++++++-------- src/components/Header.jsx | 22 +++++++++++++----- src/components/Interest.jsx | 29 +++++++++++++++--------- src/components/Languages.jsx | 14 ++++++++---- src/components/Profile.jsx | 16 ++++++++----- src/components/Skills.jsx | 42 +++++++++++++++++++++-------------- src/containers/App.jsx | 40 ++++++++++++++++++++++----------- 9 files changed, 163 insertions(+), 81 deletions(-) diff --git a/src/components/About.jsx b/src/components/About.jsx index 60d49a72..fc914e13 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -1,20 +1,31 @@ import {AiFillPhone, AiOutlineLink} from 'react-icons/ai'; import {MdMail, MdLocationPin} from 'react-icons/md'; -import { useDataContext } from '../context/DataContext'; import React from 'react'; -function About() { - const { data } = useDataContext() +function About({data}) { + + if(data){ + return ( +
+

+

{data.data?.phone}

+

{data.data?.email}

+ {data.data?.website} +

{data.data?.address}

+
+ ) + } return (
-

-

{data.data?.phone}

-

{data.data?.email}

- {data.data?.website} -

{data.data?.address}

-
+

+

+

+ +

+
) + } export default About; \ No newline at end of file diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx index dcb71b02..9b3e4cf5 100644 --- a/src/components/Academic.jsx +++ b/src/components/Academic.jsx @@ -1,16 +1,24 @@ import React from 'react' -import { useDataContext } from '../context/DataContext'; -function Academic() { - const { data } = useDataContext() +function Academic({data}) { + if(data){ + return ( +
+

Academic

+

{data.data?.Academic[0].institution}

+

{data.data?.Academic[0].startDate} - {data.data?.Academic[0].endDate}

+

{data.data?.Academic[0].degree}

+
+ ) + } - return ( + return(
-

Academic

-

{data.data?.Academic[0].institution}

-

{data.data?.Academic[0].startDate} - {data.data?.Academic[0].endDate}

-

{data.data?.Academic[0].degree}

-
+

Academic

+

+

+

+
) } diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index dfcb0998..cfd9546b 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -1,19 +1,27 @@ import React from 'react'; -import { useDataContext } from '../context/DataContext'; -import { MdLocationCity, MdDescription } from 'react-icons/md'; -import {BsCalendarDateFill} from 'react-icons/bs'; +import { MdLocationCity} from 'react-icons/md'; -function Experience() { - const { data } = useDataContext() +function Experience({data}) { + if(data){ + return ( +
+

Experience

+

{data.data?.experience[0].company} - {data.data?.experience[0].endDate}

+

{data.data?.experience[0].jobTitle}

+

{data.data?.experience[0].jobDescription}

+
+ ) + } - return ( + return(

Experience

-

{data.data?.experience[0].company} - {data.data?.experience[0].endDate}

-

{data.data?.experience[0].jobTitle}

-

{data.data?.experience[0].jobDescription}

+

+

+

) + } export default Experience \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx index b601f436..a85f1086 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,9 +1,7 @@ -import React, { useEffect } from 'react'; -import { useDataContext } from '../context/DataContext'; +import React from 'react'; -function Header({children}) { - const { data } = useDataContext() - +function Header({data, children}) { + if(data){ return (
@@ -18,6 +16,20 @@ function Header({children}) {
); + } + + return( +
+
+ avatar +
+
+

+

+ {children} +
+
+ ) } export default Header; \ No newline at end of file diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx index a84b237a..e8b0b888 100644 --- a/src/components/Interest.jsx +++ b/src/components/Interest.jsx @@ -1,16 +1,25 @@ import React from 'react' -import { useDataContext } from '../context/DataContext' -function Interest() { - const { data } = useDataContext() - return ( -
+function Interest({data}) { + if(data){ + return ( +
+

Interest

+
    + {data.data?.interest.map(item => { + return
  • {item}
    • + })} +
+
+ ) + } + + return( +

Interest

-
    - {data.data?.interest.map(item => { - return
  • {item}
    • - })} -
+

+

+

) } diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx index 3a5a793c..1d172d21 100644 --- a/src/components/Languages.jsx +++ b/src/components/Languages.jsx @@ -1,9 +1,6 @@ import React from 'react' -import { useDataContext } from '../context/DataContext' - -function Languages() { - const { data } = useDataContext() +function Languages({data}) { if(data){ return (
@@ -15,6 +12,15 @@ function Languages() {
) } + + return( +
+

Languages

+

+

+

+
+ ) } diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx index 3cf2e7b1..2d757b6a 100644 --- a/src/components/Profile.jsx +++ b/src/components/Profile.jsx @@ -1,11 +1,17 @@ import React from 'react' -import { useDataContext } from '../context/DataContext'; -function Profile() { - const { data } = useDataContext() - return ( +function Profile({data}) { + if(data){ + return ( +
+

{data.data?.Profile} 💗

+

+
+ ) + } + return(
-

{data.data?.Profile} 💗

+

) diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx index ffb8348c..55d15ef9 100644 --- a/src/components/Skills.jsx +++ b/src/components/Skills.jsx @@ -1,23 +1,31 @@ import React from 'react' -import { useDataContext } from '../context/DataContext'; -function Skills() { - const { data } = useDataContext() - return ( -
+function Skills({data}) { + if(data){ + return ( +
+

Skills

+
+
    +
  • {data.data?.skills[3].name}
    • +
  • {data.data?.skills[4].name}
    • +
  • {data.data?.skills[5].name}
    • +
+
    +
  • {data.data?.skills[6].name}
    • +
  • {data.data?.skills[7].name}
    • +
  • {data.data?.skills[8].name}
    • +
+
+
+ ) + } + return( +

Skills

-
-
    -
  • {data.data?.skills[3].name}
    • -
  • {data.data?.skills[4].name}
    • -
  • {data.data?.skills[5].name}
    • -
-
    -
  • {data.data?.skills[6].name}
    • -
  • {data.data?.skills[7].name}
    • -
  • {data.data?.skills[8].name}
    • -
-
+

+

+

) } diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 3a74514d..d59212f0 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState, useEffect} from 'react'; import '../styles/App.styl' import Header from '../components/Header'; import About from '../components/About'; @@ -8,26 +8,40 @@ import Academic from '../components/Academic'; import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; -import {DataContext} from '../context/DataContext'; +import getData from '../utils/getData' function App() { + const [data, setData] = useState({}); + const [loading, setLoading] = useState(true); + const api = 'https://raw.githubusercontent.com/sxshita/react-eth-challenge/main/data.json'; + + useEffect(() => { + getData(api).then(data => { + setData(data); + setLoading(false); + }) + },[]); + + if(loading === true){ + return
loading
+ } return ( - -
- + <> +
+
- - + +
- - + +
- - -
- + + +
+ ); } From c162afc07d94921396655ef12310d4fcfc7a6cbc Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 6 Aug 2022 11:15:07 -0300 Subject: [PATCH 4/6] deleting context --- src/context/DataContext.js | 25 ------------------------- 1 file changed, 25 deletions(-) delete mode 100644 src/context/DataContext.js diff --git a/src/context/DataContext.js b/src/context/DataContext.js deleted file mode 100644 index ed82443e..00000000 --- a/src/context/DataContext.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useState, createContext, useContext, useEffect } from 'react'; -import getData from '../utils/getData' - -const Context = createContext(); - -export const DataContext = ({children}) => { - const [data, setData] = useState({}); - const api = 'https://raw.githubusercontent.com/sxshita/react-eth-challenge/main/data.json'; - - useEffect(() => { - getData(api).then(data => { - setData(data); - }) - },[]); - - return ( - - {children} - - ); -}; - -export const useDataContext = () => { - return useContext(Context); -}; \ No newline at end of file From dce93e0d75af1e34bd115ee4fda9e6182fcc715f Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 6 Aug 2022 11:59:51 -0300 Subject: [PATCH 5/6] deleted build command --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 56bdac59..6b87ca5d 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "description": "React Eth Challenge", "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}}'", From 5f8712a61c2c25732e241134202032f5a5d50a27 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 6 Aug 2022 12:03:06 -0300 Subject: [PATCH 6/6] added build command --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 6b87ca5d..56bdac59 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "React Eth Challenge", "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}}'",