interface: componentise metadata settings

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

@@ -1,15 +1,11 @@
 import React, { Component, Fragment } from 'react';
 import { deSig } from '~/logic/lib/util';
-import { Link } from 'react-router-dom';
 
 import { ChatHeader } from './lib/chat-header';
-import { MetadataSettings } from './lib/metadata-settings';
+import { MetadataSettings } from '~/views/components/metadata/settings';
 import { DeleteButton } from './lib/delete-button';
 import { GroupifyButton } from './lib/groupify-button';
 import { Spinner } from '~/views/components/Spinner';
-import { ChatTabBar } from './lib/chat-tabbar';
-import SidebarSwitcher from '~/views/components/SidebarSwitch';
-
 
 export class SettingsScreen extends Component {
   constructor(props) {
@@ -95,6 +91,8 @@ export class SettingsScreen extends Component {
           changeLoading={this.changeLoading}
           api={api}
           association={association}
+          resource="chat"
+          app="chat"
           station={station} />
         <Spinner
           awaiting={this.state.awaiting}
@@ -121,13 +119,13 @@ export class SettingsScreen extends Component {
     const isInPopout = popout ? "popout/" : "";
     const title =
       ( association &&
-        ('metadata' in association) && 
+        ('metadata' in association) &&
         (association.metadata.title !== '')
       ) ? association.metadata.title : station.substr(1);
 
     return (
       <div className="h-100 w-100 overflow-x-hidden flex flex-column white-d">
-        <ChatHeader 
+        <ChatHeader
           match={match}
           location={location}
           api={api}

pkg/interface/src/views/components/metadata/color.js

@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 
-import { uxToHex } from '~/logic/lib/util';
-
-
 export class MetadataColor extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -45,7 +41,7 @@ export class MetadataColor extends Component {
     return (
       <div className={'cf w-100 mb3 ' + ((props.isDisabled) ? 'o-30' : '')}>
         <p className="f8 lh-copy">Change color</p>
-        <p className="f9 gray2 db mb4">Give this chat a color when viewing group channels</p>
+        <p className="f9 gray2 db mb4">Give this {props.resource} a color when viewing group channels</p>
         <div className="relative w-100 flex"
           style={{ maxWidth: '10rem' }}
         >

pkg/interface/src/views/components/metadata/settings.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import { MetadataColor } from './metadata-color';
-import { MetadataInput } from './metadata-input';
+import { MetadataColor } from './color';
+import { MetadataInput } from './input';
 import { uxToHex } from '~/logic/lib/util';
 
 
@@ -11,13 +11,14 @@ export const MetadataSettings = (props) => {
     association,
     changeLoading,
     api,
-    station
+    resource,
+    app
   } = props;
 
-  const title = 
+  const title =
     (props.association && 'metadata' in props.association) ?
     association.metadata.title : '';
-  const description = 
+  const description =
     (props.association && 'metadata' in props.association) ?
     association.metadata.description : '';
   const color =
@@ -28,13 +29,13 @@ export const MetadataSettings = (props) => {
     <div className="cf mt6">
       <MetadataInput
         title='Rename'
-        description='Change the name of this chat'
+        description={`Change the name of this ${resource}`}
         isDisabled={!isOwner}
         initialValue={title}
         setValue={(val) => {
-          changeLoading(false, true, 'Editing chat...', () => {
+          changeLoading(false, true, `Editing ${resource}...`, () => {
             api.metadata.metadataAdd(
-              'chat',
+              app,
               association['app-path'],
               association['group-path'],
               val,
@@ -48,13 +49,13 @@ export const MetadataSettings = (props) => {
         }} />
         <MetadataInput
           title='Change description'
-          description='Change the description of this chat'
+          description={`Change the description of this ${resource}`}
           isDisabled={!isOwner}
           initialValue={description}
           setValue={(val) => {
             changeLoading(false, true, 'Editing chat...', () => {
               api.metadata.metadataAdd(
-                'chat',
+                app,
                 association['app-path'],
                 association['group-path'],
                 association.metadata.title,
@@ -67,12 +68,13 @@ export const MetadataSettings = (props) => {
             });
           }} />
       <MetadataColor
-        initialValue={color} 
+        initialValue={color}
         isDisabled={!isOwner}
+        resource={resource}
         setValue={(val) => {
-          changeLoading(false, true, 'Editing chat...', () => {
+          changeLoading(false, true, `Editing ${resource}...`, () => {
             props.api.metadata.metadataAdd(
-              'chat',
+              app,
               association['app-path'],
               association['group-path'],
               association.metadata.title,