added basic loading spinner to sample app

package.json

@@ -3,27 +3,28 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "cross-env": "^5.1.4",
-    "dateformat": "^2.0.0",
-    "react-scripts": "1.1.4",
-    "cpy-cli": "^1.0.1"
+    "cpy-cli": "^2.0.0",
+    "cross-env": "^5.2.0",
+    "dateformat": "^3.0.3",
+    "react-scripts": "^2.0.0-next.a671462c"
   },
   "dependencies": {
-    "google-maps-react": "^1.1.2",
+    "@chevtek/react-spinners": "^1.0.5",
+    "google-maps-react": "^2.0.2",
     "immutable": "^3.8.2",
-    "kentico-cloud-delivery": "^4.0.2",
-    "lodash": "^4.17.4",
+    "kentico-cloud-delivery": "^4.3.0",
+    "lodash": "^4.17.10",
     "qs": "^6.5.2",
-    "react": "^15.3.1",
-    "react-cookie": "^2.2.0",
-    "react-dom": "^15.3.1",
-    "react-router-dom": "^4.2.2",
-    "react-scroll": "^1.6.4",
+    "react": "^16.4.2",
+    "react-cookie": "^3.0.4",
+    "react-dom": "^16.4.2",
+    "react-router-dom": "^4.3.1",
+    "react-scroll": "^1.7.10",
     "react-translate": "^6.0.0",
-    "rxjs": "^6.1.0",
-    "twitter-widgets": "^1.0.0",
-    "universal-cookie": "^2.2.0",
-    "validator": "^10.4.0"
+    "rxjs": "^6.2.2",
+    "twitter-widgets": "^2.0.0",
+    "universal-cookie": "^3.0.4",
+    "validator": "^10.7.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -33,5 +34,17 @@
   },
   "eslintConfig": {
     "extends": "react-app"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">0.25%",
+      "not op_mini all",
+      "ie 11"
+    ]
   }
 }

src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { withCookies } from 'react-cookie';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import qs from 'qs';
+import { Spinner } from '@chevtek/react-spinners';
 
 import Header from './Components/Header.js';
 import Footer from './Components/Footer.js'
