From ac0d400b760dbef45e56b8afc9d01391ac802b5d Mon Sep 17 00:00:00 2001 From: Vasyl_Zarichnyi Date: Mon, 12 Oct 2020 23:35:55 +0300 Subject: [PATCH 1/4] basic_markup --- .eslintrc.js | 3 +-- README.md | 4 +-- src/App.js | 28 ++++++++++++++++++++ src/App.tsx | 11 -------- src/api/GetPeople.js | 9 +++++++ src/components/HomePage/Home.jsx | 5 ++++ src/components/PageNotFound/PageNotFound.jsx | 3 +++ src/components/PeoplePage/Peoples.jsx | 24 +++++++++++++++++ src/{index.tsx => index.js} | 5 +++- src/react-app-env.d.ts | 3 +-- 10 files changed, 77 insertions(+), 18 deletions(-) create mode 100644 src/App.js delete mode 100644 src/App.tsx create mode 100644 src/api/GetPeople.js create mode 100644 src/components/HomePage/Home.jsx create mode 100644 src/components/PageNotFound/PageNotFound.jsx create mode 100644 src/components/PeoplePage/Peoples.jsx rename src/{index.tsx => index.js} (61%) diff --git a/.eslintrc.js b/.eslintrc.js index c4d1e856..507e728c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,3 @@ module.exports = { - extends: "@mate-academy/eslint-config-react-typescript", - // extends: "@mate-academy/eslint-config-react", + extends: "@mate-academy/eslint-config-react", }; diff --git a/README.md b/README.md index f1183f65..5eb92ea7 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # React - People table - Replace `` with your Github username in the - [DEMO LINK](https://.github.io/react_people-table/) + [DEMO LINK](https://zarichnyi.github.io/react_people-table/) - Follow the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline) ## If you don't use **Typescript** 1. Rename `.tsx` files to `.jsx` -1. use `eslint-config-react` in `.eslintrs.js` +1. use `eslint-config-react` in `.eslintrs.js` ## Basic tasks 1. Install all the NPM packages you need and types for them. diff --git a/src/App.js b/src/App.js new file mode 100644 index 00000000..2128d060 --- /dev/null +++ b/src/App.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { NavLink, Switch, Route, Redirect } from 'react-router-dom'; +import { Home } from './components/HomePage/Home'; +import { Peoples } from './components/PeoplePage/Peoples'; +import { PageNotFound } from './components/PageNotFound/PageNotFound'; + +import './App.scss'; + +const App = () => ( +
+ + + + + + + + + +
+); + +export default App; diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index e74ffd59..00000000 --- a/src/App.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import './App.scss'; - -const App = () => ( -
-

People table

-
-); - -export default App; diff --git a/src/api/GetPeople.js b/src/api/GetPeople.js new file mode 100644 index 00000000..a6d1b5f0 --- /dev/null +++ b/src/api/GetPeople.js @@ -0,0 +1,9 @@ +// eslint-disable-next-line max-len +const peoples = 'https://mate-academy.github.io/react_people-table/api/people.json'; + +export const getPeople = async() => { + const response = await fetch(peoples); + const people = response.json(); + + return people; +}; diff --git a/src/components/HomePage/Home.jsx b/src/components/HomePage/Home.jsx new file mode 100644 index 00000000..5f05423f --- /dev/null +++ b/src/components/HomePage/Home.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export const Home = () => ( +

Home Page

+); diff --git a/src/components/PageNotFound/PageNotFound.jsx b/src/components/PageNotFound/PageNotFound.jsx new file mode 100644 index 00000000..b1827650 --- /dev/null +++ b/src/components/PageNotFound/PageNotFound.jsx @@ -0,0 +1,3 @@ +import React from 'react'; + +export const PageNotFound = () => (

PAGE NOT FOUND

); diff --git a/src/components/PeoplePage/Peoples.jsx b/src/components/PeoplePage/Peoples.jsx new file mode 100644 index 00000000..d9f3a2e0 --- /dev/null +++ b/src/components/PeoplePage/Peoples.jsx @@ -0,0 +1,24 @@ +// eslint-disable-next-line no-unused-vars +import React, { useEffect } from 'react'; + +export const Peoples = () => { + const tableTitle = ['Name', 'Sex', 'Born', 'Died', 'Mother', 'Father']; + + // useEffect(()=>{ + + // }, []); + + return ( + <> +

Peoples Page

+ + + {tableTitle.map(item => ( + {item} + ))} + + +
+ + ); +}; diff --git a/src/index.tsx b/src/index.js similarity index 61% rename from src/index.tsx rename to src/index.js index 60b2d961..6c3e450a 100644 --- a/src/index.tsx +++ b/src/index.js @@ -1,9 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { HashRouter } from 'react-router-dom'; import App from './App'; ReactDOM.render( - , + + + , document.getElementById('root'), ); diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index c7466ceb..ece12df6 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1,2 +1 @@ -// eslint-disable-next-line -/// +/// From ed277cd4a559d469dcbb22a0dc4104bc1523f341 Mon Sep 17 00:00:00 2001 From: Vasyl_Zarichnyi Date: Thu, 15 Oct 2020 12:44:55 +0300 Subject: [PATCH 2/4] add_people_list --- package.json | 1 + src/App.js | 16 +++++-- src/App.scss | 46 +++++++++++++++++++ src/components/HomePage/Home.jsx | 3 +- src/components/HomePage/Home.scss | 3 ++ src/components/PageNotFound/PageNotFound.jsx | 3 +- src/components/PageNotFound/PageNotFound.scss | 3 ++ src/components/PeoplePage/PeopleList.jsx | 35 ++++++++++++++ src/components/PeoplePage/PeopleStyle.scss | 23 ++++++++++ src/components/PeoplePage/PeopleTable.jsx | 32 +++++++++++++ src/components/PeoplePage/Peoples.jsx | 24 ---------- src/components/PersonName/PersonName.jsx | 14 ++++++ 12 files changed, 172 insertions(+), 31 deletions(-) create mode 100644 src/components/HomePage/Home.scss create mode 100644 src/components/PageNotFound/PageNotFound.scss create mode 100644 src/components/PeoplePage/PeopleList.jsx create mode 100644 src/components/PeoplePage/PeopleStyle.scss create mode 100644 src/components/PeoplePage/PeopleTable.jsx delete mode 100644 src/components/PeoplePage/Peoples.jsx create mode 100644 src/components/PersonName/PersonName.jsx diff --git a/package.json b/package.json index c427c7f8..9a193c4e 100755 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/react": "^16.9.49", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", + "classnames": "^2.2.6", "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/src/App.js b/src/App.js index 2128d060..c8ce9f15 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,25 @@ import React from 'react'; import { NavLink, Switch, Route, Redirect } from 'react-router-dom'; import { Home } from './components/HomePage/Home'; -import { Peoples } from './components/PeoplePage/Peoples'; +import { Peoples } from './components/PeoplePage/PeopleTable'; import { PageNotFound } from './components/PageNotFound/PageNotFound'; import './App.scss'; const App = () => (
-