added active state for saving button while waiting for pins (#26)

Author: dholms

src/components/Main.js

@@ -27,6 +27,7 @@ class Main extends React.Component {
       codeStyle: "darcula"
     },
     justSaved: false,
+    saving: false,
     justLoaded: false,
     error: null
   };
@@ -83,17 +84,19 @@ class Main extends React.Component {
     evt.preventDefault();
     const { preferences } = this.state;
     if (preferences) {
+      this.setState({ saving: true });
       let cid;
       try {
         cid = await savePreferences(preferences);
       } catch (error) {
-        this.setState({ error: error.toString() });
+        this.setState({ error: error.toString(), saving: false });
         return;
       }
       localStorage.setItem("preferenceCID", cid);
       this.setState({
         cid,
         justSaved: true,
+        saving: false,
         ipfsLoaded: true
       });
     }
@@ -119,6 +122,7 @@ class Main extends React.Component {
               cid={this.state.cid}
               preferences={this.state.preferences}
               justSaved={this.state.justSaved}
+              saving={this.state.saving}
               justLoaded={this.state.justLoaded}
               onCIDChange={this.handleCIDChange}
               onPrefChange={this.handlePrefChange}

src/components/PreferenceForm.js

@@ -26,7 +26,7 @@ class PreferenceForm extends React.Component {
   };
 
   render() {
-    const { preferences, justSaved, justLoaded, classes } = this.props;
+    const { preferences, justSaved, saving, justLoaded, classes } = this.props;
 
     return (
       <Paper className={classes.root}>
@@ -97,8 +97,10 @@ class PreferenceForm extends React.Component {
           <SubmitButton
             textNormal="Save"
             textSubmitted="Saved"
+            textActive="Saving..."
             icon={<SaveIcon />}
             submitted={justSaved}
+            active={saving}
           />
         </form>
       </Paper>
@@ -110,6 +112,7 @@ PreferenceForm.propTypes = {
   cid: PropTypes.string.isRequired,
   preferences: PrefPropType.isRequired,
   justSaved: PropTypes.bool.isRequired,
+  saving: PropTypes.bool.isRequired,
   justLoaded: PropTypes.bool.isRequired,
   onCIDChange: PropTypes.func.isRequired,
   onPrefChange: PropTypes.func.isRequired,

src/components/SubmitButton.js

@@ -5,9 +5,17 @@ import Button from "@material-ui/core/Button";
 import CheckIcon from "@material-ui/icons/Check";
 
 const SubmitButton = props => {
-  const { submitted, textNormal, textSubmitted } = props;
-  const text = submitted ? textSubmitted : textNormal;
-  const icon = submitted ? <CheckIcon /> : props.icon;
+  const { submitted, active, textNormal, textSubmitted, textActive } = props;
+  let text, icon;
+  if (active) {
+    text = textActive;
+  } else if (submitted) {
+    text = textSubmitted;
+    icon = <CheckIcon />;
+  } else {
+    text = textNormal;
+    icon = props.icon;
+  }
 
   return (
     <Button
@@ -26,8 +34,10 @@ const SubmitButton = props => {
 SubmitButton.propTypes = {
   textNormal: PropTypes.string.isRequired,
   textSubmitted: PropTypes.string.isRequired,
+  textActive: PropTypes.string,
   icon: PropTypes.element,
   submitted: PropTypes.bool,
+  active: PropTypes.bool,
   classes: PropTypes.objectOf(PropTypes.string)
 };