implementing chat archiving (does not work yet)

src/views/contacts-view.jsx

@@ -14,9 +14,15 @@ export default class ContactsView extends React.Component {
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
+    console.log(nextProps.archive ? "show archive" : "show active");
     let contacts = [];
     let unreadThreads = 0;
+    let archivedCount = 0;
     nextProps.chatList.map((c) => {
+      if (c.private && c.private.arch) {
+        console.log("Archived topic", c);
+        archivedCount ++;
+      }
       unreadThreads += c.unread > 0 ? 1 : 0;
       contacts.push(c);
     });
@@ -26,25 +32,31 @@ export default class ContactsView extends React.Component {
 
     updateFavicon(unreadThreads);
 
-    return {contactList: contacts};
+    return {contactList: contacts, archivedCount: archivedCount};
   }
 
   render() {
+    const archivedCount = this.state.archivedCount;
     return (
-      <FormattedHTMLMessage id="contacts_not_found"
-        defaultMesage="You have no chats<br />¯∖_(ツ)_/¯"
-        description="HTML message shown in ContactList when no contacts are found">{
-        (no_contacts) => <ContactList
-          connected={this.props.connected}
-          contacts={this.state.contactList}
-          emptyListMessage={no_contacts}
-          topicSelected={this.props.topicSelected}
-          myUserId={this.props.myUserId}
-          showOnline={true}
-          showUnread={true}
-          onTopicSelected={this.props.onTopicSelected}
-          showContextMenu={this.props.showContextMenu} />
-      }</FormattedHTMLMessage>
+      <React.Fragment>
+        <FormattedHTMLMessage id="contacts_not_found"
+          defaultMesage="You have no chats<br />¯∖_(ツ)_/¯"
+          description="HTML message shown in ContactList when no contacts are found">{
+          (no_contacts) => <ContactList
+            connected={this.props.connected}
+            contacts={this.state.contactList}
+            emptyListMessage={no_contacts}
+            topicSelected={this.props.topicSelected}
+            myUserId={this.props.myUserId}
+            showOnline={true}
+            showUnread={true}
+            onTopicSelected={this.props.onTopicSelected}
+            showContextMenu={this.props.showContextMenu} />
+        }</FormattedHTMLMessage>
+        {archivedCount > 0 ? <FormattedMessage id="archived_contacts"
+          defaultMessage="Archived contacts ({count})"
+          description="Label for archived chats" values={{count: archivedCount}}/> : null}
+      </React.Fragment>
     );
   }
 };

src/views/sidepanel-view.jsx

@@ -49,6 +49,11 @@ const messages = defineMessages({
     id: 'sidepanel_title_reset',
     description: 'Sidepanel title for PasswordResetView.',
     defaultMessage: 'Reset Password'
+  },
+  'archive': {
+    id: 'sidepanel_title_archive',
+    description: 'Sidepanel title for ContactsView-Archive.',
+    defaultMessage: 'Archived'
   }
 });
 
@@ -134,12 +139,13 @@ class SidepanelView extends React.Component {
             onCancel={this.props.onCancel}
             onError={this.props.onError} /> :
 
-          view === 'contacts' ?
+          (view === 'contacts' || view == 'archive') ?
           <ContactsView
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
             connected={this.props.connected}
             topicSelected={this.props.topicSelected}
+            archive={view == 'archive'}
             chatList={this.props.chatList}
             showContextMenu={this.props.showContextMenu}
             onTopicSelected={this.props.onTopicSelected} /> :

src/views/tinode-web.jsx

@@ -274,7 +274,7 @@ class TinodeWeb extends React.Component {
     var hash = HashNavigation.parseUrlHash(window.location.hash);
     if (hash.path && hash.path.length > 0) {
       // Left-side panel selector.
-      if (['register','settings','edit','cred','reset','newtpk','contacts',''].includes(hash.path[0])) {
+      if (['register','settings','edit','cred','reset','newtpk','archive','contacts',''].includes(hash.path[0])) {
         this.setState({sidePanelSelected: hash.path[0]});
       } else {
         console.log("Unknown sidepanel view", hash.path[0]);