Browse Source

Display the room list

pull/1/head
David Baker 7 years ago
parent
commit
971a7c1133
  1. 18
      css/molecules/RoomTile.css
  2. 3
      css/organisms/RoomList.css
  3. 1
      src/MatrixClientPeg.js
  4. 6
      src/molecules/RoomTile.js
  5. 32
      src/organisms/RoomList.js
  6. 30
      src/pages/MatrixChat.js

18
css/molecules/RoomTile.css

@ -0,0 +1,18 @@
.mx_RoomTile {
height: 20px;
width: 250px;
background-color: #ddd;
margin-top: 1px;
margin-bottom: 1px;
padding: 5px;
}
.mx_RoomTile_name {
font-size: 80%;
font-weight: bold;
}
.mx_RoomTile div {
overflow: hidden;
text-overflow: ellipsis;
}

3
css/organisms/RoomList.css

@ -0,0 +1,3 @@
.mx_RoomList ul {
padding: 0px;
}

1
src/MatrixClientPeg.js

@ -14,7 +14,6 @@ if (localStorage) {
accessToken: access_token,
userId: user_id
});
matrixClient.startClient();
}
}

6
src/organisms/ThreadSection.js → src/molecules/RoomTile.js

@ -3,11 +3,9 @@ var React = require('react');
module.exports = React.createClass({
render: function() {
return (
<div>
<ul>
</ul>
<div className="mx_RoomTile">
<div className="mx_RoomTile_name">{this.props.room.name}</div>
</div>
);
}
});

32
src/organisms/RoomList.js

@ -0,0 +1,32 @@
var React = require('react');
var MatrixClientPeg = require("../MatrixClientPeg");
var RoomTile = require("../molecules/RoomTile");
module.exports = React.createClass({
componentWillMount: function() {
var cli = MatrixClientPeg.get();
this.setState({roomList: cli.getRooms()});
},
makeRoomTiles: function() {
return this.state.roomList.map(function(room) {
return (
<RoomTile room={room} key={room.roomId} />
);
});
},
render: function() {
return (
<div className="mx_RoomList">
<ul>
{this.makeRoomTiles()}
</ul>
</div>
);
}
});

30
src/pages/MatrixChat.js

@ -1,7 +1,8 @@
var React = require('react');
var ThreadSection = require('../organisms/ThreadSection');
var RoomList = require('../organisms/RoomList');
var MessageSection = require('../organisms/MessageSection');
var Loader = require("react-loader");
var Login = require('../templates/Login');
@ -12,22 +13,43 @@ var mxCliPeg = require("../MatrixClientPeg");
module.exports = React.createClass({
getInitialState: function() {
return {
logged_in: !!(mxCliPeg.get() && mxCliPeg.get().credentials)
logged_in: !!(mxCliPeg.get() && mxCliPeg.get().credentials),
ready: false
};
},
componentDidMount: function() {
if (this.state.logged_in) {
this.startMatrixClient();
}
},
onLoggedIn: function() {
this.setState({logged_in: true});
this.startMatrixClient();
},
startMatrixClient: function() {
var cli = mxCliPeg.get();
var that = this;
cli.on('syncComplete', function() {
that.setState({ready: true});
});
cli.startClient();
},
render: function() {
if (this.state.logged_in) {
if (this.state.logged_in && this.state.ready) {
return (
<div>
<ThreadSection />
<RoomList />
<MessageSection />
</div>
);
} else if (this.state.logged_in) {
return (
<Loader />
);
} else {
return (
<Login onLoggedIn={this.onLoggedIn} />

Loading…
Cancel
Save