Merge pull request #2958 from urbit/feat/spa-bugs

spa: fix bugs in chat and groups, fix metadata reducer

pkg/interface/src/api/chat.js

@@ -1,4 +1,5 @@
 import BaseApi from './base';
+import { uuid } from '../lib/util';
 
 export default class ChatApi {
   constructor(ship, channel, store) {

pkg/interface/src/api/groups.js

@@ -21,7 +21,7 @@ export default class GroupsApi {
 
     this.group = {
       add: helper.groupAdd.bind(helper),
-      delete: helper.groupRemove.bind(helper)
+      remove: helper.groupRemove.bind(helper)
     };
 
     this.invite = {

pkg/interface/src/apps/chat/app.js

@@ -310,7 +310,7 @@ export default class ChatApp extends React.Component {
               >
                 <MemberScreen
                   {...props}
-                  api={api}
+                  api={this.api}
                   station={station}
                   association={association}
                   permission={permission}
@@ -361,7 +361,7 @@ export default class ChatApp extends React.Component {
                   permissions={state.permissions || {}}
                   contacts={state.contacts || {}}
                   associations={associations.contacts}
-                  api={api}
+                  api={this.api}
                   inbox={state.inbox}
                   popout={popout}
                   sidebarShown={state.sidebarShown}

pkg/interface/src/apps/chat/components/chat.js

@@ -493,9 +493,9 @@ ref={(e) => {
           style={{ height: 48 }}
         >
           <SidebarSwitcher
-            sidebarShown={this.props.sidebarShown}
-            popout={this.props.popout}
-            api={this.props.api}
+            sidebarShown={props.sidebarShown}
+            popout={props.popout}
+            api={props.api}
           />
           <Link to={'/~chat/' + isinPopout + 'room' + props.station}
           className="pt2 white-d"
@@ -513,7 +513,7 @@ ref={(e) => {
             station={props.station}
             numPeers={group.length}
             isOwner={deSig(props.match.params.ship) === window.ship}
-            popout={this.props.popout}
+            popout={props.popout}
             api={props.api}
           />
         </div>

pkg/interface/src/apps/chat/components/settings.js

@@ -108,7 +108,7 @@ export class SettingsScreen extends Component {
 
       if (chatOwner) {
         this.setState({ awaiting: true, type: 'Editing chat...' }, (() => {
-          props.api.metadataAdd(
+          props.api.metadata.add(
             association['app-path'],
             association['group-path'],
             association.metadata.title,
@@ -272,16 +272,16 @@ export class SettingsScreen extends Component {
           <input
             className={'f8 ba b--gray3 b--gray2-d bg-gray0-d white-d ' +
             'focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3'}
-            value={this.state.title}
+            value={state.title}
             disabled={!chatOwner}
             onChange={this.changeTitle}
             onBlur={() => {
               if (chatOwner) {
                 this.setState({ awaiting: true, type: 'Editing chat...' }, (() => {
-                  props.api.metadataAdd(
+                  props.api.metadata.add(
                     association['app-path'],
                     association['group-path'],
-                    this.state.title,
+                    state.title,
                     association.metadata.description,
                     association.metadata['date-created'],
                     uxToHex(association.metadata.color)
@@ -301,17 +301,17 @@ export class SettingsScreen extends Component {
             <input
               className={'f8 ba b--gray3 b--gray2-d bg-gray0-d white-d ' +
                 'focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3'}
-              value={this.state.description}
+              value={state.description}
               disabled={!chatOwner}
               onChange={this.changeDescription}
               onBlur={() => {
                 if (chatOwner) {
                   this.setState({ awaiting: true, type: 'Editing chat...' }, (() => {
-                    props.api.metadataAdd(
+                    props.api.metadata.add(
                       association['app-path'],
                       association['group-path'],
                       association.metadata.title,
-                      this.state.description,
+                      state.description,
                       association.metadata['date-created'],
                       uxToHex(association.metadata.color)
                     ).then(() => {
@@ -339,7 +339,7 @@ export class SettingsScreen extends Component {
             <input
               className={'pl7 f8 ba b--gray3 b--gray2-d bg-gray0-d white-d ' +
                 'focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3'}
-              value={this.state.color}
+              value={state.color}
               disabled={!chatOwner}
               onChange={this.changeColor}
               onBlur={this.submitColor}
@@ -400,7 +400,9 @@ export class SettingsScreen extends Component {
             />
           </div>
           <div className="w-100 pl3 mt4 cf">
-            <Spinner awaiting={this.state.awaiting} classes="absolute right-2 bottom-2 ba pa2 b--gray1-d" text={this.state.type} />
+            <Spinner awaiting={state.awaiting}
+                     classes="absolute right-2 bottom-2 ba pa2 b--gray1-d"
+                     text={state.type} />
           </div>
         </div>
       );
@@ -477,7 +479,9 @@ export class SettingsScreen extends Component {
           {this.renderGroupify()}
           {this.renderDelete()}
           {this.renderMetadataSettings()}
-          <Spinner awaiting={this.state.awaiting} classes="absolute right-2 bottom-2 ba pa2 b--gray1-d" text={this.state.type} />
+          <Spinner awaiting={state.awaiting}
+                   classes="absolute right-2 bottom-2 ba pa2 b--gray1-d"
+                   text={state.type} />
         </div>
       </div>
     );

pkg/interface/src/apps/groups/components/lib/contact-card.js

@@ -141,12 +141,10 @@ export class ContactCard extends Component {
               type: 'Saving to group'
             },
             () => {
-              props.api
-                .contactEdit(props.path, ship, {
-                  avatar: {
-                    url: state.avatarToSet
-                  }
-                })
+              props.api.contactHook.edit(props.path, ship, {
+                avatar: {
+                  url: state.avatarToSet
+                }})
                 .then(() => {
                   this.setState({ awaiting: false });
                 });
@@ -163,8 +161,8 @@ export class ContactCard extends Component {
 
         if (hexTest && hexTest[1] !== currentColor && !props.share) {
           this.setState({ awaiting: true, type: 'Saving to group' }, () => {
-            props.api
-              .contactEdit(props.path, `~${props.ship}`, { color: hexTest[1] })
+            props.api.contactHook.edit(
+              props.path, `~${props.ship}`, { color: hexTest[1] })
               .then(() => {
                 this.setState({ awaiting: false });
               });
@@ -182,8 +180,8 @@ export class ContactCard extends Component {
         const emailTestResult = emailTest.exec(state.emailToSet);
         if (emailTestResult) {
           this.setState({ awaiting: true, type: 'Saving to group' }, () => {
-            props.api
-              .contactEdit(props.path, ship, { email: state.emailToSet })
+            props.api.contactHook.edit(
+              props.path, ship, { email: state.emailToSet })
               .then(() => {
                 this.setState({ awaiting: false });
               });
@@ -199,8 +197,8 @@ export class ContactCard extends Component {
           return false;
         }
         this.setState({ awaiting: true, type: 'Saving to group' }, () => {
-          props.api
-            .contactEdit(props.path, ship, { nickname: state.nickNameToSet })
+          props.api.contactHook.edit(
+            props.path, ship, { nickname: state.nickNameToSet })
             .then(() => {
               this.setState({ awaiting: false });
             });
@@ -216,8 +214,8 @@ export class ContactCard extends Component {
           return false;
         }
         this.setState({ awaiting: true, type: 'Saving to group' }, () => {
-          props.api
-            .contactEdit(props.path, ship, { notes: state.notesToSet })
+          props.api.contactHook.edit(
+            props.path, ship, { notes: state.notesToSet })
             .then(() => {
               this.setState({ awaiting: false });
             });
@@ -234,8 +232,8 @@ export class ContactCard extends Component {
         const phoneTestResult = phoneTest.exec(state.phoneToSet);
         if (phoneTestResult) {
           this.setState({ awaiting: true, type: 'Saving to group' }, () => {
-            props.api
-              .contactEdit(props.path, ship, { phone: state.phoneToSet })
+            props.api.contactHook.edit(
+              props.path, ship, { phone: state.phoneToSet })
               .then(() => {
                 this.setState({ awaiting: false });
               });
@@ -253,8 +251,8 @@ export class ContactCard extends Component {
         const websiteTestResult = websiteTest.exec(state.websiteToSet);
         if (websiteTestResult) {
           this.setState({ awaiting: true, type: 'Saving to group' }, () => {
-            props.api
-              .contactEdit(props.path, ship, { website: state.websiteToSet })
+            props.api.contactHook.edit(
+              props.path, ship, { website: state.websiteToSet })
               .then(() => {
                 this.setState({ awaiting: false });
               });
@@ -266,9 +264,10 @@ export class ContactCard extends Component {
         this.setState(
           { emailToSet: '', awaiting: true, type: 'Removing from group' },
           () => {
-            props.api.contactEdit(props.path, ship, { email: '' }).then(() => {
-              this.setState({ awaiting: false });
-            });
+            props.api.contactHook.edit(props.path, ship, { email: '' })
+              .then(() => {
+                this.setState({ awaiting: false });
+              });
           }
         );
         break;
@@ -277,9 +276,10 @@ export class ContactCard extends Component {
         this.setState(
           { nicknameToSet: '', awaiting: true, type: 'Removing from group' },
           () => {
-            props.api.contactEdit(props.path, ship, { nickname: '' }).then(() => {
-              this.setState({ awaiting: false });
-            });
+            props.api.contactHook.edit(props.path, ship, { nickname: '' })
+              .then(() => {
+                this.setState({ awaiting: false });
+              });
           }
         );
         break;
@@ -288,7 +288,7 @@ export class ContactCard extends Component {
         this.setState(
           { phoneToSet: '', awaiting: true, type: 'Removing from group' },
           () => {
-            props.api.contactEdit(props.path, ship, { phone: '' }).then(() => {
+            props.api.contactHook.edit(props.path, ship, { phone: '' }).then(() => {
               this.setState({ awaiting: false });
             });
           }
@@ -299,7 +299,7 @@ export class ContactCard extends Component {
         this.setState(
           { websiteToSet: '', awaiting: true, type: 'Removing from group' },
           () => {
-            props.api.contactEdit(props.path, ship, { website: '' }).then(() => {
+            props.api.contactHook.edit(props.path, ship, { website: '' }).then(() => {
               this.setState({ awaiting: false });
             });
           }
@@ -314,7 +314,7 @@ export class ContactCard extends Component {
             type: 'Removing from group'
           },
           () => {
-            props.api.contactEdit(props.path, ship, { avatar: null }).then(() => {
+            props.api.contactHook.edit(props.path, ship, { avatar: null }).then(() => {
               this.setState({ awaiting: false });
             });
           }
@@ -325,7 +325,7 @@ export class ContactCard extends Component {
         this.setState(
           { notesToSet: '', awaiting: true, type: 'Removing from group' },
           () => {
-            props.api.contactEdit(props.path, ship, { notes: '' }).then(() => {
+            props.api.contactHook.edit(props.path, ship, { notes: '' }).then(() => {
               this.setState({ awaiting: false });
             });
           }

pkg/interface/src/apps/groups/components/lib/contact-sidebar.js

@@ -99,7 +99,7 @@ export class ContactSidebar extends Component {
               style={{ paddingTop: 6 }}
               onClick={() => {
                 this.setState({ awaiting: true }, (() => {
-                  props.api.groupRemove(props.path, [`~${member}`])
+                  props.api.group.remove(props.path, [`~${member}`])
                     .then(() => {
                       this.setState({ awaiting: false });
                     });

pkg/interface/src/reducers/metadata-update.js

@@ -4,6 +4,7 @@ export default class MetadataReducer {
   reduce(json, state) {
     let data = _.get(json, 'metadata-update', false);
     if (data) {
+      console.log(data);
       this.associations(data, state);
       this.add(data, state);
       this.update(data, state);
@@ -14,14 +15,18 @@ export default class MetadataReducer {
   associations(json, state) {
     let data = _.get(json, 'associations', false);
     if (data) {
-      let metadata = {};
+      let metadata = state.associations;
       Object.keys(data).forEach((key) => {
         let val = data[key];
+        let appName = val['app-name'];
         let groupPath = val['group-path'];
-        if (!(groupPath in metadata)) {
-          metadata[groupPath] = {};
+        if (!(appName in metadata)) {
+          metadata[appName] = {};
         }
-        metadata[groupPath][key] = val;
+        if (!(groupPath in metadata[appName])) {
+          metadata[appName][groupPath] = {};
+        }
+        metadata[appName][groupPath] = val;
       });
       state.associations = metadata;
     }
@@ -31,11 +36,13 @@ export default class MetadataReducer {
     let data = _.get(json, 'add', false);
     if (data) {
       let metadata = state.associations;
-      if (!(data['group-path'] in metadata)) {
-        metadata[data['group-path']] = {};
+      if (!(data['app-name'] in metadata)) {
+        metadata[data['app-name']] = {};
       }
-      metadata[data['group-path']]
-        [`${data["group-path"]}/${data["app-name"]}${data["app-path"]}`] = data;
+      if (!(data['group-path'] in metadata[data['app-name']])) {
+        metadata[data['app-name']][data['group-path']] = {};
+      }
+      metadata[data['app-name']][data['group-path']] = data;
 
       state.associations = metadata;
     }
@@ -45,12 +52,13 @@ export default class MetadataReducer {
     let data = _.get(json, 'update-metadata', false);
     if (data) {
       let metadata = state.associations;
-      if (!(data["group-path"] in metadata)) {
-        metadata[data["group-path"]] = {};
+      if (!(data['app-name'] in metadata)) {
+        metadata[data['app-name']] = {};
       }
-      metadata[data["group-path"]][
-        `${data["group-path"]}/${data["app-name"]}${data["app-path"]}`
-      ] = data;
+      if (!(data['group-path'] in metadata[data['app-name']])) {
+        metadata[data['app-name']][data['group-path']] = {};
+      }
+      metadata[data['app-name']][data['group-path']] = data;
 
       state.associations = metadata;
     }