a ton more refactoring

2021-08-07 15:34:22 -07:00
parent 6d4ff9d625
commit fcb61dcc3b
27 changed files with 1173 additions and 928 deletions
@@ -0,0 +1,200 @@
+// View for editing topic (including 'me' topic) parameters.
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Tinode from 'tinode-sdk';
+
+import AvatarUpload from '../widgets/avatar-upload.jsx';
+import InPlaceEdit from '../widgets/in-place-edit.jsx';
+import TagManager from '../widgets/tag-manager.jsx';
+import TopicDescEdit from '../widgets/topic-desc-edit.jsx';
+
+import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
+  MAX_INBAND_ATTACHMENT_SIZE, MAX_TITLE_LENGTH } from '../config.js';
+import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { arrayEqual, asEmail, asPhone, theCard } from '../lib/utils.js';
+
+export default class TopicCommon extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    const acs = topic.getAccessMode();
+    this.state = {
+      isMe: this.props.topic == 'me',
+      owner: acs && acs.isOwner(),
+      credentials: (topic.getCredentials ? topic.getCredentials() : null) || [],
+      addCredActive: false,
+      addCredInvalid: false,
+      newCred: '',
+      tags: [],
+      previousTagsUpdated: undefined
+    };
+
+    this.onTagsUpdated = this.onTagsUpdated.bind(this);
+    this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
+    this.tnCredsUpdated = this.tnCredsUpdated.bind(this);
+    this.handleCredChange = this.handleCredChange.bind(this);
+    this.handleCredKeyDown = this.handleCredKeyDown.bind(this);
+    this.handleCredEntered = this.handleCredEntered.bind(this);
+  }
+
+  // No need to separately handle component mount.
+  componentDidUpdate(props) {
+    const topic = this.props.tinode.getTopic(props.topic);
+    if (!topic) {
+      return;
+    }
+
+    topic.onCredsUpdated = this.tnCredsUpdated;
+
+    if (topic.onTagsUpdated != this.onTagsUpdated) {
+      if (topic.getType() == 'grp') {
+        this.previousTagsUpdated = topic.onTagsUpdated;
+        topic.onTagsUpdated = this.onTagsUpdated;
+      } else {
+        this.previousTagsUpdated = undefined;
+      }
+    }
+
+    if (this.state.topic != props.topic) {
+      this.setState({topic: props.topic});
+    }
+  }
+
+  componentWillUnmount() {
+    const topic = this.props.tinode.getTopic(this.props.topic);
+    topic.onCredsUpdated = undefined;
+    topic.onTagsUpdated = this.previousTagsUpdated;
+  }
+
+  tnCredsUpdated(creds) {
+    this.setState({credentials: creds || []});
+  }
+
+  handleCredChange(e) {
+    this.setState({newCred: e.target.value, addCredInvalid: false});
+  }
+
+  handleCredKeyDown(e) {
+    if (e.keyCode === 27) {
+      // Escape pressed
+      this.setState({newCred: '', addCredActive: false});
+    } else if (e.keyCode === 13) {
+      // Enter pressed
+      this.handleCredEntered(e);
+    }
+  }
+
+  handleCredEntered(e) {
+    const value = this.state.newCred.trim();
+    if (!value) {
+      this.setState({addCredActive: false, addCredInvalid: false});
+      return;
+    }
+
+    let val = asPhone(value);
+    let method;
+    if (val) {
+      method = 'tel';
+    } else {
+      val = asEmail(value);
+      if (val) {
+        method = 'email';
+      }
+    }
+    if (method) {
+      this.props.onCredAdd(method, val);
+      this.setState({addCredActive: false, newCred: ''});
+    } else {
+      this.setState({addCredInvalid: true});
+    }
+  }
+
+  onTagsUpdated(tags) {
+    this.setState({tags: tags});
+
+    if (this.previousTagsUpdated && this.previousTagsUpdated != this.onTagsUpdated) {
+      this.previousTagsUpdated();
+    }
+  }
+
+  handleTagsUpdated(tags) {
+    if (!arrayEqual(this.state.tags.slice(0), tags.slice(0))) {
+      this.props.onTopicTagsUpdate(this.props.topic, tags);
+    }
+  }
+
+  render() {
+    const credentials = [];
+    if (this.state.isMe) {
+      this.state.credentials.map((cred) => {
+        credentials.push(
+          <div key={cred.meth + ":" + cred.val + ":" + cred.done}>{cred.meth}: <tt>{cred.val}</tt>
+            <span> {!cred.done ?
+              <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredConfirm(cred.meth, cred.val);}}>
+                <FormattedMessage id="validate_credential_action" defaultMessage="confirm"
+                  description="Validate credentail call to action" />
+              </a>
+            : null} <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}><i
+              className="material-icons gray">delete_outline</i></a></span>
+          </div>
+        );
+      });
+    }
+
+    return (
+      <div className="scrollable-panel">
+        <TopicDescEdit
+          tinode={this.props.tinode}
+          topic={this.props.topic}
+          onUpdateTopicDesc={this.props.onUpdateTopicDesc}
+          onUpdateTags={this.props.onUpdateTags}
+          onError={this.props.onError} />
+        {this.state.isMe ?
+          <>
+            <div className="hr" />
+            <div className="panel-form-column">
+              <label className="small">
+                <FormattedMessage id="label_user_contacts" defaultMessage="Contacts:"
+                description="Label for user contacts" />
+              </label>
+              <div className="quoted">
+                {credentials}
+                {this.state.addCredActive ?
+                  <input type="text" value={this.state.value}
+                    className={this.state.addCredInvalid ? 'invalid' : null}
+                    placeholder="Phone number or email" required="required" autoFocus
+                    onChange={this.handleCredChange} onKeyDown={this.handleCredKeyDown} onBlur={this.handleCredEntered} />
+                  : null}
+                <div>
+                  <a href="#" onClick={(e) => {e.preventDefault(); this.setState({addCredActive: true});}}>
+                    <i className="material-icons">add</i>
+                    <FormattedMessage id="button_add_another" defaultMessage="Add another" description="Call to action [+ add another]" />
+                  </a></div>
+              </div>
+            </div>
+          </>
+        : null
+      }
+      {this.state.owner ?
+        <>
+          <div className="hr" />
+          <FormattedMessage id="title_tag_manager" defaultMessage="Tags (user discovery)"
+            description="Section title for TagManager">{
+            (tags) => <TagManager
+              title={tags}
+              tags={this.state.tags}
+              activated={false}
+              tinode={this.props.tinode}
+              onSubmit={this.handleTagsUpdated} />
+          }</FormattedMessage>
+        </>
+        :
+        null
+      }
+      </div>
+    );
+  }
+};