React Router usage

ProgrammingLanguageLeader · ProgrammingLanguageLeader · commit 282cd1cdfa23 · 2018-05-14T19:34:57.000+03:00
diff --git a/delivery/package.json b/delivery/package.json
@@ -6,6 +6,8 @@
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
     "react-flexbox-grid": "^2.0.0",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.2",
     "styled-components": "^3.2.5"
   },
diff --git a/delivery/public/index.html b/delivery/public/index.html
@@ -6,10 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Delivery Club</title>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Pacifico&amp;subset=cyrillic" rel="stylesheet">
-    <!-- <link rel="stylesheet" href="https://unpkg.com/flexboxgrid2@7.2.1/flexboxgrid2.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
 </head>
 <body>
-    <main id="main"></main>
+    <main id="root"></main>
 </body>
 </html>
diff --git a/delivery/src/components/Homepage.js b/delivery/src/components/Homepage.js
@@ -3,9 +3,19 @@ import { Grid, Row, Col } from 'react-flexbox-grid';
 import styled from 'styled-components';
 
 import Button from './Button';
+import Header from './Header';
 import Header1 from './Header1';
 import LeadText from './LeadText';
 import StoreCard from './StoreCard';
+import Footer from './Footer';
+
+const Homepage = () => (
+  <div>
+    <Header />
+    <Description />
+    <Footer />
+  </div>
+);
 
 const DescriptionCover = styled.img.attrs({
   src: "img/picpizzaaa.jpg"
@@ -69,4 +79,4 @@ const Description = () => {
   )
 };
 
-export default Description;
+export default Homepage;
diff --git a/delivery/src/components/Main.js b/delivery/src/components/Main.js
diff --git a/delivery/src/components/Timepage.js b/delivery/src/components/Timepage.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import LeadText from './LeadText';
+
+class Timepage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      date: new Date()
+    };
+  }
+
+  tick() {
+    this.setState({
+      date: new Date()
+    });
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(
+      () => this.tick(),
+      1000
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+
+  render() {
+    return (
+      <div>
+        <LeadText>{ this.state.date.toLocaleTimeString() }</LeadText>
+      </div>
+    );
+  }
+}
+
+export default Timepage;
diff --git a/delivery/src/index.js b/delivery/src/index.js
@@ -1,21 +1,32 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import { injectGlobal } from 'styled-components';
 
-import Main from './components/Main';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import Homepage from './components/Homepage';
+import Timepage from './components/Timepage';
 
 injectGlobal`
-    body {
-        margin: 0;
-        font-family: "Open Sans", sans-serif;
-    }
+  body {
+    margin: 0;
+    font-family: "Open Sans", sans-serif;
+  }
 
-    header {
-        background-image: url(img/bg.jpg);
-        background-repeat: no-repeat;
-        background-size: cover;
-        padding-bottom: 75px;
-    }
+  header {
+    background-image: url(img/bg.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding-bottom: 75px;
+  }
 `
 
-render(<Main/>, document.getElementById('main'))
+render(
+  <Router>
+    <Switch>
+      <Route exact path='/' component={Homepage} />
+      <Route exact path='/time' component={Timepage} />
+    </Switch>
+  </Router>,
+  document.getElementById('root')
+);
