diff --git a/src/components/NewsContainer.tsx b/src/components/NewsContainer.tsx index 95ecd05e6e7e50271a917ca327b4db184c8644b0..4301292e7770c33cef30df6528d659657d35939c 100644 --- a/src/components/NewsContainer.tsx +++ b/src/components/NewsContainer.tsx @@ -1,28 +1,30 @@ -import { Grid } from '@material-ui/core'; -import React from 'react'; +import { CircularProgress, Grid } from '@material-ui/core'; +import React, { useEffect } from 'react'; +import useGetNewsList from '../hooks/useGetNewsList'; import News from './News'; interface Props {} const NewsContainer: React.FC = () => { - const lorem = ` - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ullamcorper ligula. Praesent pretium ultrices pretium. Morbi purus lorem, elementum ut tempor quis, condimentum et nisl. Maecenas quis justo ac nibh dapibus porttitor. Nam felis mauris, ornare ut imperdiet eget, ultricies at leo. Integer in risus iaculis libero efficitur mollis. Quisque eget congue lorem, nec tincidunt tellus. Etiam auctor fermentum quam, non consequat tellus tempor at. Vivamus tellus orci, eleifend vel erat sed, viverra luctus sem. - Fusce viverra vehicula purus a elementum. Duis non orci mattis, tincidunt lorem ac, hendrerit lacus. Cras id feugiat nulla. Aenean mi quam, vulputate sit amet volutpat posuere, aliquet nec dolor. Nulla facilisi. Donec quis ullamcorper neque, in eleifend lorem. Quisque id nisl justo. Donec tristique a risus vitae consequat. Vestibulum quis velit magna. Aenean ultrices sapien vel justo varius finibus sit amet a turpis. Cras efficitur, ante at elementum sodales, elit enim fringilla mi, nec consectetur lacus lacus a nunc. Praesent condimentum porta accumsan. Phasellus sed dapibus nisl, eget tempor felis. - `; - return ( + const [{ data, isLoading }, getNews] = useGetNewsList(); + + useEffect(() => { + getNews(); + }, [getNews]); + + return isLoading ? ( + <CircularProgress /> + ) : ( <Grid container spacing={2}> - <News - title="Az eső hír" - author="Anonymus" - content={lorem} - createDate={new Date().toLocaleDateString()} - /> - <News - title="Második" - author="Anonymus" - content={lorem} - createDate={new Date().toLocaleDateString()} - /> + {data + && data.map((item) => ( + <News + title={item.title} + author="Anonymus" + content={item.text} + createDate={item.publishedAt} + /> + ))} </Grid> ); }; diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx index c176c094a6db89383ccc43271a804bbc0e19ca96..e6c3963ea9142a26c02d0d0cff4d2fed04ca67ef 100644 --- a/src/core/components/Header.tsx +++ b/src/core/components/Header.tsx @@ -94,7 +94,7 @@ const Header: React.FC = () => { <Typography variant="h4">SCH-BODY</Typography> </Grid> <Grid className={classes.navItem} item container justify="flex-end"> - <Button>Login</Button> + <Button variant="contained">Login</Button> </Grid> </Grid> </Toolbar>