Create Page componenet whicjh holds the main layout

src/App.tsx

-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>
       </Router>
     </UserStateProvider>
   );

src/pages/NewsPage.tsx

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

src/pages/Page.tsx

+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;