Skip to content

Commit

Permalink
Seavan/ch9819/remove datasource pattern (#249)
Browse files Browse the repository at this point in the history 
* chore: remove forceUpdate from channel info member list

* chore: remove reaction and data intermediate layer from volume participant edit list

* chore: remove forceUpdate for ContactInvite screen

* chore: recent file list refactor dataSource

* chore: refactor ContactList to remove reactions

* chore: refactor ContactListModal
  • Loading branch information
@seavan
seavan authored Jun 22, 2018
1 parent 9dbbd8f commit 95749c4
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 127 deletions.
5 changes: 2 additions & 3 deletions app/components/channels/member-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import MemberListItem from './member-list-item';

@observer
export default class MemberList extends SafeComponent {
get dataSource() {
get sections() {
return [
{ data: this.channelMembers, key: tx('title_Members') },
{ data: this.channelInvites, key: tx('title_invited') }
Expand Down Expand Up @@ -64,7 +64,6 @@ export default class MemberList extends SafeComponent {
} else {
await chatState.chatInviteStore.revokeInvite(this.data.id, contact.username);
}
this.forceUpdate();
};

participant = ({ item, section }) => {
Expand All @@ -81,7 +80,7 @@ export default class MemberList extends SafeComponent {
if (!this.hasData) return null;
return (
<SectionList
sections={this.dataSource}
sections={this.sections}
keyExtractor={contact => contact.username}
renderItem={this.participant}
renderSectionHeader={this.headers}
Expand Down
16 changes: 2 additions & 14 deletions app/components/contacts/contact-edit-permission.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import { View, FlatList } from 'react-native';
import { reaction, action } from 'mobx';
import { action } from 'mobx';
import { observer } from 'mobx-react/native';
import SafeComponent from '../shared/safe-component';
import { tu } from '../utils/translator';
Expand All @@ -22,21 +22,9 @@ export default class ContactEditPermission extends SafeComponent {
this.props.folder.removeParticipant(contact);
}

componentDidMount() {
this.reaction = reaction(() => [
this.data
], () => {
this.forceUpdate();
}, true);
}

componentWillUnmount() {
this.reaction && this.reaction();
this.reaction = null;
}

get unshareButton() {
const extraWidth = 20;
// TODO: can we ever get not isFolder here, @karim?
const { folder: { isFolder, isShared } } = this.props;
if (isFolder && isShared) {
return icons.text(tu('button_unshare'), this.props.action, null, null, extraWidth);
Expand Down
25 changes: 5 additions & 20 deletions app/components/contacts/contact-list-invite.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import { observer } from 'mobx-react/native';
import { View, SectionList } from 'react-native';
import { reaction } from 'mobx';
import SafeComponent from '../shared/safe-component';
import buttons from '../helpers/buttons';
import ContactInviteItem from './contact-invite-item';
Expand All @@ -13,30 +12,12 @@ const INITIAL_LIST_SIZE = 20;

@observer
export default class ContactListInvite extends SafeComponent {
dataSource = [];
get data() { return contactAddState.imported; }

get layoutTitle() { return tx('button_inviteEmailContact'); }

get leftIcon() {
return buttons.whiteTextButton(tx('button_done'), () => contactAddState.routerMain.contacts());
}

componentWillUnmount() {
this.reaction && this.reaction();
this.reaction = null;
}

componentDidMount() {
this.reaction = reaction(() => [
this.data,
this.data.length
], () => {
this.dataSource = [{ data: this.data.slice(), key: tx('title_inviteToPeerio') }];
this.forceUpdate();
}, true);
}

item({ item }) {
return (
<ContactInviteItem contact={item} />
Expand All @@ -47,11 +28,15 @@ export default class ContactListInvite extends SafeComponent {
return <ContactSectionHeader key={key} title={key} />;
}

get sections() {
return [{ data: contactAddState.imported, key: tx('title_inviteToPeerio') }];
}

listView() {
return (
<SectionList
initialNumToRender={INITIAL_LIST_SIZE}
sections={this.dataSource}
sections={this.sections}
keyExtractor={item => item.username}
renderItem={this.item}
renderSectionHeader={this.header}
Expand Down
44 changes: 13 additions & 31 deletions app/components/contacts/contact-list-modal.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { observer } from 'mobx-react/native';
import { View, SectionList } from 'react-native';
import { observable, reaction } from 'mobx';
import { computed } from 'mobx';
import SafeComponent from '../shared/safe-component';
import ContactsPlaceholder from './contacts-placeholder';
import ProgressOverlay from '../shared/progress-overlay';
Expand All @@ -19,37 +19,19 @@ const INITIAL_LIST_SIZE = 20;

@observer
export default class ContactListModal extends SafeComponent {
dataSource = [];
@observable refreshing = false;

get data() { return contactState.store.contacts; }

componentWillUnmount() {
this.reaction && this.reaction();
this.reaction = null;
}

componentDidMount() {
contactState.store.uiViewFilter = 'all';
this.reaction = reaction(() => [
this.data,
this.data.length,
contactState.store.uiView,
contactState.store.addedContacts
], () => {
// console.log(contactState.store.uiView.length);
console.log(`contact-list.js: update ${this.data.length} -> ${this.maxLoadedIndex}`);
this.dataSource = [];
const { uiView, contacts } = contactState.store;
this.dataSource = uiView.map(({ letter, items }) => {
return ({ data: items.slice(), key: letter });
});
this.dataSource.unshift({ data: [], key: `All (${contacts.length})` });
const { channels } = chatState.store;
this.dataSource.unshift({ data: channels, key: `Rooms (${channels.length})` });
// this.dataSource.unshift({ data: addedContacts.slice(), key: `${tx('title_favoriteContacts')} (${addedContacts.length})` });
this.forceUpdate();
}, true);
}

@computed get sections() {
const { uiView, contacts } = contactState.store;
const sections = uiView.map(({ letter, items }) => {
return ({ data: items, key: letter });
});
sections.unshift({ data: [], key: `All (${contacts.length})` });
const { channels } = chatState.store;
sections.unshift({ data: channels, key: `Rooms (${channels.length})` });
return sections;
}

item = ({ item }) => {
Expand All @@ -67,7 +49,7 @@ export default class ContactListModal extends SafeComponent {
return (
<SectionList
initialNumToRender={INITIAL_LIST_SIZE}
sections={this.dataSource}
sections={this.sections}
keyExtractor={item => item.username || item.email || item.id}
renderItem={this.item}
renderSectionHeader={this.header}
Expand Down
46 changes: 13 additions & 33 deletions app/components/contacts/contact-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react/native';
import { View, SectionList } from 'react-native';
import { observable, reaction, action } from 'mobx';
import { action, computed } from 'mobx';
import SafeComponent from '../shared/safe-component';
import ContactsPlaceholder from './contacts-placeholder';
import ProgressOverlay from '../shared/progress-overlay';
Expand All @@ -18,39 +18,8 @@ const INITIAL_LIST_SIZE = 20;

@observer
export default class ContactList extends SafeComponent {
dataSource = [];
@observable refreshing = false;

get data() { return contactState.store.contacts; }

componentWillUnmount() {
this.reaction && this.reaction();
this.reaction = null;
}

componentDidMount() {
contactState.store.uiViewFilter = 'all';
this.reaction = reaction(() => [
contactState.routerMain.route === 'contacts',
contactState.routerMain.currentIndex === 0,
this.data,
this.data.length,
contactState.store.uiView,
contactState.store.invitedContacts,
contactState.store.addedContacts
], () => {
// console.log(contactState.store.uiView.length);
console.log(`contact-list.js: update ${this.data.length} -> ${this.maxLoadedIndex}`);
this.dataSource = [];
const { addedContacts, invitedContacts, uiView, contacts } = contactState.store;
this.dataSource = uiView.map(({ letter, items }) => {
return ({ data: items.slice(), key: letter });
});
this.dataSource.unshift({ data: [], key: `All (${contacts.length})` });
this.dataSource.unshift({ data: addedContacts.slice(), key: `${tx('title_favoriteContacts')} (${addedContacts.length})` });
this.dataSource.push({ data: invitedContacts.slice(), key: `${tx('title_invitedContacts')} (${invitedContacts.length})` });
this.forceUpdate();
}, true);
}

item({ item }) {
Expand All @@ -68,11 +37,22 @@ export default class ContactList extends SafeComponent {
uiState.currentScrollView = sv;
}

@computed get sections() {
const { addedContacts, invitedContacts, uiView, contacts } = contactState.store;
const sections = uiView.map(({ letter, items }) => {
return ({ data: items, key: letter });
});
sections.unshift({ data: [], key: `All (${contacts.length})` });
sections.unshift({ data: addedContacts, key: `${tx('title_favoriteContacts')} (${addedContacts.length})` });
sections.push({ data: invitedContacts, key: `${tx('title_invitedContacts')} (${invitedContacts.length})` });
return sections;
}

listView() {
return (
<SectionList
initialNumToRender={INITIAL_LIST_SIZE}
sections={this.dataSource}
sections={this.sections}
keyExtractor={item => item.username || item.email}
renderItem={this.item}
renderSectionHeader={this.header}
Expand Down
30 changes: 4 additions & 26 deletions app/components/files/recent-files-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
import React from 'react';
import { observer } from 'mobx-react/native';
import { SectionList, View } from 'react-native';
import { reaction, action } from 'mobx';
import SafeComponent from '../shared/safe-component';
import chatState from '../messaging/chat-state';
import ChatInfoSectionHeader from '../messaging/chat-info-section-header';
Expand All @@ -14,32 +13,11 @@ const INITIAL_LIST_SIZE = 25;

@observer
export default class RecentFilesList extends SafeComponent {
dataSource = [];

get data() { return chatState.currentChat.recentFiles; }

get hasData() { return this.dataSource[0] && this.dataSource[0].data.length; }

@action.bound refreshData() {
const newData = this.data;
this.dataSource = [{ data: newData.slice(), key: tx('title_recentFiles') }];
this.forceUpdate();
get sections() {
return [{ data: chatState.currentChat.recentFiles, key: tx('title_recentFiles') }];
}

componentWillUnmount() {
this.reaction && this.reaction();
this.reaction = null;
}

componentDidMount() {
this.reaction = reaction(() => [
this.data,
this.data.length
], () => {
this.dataSource = [{ data: this.data.slice(), key: tx('title_recentFiles') }];
this.forceUpdate();
}, true);
}
get hasData() { return chatState.currentChat.recentFiles.length; }

item = ({ item }) => {
const collapsible = chatState.currentChat.isChannel;
Expand Down Expand Up @@ -73,7 +51,7 @@ export default class RecentFilesList extends SafeComponent {
<View>
<SectionList
initialNumToRender={INITIAL_LIST_SIZE}
sections={this.dataSource}
sections={this.sections}
keyExtractor={file => file.fileId}
renderItem={this.item}
renderSectionHeader={this.header}
Expand Down

0 comments on commit 95749c4

Please sign in to comment.