settings: fixes settings save issues, adds local settings

common/state.js

@@ -55,6 +55,8 @@ export const getInitialState = (props) => {
     };
   }
 
+  console.log(info);
+
   return {
     id: info.id,
     name: local.name,
@@ -62,7 +64,7 @@ export const getInitialState = (props) => {
     upload_bandwidth: 0,
     download_bandwidth: 0,
 
-    settings_deals_auto_approve: true,
+    settings_deals_auto_approve: local.settings_deals_auto_approve,
 
     settings_hot_enabled: info.defaultConfig.hot.enabled,
     settings_hot_allow_unfreeze: info.defaultConfig.hot.allowUnfreeze,

scenes/SceneSettings.js

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as Actions from "~/common/actions";
-import * as System from "~/components/system";
+import * as React from 'react';
+import * as Actions from '~/common/actions';
+import * as System from '~/components/system';
 
-import { css } from "@emotion/react";
+import { css } from '@emotion/react';
 
-import ScenePage from "~/components/core/ScenePage";
+import ScenePage from '~/components/core/ScenePage';
 
 const STYLES_GROUP = css`
   display: flex;
@@ -30,34 +30,32 @@ const STYLES_RIGHT = css`
 `;
 
 export default class SceneSettings extends React.Component {
+  state = { ...this.props.viewer };
+
   _deferredSave = null;
 
   _handleSave = async () => {
     await Actions.setDefaultConfig({
       config: {
         hot: {
-          enabled: this.props.viewer.settings_cold_enabled,
-          allowUnfreeze: this.props.viewer.settings_hot_allow_unfreeze,
+          enabled: this.state.settings_cold_enabled,
+          allowUnfreeze: this.state.settings_hot_allow_unfreeze,
           ipfs: {
-            addTimeout: this.props.viewer.settings_hot_ipfs_add_timeout,
+            addTimeout: this.state.settings_hot_ipfs_add_timeout,
           },
         },
         cold: {
-          enabled: this.props.viewer.settings_cold_enabled,
+          enabled: this.state.settings_cold_enabled,
           filecoin: {
-            addr: this.props.viewer.settings_cold_default_address,
-            dealMinDuration: this.props.viewer.settings_cold_default_duration,
-            repFactor: this.props.viewer
-              .settings_cold_default_replication_factor,
-            excludedMinersList: this.props.viewer
-              .settings_cold_default_excluded_miners,
-            trustedMinersList: this.props.viewer
-              .settings_cold_default_trusted_miners,
-            maxPrice: this.props.viewer.settings_cold_default_max_price,
+            addr: this.state.settings_cold_default_address,
+            dealMinDuration: this.state.settings_cold_default_duration,
+            repFactor: this.state.settings_cold_default_replication_factor,
+            excludedMinersList: this.state.settings_cold_default_excluded_miners,
+            trustedMinersList: this.state.settings_cold_default_trusted_miners,
+            maxPrice: this.state.settings_cold_default_max_price,
             renew: {
-              enabled: this.props.viewer.settings_cold_default_auto_renew,
-              threshold: this.props.viewer
-                .settings_cold_default_auto_renew_max_price,
+              enabled: this.state.settings_cold_default_auto_renew,
+              threshold: this.state.settings_cold_default_auto_renew_max_price,
             },
           },
         },
@@ -66,24 +64,17 @@ export default class SceneSettings extends React.Component {
   };
 
   _handleChange = (e) => {
-    window.clearTimeout(this._deferredSave);
-    this._deferredSave = null;
-    this.props.onViewerChange(e);
-
-    this._deferredSave = window.setTimeout(async () => {
-      await this._handleSave();
-    }, 2000);
+    this.setState({ [e.target.name]: e.target.value });
   };
 
   render() {
     let addresses = {};
 
-    this.props.viewer.addresses.forEach((a) => {
+    this.state.addresses.forEach((a) => {
       addresses[a.address] = a;
     });
 
-    const currentAddress =
-      addresses[this.props.viewer.settings_cold_default_address];
+    const currentAddress = addresses[this.state.settings_cold_default_address];
 
     return (
       <ScenePage>
@@ -103,7 +94,7 @@ export default class SceneSettings extends React.Component {
             <System.Toggle
               name="settings_deals_auto_approve"
               onChange={this._handleChange}
-              active={this.props.viewer.settings_deals_auto_approve}
+              active={this.state.settings_deals_auto_approve}
             />
           </div>
         </div>
@@ -120,12 +111,12 @@ export default class SceneSettings extends React.Component {
             <System.Toggle
               name="settings_cold_enabled"
               onChange={this._handleChange}
-              active={this.props.viewer.settings_cold_enabled}
+              active={this.state.settings_cold_enabled}
             />
           </div>
         </div>
 
-        {this.props.viewer.settings_cold_enabled ? (
+        {this.state.settings_cold_enabled ? (
           <div css={STYLES_SUBGROUP}>
             <System.SelectMenu
               containerStyle={{ marginTop: 24 }}
@@ -133,12 +124,11 @@ export default class SceneSettings extends React.Component {
               description="Default Filecoin address settings description."
               tooltip="Placeholder."
               name="settings_cold_default_address"
-              value={this.props.viewer.settings_cold_default_address}
+              value={this.state.settings_cold_default_address}
               category="address"
               onChange={this._handleChange}
-              options={this.props.viewer.addresses}
-            >
-              {currentAddress ? currentAddress.name : "None"}
+              options={this.state.addresses}>
+              {currentAddress ? currentAddress.name : 'None'}
             </System.SelectMenu>
 
             <System.Input
@@ -148,7 +138,7 @@ export default class SceneSettings extends React.Component {
               tooltip="Placeholder."
               name="settings_cold_default_duration"
               type="number"
-              value={this.props.viewer.settings_cold_default_duration}
+              value={this.state.settings_cold_default_duration}
               placeholder="Type in epochs (~25 seconds)"
               onChange={this._handleChange}
             />
@@ -159,7 +149,7 @@ export default class SceneSettings extends React.Component {
               description="Default Filecoin replication factor settings description."
               tooltip="Placeholder."
               name="settings_cold_default_replication_factor"
-              value={this.props.viewer.settings_cold_default_replication_factor}
+              value={this.state.settings_cold_default_replication_factor}
               placeholder="Type in amount of miners"
               onChange={this._handleChange}
             />
@@ -170,7 +160,7 @@ export default class SceneSettings extends React.Component {
               description="Set the maximum Filecoin price you're willing to pay."
               tooltip="Placeholder."
               name="settings_cold_default_max_price"
-              value={this.props.viewer.settings_cold_default_max_price}
+              value={this.state.settings_cold_default_max_price}
               placeholder="Type in amount of Filecoin"
               onChange={this._handleChange}
             />
@@ -178,9 +168,8 @@ export default class SceneSettings extends React.Component {
             <System.CheckBox
               style={{ marginTop: 48 }}
               name="settings_cold_default_auto_renew"
-              value={this.props.viewer.settings_cold_default_auto_renew}
-              onChange={this._handleChange}
-            >
+              value={this.state.settings_cold_default_auto_renew}
+              onChange={this._handleChange}>
               Enable auto renew for Filecoin Network deals.
             </System.CheckBox>
 
@@ -190,12 +179,13 @@ export default class SceneSettings extends React.Component {
               description="Set the maximum Filecoin price you're willing to pay for auto renew."
               tooltip="Placeholder."
               name="settings_cold_default_auto_renew_max_price"
-              value={
-                this.props.viewer.settings_cold_default_auto_renew_max_price
-              }
+              value={this.state.settings_cold_default_auto_renew_max_price}
               placeholder="Type in amount of Filecoin"
               onChange={this._handleChange}
             />
+            <div style={{ marginTop: 32 }}>
+              <System.ButtonPrimary onClick={this._handleSave}>Save</System.ButtonPrimary>
+            </div>
           </div>
         ) : null}
 
@@ -211,19 +201,18 @@ export default class SceneSettings extends React.Component {
             <System.Toggle
               name="settings_hot_enabled"
               onChange={this._handleChange}
-              active={this.props.viewer.settings_hot_enabled}
+              active={this.state.settings_hot_enabled}
             />
           </div>
         </div>
 
-        {this.props.viewer.settings_hot_enabled ? (
+        {this.state.settings_hot_enabled ? (
           <div css={STYLES_SUBGROUP}>
             <System.CheckBox
               style={{ marginTop: 48 }}
               name="settings_hot_allow_unfreeze"
-              value={this.props.viewer.settings_hot_allow_unfreeze}
-              onChange={this._handleChange}
-            >
+              value={this.state.settings_hot_allow_unfreeze}
+              onChange={this._handleChange}>
               IPFS allow unfreeze setting description.
             </System.CheckBox>
 
@@ -233,10 +222,14 @@ export default class SceneSettings extends React.Component {
               description="Add IPFS timeout setting description."
               tooltip="Placeholder."
               name="settings_hot_ipfs_add_timeout"
-              value={this.props.viewer.settings_hot_ipfs_add_timeout}
+              value={this.state.settings_hot_ipfs_add_timeout}
               placeholder="Type in seconds"
               onChange={this._handleChange}
             />
+
+            <div style={{ marginTop: 32 }}>
+              <System.ButtonPrimary onClick={this._handleSave}>Save</System.ButtonPrimary>
+            </div>
           </div>
         ) : null}
       </ScenePage>

server.js

@@ -135,7 +135,7 @@ app.prepare().then(async () => {
       // TODO(jim): Move this to postgres later.
       if (!FS.existsSync('./.data/local-settings.json')) {
         const localSettingsSchema = {
-          local: { photo: null, name: `node-${uuid()}` },
+          local: { photo: null, name: `node-${uuid()}`, settings_deals_auto_approve: false },
         };
 
         FS.writeFileSync('./.data/local-settings.json', JSON.stringify(localSettingsSchema));