From 8a5d8628d18a97abb0d07535593aeebf3c7ee39d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chif.gergo@cloud.bme.hu>
Date: Fri, 28 Aug 2020 17:36:34 +0200
Subject: [PATCH] Add NewsContainer and NewsPage

---
 .eslintrc.js                        |  1 +
 src/News.tsx                        | 24 ----------------
 src/components/News.tsx             | 44 +++++++++++++++++++++++++++++
 src/components/NewsContainer.tsx    | 30 ++++++++++++++++++++
 src/components/NewsPage.tsx         | 11 ++++++++
 src/core/components/MainRouting.tsx |  7 +++--
 6 files changed, 91 insertions(+), 26 deletions(-)
 delete mode 100644 src/News.tsx
 create mode 100644 src/components/News.tsx
 create mode 100644 src/components/NewsContainer.tsx
 create mode 100644 src/components/NewsPage.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index 421d9e0..5803798 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,5 +15,6 @@ module.exports = {
   rules: {
     'react/prop-types': 0,
     '@typescript-eslint/explicit-function-return-type': 2,
+    'object-curly-newline': 0,
   },
 };
diff --git a/src/News.tsx b/src/News.tsx
deleted file mode 100644
index fad39ba..0000000
--- a/src/News.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Grid, Typography } from '@material-ui/core';
-import React from 'react';
-
-interface NewsProps {
-  title: string;
-  content: string;
-  author: string;
-}
-
-const News: React.FC<NewsProps> = ({ title, content, author }) => (
-  <Grid container direction="column">
-    <Grid item>
-      <Typography variant="h6">{title}</Typography>
-    </Grid>
-    <Grid item>
-      <p>{content}</p>
-    </Grid>
-    <Grid item container justify="flex-end">
-      <Typography>{author}</Typography>
-    </Grid>
-  </Grid>
-);
-
-export default News;
diff --git a/src/components/News.tsx b/src/components/News.tsx
new file mode 100644
index 0000000..d674e39
--- /dev/null
+++ b/src/components/News.tsx
@@ -0,0 +1,44 @@
+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;
diff --git a/src/components/NewsContainer.tsx b/src/components/NewsContainer.tsx
new file mode 100644
index 0000000..95ecd05
--- /dev/null
+++ b/src/components/NewsContainer.tsx
@@ -0,0 +1,30 @@
+import { Grid } from '@material-ui/core';
+import React from 'react';
+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 (
+    <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()}
+      />
+    </Grid>
+  );
+};
+
+export default NewsContainer;
diff --git a/src/components/NewsPage.tsx b/src/components/NewsPage.tsx
new file mode 100644
index 0000000..82b744c
--- /dev/null
+++ b/src/components/NewsPage.tsx
@@ -0,0 +1,11 @@
+import { Container } from '@material-ui/core';
+import React from 'react';
+import NewsContainer from './NewsContainer';
+
+const NewsPage: React.FC = () => (
+  <Container>
+    <NewsContainer />
+  </Container>
+);
+
+export default NewsPage;
diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
index 882d03d..e4d65b9 100644
--- a/src/core/components/MainRouting.tsx
+++ b/src/core/components/MainRouting.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { Route, Switch } from 'react-router';
+import NewsPage from '../../components/NewsPage';
 
-const Main = () => (
+const Main: React.FC = () => (
   <Switch>
     <Route path="/" exact>
       Hello
     </Route>
-    <Route path="/news">News</Route>
+    <Route path="/news">
+      <NewsPage />
+    </Route>
   </Switch>
 );
 
-- 
GitLab