Update .gitea/workflows/sonar.yml

Bump lodash-es from 4.17.4 to 4.17.21

.gitea/workflows/sonar.yml

@@ -0,0 +1,45 @@
+name: SonarQube Analysis
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    branches:
+      - main
+      - master
+    types:
+      - opened
+      - synchronize
+      - reopened
+
+jobs:
+  sonarqube:
+    name: SonarQube Scan
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Run SonarScanner (Docker v12)
+        run: |
+          # Safely get repository name from current directory
+          PROJECT_KEY=$(basename "$PWD")
+
+          echo "Using project key: $PROJECT_KEY"
+
+          docker run --rm \
+            -v "$PWD:/usr/src" \
+            -w /usr/src \
+            -e SONAR_HOST_URL=${{ secrets.SONARQUBE_HOST }} \
+            -e SONAR_TOKEN=${{ secrets.SONARQUBE_TOKEN }} \
+            sonarsource/sonar-scanner-cli:12 \
+            -Dsonar.projectKey=$PROJECT_KEY \
+            -Dsonar.projectName=$PROJECT_KEY \
+            -Dsonar.sources=. \
+            -Dsonar.exclusions=node_modules/**,dist/**,coverage/** \
+            -Dsonar.qualitygate.wait=true

README.md

@@ -2,7 +2,7 @@
 
 Product comparison page build using **React** + **Redux** + **Bootstrap** + **SASS**
 
-![Screenshot](http://i.imgur.com/0fTmInU.png)
+![Screenshot](https://s8.postimg.cc/fdfsvumkl/Screen_Shot_2018-07-05_at_16.36.17.png)
 
 It's build on top of [`create-react-app`](http://www.google.lt)
 
@@ -26,8 +26,3 @@ License
 The MIT License (MIT). Please see License File for more information.
 
 [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](https://github.com/Rhymond/product-compare-react)
-
-Todo
--
-- [ ] Write tests
-- [ ] Integrate CI

package.json

@@ -4,55 +4,47 @@
   "private": true,
   "dependencies": {
     "autoprefixer": "7.1.1",
-    "babel-core": "6.25.0",
+    "babel-core": "^6.26.3",
-    "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
-    "babel-loader": "7.0.0",
+    "babel-loader": "8.0.1",
-    "babel-preset-react-app": "^3.0.1",
+    "babel-preset-react-app": "^3.1.2",
     "babel-runtime": "6.23.0",
-    "bootstrap": "^4.0.0-alpha.6",
+    "bootstrap": "^4.1.1",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "1.1.3",
     "css-loader": "0.28.4",
     "dotenv": "^4.0.0",
-    "eslint": "3.19.0",
-    "eslint-config-react-app": "^1.0.5",
-    "eslint-loader": "1.7.1",
-    "eslint-plugin-flowtype": "2.34.0",
-    "eslint-plugin-import": "2.2.0",
-    "eslint-plugin-jsx-a11y": "5.0.3",
-    "eslint-plugin-react": "7.1.0",
     "extract-text-webpack-plugin": "2.1.2",
-    "file-loader": "0.11.2",
+    "file-loader": "2.0.0",
     "fs-extra": "3.0.1",
-    "html-webpack-plugin": "2.29.0",
+    "html-webpack-plugin": "3.2.0",
     "jest": "20.0.4",
     "node-sass-chokidar": "0.0.3",
-    "npm-run-all": "^4.1.1",
+    "npm-run-all": "^4.1.3",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.0.0",
-    "postcss-loader": "2.0.6",
+    "postcss-loader": "3.0.0",
     "promise": "7.1.1",
-    "react": "^15.6.1",
+    "react": "^15.6.2",
-    "react-addons-css-transition-group": "^15.6.0",
+    "react-addons-css-transition-group": "^15.6.2",
-    "react-addons-transition-group": "^15.6.0",
+    "react-addons-transition-group": "^15.6.2",
     "react-dev-utils": "^3.0.2",
-    "react-dom": "^15.6.1",
+    "react-dom": "^15.6.2",
     "react-error-overlay": "^1.0.9",
-    "react-redux": "^5.0.5",
+    "react-redux": "^5.0.7",
-    "react-router": "^4.1.1",
+    "react-router": "^4.3.1",
-    "react-router-dom": "^4.1.1",
+    "react-router-dom": "^4.3.1",
-    "react-scripts": "^1.0.10",
+    "react-scripts": "^1.1.5",
-    "react-select": "^1.0.0-rc.5",
+    "react-select": "^1.2.1",
     "redux": "^3.0.0",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
+    "redux-thunk": "^2.3.0",
-    "style-loader": "0.18.2",
+    "style-loader": "0.23.0",
-    "sw-precache-webpack-plugin": "0.11.3",
+    "sw-precache-webpack-plugin": "0.11.5",
-    "url-loader": "0.5.9",
+    "url-loader": "1.1.1",
-    "webpack": "2.6.1",
+    "webpack": "4.17.1",
-    "webpack-dev-server": "2.5.0",
+    "webpack-dev-server": "^3.1.14",
-    "webpack-manifest-plugin": "1.1.0",
+    "webpack-manifest-plugin": "2.0.3",
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
@@ -65,10 +57,11 @@
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
-    "eslint": "^3.19.0",
+    "eslint": "^4.18.2",
     "eslint-config-react-app": "^1.0.5",
+    "eslint-loader": "^1.7.1",
     "eslint-plugin-flowtype": "^2.33.0",
-    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^5.0.1",
     "eslint-plugin-react": "^7.0.1"
   },

public/products.json

@@ -1,39 +1,39 @@
 {
   "products": [{
       "id": "1",
-      "name": "Chair",
+      "name": "Cherry",
-      "image": "https://devitems.com/preview/furnish/img/product/1.jpg",
+      "image": "images/Cherry.png",
-      "price": "$39",
+      "price": "$1.99",
       "colors": ["red", "green", "blue"],
-      "condition": "New",
+      "condition": "Fresh",
-      "description": "Black chair"
+      "description": "Two Cherries"
     },
     {
       "id": "2",
-      "name": "Lamp",
+      "name": "Orange",
-      "image": "https://devitems.com/preview/furnish/img/product/2.jpg",
+      "image": "images/Orange.png",
-      "price": "$319",
+      "price": "$2.99",
       "colors": ["green", "blue"],
-      "condition": "Used",
+      "condition": "Frozen",
-      "description": "Amazing lamp"
+      "description": "Giant Orange"
     },
     {
       "id": "3",
-      "name": "Statue",
+      "name": "Nuts",
-      "image": "https://devitems.com/preview/furnish/img/product/3.jpg",
+      "image": "images/Nuts.png",
-      "price": "$239",
+      "price": "$1.00",
       "colors": ["red"],
-      "condition": "Used",
+      "condition": "Frozen",
-      "description": "Used Statue"
+      "description": "Mixed Nuts"
     },
     {
       "id": "4",
-      "name": "Seat",
+      "name": "Strawberry",
-      "image": "https://devitems.com/preview/furnish/img/product/4.jpg",
+      "image": "images/Strawberry.png",
-      "price": "$239",
+      "price": "$1.49",
       "colors": ["blue"],
-      "condition": "New",
+      "condition": "Fresh",
-      "description": "Large Seat"
+      "description": "Just Strawberry"
     }
   ]
 }

src/actions/index.js

@@ -1 +0,0 @@
-export * from './product';

src/actions/product.js

@@ -1,18 +1,17 @@
-import * as types from '../constants/types';
+import * as types from '../constants/types'
 
-export function getProducts() {
+export const getProducts = () =>
-  return dispatch => {
+  dispatch =>
     fetch(`products.json`)
       .then(response => response.json())
       .then(response => {
         dispatch({
           type: types.FETCH_PRODUCTS,
           payload: response.products
-        });
         })
-  }
+      })
-}
 
-export function compare(product) {
+export const compare = product => ({
-  return {type: types.COMPARE_PRODUCT, product};
+    type: types.COMPARE_PRODUCT,
-}
+    product
+  })

src/components/Compare/index.js

@@ -7,7 +7,7 @@ const Compare = ({products}) =>
       <table className="table">
         <thead className="thead-default">
           <tr>
-            <th></th>
+            <th />
             {products.map(product =>
               <th key={product.id}>
                 {product.name}
@@ -27,7 +27,7 @@ const Compare = ({products}) =>
             {products.map(product =>
               <td key={product.id}>
                 {product.colors.map((color, index) =>
-                  <span key={index} className={"bg-" + color}></span>
+                  <span key={index} className={"bg-" + color} />
                 )}
               </td>
             )}
@@ -35,7 +35,7 @@ const Compare = ({products}) =>
           <tr className="condition">
             <th scope="row">Condition</th>
             {products.map(product =>
-              <td key={product.id} className={product.condition === "Used" ? "bg-red" : "bg-green"}>
+              <td key={product.id} className={product.condition === "Frozen" ? "bg-red" : "bg-green"}>
                 {product.condition}
               </td>
             )}
@@ -45,4 +45,4 @@ const Compare = ({products}) =>
     </div>
   </div>;
 
-export default Compare;
+export default Compare

src/components/Compare/styles.scss

@@ -5,7 +5,7 @@
     background-color: #fff;
     border-radius: 5px;
     overflow: hidden;
-    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 13px 21px -5px rgba(0, 0, 0, 0.05);
     border: 1px solid #eee;
     font-size: 18px;
     table-layout: fixed;

src/components/Product/index.js

@@ -5,7 +5,7 @@ const Product = ({product, compare}) =>
     <div key={product.id} className="col-sm-6 col-md-3">
         <div className={"product " + (product.compare ? "compare" : "")} >
             <img src={product.image} alt={product.name} />
-            <div className="image_overlay"></div>
+            <div className="image_overlay"/>
             <div className="view_details" onClick={() => compare(product)}>
               {product.compare ? "Remove" : "Compare"}
             </div>
@@ -19,4 +19,4 @@ const Product = ({product, compare}) =>
         </div>
     </div>;
 
-export default Product;
+export default Product

src/components/Product/styles.scss

@@ -10,8 +10,9 @@ $product-main-color: $green;
   overflow: hidden;
   transition: all 500ms ease-out;
   margin-bottom: 30px;
+  border: 1px solid #ddd;
   &:hover {
-    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 13px 21px -5px rgba(0, 0, 0, 0.2);
     .image_overlay {
       opacity: $image-overlay-opacity;
     }

src/components/ProductList/index.js

@@ -1,13 +1,11 @@
 import React from 'react'
-import {Product} from '../';
+import {Product} from '../'
 
 const ProductList = ({products, compare}) =>
-  <div>
   <div className="row mt-3">
       {products.map(product =>
         <Product key={product.id} product={product} compare={compare} />
       )}
-    </div>
   </div>;
 
-export default ProductList;
+export default ProductList

src/containers/App/index.js

@@ -1,12 +1,12 @@
-import React, {Component} from 'react';
+import React, {Component} from 'react'
 import {Route, Switch} from 'react-router-dom'
 
-import {Home, NotFound} from '../';
+import {Home, NotFound} from '../'
 
-export default class App extends Component {
+class App extends Component {
   render() {
     return (
-      <div className="App">
+      <div className="app">
         <div className="container mt-4">
           <Switch>
             <Route exact path="/" component={Home}/>
@@ -14,6 +14,8 @@ export default class App extends Component {
           </Switch>
         </div>
       </div>
-    );
+    )
   }
 }
+
+export default App

src/containers/Home/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, {Component} from 'react'
-import {bindActionCreators} from 'redux';
+import {bindActionCreators} from 'redux'
-import {Compare, ProductList} from '../../components';
+import {Compare, ProductList} from '../../components'
-import * as productActions from '../../actions';
+import * as productActions from '../../actions/product'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
 
-class Home extends React.Component {
+class Home extends Component {
   componentWillMount() {
-    this.props.actions.getProducts();
+    this.props.actions.getProducts()
   }
 
   render() {
@@ -14,27 +14,26 @@ class Home extends React.Component {
     const compareProducts = products.filter(product => product.compare);
 
     return (
-      <div className="Home mt-5">
+      <div className="home mt-5">
-        <ProductList products={products} compare={actions.compare}/>
+        <div className="row">
-        {compareProducts.length >= 2 ? <Compare products={compareProducts}/> : null}
+          <div className="col-12">
+            <h2 className="mb-3">Compare Products</h2>
           </div>
-    );
+        </div>
+        <ProductList products={products} compare={actions.compare}/>
+        {compareProducts.length >= 2 &&
+          <Compare products={compareProducts}/>
         }
-}
+      </div>
-
+    )
-function mapStateToProps(state) {
-  return {
-    products: state.product.products
   }
 }
 
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(productActions, dispatch)
-  };
-}
-
 export default connect(
-  mapStateToProps,
+  state => ({
-  mapDispatchToProps
+    products: state.product.products
-)(Home);
+  }),
+  dispatch => ({
+    actions: bindActionCreators(productActions, dispatch)
+  })
+)(Home)

src/containers/NotFound/index.js

@@ -1,12 +1,14 @@
-import React from 'react'
+import React, {Component} from 'react'
 
-export default class NotFound extends React.Component {
+class NotFound extends Component {
   render() {
     return (
-      <div>
+      <div className="not-found">
         <h1>404</h1>
         <h3>Page not found</h3>
       </div>
-    );
+    )
   }
 }
+
+export default NotFound

src/index.js

@@ -1,6 +1,6 @@
-import registerServiceWorker from './registerServiceWorker';
+import registerServiceWorker from './registerServiceWorker'
-import React from 'react';
+import React from 'react'
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom'
 import {BrowserRouter} from 'react-router-dom'
 import {createStore, applyMiddleware} from 'redux'
 import {Provider} from 'react-redux'
@@ -12,20 +12,23 @@ import App from './containers/App'
 import 'bootstrap/dist/css/bootstrap.css'
 import './styles.css'
 
-const loggerMiddleware = createLogger()
+const loggerMiddleware = createLogger();
 
 const store = createStore(
   reducer,
   applyMiddleware(
-    thunkMiddleware, // lets us dispatch() functions
+    thunkMiddleware,
-    loggerMiddleware // neat middleware that logs actions
+    loggerMiddleware
   )
-)
+);
 
 ReactDOM.render(
   <Provider store={store}>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </Provider>, document.getElementById('root'));
+  </Provider>,
+  document.getElementById('root')
+);
+
 registerServiceWorker();

src/reducers/index.js

@@ -1,8 +1,8 @@
 import { combineReducers } from 'redux'
-import product from './product_reducer'
+import product from './productReducer'
 
 const compareApp = combineReducers({
   product
-})
+});
 
 export default compareApp

src/reducers/productReducer.js

@@ -1,4 +1,4 @@
-import * as types from '../constants/types';
+import * as types from '../constants/types'
 
 const INITIAL_STATE = {
   products: []
@@ -21,6 +21,6 @@ export default function (state = INITIAL_STATE, action) {
         )
       };
     default:
-      return state;
+      return state
   }
 }

src/styles.scss

@@ -2,6 +2,6 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-	background: #eaebec;
+  background: #f6f7f8;
   color: #393c45;
 }