@@ -30,6 +31,11 @@ class App extends Component {
     const infoMessage = qs.parse(location.search.slice(1)).infoMessage;
     return (
       <div className="application-content">
+        <Spinner name="apiSpinner">
+          <div className="loader-bg">
+            <div className="loader"></div>
+          </div>
+        </Spinner>
         <Header language={language} changeLanguage={changeLanguage} message={infoMessage} />
         <Switch>
           <Route path="/:lang?/store" render={(matchProps) => <StorePage {...matchProps} language={language} />} />
@@ -41,7 +47,7 @@ class App extends Component {
           <Route path="/:lang?/contacts" render={() => <ContactsPage language={language} />} />
           <Route exact path="/:lang?" render={(matchProps) => <HomePage  {...matchProps} language={language} />} />
           <Route path="/:lang?/:urlSlug?" render={(matchProps) => <AboutPage {...matchProps} language={language} />} />
-          <Route path="*" render={(props) => { return <Redirect to="/" push /> }} />
+          <Route path="*" render={() => { return <Redirect to="/" push /> }} />
         </Switch>
         <Footer language={language} />
       </div>

src/Components/Brewers.js

@@ -30,7 +30,8 @@ class Brewers extends Component {
     BrewerStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  // Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
       BrewerStore.provideBrewers(nextProps.language);
     }

src/Components/Coffees.js

@@ -28,7 +28,8 @@ class Coffees extends Component {
     CoffeeStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  // Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
       CoffeeStore.provideCoffees(nextProps.language);
     }

src/Components/ContactMap.js

@@ -25,7 +25,8 @@ export class MapContainer extends Component {
         this.focusOnLocation = this.focusOnLocation.bind(this);
     }
 
-    componentWillUpdate(nextProps, nextState) {
+    //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+    UNSAFE_componentWillUpdate(nextProps, nextState) {
         if (!nextProps.loaded) {
             return;
         }
@@ -35,7 +36,8 @@ export class MapContainer extends Component {
         }
     }
 
-    componentWillReceiveProps(nextProps){
+    //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+    UNSAFE_componentWillReceiveProps(nextProps) {
         this.focusOnAddress(nextProps.focusOnAddress);
     }
 
@@ -138,7 +140,8 @@ export class MapContainer extends Component {
 }
 
 class MapScroller extends Component {
-    componentWillUpdate(nextProps) {
+    //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+    UNSAFE_componentWillUpdate(nextProps) {
         if (nextProps.map && nextProps.scrollTo) {
             let scrollAnchor = ReactDOM.findDOMNode(this);
             Scroll.animateScroll.scrollTo(scrollAnchor.offsetTop)
@@ -147,7 +150,7 @@ class MapScroller extends Component {
         }
     }
     render() {
-        return <span style={{width: '0px', height: '0px'}}/>;
+        return <span style={{ width: '0px', height: '0px' }} />;
     }
 }
 

src/Components/Header.js

@@ -46,13 +46,17 @@ const Header = (props) => {
             <nav>
               <ul className="dropdown-items-list dropdown-desktop-visible">
                 <li>
-                  <a onClick={() =>
-                    window.location.pathname.endsWith('acerca-de') ? props.changeLanguage(englishCode, "/about-us") : props.changeLanguage(englishCode)
+                  <a href="/#" onClick={(e) => {
+                      e.preventDefault();
+                      window.location.pathname.endsWith('acerca-de') ? props.changeLanguage(englishCode, "/about-us") : props.changeLanguage(englishCode);
+                    }
                   }>English</a>
                 </li>
                 <li>
-                  <a onClick={() =>
-                    window.location.pathname.endsWith('about-us') ? props.changeLanguage(spanishCode, "/acerca-de") : props.changeLanguage(spanishCode)
+                  <a href="/#" onClick={(e) => {
+                      e.preventDefault();
+                      window.location.pathname.endsWith('about-us') ? props.changeLanguage(spanishCode, "/acerca-de") : props.changeLanguage(spanishCode);
+                    }
                   }>Español</a>
                 </li>
               </ul>

src/Components/LatestArticles.js

@@ -25,17 +25,18 @@ class LatestArticles extends Component {
 
   componentDidMount() {
     ArticleStore.addChangeListener(this.onChange);
-    ArticleStore.provideArticles(articleCount, this.props.language);
+    ArticleStore.provideArticles(this.props.language);
   }
 
   componentWillUnmount() {
     ArticleStore.removeChangeListener(this.onChange);
     ArticleStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
-      ArticleStore.provideArticles(articleCount, nextProps.language);
+      ArticleStore.provideArticles(nextProps.language);
       dateFormat.i18n = dateFormats[nextProps.language] || dateFormats[0];
     }
   }

src/Components/LowerCaseUrlLink.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom'
 
 const LowerCaseUrlLink = (props) => {
+    if (/^https?:\/\//.test(props.to) || /^mailto:/.test(props.to) ) {
+        return <a href={props.to.toLowerCase()} {...props}>{props.children}</a>
+    }
     return (
         <Link {...props} to={props.to.toLowerCase()}/>
     );

src/Components/TasteOurCoffee.js

@@ -27,7 +27,8 @@ class TasteOurCoffee extends Component {
     CafeStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
       CafeStore.provideCompanyCafes(nextProps.language);
     }

src/Pages/About.js

@@ -26,7 +26,8 @@ class About extends Component {
     FactStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
       FactStore.provideFacts(nextProps.language, nextProps.match.params.urlSlug);
     }

src/Pages/Article.js

@@ -31,7 +31,8 @@ class Article extends Component {
     ArticleStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
       ArticleStore.provideArticle(this.props.match.params.articleId, nextProps.language);
       dateFormat.i18n = dateFormats[nextProps.language] || dateFormats[0];

src/Pages/Articles.js

@@ -25,17 +25,18 @@ class Articles extends Component {
 
   componentDidMount() {
     ArticleStore.addChangeListener(this.onChange);
-    ArticleStore.provideArticles(articleCount, this.props.language);
+    ArticleStore.provideArticles(this.props.language);
   }
 
   componentWillUnmount() {
     ArticleStore.removeChangeListener(this.onChange);
     ArticleStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
-      ArticleStore.provideArticles(articleCount, nextProps.language);
+      ArticleStore.provideArticles(nextProps.language);
       dateFormat.i18n = dateFormats[nextProps.language] || dateFormats[0];
     }
   }

src/Pages/Brewer.js

@@ -19,17 +19,18 @@ class Brewer extends Component {
 
   componentDidMount() {
     BrewerStore.addChangeListener(this.onChange);
-    BrewerStore.provideBrewer(this.props.match.params.brewerSlug, this.props.language);
+    BrewerStore.provideBrewer(this.props.language);
   }
 
   componentWillUnmount() {
     BrewerStore.removeChangeListener(this.onChange);
     BrewerStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language || this.props.match.params.brewerSlug !== nextProps.match.params.brewerSlug) {
-      BrewerStore.provideBrewer(this.props.match.params.brewerSlug, nextProps.language);
+      BrewerStore.provideBrewer(nextProps.language);
     }
   }
 

src/Pages/Cafes.js

@@ -30,7 +30,8 @@ class Cafes extends Component {
     CafeStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language) {
       CafeStore.provideCompanyCafes(nextProps.language);
       CafeStore.providePartnerCafes(nextProps.language);

src/Pages/Coffee.js

@@ -18,17 +18,18 @@ class Coffee extends Component {
 
   componentDidMount() {
     CoffeeStore.addChangeListener(this.onChange);
-    CoffeeStore.provideCoffee(this.props.match.params.coffeeSlug, this.props.language);
+    CoffeeStore.provideCoffee( this.props.language);
   }
 
   componentWillUnmount() {
     CoffeeStore.removeChangeListener(this.onChange);
     CoffeeStore.unsubscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.language !== nextProps.language || this.props.match.params.coffeeSlug !== nextProps.match.params.coffeeSlug) {
-      CoffeeStore.provideCoffee(nextProps.match.params.coffeeSlug, nextProps.language);
+      CoffeeStore.provideCoffee(nextProps.language);
     }
   }
 

src/Pages/Contacts.js

@@ -29,7 +29,8 @@ class Contacts extends Component {
         CafeStore.unsubscribe();
     }
 
-    componentWillReceiveProps(nextProps) {
+    //TODO: Method will be removed in React 17, will need to be rewritten if still required.
+    UNSAFE_componentWillReceiveProps(nextProps) {
         if (this.props.language !== nextProps.language) {
             CafeStore.provideCompanyCafes(nextProps.language);
             this.selectAddress(undefined);
@@ -71,7 +72,11 @@ class Contacts extends Component {
                         <li>{model.phone}</li>
                         <li><a href={"mailto:" + model.email} target="_top">{model.email}</a></li>
                         <li>
-                            <a onClick={() => this.selectAddress(model.dataAddress)} data-address={model.dataAddress} className="js-scroll-to-map">{model.dataAddress},<br />
+                            <a href="/#" onClick={(e) => {
+                                e.preventDefault();
+                                this.selectAddress(model.dataAddress)
+                            }}
+                            data-address={model.dataAddress} className="js-scroll-to-map">{model.dataAddress},<br />
                                 {model.zipCode}, {model.countryWithState}<br />
                             </a>
                         </li>
@@ -86,7 +91,7 @@ class Contacts extends Component {
                     <div className="cafe-tile-content">
                         <h3 className="cafe-tile-name">{model.name}</h3>
                         <address className="cafe-tile-address">
-                            <a name={model.name} className="cafe-tile-address-anchor">
+                            <a href="/#" name={model.name} className="cafe-tile-address-anchor" onClick={(e) => e.preventDefault()}>
                                 {model.street}, {model.city}<br />{model.zipCode}, {model.countryWithState}
                             </a>
                         </address>

src/Stores/Article.js

@@ -3,6 +3,7 @@ import { SortOrder } from 'kentico-cloud-delivery';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { initLanguageCodeObject, defaultLanguage } from '../Utilities/LanguageCodes';
+import { spinnerService } from '@chevtek/react-spinners';
 
 let unsubscribe = new Subject();
 const resetStore = () => ({
@@ -34,6 +35,10 @@ class Article {
       query.languageParameter(language);
     }
 
+    if (spinnerService.isShowing('apiSpinner') === false) {
+      spinnerService.show('apiSpinner');
+    }
+
     query.getObservable()
       .pipe(takeUntil(unsubscribe))
       .subscribe(response => {
@@ -48,7 +53,7 @@ class Article {
       })
   }
 
-  provideArticles(count, language) {
+  provideArticles(language) {
 
     let query = Client.items()
       .type('article')
@@ -58,6 +63,10 @@ class Article {
       query.languageParameter(language);
     }
 
+    if (spinnerService.isShowing('apiSpinner') === false) {
+      spinnerService.show('apiSpinner');
+    }
+
     query.getObservable()
       .pipe(takeUntil(unsubscribe))
       .subscribe(response => {
@@ -72,15 +81,16 @@ class Article {
 
   // Methods
   getArticle(articleId, language) {
+    spinnerService.hide('apiSpinner');
     if (language) {
       return articleDetails[language][articleId];
     } else {
       return articleDetails[defaultLanguage][articleId];
     }
-
   }
 
   getArticles(count, language) {
+    spinnerService.hide('apiSpinner');
     if (language) {
       return articleList[language].slice(0, count);
     }