spa: update groups app for new metadata reducer

pkg/interface/src/api/groups.js

@@ -24,6 +24,10 @@ export default class GroupsApi {
       remove: helper.groupRemove.bind(helper)
     };
 
+    this.metadata = {
+      add: helper.metadataAdd.bind(helper)
+    };
+
     this.invite = {
       accept: helper.inviteAccept.bind(helper),
       decline: helper.inviteDecline.bind(helper)

pkg/interface/src/api/links.js

@@ -1,9 +1,7 @@
-import _ from 'lodash';
 import { stringToTa } from '../lib/util';
 
 import BaseApi from './base';
 
-
 export default class LinksApi extends BaseApi {
   constructor(ship, channel, store) {
     super(ship, channel, store);

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

@@ -121,8 +121,8 @@ export default class GroupsApp extends Component {
               const detail = Boolean(props.match.url.includes('/detail'));
               const settings = Boolean(props.match.url.includes('/settings'));
 
-              const association = (associations[groupPath])
-                ? associations[groupPath]
+              const association = (associations.contacts?.[groupPath])
+                ? associations.contacts[groupPath]
                 : {};
 
               return (
@@ -152,6 +152,7 @@ export default class GroupsApp extends Component {
                     group={group}
                     activeDrawer={(detail || settings) ? 'detail' : 'contacts'}
                     settings={settings}
+                    associations={associations}
                     api={this.api}
                     {...props}
                   />

pkg/interface/src/apps/groups/components/lib/group-detail.js

@@ -18,11 +18,10 @@ export class GroupDetail extends Component {
 
   componentDidMount() {
     const { props } = this;
-    const channelPath = `${props.path}/contacts${props.path}`;
-    if ((props.association) && (props.association[channelPath])) {
+    if (props.association.metadata) {
       this.setState({
-        title: props.association[channelPath].metadata.title,
-        description: props.association[channelPath].metadata.description
+        title: props.association.metadata.title,
+        description: props.association.metadata.description
       });
     }
   }
@@ -30,11 +29,10 @@ export class GroupDetail extends Component {
   componentDidUpdate(prevProps) {
     const { props } = this;
     if (prevProps !== this.props) {
-      const channelPath = `${props.path}/contacts${props.path}`;
-      if ((props.association) && (props.association[channelPath])) {
+      if (props.association.metadata) {
         this.setState({
-          title: props.association[channelPath].metadata.title,
-          description: props.association[channelPath].metadata.description
+          title: props.association.metadata.title,
+          description: props.association.metadata.description
         });
       }
     }
@@ -54,78 +52,74 @@ export class GroupDetail extends Component {
     const responsiveClass =
       props.activeDrawer === 'detail' ? 'db ' : 'dn db-ns ';
 
-    const isEmpty = (Object.keys(props.association).length === 0) ||
-      ((Object.keys(props.association).length === 1) &&
-        (Object.keys(props.association)[0].includes('contacts')));
+    let channelList = [];
 
-    let channelList = (<div />);
+    Object.keys(props.associations).filter((app) => {
+      return app !== 'contacts';
+    }).map((app) => {
+      Object.keys(props.associations[app]).filter((channel) => {
+        return props.associations[app][channel]['group-path'] === props.association['group-path'];
+      })
+      .map((channel) => {
+        const channelObj = props.associations[app][channel];
+        const title =
+        channelObj.metadata?.title || channelObj['app-path'] || '';
 
-    channelList = Object.keys(props.association).sort((a, b) => {
-      const aChannel = props.association[a];
-      const bChannel = props.association[b];
-
-      const aTitle = aChannel.metadata.title || a;
-      const bTitle = bChannel.metadata.title || b;
-
-      return aTitle.toLowerCase().localeCompare(bTitle.toLowerCase());
-    }).map((key) => {
-      const channel = props.association[key];
-      if (!('metadata' in channel)) {
-        return <div key={channel} />;
-      }
-
-      if (channel['app-name'] === 'contacts') {
-        return <div key={channel} />;
-      }
-
-      const title = channel.metadata.title || channel['app-path'] || '';
-      const color = uxToHex(channel.metadata.color) || '000000';
-      let app = channel['app-name'] || 'Unknown';
-      const channelPath = channel['app-path'];
-      const link = `/~${app}/join${channelPath}`;
-      app = app.charAt(0).toUpperCase() + app.slice(1);
-
-      const overlay = {
-        r: parseInt(color.slice(0, 2), 16),
-        g: parseInt(color.slice(2, 4), 16),
-        b: parseInt(color.slice(4, 6), 16)
-      };
-
-      const tile = (app === 'Unknown')
-        ? <div className="dib ba pa1" style={{
-        backgroundColor: `#${color}`,
-        borderColor: `#${color}`,
-        height: 24,
-        width: 24 }}
-          />
-        : <div className="ba" style={{
-          borderColor: `#${color}`,
-          backgroundColor: `rgba(${overlay.r}, ${overlay.g}, ${overlay.b}, 0.25)`
-          }}
-          >
-            <img
-            src={`/~groups/img/${app}.png`}
-            className="dib invert-d pa1 v-mid"
-            style={{ height: 26, width: 26 }}
-            />
-        </div>;
-
-      return (
-        <li key={channelPath} className="f9 list flex pv1 w-100">
-          {tile}
-          <div className="flex flex-column flex-auto">
-            <p className="f9 inter ml2 w-100">{title}</p>
-            <p className="f9 inter ml2 w-100">
-              <span className="f9 di mr2 inter">{app}</span>
-              <Link className="f9 di green2" to={link}>
-                Open
-              </Link>
-            </p>
-          </div>
-        </li>
-      );
+        const color = uxToHex(channelObj.metadata?.color) || '000000';
+        const channelPath = channelObj['app-path'];
+        const link = `/~${app}/join${channelPath}`;
+        return(
+          channelList.push({
+            title: title,
+            color: color,
+            app: app.charAt(0).toUpperCase() + app.slice(1),
+            link: link
+          })
+        );
+      });
     });
 
+    const isEmpty = (Boolean(channelList.length === 0));
+
+    if (channelList.length === 0) {
+      channelList = <div />;
+    } else {
+      channelList = channelList.sort((a, b) => {
+        return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
+      }).map((each) => {
+        const overlay = {
+          r: parseInt(each.color.slice(0, 2), 16),
+          g: parseInt(each.color.slice(2, 4), 16),
+          b: parseInt(each.color.slice(4, 6), 16)
+        };
+
+        return (
+          <li key={each.link} className="f9 list flex pv1 w-100">
+            <div className="ba" style={{
+              borderColor: `#${each.color}`,
+              backgroundColor: `rgba(${overlay.r}, ${overlay.g}, ${overlay.b}, 0.25)`
+            }}
+            >
+              <img
+                src={`/~groups/img/${each.app.toLowerCase()}.png`}
+                className="dib invert-d pa1 v-mid"
+                style={{ height: 26, width: 26 }}
+              />
+            </div>
+              <div className="flex flex-column flex-auto">
+                <p className="f9 inter ml2 w-100">{each.title}</p>
+                <p className="f9 inter ml2 w-100">
+                  <span className="f9 di mr2 inter">{each.app}</span>
+                  <Link className="f9 di green2" to={each.link}>
+                    Open
+              </Link>
+                </p>
+              </div>
+            </li>
+        );
+      });
+    }
+
     let backLink = props.location.pathname;
     backLink = backLink.slice(0, props.location.pathname.indexOf('/detail'));
 
@@ -139,13 +133,12 @@ export class GroupDetail extends Component {
 
     let title = props.path.substr(1);
     let description = '';
-    const channel = `${props.path}/contacts${props.path}`;
-    if ((props.association) && (props.association[channel])) {
-      title = (props.association[channel].metadata.title !== '')
-        ? props.association[channel].metadata.title
+    if (props.association?.metadata) {
+      title = (props.association.metadata.title !== '')
+        ? props.association.metadata.title
         : props.path.substr(1);
-      description = (props.association[channel].metadata.description !== '')
-        ? props.association[channel].metadata.description
+      description = (props.association.metadata.description !== '')
+        ? props.association.metadata.description
         : '';
     }
 
@@ -181,10 +174,7 @@ export class GroupDetail extends Component {
 
     const groupOwner = (deSig(props.match.params.ship) === window.ship);
 
-    const channelPath = `${props.path}/contacts${props.path}`;
-
-    const association = ((props.association) && (props.association[channelPath]))
-      ? props.association[channelPath] : {};
+    const association = props.association;
 
     const deleteButtonClasses = (groupOwner) ? 'b--red2 red2 pointer bg-gray0-d' : 'b--gray3 gray3 bg-gray0-d c-default';
 
@@ -208,7 +198,7 @@ export class GroupDetail extends Component {
               onBlur={() => {
                 if (groupOwner) {
                   this.setState({ awaiting: true }, (() => {
-                    props.api.metadataAdd(
+                    props.api.metadata.add(
                       association['app-path'],
                       association['group-path'],
                       this.state.title,
@@ -237,7 +227,7 @@ export class GroupDetail extends Component {
               onBlur={() => {
                 if (groupOwner) {
                   this.setState({ awaiting: true }, (() => {
-                    props.api.metadataAdd(
+                    props.api.metadata.add(
                       association['app-path'],
                       association['group-path'],
                       association.metadata.title,

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

@@ -69,33 +69,23 @@ export class GroupSidebar extends Component {
           return true;
         }
         const selectedPaths = selectedGroups.map(((e) => {
- return e[0];
-}));
+        return e[0];
+      }));
         return (selectedPaths.includes(path));
       })
       .sort((a, b) => {
         let aName = a.substr(1);
         let bName = b.substr(1);
-        const aChannel = `${a}/contacts${a}`;
-        const bChannel = `${b}/contacts${b}`;
-        if (
-          props.associations[a] &&
-          props.associations[a][aChannel] &&
-          props.associations[a][aChannel].metadata
-        ) {
+        if (props.associations.contacts?.[a]?.metadata) {
           aName =
-            props.associations[a][aChannel].metadata.title !== ''
-              ? props.associations[a][aChannel].metadata.title
+            props.associations.contacts[a].metadata.title !== ''
+              ? props.associations.contacts[a].metadata.title
               : a.substr(1);
         }
-        if (
-          props.associations[b] &&
-          props.associations[b][bChannel] &&
-          props.associations[b][bChannel].metadata
-        ) {
+        if (props.associations.contacts?.[b]?.metadata) {
           bName =
-            props.associations[b][bChannel].metadata.title !== ''
-              ? props.associations[b][bChannel].metadata.title
+            props.associations.contacts[b].metadata.title !== ''
+              ? props.associations.contacts[b].metadata.title
               : b.substr(1);
         }
 
@@ -104,15 +94,10 @@ export class GroupSidebar extends Component {
       .map((path) => {
         let name = path.substr(1);
         const selected = props.selected === path;
-        const groupChannel = `${path}/contacts${path}`;
-        if (
-          props.associations[path] &&
-          props.associations[path][groupChannel] &&
-          props.associations[path][groupChannel].metadata
-        ) {
+        if (props.associations.contacts?.[path]?.metadata) {
           name =
-            props.associations[path][groupChannel].metadata.title !== ''
-              ? props.associations[path][groupChannel].metadata.title
+            props.associations.contacts[path].metadata.title !== ''
+              ? props.associations.contacts[path].metadata.title
               : path.substr(1);
         }
         return (