Demo branch

src/components/NewsContainer.tsx

-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}>
+      {data
+        && data.map((item) => (
           <News
-        title="Az eső hír"
-        author="Anonymus"
-        content={lorem}
-        createDate={new Date().toLocaleDateString()}
-      />
-      <News
-        title="Második"
+            title={item.title}
             author="Anonymus"
-        content={lorem}
-        createDate={new Date().toLocaleDateString()}
+            content={item.text}
+            createDate={item.publishedAt}
           />
+        ))}
     </Grid>
   );
 };

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>