Modify the group store to include group rooms

and modify components to use this new part of the store such that feedback can be given
when adding or removing a room from the room list.
This commit is contained in:
Luke Barnard 2017-10-05 14:30:04 +01:00
parent 2ba0a801c4
commit 917957c1dc
5 changed files with 68 additions and 45 deletions

View file

@ -23,6 +23,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import Promise from 'bluebird'; import Promise from 'bluebird';
import { addressTypes, getAddressType } from '../../../UserAddress.js'; import { addressTypes, getAddressType } from '../../../UserAddress.js';
import GroupStoreCache from '../../../stores/GroupStoreCache';
const TRUNCATE_QUERY_LIST = 40; const TRUNCATE_QUERY_LIST = 40;
const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200; const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@ -241,9 +242,9 @@ module.exports = React.createClass({
_doNaiveGroupRoomSearch: function(query) { _doNaiveGroupRoomSearch: function(query) {
const lowerCaseQuery = query.toLowerCase(); const lowerCaseQuery = query.toLowerCase();
MatrixClientPeg.get().getGroupRooms(this.props.groupId).then((resp) => { const groupStore = GroupStoreCache.getGroupStore(MatrixClientPeg.get(), this.props.groupId);
const results = []; const results = [];
resp.chunk.forEach((r) => { groupStore.getGroupRooms().forEach((r) => {
const nameMatch = (r.name || '').toLowerCase().includes(lowerCaseQuery); const nameMatch = (r.name || '').toLowerCase().includes(lowerCaseQuery);
const topicMatch = (r.topic || '').toLowerCase().includes(lowerCaseQuery); const topicMatch = (r.topic || '').toLowerCase().includes(lowerCaseQuery);
const aliasMatch = (r.canonical_alias || '').toLowerCase().includes(lowerCaseQuery); const aliasMatch = (r.canonical_alias || '').toLowerCase().includes(lowerCaseQuery);
@ -257,16 +258,9 @@ module.exports = React.createClass({
}); });
}); });
this._processResults(results, query); this._processResults(results, query);
}).catch((err) => {
console.error('Error whilst searching group users: ', err);
this.setState({
searchError: err.errcode ? err.message : _t('Something went wrong!'),
});
}).done(() => {
this.setState({ this.setState({
busy: false, busy: false,
}); });
});
}, },
_doRoomSearch: function(query) { _doRoomSearch: function(query) {

View file

@ -17,6 +17,7 @@ import React from 'react';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import sdk from '../../../index'; import sdk from '../../../index';
import { groupRoomFromApiObject } from '../../../groups'; import { groupRoomFromApiObject } from '../../../groups';
import GroupStoreCache from '../../../stores/GroupStoreCache';
import GeminiScrollbar from 'react-gemini-scrollbar'; import GeminiScrollbar from 'react-gemini-scrollbar';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {MatrixClient} from 'matrix-js-sdk'; import {MatrixClient} from 'matrix-js-sdk';
@ -34,7 +35,6 @@ export default React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
fetching: false,
rooms: null, rooms: null,
truncateAt: INITIAL_LOAD_NUM_ROOMS, truncateAt: INITIAL_LOAD_NUM_ROOMS,
searchQuery: "", searchQuery: "",
@ -43,21 +43,29 @@ export default React.createClass({
componentWillMount: function() { componentWillMount: function() {
this._unmounted = false; this._unmounted = false;
this._initGroupStore(this.props.groupId);
},
_initGroupStore: function(groupId) {
this._groupStore = GroupStoreCache.getGroupStore(this.context.matrixClient, groupId);
this._groupStore.on('update', () => {
this._fetchRooms();
});
this._groupStore.on('error', (err) => {
console.error('Error in group store (listened to by GroupRoomList)', err);
this.setState({
rooms: null,
});
});
this._fetchRooms(); this._fetchRooms();
}, },
_fetchRooms: function() { _fetchRooms: function() {
this.setState({fetching: true}); if (this._unmounted) return;
this.context.matrixClient.getGroupRooms(this.props.groupId).then((result) => {
this.setState({ this.setState({
rooms: result.chunk.map((apiRoom) => { rooms: this._groupStore.getGroupRooms().map((apiRoom) => {
return groupRoomFromApiObject(apiRoom); return groupRoomFromApiObject(apiRoom);
}), }),
fetching: false,
});
}).catch((e) => {
this.setState({fetching: false});
console.error("Failed to get group room list: ", e);
}); });
}, },
@ -110,12 +118,7 @@ export default React.createClass({
}, },
render: function() { render: function() {
if (this.state.fetching) { if (this.state.rooms === null) {
const Spinner = sdk.getComponent("elements.Spinner");
return (<div className="mx_GroupRoomList">
<Spinner />
</div>);
} else if (this.state.rooms === null) {
return null; return null;
} }

View file

@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
import sdk from '../../../index'; import sdk from '../../../index';
import dis from '../../../dispatcher'; import dis from '../../../dispatcher';
import { GroupRoomType } from '../../../groups'; import { GroupRoomType } from '../../../groups';
import GroupStoreCache from '../../../stores/GroupStoreCache';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
const GroupRoomTile = React.createClass({ const GroupRoomTile = React.createClass({
@ -49,10 +50,10 @@ const GroupRoomTile = React.createClass({
removeRoomFromGroup: function() { removeRoomFromGroup: function() {
const groupId = this.props.groupId; const groupId = this.props.groupId;
const groupStore = GroupStoreCache.getGroupStore(this.context.matrixClient, groupId);
const roomName = this.state.name; const roomName = this.state.name;
const roomId = this.props.groupRoom.roomId; const roomId = this.props.groupRoom.roomId;
this.context.matrixClient groupStore.removeRoomFromGroup(roomId)
.removeRoomFromGroup(groupId, roomId)
.catch((err) => { .catch((err) => {
console.error(`Error whilst removing ${roomId} from ${groupId}`, err); console.error(`Error whilst removing ${roomId} from ${groupId}`, err);
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");

View file

@ -26,7 +26,9 @@ export default class GroupStore extends EventEmitter {
this.groupId = groupId; this.groupId = groupId;
this._matrixClient = matrixClient; this._matrixClient = matrixClient;
this._summary = {}; this._summary = {};
this._rooms = [];
this._fetchSummary(); this._fetchSummary();
this._fetchRooms();
} }
_fetchSummary() { _fetchSummary() {
@ -38,6 +40,15 @@ export default class GroupStore extends EventEmitter {
}); });
} }
_fetchRooms() {
this._matrixClient.getGroupRooms(this.groupId).then((resp) => {
this._rooms = resp.chunk;
this._notifyListeners();
}).catch((err) => {
this.emit('error', err);
});
}
_notifyListeners() { _notifyListeners() {
this.emit('update'); this.emit('update');
} }
@ -46,9 +57,22 @@ export default class GroupStore extends EventEmitter {
return this._summary; return this._summary;
} }
getGroupRooms() {
return this._rooms;
}
addRoomToGroup(roomId) { addRoomToGroup(roomId) {
return this._matrixClient return this._matrixClient
.addRoomToGroup(this.groupId, roomId); .addRoomToGroup(this.groupId, roomId)
.then(this._fetchRooms.bind(this));
}
removeRoomFromGroup(roomId) {
return this._matrixClient
.removeRoomFromGroup(this.groupId, roomId)
// Room might be in the summary, refresh just in case
.then(this._fetchSummary.bind(this))
.then(this._fetchRooms.bind(this));
} }
addRoomToGroupSummary(roomId, categoryId) { addRoomToGroupSummary(roomId, categoryId) {

View file

@ -28,6 +28,7 @@ class GroupStoreCache {
// referencing it. // referencing it.
this.groupStore = new GroupStore(matrixClient, groupId); this.groupStore = new GroupStore(matrixClient, groupId);
} }
this.groupStore._fetchSummary();
return this.groupStore; return this.groupStore;
} }
} }