From 3588028d993abffa72b671171d41a55ad5239963 Mon Sep 17 00:00:00 2001 From: Lucas Machado Date: Sat, 22 Jan 2022 22:53:39 -0300 Subject: [PATCH 1/2] Criacao do COntext e Service- api- --- package-lock.json | 15 +++++++++++++++ package.json | 1 + src/App.tsx | 5 +++-- src/context/ApiContext.js | 5 +++++ src/context/ApiProvider.js | 32 ++++++++++++++++++++++++++++++++ src/service/API.tsx | 5 +++++ 6 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 src/context/ApiContext.js create mode 100644 src/context/ApiProvider.js create mode 100644 src/service/API.tsx diff --git a/package-lock.json b/package-lock.json index b299bf4..75aaae1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1965,6 +1965,21 @@ "resolved": "https://npm.pkg.1eg.com.br/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz", + "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==", + "requires": { + "follow-redirects": "^1.14.7" + }, + "dependencies": { + "follow-redirects": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz", + "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==" + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://npm.pkg.1eg.com.br/axobject-query/-/axobject-query-2.0.2.tgz", diff --git a/package.json b/package.json index b4feb3b..8256d59 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@types/node": "12.0.2", "@types/react": "16.8.18", "@types/react-dom": "16.8.4", + "axios": "^0.25.0", "node-sass": "^4.12.0", "react": "^16.8.6", "react-dom": "^16.8.6", diff --git a/src/App.tsx b/src/App.tsx index 6eb669a..704aa77 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,14 @@ import React from 'react' import './App.scss' +// import { Table } from './components/Table' const App: React.FC = () => { const logoMoovin = 'https://cdn.moovin.com.br/project/manager-panel/img/logo-moovin.svg' return ( -
- Logo da Moovin +
+
Logo Moovin
) } diff --git a/src/context/ApiContext.js b/src/context/ApiContext.js new file mode 100644 index 0000000..84c03f0 --- /dev/null +++ b/src/context/ApiContext.js @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +const ApiContext = createContext(); + +export default ApiContext; \ No newline at end of file diff --git a/src/context/ApiProvider.js b/src/context/ApiProvider.js new file mode 100644 index 0000000..5fc2c15 --- /dev/null +++ b/src/context/ApiProvider.js @@ -0,0 +1,32 @@ +import React, { useState } from 'react' +import PropTypes from 'prop-types' +import ApiContext from './ApiContext' + +function ApiProvider({children}) { + const [data, setData] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [page, setPage] = useState(1); + + + + return( + + {children} + + ); +} + +ApiProvider.prototype = { + children: PropTypes.node.isRequired, +}; + +export default ApiProvider \ No newline at end of file diff --git a/src/service/API.tsx b/src/service/API.tsx new file mode 100644 index 0000000..2bbe5ee --- /dev/null +++ b/src/service/API.tsx @@ -0,0 +1,5 @@ +import axios from 'axios'; + +export const api = axios.create({ + baseURL: 'https://gorest.co.in/public-api/', +}); From 4af909e2ad071e7abfe7e3913220f0966f9808ed Mon Sep 17 00:00:00 2001 From: Lucas Machado Date: Mon, 24 Jan 2022 00:13:32 -0300 Subject: [PATCH 2/2] Lendo API e fazendo paginacao --- src/App.tsx | 5 ++- src/components/Table.jsx | 83 ++++++++++++++++++++++++++++++++++++++ src/context/ApiContext.js | 5 --- src/context/ApiProvider.js | 32 --------------- 4 files changed, 86 insertions(+), 39 deletions(-) create mode 100644 src/components/Table.jsx delete mode 100644 src/context/ApiContext.js delete mode 100644 src/context/ApiProvider.js diff --git a/src/App.tsx b/src/App.tsx index 704aa77..e1f020b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,15 @@ import React from 'react' import './App.scss' -// import { Table } from './components/Table' +import Table from './components/Table' const App: React.FC = () => { const logoMoovin = 'https://cdn.moovin.com.br/project/manager-panel/img/logo-moovin.svg' - return (
Logo Moovin
+

Últimas postagens

+ ) } diff --git a/src/components/Table.jsx b/src/components/Table.jsx new file mode 100644 index 0000000..13c82bd --- /dev/null +++ b/src/components/Table.jsx @@ -0,0 +1,83 @@ +import React, { useState, useEffect } from 'react'; +import {api} from '../service/API' + +function Table() { + const [post, setPost] = useState([]); + const [page, setPage] = useState(1); + const [nextPage, setNextPage] = useState(1); + + const TOKEN = '32076aa84dcb8091eb0e9884c2f8235943c02a4ae061304baac1a68969035fee'; + + const fetchDatas = async () => { + const result = await api.get(`posts?_format=json&access-token=${TOKEN}&page=${page}`); + setNextPage(result.data.meta.pagination.pages); + setPost(result.data.data); + } + + useEffect(() => { + fetchDatas(); + }, [page]) + + + const nextPagePrev = (pagination) => { + if(pagination > page) { + setPage(pagination); + }else if (pagination < page && pagination > 0){ + setPage(pagination); + } + } + + return ( +
+ + + + + + + + { + post && post.slice(0,9).map((row) => { + return ( + + + + + ) + }) + } + + + + + + + + + +
TituloConteúdo
+ {row.title} + + {row.body} +
+ { + `Exibindo ${nextPage/4} postagens` + } +
+ ) +} + +export default Table; \ No newline at end of file diff --git a/src/context/ApiContext.js b/src/context/ApiContext.js deleted file mode 100644 index 84c03f0..0000000 --- a/src/context/ApiContext.js +++ /dev/null @@ -1,5 +0,0 @@ -import { createContext } from 'react'; - -const ApiContext = createContext(); - -export default ApiContext; \ No newline at end of file diff --git a/src/context/ApiProvider.js b/src/context/ApiProvider.js deleted file mode 100644 index 5fc2c15..0000000 --- a/src/context/ApiProvider.js +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useState } from 'react' -import PropTypes from 'prop-types' -import ApiContext from './ApiContext' - -function ApiProvider({children}) { - const [data, setData] = useState([]); - const [isLoading, setIsLoading] = useState(false); - const [page, setPage] = useState(1); - - - - return( - - {children} - - ); -} - -ApiProvider.prototype = { - children: PropTypes.node.isRequired, -}; - -export default ApiProvider \ No newline at end of file