Merge branch 'mp/metadata/fixes' (#3618)

* origin/mp/metadata/fixes:
  interface: pass station to groupify button
  interface: exclude sigs and dots from paths
  interface: trim unnecessary logic in settings
  interface: set resource name correctly

Signed-off-by: Matilde Park <matilde@tlon.io>

pkg/interface/src/views/apps/chat/components/lib/groupify-button.js

@@ -30,7 +30,7 @@ export class GroupifyButton extends Component {
     return this.state.targetGroup ? (
       <div className="mt4">
       <Toggle
-        boolean={inclusive}
+        boolean={this.state.inclusive}
         change={this.changeInclusive.bind(this)}
       />
         <span className="dib f9 white-d inter ml3">
@@ -42,7 +42,7 @@ export class GroupifyButton extends Component {
       </div>
     ) : <div />;
   }
-  
+
   render() {
     const { inclusive, targetGroup } = this.state;
     const {
@@ -52,7 +52,8 @@ export class GroupifyButton extends Component {
       associations,
       contacts,
       groups,
-      station
+      station,
+      changeLoading
     } = this.props;
 
     const groupPath = association['group-path'];
@@ -94,7 +95,7 @@ export class GroupifyButton extends Component {
           });
         }}
            className={
-             'dib f9 black gray4-d bg-gray0-d ba pa2 mt4 b--black ' + 
+             'dib f9 black gray4-d bg-gray0-d ba pa2 mt4 b--black ' +
              'b--gray1-d pointer'
            }>Convert to group</a>
       </div>

pkg/interface/src/views/apps/chat/components/new-dm.js

@@ -52,7 +52,7 @@ export class NewDmScreen extends Component {
 
   titleChange(event) {
     const asciiSafe = event.target.value.toLowerCase()
-      .replace(/[^a-z0-9~_.-]/g, '-');
+      .replace(/[^a-z0-9_-]/g, '-');
     this.setState({
       idName: asciiSafe,
       title: event.target.value

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

@@ -38,7 +38,7 @@ export class NewScreen extends Component {
 
   titleChange(event) {
     const asciiSafe = event.target.value.toLowerCase()
-      .replace(/[^a-z0-9~_.-]/g, '-');
+      .replace(/[^a-z0-9_-]/g, '-');
     this.setState({
       idName: asciiSafe,
       title: event.target.value

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

@@ -82,6 +82,7 @@ export class SettingsScreen extends Component {
           contacts={contacts}
           groups={groups}
           api={api}
+          station={station}
           changeLoading={this.changeLoading} />
         <DeleteButton
           isOwner={isOwner}
@@ -122,13 +123,6 @@ export class SettingsScreen extends Component {
       location
     } = this.props;
 
-    const isInPopout = popout ? "popout/" : "";
-    const title =
-      ( 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

pkg/interface/src/views/apps/groups/components/new.tsx

@@ -6,10 +6,10 @@ import { Spinner } from '~/views/components/Spinner';
 import { Toggle } from '~/views/components/toggle';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { Groups, GroupPolicy, Resource } from '~/types/group-update';
-import { Contacts, Rolodex } from '~/types/contact-update';
+import { Groups, GroupPolicy } from '~/types/group-update';
+import { Rolodex } from '~/types/contact-update';
 import GlobalApi from '~/logic/api/global';
-import { Patp, PatpNoSig, Enc } from '~/types/noun';
+import { Enc } from '~/types/noun';
 
 type NewScreenProps = Pick<RouteComponentProps, 'history'> & {
   groups: Groups;
@@ -20,7 +20,6 @@ type NewScreenProps = Pick<RouteComponentProps, 'history'> & {
 type TextChange = React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>;
 type BooleanChange = React.ChangeEvent<HTMLInputElement>;
 
-
 interface NewScreenState {
   groupName: string;
   title: string;
@@ -55,7 +54,7 @@ export class NewScreen extends Component<NewScreenProps, NewScreenState> {
   groupNameChange(event: TextChange) {
     const asciiSafe = event.target.value
       .toLowerCase()
-      .replace(/[^a-z0-9~_.-]/g, '-');
+      .replace(/[^a-z0-9_-]/g, '-');
     this.setState({
       groupName: asciiSafe,
       title: event.target.value,

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

@@ -42,8 +42,8 @@ export const MetadataSettings = (props) => {
               val,
               association.metadata.description,
               association.metadata['date-created'],
-              module,
-              uxToHex(association.metadata.color)
+              uxToHex(association.metadata.color),
+              module
             ).then(() => {
               changeLoading(false, false, '', () => {});
             });