Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Add search spinner

  • Loading branch information...
brtjkzl committed Jan 24, 2019
1 parent f1e37d0 commit ee971fb3a6ee5c6f19103d8220ce8644ee7fcb34
@@ -0,0 +1,19 @@
// @flow
import * as React from "react";
import Spinkit from "react-spinkit";
import "./spinner.scss";

const Spinner = () => {
return (
<div className="has-spinner">
<Spinkit
name="pacman"
fadeIn="none"
color="#394263"
overrideSpinnerClassName="spinner"
/>
</div>
);
};

export default Spinner;
@@ -0,0 +1,7 @@
@import "styles";

.has-spinner {
display: flex;
justify-content: center;
margin-top: $unit-spacing;
}
@@ -6,7 +6,7 @@ type Props = {
};

const StickyFooterWrapper = ({ children }: Props) => (
<div className="sticky-footer-wrapper">{children}</div>
<div className="has-sticky-footer">{children}</div>
);

export default StickyFooterWrapper;
@@ -2,7 +2,7 @@
margin-top: auto;
}

.sticky-footer-wrapper {
.has-sticky-footer {
display: flex;
min-height: 100vh;
flex-direction: column;
@@ -1,20 +1,27 @@
// @flow
import * as React from "react";
import { connect } from "react-redux";
import Spinner from "ui/components/Spinner";
import SearchResults from "./SearchResults";
import GamesCollection from "./GamesCollection";

const mapStateToProps = ({ Auth, Search }) => ({
userSignedIn: Auth.userSignedIn,
haveSearchResults: !!Search.results.length
haveSearchResults: Boolean(Search.results.length),
isSearching: Search.isSearching
});

type Props = {
userSignedIn: boolean,
haveSearchResults: boolean
haveSearchResults: boolean,
isSearching: boolean
};

const HomePage = ({ userSignedIn, haveSearchResults }: Props) =>
haveSearchResults ? <SearchResults /> : userSignedIn && <GamesCollection />;
const HomePage = ({ userSignedIn, haveSearchResults, isSearching }: Props) => {
if (isSearching) return <Spinner />;
if (haveSearchResults) return <SearchResults />;
if (userSignedIn) return <GamesCollection />;
return null;
};

export default connect(mapStateToProps)(HomePage);
@@ -33,6 +33,7 @@
"react-dom": "^16.7.0-alpha.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-spinkit": "^3.0.0",
"react-svg-loader": "^2.1.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
@@ -2023,7 +2023,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"

classnames@^2.2.6:
classnames@^2.2.3, classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"

@@ -5227,6 +5227,11 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
emojis-list "^2.0.0"
json5 "^0.5.0"

loaders.css@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/loaders.css/-/loaders.css-0.1.2.tgz#3a9fb43726c73334a38142af9d0629019b658743"
integrity sha1-Op+0NybHMzSjgUKvnQYpAZtlh0M=

locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6956,7 +6961,7 @@ prompts@^0.1.9:
kleur "^2.0.1"
sisteransi "^0.1.1"

prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@@ -7146,6 +7151,16 @@ react-router@^4.3.1:
prop-types "^15.6.1"
warning "^4.0.1"

react-spinkit@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-spinkit/-/react-spinkit-3.0.0.tgz#31fdaf4e18177766c57d1b1f3330290f8492a85a"
integrity sha1-Mf2vThgXd2bFfRsfMzApD4SSqFo=
dependencies:
classnames "^2.2.3"
loaders.css "^0.1.2"
object-assign "^4.1.0"
prop-types "^15.5.8"

react-svg-core@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-svg-core/-/react-svg-core-2.1.0.tgz#3700322af70117c91f83f18febb481128de3cfbb"

0 comments on commit ee971fb

Please sign in to comment.
You can’t perform that action at this time.