handle error and slow connections

iamtekeste · Jun 25, 2017 · 28f45e4 · 28f45e4
1 parent 5e46066
commit 28f45e4
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 31 deletions.
diff --git a/src/components/AutoSuggest.js b/src/components/AutoSuggest.js
@@ -21,6 +21,17 @@ export default class Algo extends Component {
       },
     });
   }
+  static generateVariants(variants) {
+    const fontVariants = variants.map((variant, vindex) => (
+      <option
+        value={JSON.stringify(variant)}
+        key={vindex}
+      >
+        {variant.weight} {variant.style}
+      </option>
+    ));
+    return fontVariants;
+  }
   static formatVariants(variants) {
     const formatted = variants.map((variant) => {
       const fontInfo = {};
@@ -40,6 +51,8 @@ export default class Algo extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isLoading: true,
+      errorHappend: false,
       value: '',
       suggestions: [{ family: 'Loading' }],
       selectedFontVariants: [],
@@ -76,7 +89,15 @@ export default class Algo extends Component {
   }
   updateSuggestions(searchObject) {
     index.search(searchObject.value, (err, content) => {
+      if (err) {
+        this.setState({
+          errorHappend: true,
+          isLoading: false,
+        });
+        return;
+      }
       this.setState({
+        isLoading: false,
         suggestions: content.hits,
       });
     });
@@ -96,15 +117,8 @@ export default class Algo extends Component {
     this.props.updateFontSize(santizedFontSize);
   }
   render() {
-    const { value, suggestions, selectedFontVariants, fontSize } = this.state;
-    const variants = selectedFontVariants.map((variant, vindex) => (
-      <option
-        value={JSON.stringify(variant)}
-        key={vindex}
-      >
-        {variant.weight} {variant.style}
-      </option>
-    ));
+    const { isLoading, errorHappend, value, suggestions, selectedFontVariants, fontSize } = this.state;
+    const variants = Algo.generateVariants(selectedFontVariants);
 
     // only display the style selector only if they have selected a font
     let selectVariants = '';
@@ -119,7 +133,7 @@ export default class Algo extends Component {
       },
     ];
     defaultValues = defaultValues.map(val => (
-      <option value={JSON.stringify(val)} key={val.weight+val.style}>{val.weight}</option>
+      <option value={JSON.stringify(val)} key={val.weight + val.style}>{val.weight}</option>
     ));
     selectVariants =
       (
@@ -131,25 +145,31 @@ export default class Algo extends Component {
 
     return (
       <div>
-        <Autosuggest
-          suggestions={suggestions}
-          onSuggestionsFetchRequested={this.updateSuggestions}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          onSuggestionSelected={this.onSuggestionSelected}
-          getSuggestionValue={typeface => typeface.family}
-          shouldRenderSuggestions={() => true}
-          highlightFirstSuggestion
-          renderSuggestion={typeface => (
-            <div>
-              <div>{typeface.family}</div>
-            </div>
-          )}
-          inputProps={{
-            placeholder: 'Search Google fonts',
-            value,
-            onChange: this.handleChange,
-          }}
-        />
+        { errorHappend ? <div className="error">Refresh the page.</div> : <div className="no-error">
+          {
+            isLoading ? <p>Loading Fonts...</p> :
+            <Autosuggest
+              suggestions={suggestions}
+              onSuggestionsFetchRequested={this.updateSuggestions}
+              onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+              onSuggestionSelected={this.onSuggestionSelected}
+              getSuggestionValue={typeface => typeface.family}
+              shouldRenderSuggestions={() => true}
+              highlightFirstSuggestion
+              renderSuggestion={typeface => (
+                <div>
+                  <div>{typeface.family}</div>
+                </div>
+              )}
+              inputProps={{
+                placeholder: 'Search Google fonts',
+                value,
+                onChange: this.handleChange,
+              }}
+            />
+          }
+        </div>
+         }
         <div className="variants">
           {selectVariants}
         </div>

diff --git a/tasks.todo b/tasks.todo
@@ -6,15 +6,16 @@
 ✔ Work on font size @done(2017-06-18 15:27)
 ✔ Work on color picker @done(2017-06-19 20:55)
 ✔ Work on backgroundColor @done(2017-06-20 21:22)
+✔ Handle slow or no connection and it SHOULD NOT FAIL / it should say no connection or sth @done(2017-06-24 19:26)
 ☐ Style font selector:
     ✔ Style the text input @done(2017-06-18 15:27) @project(☐ Style font selector)
     ✔ Style the autocomplete @done(2017-06-18 15:27) @project(☐ Style font selector)
     ☐ Make the AutoSuggest scrollable
     ☐ Give credit to Algolia <3
 ✔ Style font style @done(2017-06-18 15:27)
 ✔ Style font size @done(2017-06-18 15:27)
-☐ Style color picker
-☐ Style backgroundColor picker
+✔ Style color picker @done(2017-06-21 20:50)
+✔ Style backgroundColor picker @done(2017-06-21 20:50)
 ☐ Add clear button to font search (x)
 ☐ Make look decent on mobile
 ☐ Add more colors to github-picker from coolors