From 7834766e0ba2a2ad7f355cc1dd60abf72a40ea89 Mon Sep 17 00:00:00 2001 From: devPinheiro Date: Tue, 6 Aug 2019 00:35:40 +0100 Subject: [PATCH] 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 | 1 + package.json | 5 + src/App.jsx | 87 +------ src/assets/images/Groupillustrator.svg | 229 ++++++++++++++++++ src/assets/images/Rectangle.svg | 3 + .../Screenshot 2019-08-05 at 11.13.50 AM.png | Bin 0 -> 87331 bytes src/assets/images/moon-dark-mode.svg | 16 ++ src/assets/images/moon-light-mode.svg | 16 ++ src/assets/images/sun-dark-mode.svg | 23 ++ src/assets/images/sun-light-mode.svg | 23 ++ src/components/ArticleCard/ArticleCard.scss | 19 +- src/components/ArticleCard/index.jsx | 38 +-- src/components/ArticleCard/index.spec.js | 19 +- src/components/AuthorCard/index.spec.js | 25 ++ src/components/Button/index.jsx | 5 +- src/components/Carousel/index.jsx | 19 +- src/components/Carousel/index.spec.js | 38 ++- src/components/Carousel/style.scss | 1 + src/components/FollowersTablist/index.jsx | 1 - src/components/Footer/Footer.scss | 18 +- .../Footer/__snapshots__/index.spec.js.snap | 2 +- src/components/Footer/index.jsx | 148 +++++------ src/components/Footer/index.spec.js | 59 ++++- src/components/Header/Header.scss | 43 +++- .../Header/__snapshots__/index.spec.js.snap | 6 +- src/components/Header/index.action.js | 8 + src/components/Header/index.jsx | 119 +++++++-- src/components/Header/index.reducer.js | 15 ++ src/components/Header/index.spec.js | 79 +++++- .../TablistContainer/TablistContainer.scss | 3 +- .../TablistContainer/TablistContainer.spec.js | 12 +- src/components/TablistContainer/index.jsx | 7 +- src/components/Toggle/Toggle.scss | 9 +- src/store/store.spec.js | 16 ++ src/styles/partials/base.scss | 12 +- src/utils/axiosConfig.js | 6 + src/utils/paginator.spec.js | 9 + src/views/HomePage/HomePage.scss | 97 ++++++++ .../__snapshots__/index.spec.js.snap | 2 - src/views/HomePage/index.jsx | 155 ++++++++++++ src/views/HomePage/index.spec.js | 37 +++ webpack.config.base.js | 10 +- 42 files changed, 1177 insertions(+), 263 deletions(-) create mode 100644 .env create mode 100644 src/assets/images/Groupillustrator.svg create mode 100644 src/assets/images/Rectangle.svg create mode 100644 src/assets/images/Screenshot 2019-08-05 at 11.13.50 AM.png create mode 100644 src/assets/images/moon-dark-mode.svg create mode 100644 src/assets/images/moon-light-mode.svg create mode 100644 src/assets/images/sun-dark-mode.svg create mode 100644 src/assets/images/sun-light-mode.svg create mode 100644 src/components/Header/index.action.js create mode 100644 src/components/Header/index.reducer.js create mode 100644 src/store/store.spec.js create mode 100644 src/utils/axiosConfig.js create mode 100644 src/utils/paginator.spec.js create mode 100644 src/views/HomePage/HomePage.scss rename src/views/{LandingPage => HomePage}/__snapshots__/index.spec.js.snap (60%) create mode 100644 src/views/HomePage/index.jsx create mode 100644 src/views/HomePage/index.spec.js diff --git a/.env b/.env new file mode 100644 index 0000000..38dd665 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +BASE_URL=https://persephone-backend-staging.herokuapp.com/api/v1/ \ No newline at end of file diff --git a/package.json b/package.json index 8477385..57cc606 100644 --- a/package.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index 5fc628a..ece904c 100644 --- a/src/App.jsx +++ b/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 (
- + -