From 9e83d309780c04d492ea861438797dcca8b27b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chif.gergo@cloud.bme.hu>
Date: Sun, 24 Jan 2021 16:45:48 +0100
Subject: [PATCH] Create Page componenet whicjh holds the main layout
---
src/App.tsx | 37 ++-----------------------------------
src/pages/NewsPage.tsx | 9 ++++++---
src/pages/Page.tsx | 27 +++++++++++++++++++++++++++
3 files changed, 35 insertions(+), 38 deletions(-)
create mode 100644 src/pages/Page.tsx
diff --git a/src/App.tsx b/src/App.tsx
index a978a39..5db5ad2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,46 +1,13 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
-import styled from 'styled-components';
-import Footer from './components/Footer';
-import Header from './components/Header';
import { UserStateProvider } from './context/UserContext';
-import useAddNews from './hooks/useAddNews';
import Routes from './Routes';
-const Container = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-`;
-
-const MainContent = styled.div`
- height: 100%;
-`;
-
function App(): React.ReactElement {
- const [response, addNews] = useAddNews();
-
- useEffect(() => {
- addNews({ body: { title: 'Testing', text: 'Test Test TEST' } });
- }, [addNews]);
-
- useEffect(() => {
- if (response.data) {
- console.log(response.data.text);
- }
- }, [response.data]);
-
return (
<UserStateProvider>
<Router>
- <Container>
- <Header />
- <MainContent>
- <Routes />
- </MainContent>
- <Footer />
- </Container>
+ <Routes />
</Router>
</UserStateProvider>
);
diff --git a/src/pages/NewsPage.tsx b/src/pages/NewsPage.tsx
index e9b9732..45a629d 100644
--- a/src/pages/NewsPage.tsx
+++ b/src/pages/NewsPage.tsx
@@ -1,11 +1,14 @@
import { Container } from '@material-ui/core';
import React from 'react';
import NewsContainer from '../components/NewsContainer';
+import Page from './Page';
const NewsPage: React.FC = () => (
- <Container>
- <NewsContainer />
- </Container>
+ <Page>
+ <Container>
+ <NewsContainer />
+ </Container>
+ </Page>
);
export default NewsPage;
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
new file mode 100644
index 0000000..fed7ec3
--- /dev/null
+++ b/src/pages/Page.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+
+const Container = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+`;
+
+const MainContent = styled.div`
+ height: 100%;
+`;
+
+const Page: React.FC = ({ children }) => {
+ return (
+ <Container>
+ <Header />
+ <MainContent>{children}</MainContent>
+ <Footer />
+ </Container>
+ );
+};
+
+export default Page;
--
GitLab