v1.5.0. (#4)

* v1.5.0 — Coin images animate in once loaded.

* v1.5.0 — Details only visible when logged in.

* v1.5.0 — Hide avatar.

* v1.5.0 — Toggle menu when selecting a filter.

* v1.5.0 — Netlify status on readme.

* v1.5.0 — Updates.

* v1.5.0 — Fixed unit test.

README.md

@@ -10,6 +10,6 @@
 
 ---
 
-[![Build Status](https://travis-ci.org/DamianMullins/Coinsly.svg)](https://travis-ci.org/DamianMullins/Coinsly)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/0510b39f-79ed-45cf-88c6-ab00800e97be/deploy-status)](https://app.netlify.com/sites/coinsly/deploys)
 [![Coverage Status](https://coveralls.io/repos/github/DamianMullins/Coinsly/badge.svg)](https://coveralls.io/github/DamianMullins/Coinsly)
 [![Known Vulnerabilities](https://snyk.io/test/github/DamianMullins/Coinsly/badge.svg)](https://snyk.io/test/github/DamianMullins/Coinsly)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coinsly",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "",
   "main": "src/index.js",
   "keywords": [

src/components/Coin.js

@@ -1,26 +1,44 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import styles from '../styles/Coin.module.scss';
 import tick from '../assets/tick.svg';
 
-const Coin = ({ coin, setOwnedValue }) => (
-  <li className={`${styles.coin} ${coin.owned ? styles.coin__owned : ''}`}>
-    <label className={styles.label} data-testid="coin-label">
-      {coin.owned && <img className={styles.tick} src={tick} alt="" />}
-
-      <img className={styles.image} src={coin.imageUrl} alt="" />
-
-      <input
-        className={styles.input}
-        type="checkbox"
-        checked={coin.owned}
-        onChange={setOwnedValue}
-        value={coin.id}
-      />
-    </label>
-  </li>
-);
+class Coin extends Component {
+  state = {
+    loaded: false
+  };
+
+  onImageLoaded = () => {
+    this.setState({ loaded: true });
+  }
+
+  render () {
+    const { coin, setOwnedValue } = this.props;
+
+    return (
+      <li className={`${styles.coin} ${coin.owned ? styles.coin__owned : ''} ${this.state.loaded ? styles.coin__loaded : 'not-loaded'}`}>
+        <label className={styles.label} data-testid="coin-label">
+          {coin.owned && <img className={styles.tick} src={tick} alt="" />}
+
+          <img
+            className={styles.image}
+            src={coin.imageUrl}
+            alt=""
+            onLoad={this.onImageLoaded} />
+
+          <input
+            className={styles.input}
+            type="checkbox"
+            checked={coin.owned}
+            onChange={setOwnedValue}
+            value={coin.id}
+          />
+        </label>
+      </li>
+    )
+  }
+}
 
 Coin.propTypes = {
   coin: PropTypes.object.isRequired,

src/components/Details.js

@@ -5,8 +5,8 @@ import coinHelper from '../lib/coinHelper';
 import Totals from './Totals';
 import styles from '../styles/Totals.module.scss';
 
-const Details = ({ user, denomination, coins }) =>
-  user && (
+const Details = ({ userAuthenticated, denomination, coins }) =>
+  userAuthenticated && (
     <div className={styles.totals}>
       <Totals coins={coins}>
         {({ total, owned, percentage }) => (
@@ -29,7 +29,7 @@ const Details = ({ user, denomination, coins }) =>
   );
 
 Details.propTypes = {
-  user: PropTypes.object.isRequired,
+  userAuthenticated: PropTypes.bool.isRequired,
   coins: PropTypes.array.isRequired,
   denomination: PropTypes.string.isRequired
 };

src/components/__tests__/__snapshots__/Coin.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`coin markup is correct 1`] = `
 <li
-  class="coin "
+  class="coin  not-loaded"
 >
   <label
     class="label"

src/containers/DetailsContainer.js

@@ -3,6 +3,7 @@ import Details from '../components/Details';
 
 const mapStateToProps = ({ coins, user }) => ({
   user,
+  userAuthenticated: user.uid !== undefined,
   denomination: coins.denomination,
   coins: coins.allCoins
 });

src/store/actions/filters.js

@@ -1,4 +1,5 @@
 import { updateUrl } from './router';
+import { toggleMenu } from './menu';
 import {
   FILTERS_ADD_DENOMINATIONS,
   FILTERS_SET_STATUS,
@@ -22,6 +23,7 @@ export const updateStatus = ({ target }) => dispatch => {
   dispatch(setStatus(status));
   dispatch(applyFilters());
   dispatch(updateUrl());
+  dispatch(toggleMenu());
 };
 
 export const setDenomination = denomination => ({
@@ -35,6 +37,7 @@ export const updateDenomination = ({ target }) => dispatch => {
   dispatch(setDenomination(denomination));
   dispatch(applyFilters());
   dispatch(updateUrl());
+  dispatch(toggleMenu());
 };
 
 export const applyFilters = () => ({

src/styles/Coin.module.scss

@@ -18,6 +18,8 @@
     flex-grow: 0;
     flex-basis: 45%;
     margin-bottom: 20px;
+    opacity: 0;
+    transition: opacity 0.3s;
 
     &:hover {
       @include active-coin(white, grey_light, grey_light);
@@ -36,6 +38,10 @@
     }
 }
 
+  .coin__loaded {
+    opacity: 1;
+  }
+
   .coin__owned {
       @include active-coin(grey_lightest, grey, green);
 

src/styles/Header.module.scss

@@ -35,5 +35,6 @@
 
 .userAvatar {
   border-radius: 50%;
+  display: none;
   width: 50px;
 }

yarn.lock

@@ -814,7 +814,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.1.5", "@babel/runtime@^7.3.1":
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83"
   integrity sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==
@@ -1124,9 +1124,9 @@
   integrity sha512-ohkhb9LehJy+PA40rDtGAji61NCgdtKLAlFoYp4cnuuQEswwdK3vz9SOIkkyc3wrk8dzjphQApNs56yyXLStaQ==
 
 "@types/node@*":
-  version "11.10.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.10.5.tgz#fbaca34086bdc118011e1f05c47688d432f2d571"
-  integrity sha512-DuIRlQbX4K+d5I+GMnv+UfnGh+ist0RdlvOp+JZ7ePJ6KQONCFQv/gKYSU1ZzbVdFSUCKZOltjmpFAGGv5MdYA==
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.11.0.tgz#070e9ce7c90e727aca0e0c14e470f9a93ffe9390"
+  integrity sha512-D5Rt+HXgEywr3RQJcGlZUCTCx1qVbCZpVk3/tOOA6spLNZdGm8BU+zRgdRYDoF1pO3RuXLxADzMrF903JlQXqg==
 
 "@types/q@^1.5.1":
   version "1.5.1"
@@ -3382,11 +3382,11 @@ [email protected]:
   integrity sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q==
 
 dom-testing-library@^3.13.1:
-  version "3.16.8"
-  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-3.16.8.tgz#26549b249f131a25e4339ebec9fcaa2e7642527f"
-  integrity sha512-VGn2piehGoN9lmZDYd+xoTZwwcS+FoXebvZMw631UhS5LshiLTFNJs9bxRa9W7fVb1cAn9AYKAKZXh67rCDaqw==
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-3.17.0.tgz#7b65cf13b385c5cb8b93d50f1539462fa64c0ab4"
+  integrity sha512-NcqfpHDSUGERQSO1ub2T8vZhcZ8lh1aFq07WQ+qeAQQl8ybyL5Ge3pGfaXq9rHes308XiOx0MsoPE3k+4xeBnQ==
   dependencies:
-    "@babel/runtime" "^7.1.5"
+    "@babel/runtime" "^7.3.4"
     "@sheerun/mutationobserver-shim" "^0.3.2"
     pretty-format "^24.0.0"
     wait-for-expect "^1.1.0"
@@ -6911,9 +6911,9 @@ node-pre-gyp@^0.12.0:
     tar "^4"
 
 node-releases@^1.1.3, node-releases@^1.1.8:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.9.tgz#70d0985ec4bf7de9f08fc481f5dae111889ca482"
-  integrity sha512-oic3GT4OtbWWKfRolz5Syw0Xus0KRFxeorLNj0s93ofX6PWyuzKjsiGxsCtWktBwwmTF6DdRRf2KreGqeOk5KA==
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.10.tgz#5dbeb6bc7f4e9c85b899e2e7adcc0635c9b2adf7"
+  integrity sha512-KbUPCpfoBvb3oBkej9+nrU0/7xPlVhmhhUJ1PZqwIP5/1dJkRWKWD3OONjo6M2J7tSCBtDCumLwwqeI+DWWaLQ==
   dependencies:
     semver "^5.3.0"