From 9c968a0b2358de20965e1fa804c5e72839aa3653 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Sat, 21 Dec 2019 17:03:26 +0100
Subject: [PATCH] :zap: refacto messaging into several components

---
 .../contacts-list.js}                         | 78 ++++---------------
 .../messaging/conversation-stream.js          | 14 ++++
 .../ui/components/messaging/conversations.js  | 24 ++++++
 .../ui/components/messaging/messaging.js      | 61 +++++++++++++++
 .../ui/components/navigation_panel.js         |  2 +-
 5 files changed, 114 insertions(+), 65 deletions(-)
 rename app/javascript/mastodon/features/ui/components/{messaging.js => messaging/contacts-list.js} (63%)
 create mode 100644 app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js
 create mode 100644 app/javascript/mastodon/features/ui/components/messaging/conversations.js
 create mode 100644 app/javascript/mastodon/features/ui/components/messaging/messaging.js

diff --git a/app/javascript/mastodon/features/ui/components/messaging.js b/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js
similarity index 63%
rename from app/javascript/mastodon/features/ui/components/messaging.js
rename to app/javascript/mastodon/features/ui/components/messaging/contacts-list.js
index a6e91167b..e023089bc 100644
--- a/app/javascript/mastodon/features/ui/components/messaging.js
+++ b/app/javascript/mastodon/features/ui/components/messaging/contacts-list.js
@@ -1,75 +1,21 @@
 import React from 'react';
+import { isStaff } from '../../../../initial_state';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { isStaff } from '../../../initial_state';
-
-export default class Messaging extends React.PureComponent {
-
-  static propTypes = {
-    following    : ImmutablePropTypes.list,
-    conversations: ImmutablePropTypes.list,
-  };
-  const;
-  newMessage = 'meh';
-
-  openConversationWith(account) {
-    let conversationFound = account;
-    // if conversation exist, focus on it
-    if (conversationFound) {
-
-    } else {
-
-    }
-    // else, create conversation and focus on it
-  };
+export default class ContactsList extends React.PureComponent {
 
   submitCompose() {
 
-  };
-
-  constructor() {
-    super();
-
-    this.props.conversations = [
-      {
-        withAccount: '@machin',
-        messages   : [],
-        opened     : true,
-      },
-      {
-        withAccount: '@chuck',
-        messages   : [],
-        opened     : false,
-      },
-    ];
-    this.props.following = [
-      { username: 'wulfila', handle: '@wulfila' },
-      { username: 'machin', handle: '@machin' },
-      { username: 'chuck norris', handle: '@chuck' },
-    ];
-
   }
 
   render() {
-    const contactlist = null;
+
     // return (
     //   <div >
-    //     messagerie todo
-    //
-    //
+    //     liste de contacts
     //   </div >
     // );
-    // const contactlist = this.props.following.foreEach(elem => (
-    //   <li className='user-item'>
-    //     <div
-    //       className='username'
-    //       onClick={this.openConversationWith(elem.username)}
-    //     >
-    //       Machin
-    //     </div >
-    //     <div className='last-active'>3 min</div >
-    //   </li >
-    // ));
+    const contactlist = null;
+
     return (
       <div className='messaging-container'>
         <div className='messaging-box'>
@@ -88,7 +34,11 @@ export default class Messaging extends React.PureComponent {
           <div className='user-list column-header'>
             <h2 className='title'>User list</h2 >
             <ul >
-              {contactlist}
+              {contactlist &&
+              <p >
+                la liste de contacts
+              </p >
+              }
             </ul >
           </div >
 
@@ -133,8 +83,8 @@ export default class Messaging extends React.PureComponent {
                   <textarea
                     name='messager'
                     id=''
-                    cols='30'
-                    rows='10'
+                    cols='15'
+                    rows='3'
                     className='messager-textarea'
                     placeholder='allez dis nous tout'
 
@@ -153,4 +103,4 @@ export default class Messaging extends React.PureComponent {
     );
   }
 
-};
+}
diff --git a/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js b/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js
new file mode 100644
index 000000000..50b2868b3
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default class ConversationStream extends React.PureComponent {
+
+  render() {
+    return (
+      <div >
+        ConversationStream todo
+
+      </div >
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/messaging/conversations.js b/app/javascript/mastodon/features/ui/components/messaging/conversations.js
new file mode 100644
index 000000000..87af8b0ce
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/messaging/conversations.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default class ConversationStream extends React.PureComponent {
+
+  following = [];
+
+  render() {
+
+    const contactlist = this.following.foreEach(elem => (
+      <li className='user-item'>
+        {/*<div*/}
+        {/*  className='username'*/}
+        {/*  onClick={this.openConversationWith(elem.username)}*/}
+        {/*>*/}
+        Machin {elem}
+        {/*</div >*/}
+        {/*<div className='last-active'>3 min</div >*/}
+      </li >
+    ));
+    return contactlist;
+
+  }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/messaging/messaging.js b/app/javascript/mastodon/features/ui/components/messaging/messaging.js
new file mode 100644
index 000000000..758b77459
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/messaging/messaging.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import ContactsList from './contacts-list';
+
+export default class Messaging extends React.PureComponent {
+
+  // static propTypes = {
+  //   following    : ImmutablePropTypes.list,
+  //   conversations: ImmutablePropTypes.list,
+  // };
+
+  // openConversationWith(account) {
+  // let conversationFound = account;
+  // if conversation exist, focus on it
+  // if (conversationFound) {
+  //
+  // } else {
+  //
+  // }
+  // else, create conversation and focus on it
+  // };
+
+  // submitCompose() {
+  //
+  // };
+
+  // constructor() {
+  //   super();
+  //
+  //   this.props.conversations = [
+  //     {
+  //       withAccount: '@machin',
+  //       messages   : [],
+  //       opened     : true,
+  //     },
+  //     {
+  //       withAccount: '@chuck',
+  //       messages   : [],
+  //       opened     : false,
+  //     },
+  //   ];
+  //   this.props.following = [
+  //     { username: 'wulfila', handle: '@wulfila' },
+  //     { username: 'machin', handle: '@machin' },
+  //     { username: 'chuck norris', handle: '@chuck' },
+  //   ];
+  //
+  // }
+
+  render() {
+    // const contactlist = null;
+    return (
+      <div >
+        messagerie todo
+
+        {/*<Conversations />*/}
+        <ContactsList />
+      </div >
+    );
+  }
+
+};
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index 65d08e76b..cede8225c 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -7,7 +7,7 @@ import NotificationsCounterIcon from './notifications_counter_icon';
 import FollowRequestsNavLink from './follow_requests_nav_link';
 import ListPanel from './list_panel';
 import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
-import Messaging from './messaging';
+import Messaging from './messaging/messaging';
 
 const showMessaging = true;
 const themeIsDark = true;