fix: Consolodate full screen loaders in to one component
This commit is contained in:
Bouncey
Valeriy
168
client/package-lock.json
generated
168
client/package-lock.json
generated
@ -1188,6 +1188,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@sheerun/mutationobserver-shim": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
|
||||
"integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/configstore": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/configstore/-/configstore-2.1.1.tgz",
|
||||
@ -3903,6 +3909,12 @@
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
|
||||
"integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0="
|
||||
},
|
||||
"css.escape": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
|
||||
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
|
||||
"dev": true
|
||||
},
|
||||
"cssesc": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
|
||||
@ -4377,6 +4389,12 @@
|
||||
"integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
|
||||
"dev": true
|
||||
},
|
||||
"diff-sequences": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.0.0.tgz",
|
||||
"integrity": "sha512-46OkIuVGBBnrC0soO/4LHu5LHGHx0uhP65OVz8XOrAJpqiCB2aVIuESvjI1F9oqebuvY8lekS1pt6TN7vt7qsw==",
|
||||
"dev": true
|
||||
},
|
||||
"diffie-hellman": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
|
||||
@ -4471,6 +4489,35 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"dom-testing-library": {
|
||||
"version": "3.16.8",
|
||||
"resolved": "https://registry.npmjs.org/dom-testing-library/-/dom-testing-library-3.16.8.tgz",
|
||||
"integrity": "sha512-VGn2piehGoN9lmZDYd+xoTZwwcS+FoXebvZMw631UhS5LshiLTFNJs9bxRa9W7fVb1cAn9AYKAKZXh67rCDaqw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.5",
|
||||
"@sheerun/mutationobserver-shim": "^0.3.2",
|
||||
"pretty-format": "^24.0.0",
|
||||
"wait-for-expect": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
|
||||
"integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
|
||||
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"dom-walk": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
|
||||
@ -8295,6 +8342,12 @@
|
||||
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
|
||||
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
|
||||
},
|
||||
"indent-string": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
|
||||
"integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
|
||||
"dev": true
|
||||
},
|
||||
"indexes-of": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
|
||||
@ -9423,6 +9476,54 @@
|
||||
"detect-newline": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"jest-dom": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/jest-dom/-/jest-dom-3.1.2.tgz",
|
||||
"integrity": "sha512-QpyhZxgx8SkFefBaTD426RDT90dSmoB4nBXIHbQQ/MdrpFl9V2HRmhBYe7p82T22TkHQHbSAmis+il4c1R4cBg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
"css": "^2.2.3",
|
||||
"css.escape": "^1.5.1",
|
||||
"jest-diff": "^24.0.0",
|
||||
"jest-matcher-utils": "^24.0.0",
|
||||
"lodash": "^4.17.11",
|
||||
"pretty-format": "^24.0.0",
|
||||
"redent": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"jest-diff": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.0.0.tgz",
|
||||
"integrity": "sha512-XY5wMpRaTsuMoU+1/B2zQSKQ9RdE9gsLkGydx3nvApeyPijLA8GtEvIcPwISRCer+VDf9W1mStTYYq6fPt8ryA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.0.1",
|
||||
"diff-sequences": "^24.0.0",
|
||||
"jest-get-type": "^24.0.0",
|
||||
"pretty-format": "^24.0.0"
|
||||
}
|
||||
},
|
||||
"jest-get-type": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.0.0.tgz",
|
||||
"integrity": "sha512-z6/Eyf6s9ZDGz7eOvl+fzpuJmN9i0KyTt1no37/dHu8galssxz5ZEgnc1KaV8R31q1khxyhB4ui/X5ZjjPk77w==",
|
||||
"dev": true
|
||||
},
|
||||
"jest-matcher-utils": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-24.0.0.tgz",
|
||||
"integrity": "sha512-LQTDmO+aWRz1Tf9HJg+HlPHhDh1E1c65kVwRFo5mwCVp5aQDzlkz4+vCvXhOKFjitV2f0kMdHxnODrXVoi+rlA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.0.1",
|
||||
"jest-diff": "^24.0.0",
|
||||
"jest-get-type": "^24.0.0",
|
||||
"pretty-format": "^24.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"jest-each": {
|
||||
"version": "23.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.6.0.tgz",
|
||||
@ -12830,6 +12931,24 @@
|
||||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"pretty-format": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.0.0.tgz",
|
||||
"integrity": "sha512-LszZaKG665djUcqg5ZQq+XzezHLKrxsA86ZABTozp+oNhkdqa+tG2dX4qa6ERl5c/sRDrAa3lHmwnvKoP+OG/g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^4.0.0",
|
||||
"ansi-styles": "^3.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.0.0.tgz",
|
||||
"integrity": "sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"prismjs": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
|
||||
@ -13613,6 +13732,33 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-testing-library": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-testing-library/-/react-testing-library-6.0.0.tgz",
|
||||
"integrity": "sha512-h0h+YLe4KWptK6HxOMnoNN4ngu3W8isrwDmHjPC5gxc+nOZOCurOvbKVYCvvuAw91jdO7VZSm/5KR7TxKnz0qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"dom-testing-library": "^3.13.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
|
||||
"integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
|
||||
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
|
||||
@ -13747,6 +13893,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"redent": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz",
|
||||
"integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"indent-string": "^3.0.0",
|
||||
"strip-indent": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"reduce": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/reduce/-/reduce-1.0.1.tgz",
|
||||
@ -15532,6 +15688,12 @@
|
||||
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
|
||||
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
|
||||
},
|
||||
"strip-indent": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz",
|
||||
"integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
|
||||
"dev": true
|
||||
},
|
||||
"strip-json-comments": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
|
||||
@ -16895,6 +17057,12 @@
|
||||
"browser-process-hrtime": "^0.1.2"
|
||||
}
|
||||
},
|
||||
"wait-for-expect": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.1.0.tgz",
|
||||
"integrity": "sha512-vQDokqxyMyknfX3luCDn16bSaRcOyH6gGuUXMIbxBLeTo6nWuEWYqMTT9a+44FmW8c2m6TRWBdNvBBjA1hwEKg==",
|
||||
"dev": true
|
||||
},
|
||||
"walker": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
|
||||
|
||||
@ -87,7 +87,9 @@
|
||||
"chokidar": "^2.0.4",
|
||||
"copy-webpack-plugin": "^4.6.0",
|
||||
"jest": "^23.6.0",
|
||||
"jest-dom": "^3.1.2",
|
||||
"react-test-renderer": "^16.5.2",
|
||||
"react-testing-library": "^6.0.0",
|
||||
"webpack-cli": "^3.1.1"
|
||||
},
|
||||
"repository": {
|
||||
|
||||
@ -18,8 +18,6 @@ import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage';
|
||||
import RedirectHome from '../components/RedirectHome';
|
||||
import { Loader } from '../components/helpers';
|
||||
|
||||
import './show-certification.css';
|
||||
|
||||
const propTypes = {
|
||||
cert: PropTypes.shape({
|
||||
username: PropTypes.string,
|
||||
@ -84,11 +82,7 @@ class ShowCertification extends Component {
|
||||
const { pending, complete, errored } = fetchState;
|
||||
|
||||
if (pending) {
|
||||
return (
|
||||
<div className='loader-wrapper'>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
return <Loader fullScreen={true} />;
|
||||
}
|
||||
|
||||
if (!pending && errored) {
|
||||
|
||||
@ -59,11 +59,7 @@ class ShowFourOhFour extends Component {
|
||||
if (showLoading) {
|
||||
// We don't know if /:maybeUser is a user or not, we will show the loader
|
||||
// until we get a response from the API
|
||||
return (
|
||||
<div className='loader-wrapper'>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
return <Loader fullScreen={true} />;
|
||||
}
|
||||
if (isEmpty(requestedUser)) {
|
||||
// We have a response from the API, but there is nothing in the store
|
||||
|
||||
@ -165,11 +165,7 @@ function ShowSettings(props) {
|
||||
} = props;
|
||||
|
||||
if (showLoading) {
|
||||
return (
|
||||
<div className='loader-wrapper'>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
return <Loader fullScreen={true} />;
|
||||
}
|
||||
|
||||
if (!showLoading && !isSignedIn) {
|
||||
|
||||
@ -89,11 +89,7 @@ class ShowUser extends Component {
|
||||
const { username, isSignedIn, userFetchState, email } = this.props;
|
||||
const { pending, complete, errored } = userFetchState;
|
||||
if (pending && !complete) {
|
||||
return (
|
||||
<div className='loader-wrapper'>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
return <Loader fullScreen={true} />;
|
||||
}
|
||||
|
||||
if ((complete || errored) && !isSignedIn) {
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Spinner from 'react-spinkit';
|
||||
|
||||
function Loader() {
|
||||
return <Spinner name='ball-clip-rotate-multiple' />;
|
||||
import './loader.css';
|
||||
|
||||
function Loader({ fullScreen }) {
|
||||
return (
|
||||
<div className={fullScreen ? 'full-screen-wrapper' : ''}>
|
||||
<Spinner name='ball-clip-rotate-multiple' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loader.displayName = 'Loader';
|
||||
Loader.propTypes = {
|
||||
fullScreen: PropTypes.bool
|
||||
};
|
||||
|
||||
export default Loader;
|
||||
|
||||
33
client/src/components/helpers/Loader.test.js
Normal file
33
client/src/components/helpers/Loader.test.js
Normal file
@ -0,0 +1,33 @@
|
||||
/* global expect */
|
||||
import React from 'react';
|
||||
import { render } from 'react-testing-library';
|
||||
import 'jest-dom/extend-expect';
|
||||
|
||||
import Loader from './Loader';
|
||||
|
||||
describe('<Loader />', () => {
|
||||
it('renders to the DOM', () => {
|
||||
const { container } = render(<Loader />);
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('adds the correct class when given a fullScreen prop', () => {
|
||||
const { container } = render(<Loader fullScreen={true} />);
|
||||
expect(container.firstChild).toHaveClass('full-screen-wrapper');
|
||||
});
|
||||
|
||||
/**
|
||||
* As we only wrap another library Component,
|
||||
* there is nothing much to test except snapshots
|
||||
*/
|
||||
|
||||
it('matches to the default render snapshot', () => {
|
||||
const { container } = render(<Loader />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('matches the fullScreen render snapshot', () => {
|
||||
const { container } = render(<Loader fullScreen={true} />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Loader /> matches the fullScreen render snapshot 1`] = `
|
||||
<div
|
||||
class="full-screen-wrapper"
|
||||
>
|
||||
<div
|
||||
class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
|
||||
>
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<Loader /> matches to the default render snapshot 1`] = `
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
|
||||
>
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,4 +1,4 @@
|
||||
.loader-wrapper {
|
||||
.full-screen-wrapper {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -6,7 +6,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loader-wrapper .sk-spinner {
|
||||
.full-screen-wrapper .sk-spinner {
|
||||
transform: scale(8);
|
||||
color: #006400;
|
||||
}
|
||||
@ -70,11 +70,7 @@ function Welcome({
|
||||
activeDonations
|
||||
}) {
|
||||
if (pending && !complete) {
|
||||
return (
|
||||
<div className='loader-wrapper'>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
return <Loader fullScreen={true} />;
|
||||
}
|
||||
|
||||
if (!isSignedIn) {
|
||||
|
||||
Reference in New Issue
Block a user