feature(homepage): create landing page

create carousel component
fetch articles from database by tags
added loading component
connect with redux store for state management
styled page for responsiveness
write integration test
[Finishes #167701704]

.env

@@ -0,0 +1 @@
+BASE_URL=https://persephone-backend-staging.herokuapp.com/api/v1/

package.json

@@ -31,11 +31,14 @@
   "homepage": "https://github.com/andela/persephone-ah-frontend#readme",
   "dependencies": {
     "@babel/core": "^7.4.5",
+    "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.6.1",
+    "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
     "classnames": "^2.2.6",
+    "core-js": "^3.1.4",
     "coveralls": "^3.0.5",
     "css-loader": "^3.1.0",
     "express": "^4.17.1",
@@ -54,6 +57,7 @@
     "react-select": "^3.0.4",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
+    "regenerator-runtime": "^0.13.3",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.3.0",
     "webpack": "^4.35.2",
@@ -62,6 +66,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.5.5",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "cypress": "^3.4.1",

src/App.jsx

@@ -1,109 +1,28 @@
 import React, { Component } from 'react';
 import { hot } from 'react-hot-loader';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import LandingPage from './views/LandingPage/index.jsx';
+import HomePage from './views/HomePage/index.jsx';
 import LoginPage from './views/LoginPage/index.jsx';
 import ArticlePage from './views/ArticlePage/index.jsx';
 import { Provider } from 'react-redux';
 import setupStore from './store';
 import './styles/main.scss';
 import Header from './components/Header/index.jsx';
-import { Button, Form, Col } from 'react-bootstrap';
-import Modal from './components/Modal/index.jsx';
-
 import Footer from './components/Footer/index.jsx';
 
 const store = setupStore();
-// get app theme
-const app_theme = localStorage.getItem('app_theme');
 class App extends Component {
-  state = {
-    show: false,
-    lightTheme: true
-  };
-
-  handleClose = () => this.setState({ show: false });
-  handleShow = () => this.setState({ show: true });
-
   render() {
     return (
       <Provider store={store}>
         <Router>
           <Header />
           <Switch>
-            <Route path="/" exact component={LandingPage} />
+            <Route path="/" exact component={HomePage} />
             <Route path="/login" component={LoginPage} />
             <Route path="/article" component={ArticlePage} />
           </Switch>
-          <Footer app_theme={app_theme} />
-          <button type="button" onClick={this.handleShow}>
-            Open modal
-          </button>
-          <Modal
-            show={this.state.show}
-            lightTheme={this.state.lightTheme}
-            handleClose={this.handleClose}
-            handleShow={this.handleShow}
-          >
-            <Form>
-              <div>
-                <h3>Sample form in a modal</h3>
-              </div>
-              <Form.Row>
-                <Form.Group as={Col} controlId="formGridEmail">
-                  <Form.Label>Email</Form.Label>
-                  <Form.Control type="email" placeholder="Enter email" />
-                </Form.Group>
-
-                <Form.Group as={Col} controlId="formGridPassword">
-                  <Form.Label>Password</Form.Label>
-                  <Form.Control type="password" placeholder="Password" />
-                </Form.Group>
-              </Form.Row>
-
-              <Form.Group controlId="formGridAddress1">
-                <Form.Label>Address</Form.Label>
-                <Form.Control placeholder="1234 Main St" />
-              </Form.Group>
-
-              <Form.Group controlId="formGridAddress2">
-                <Form.Label>Address 2</Form.Label>
-                <Form.Control placeholder="Apartment, studio, or floor" />
-              </Form.Group>
-
-              <Form.Row>
-                <Form.Group as={Col} controlId="formGridCity">
-                  <Form.Label>City</Form.Label>
-                  <Form.Control />
-                </Form.Group>
-
-                <Form.Group as={Col} controlId="formGridState">
-                  <Form.Label>State</Form.Label>
-                  <Form.Control as="select">
-                    <option>Choose...</option>
-                    <option>...</option>
-                  </Form.Control>
-                </Form.Group>
-
-                <Form.Group as={Col} controlId="formGridZip">
-                  <Form.Label>Zip</Form.Label>
-                  <Form.Control />
-                </Form.Group>
-              </Form.Row>
-
-              <Form.Group id="formGridCheckbox">
-                <Form.Check type="checkbox" label="Check me out" />
-              </Form.Group>
-              <div>
-                <Button className="btn-margin" variant="success" type="submit">
-                  Submit
-                </Button>
-                <Button className="btn-margin" variant="success" type="submit">
-                  Close
-                </Button>
-              </div>
-            </Form>
-          </Modal>
+          <Footer />
         </Router>
       </Provider>
     );