Merge branch 'demo' into 'DEV'

Demo

See merge request !6

.eslintrc.js

@@ -13,6 +13,9 @@ module.exports = {
   },
 
   rules: {
+    'react/prop-types': 0,
+    '@typescript-eslint/explicit-function-return-type': 1,
+    'object-curly-newline': 0,
     'implicit-arrow-linebreak': 0,
     'react/prop-types': 0,
   },

src/components/News.tsx

+import { Grid, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+
+interface NewsProps {
+  title: string;
+  content: string;
+  author: string;
+  createDate: string;
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    borderRadius: '8px',
+    backgroundColor: '#E5E5E5',
+    margin: theme.spacing(2),
+    padding: theme.spacing(1),
+  },
+}));
+
+const News: React.FC<NewsProps> = ({ title, content, author, createDate }) => {
+  const classes = useStyles();
+  return (
+    <Grid className={classes.container} container direction="column">
+      <Grid item>
+        <Typography variant="h6">{title}</Typography>
+      </Grid>
+      <Grid item>
+        <Typography variant="body1">{content}</Typography>
+      </Grid>
+      <Grid item container justify="flex-end">
+        <Grid item>
+          <Typography variant="subtitle2">
+            <i>{author}</i>
+          </Typography>
+          <Typography variant="subtitle2">
+            <i>{createDate}</i>
+          </Typography>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default News;

src/components/NewsContainer.tsx

+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 [{ data, isLoading }, getNews] = useGetNewsList();
+
+  useEffect(() => {
+    getNews();
+  }, [getNews]);
+
+  return isLoading ? (
+    <CircularProgress />
+  ) : (
+    <Grid container spacing={2}>
+      {data
+        && data.map((item) => (
+          <News
+            title={item.title}
+            author="Anonymus"
+            content={item.text}
+            createDate={item.publishedAt}
+          />
+        ))}
+    </Grid>
+  );
+};
+
+export default NewsContainer;

src/components/NewsPage.tsx

+import { Container } from '@material-ui/core';
+import React from 'react';
+import NewsContainer from './NewsContainer';
+
+const NewsPage: React.FC = () => (
+  <Container>
+    <NewsContainer />
+  </Container>
+);
+
+export default NewsPage;

src/core/App.tsx

@@ -18,7 +18,7 @@ const MainContent = styled.div`
   height: 100%;
 `;
 
-function App() {
+function App(): React.ReactElement {
   const [response, addNews] = useAddNews();
 
   useEffect(() => {

src/core/components/Footer.tsx

 import React from 'react';
 
-const Footer = () => <div>Footer</div>;
+const Footer: React.FC = () => <div>Footer</div>;
 
 export default Footer;

src/core/components/Header.tsx

@@ -73,7 +73,7 @@ const Header: React.FC = () => {
           <Grid className={classes.navItem} item container justify="flex-start">
             <Tabs
               value={value}
-              onChange={(event, val) => {
+              onChange={(event, val): void => {
                 setValue(val);
               }}
               TabIndicatorProps={{ className: classes.indicator }}
@@ -83,7 +83,7 @@ const Header: React.FC = () => {
                   key={item.id}
                   className={classes.tab}
                   label={item.title}
-                  onClick={() => {
+                  onClick={(): void => {
                     history.push(item.redirectTo);
                   }}
                 />
@@ -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>

src/core/components/MainRouting.tsx

 import React from 'react';
 import { Route, Switch } from 'react-router';
-import { ProfileButton } from './ProfileButton';
+import NewsPage from '../../components/NewsPage';
 
 const MainRouting: React.FC = () => (
   <Switch>
     <Route path="/" exact>
       <ProfileButton />
     </Route>
-    <Route path="/news">News</Route>
+    <Route path="/news">
+      <NewsPage />
+    </Route>
   </Switch>
 );