refacto messaging into several components

This commit is contained in:
Baptiste Lemoine 2019-12-21 17:03:26 +01:00
parent d0ee3a8dad
commit 9c968a0b23
5 changed files with 114 additions and 65 deletions

View File

@ -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 {
);
}
};
}

View File

@ -0,0 +1,14 @@
import React from 'react';
export default class ConversationStream extends React.PureComponent {
render() {
return (
<div >
ConversationStream todo
</div >
);
}
}

View File

@ -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;
}
}

View File

@ -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 >
);
}
};

View File

@ -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;