chore: Migrate RightButtonsContainer room to ts
This commit is contained in:
parent
9b746cf1e0
commit
46cf0f8e6f
|
@ -12,7 +12,7 @@ const styles = StyleSheet.create({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
interface IRoomLeftButtons {
|
interface IRoomLeftButtonsProps {
|
||||||
tmid: string;
|
tmid: string;
|
||||||
unreadsCount: number;
|
unreadsCount: number;
|
||||||
navigation: any; // TODO - change this after merge react navigation
|
navigation: any; // TODO - change this after merge react navigation
|
||||||
|
@ -39,7 +39,7 @@ const LeftButtons = React.memo(
|
||||||
theme,
|
theme,
|
||||||
goRoomActionsView,
|
goRoomActionsView,
|
||||||
isMasterDetail
|
isMasterDetail
|
||||||
}: IRoomLeftButtons) => {
|
}: IRoomLeftButtonsProps) => {
|
||||||
if (!isMasterDetail || tmid) {
|
if (!isMasterDetail || tmid) {
|
||||||
const onPress = useCallback(() => navigation.goBack(), []);
|
const onPress = useCallback(() => navigation.goBack(), []);
|
||||||
const label: any = unreadsCount > 99 ? '+99' : unreadsCount || ' ';
|
const label: any = unreadsCount > 99 ? '+99' : unreadsCount || ' ';
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { dequal } from 'dequal';
|
import { dequal } from 'dequal';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import Model from '@nozbe/watermelondb/Model';
|
||||||
|
|
||||||
import * as HeaderButton from '../../containers/HeaderButton';
|
import * as HeaderButton from '../../containers/HeaderButton';
|
||||||
import database from '../../lib/database';
|
import database from '../../lib/database';
|
||||||
|
@ -9,22 +10,25 @@ import { getUserSelector } from '../../selectors/login';
|
||||||
import { events, logEvent } from '../../utils/log';
|
import { events, logEvent } from '../../utils/log';
|
||||||
import { isTeamRoom } from '../../utils/room';
|
import { isTeamRoom } from '../../utils/room';
|
||||||
|
|
||||||
class RightButtonsContainer extends Component {
|
interface IRoomRightButtonsContainerProps {
|
||||||
static propTypes = {
|
userId: string;
|
||||||
userId: PropTypes.string,
|
threadsEnabled: boolean;
|
||||||
threadsEnabled: PropTypes.bool,
|
rid: string;
|
||||||
rid: PropTypes.string,
|
t: string;
|
||||||
t: PropTypes.string,
|
tmid: string;
|
||||||
tmid: PropTypes.string,
|
teamId: string;
|
||||||
teamId: PropTypes.string,
|
navigation: any; // TODO - change this after merge react navigation
|
||||||
navigation: PropTypes.object,
|
isMasterDetail: boolean;
|
||||||
isMasterDetail: PropTypes.bool,
|
toggleFollowThread: Function;
|
||||||
toggleFollowThread: PropTypes.func,
|
joined: boolean;
|
||||||
joined: PropTypes.bool,
|
encrypted: boolean;
|
||||||
encrypted: PropTypes.bool
|
}
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
class RightButtonsContainer extends Component<IRoomRightButtonsContainerProps, any> {
|
||||||
|
private threadSubscription?: Subscription;
|
||||||
|
private subSubscription?: Subscription;
|
||||||
|
|
||||||
|
constructor(props: IRoomRightButtonsContainerProps) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
isFollowingThread: true,
|
isFollowingThread: true,
|
||||||
|
@ -56,7 +60,7 @@ class RightButtonsContainer extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps, nextState) {
|
shouldComponentUpdate(nextProps: IRoomRightButtonsContainerProps, nextState: any) {
|
||||||
const { isFollowingThread, tunread, tunreadUser, tunreadGroup } = this.state;
|
const { isFollowingThread, tunread, tunreadUser, tunreadGroup } = this.state;
|
||||||
const { teamId } = this.props;
|
const { teamId } = this.props;
|
||||||
if (nextProps.teamId !== teamId) {
|
if (nextProps.teamId !== teamId) {
|
||||||
|
@ -86,26 +90,26 @@ class RightButtonsContainer extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
observeThread = threadRecord => {
|
observeThread = (threadRecord: Model) => {
|
||||||
const threadObservable = threadRecord.observe();
|
const threadObservable = threadRecord.observe();
|
||||||
this.threadSubscription = threadObservable.subscribe(thread => this.updateThread(thread));
|
this.threadSubscription = threadObservable.subscribe(thread => this.updateThread(thread));
|
||||||
};
|
};
|
||||||
|
|
||||||
updateThread = thread => {
|
updateThread = (thread: any) => {
|
||||||
const { userId } = this.props;
|
const { userId } = this.props;
|
||||||
this.setState({
|
this.setState({
|
||||||
isFollowingThread: thread.replies && !!thread.replies.find(t => t === userId)
|
isFollowingThread: thread.replies && !!thread.replies.find((t: string) => t === userId)
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
observeSubscription = subRecord => {
|
observeSubscription = (subRecord: Model) => {
|
||||||
const subObservable = subRecord.observe();
|
const subObservable = subRecord.observe();
|
||||||
this.subSubscription = subObservable.subscribe(sub => {
|
this.subSubscription = subObservable.subscribe(sub => {
|
||||||
this.updateSubscription(sub);
|
this.updateSubscription(sub);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
updateSubscription = sub => {
|
updateSubscription = (sub: any) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
tunread: sub?.tunread,
|
tunread: sub?.tunread,
|
||||||
tunreadUser: sub?.tunreadUser,
|
tunreadUser: sub?.tunreadUser,
|
||||||
|
@ -194,7 +198,7 @@ class RightButtonsContainer extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = (state: any) => ({
|
||||||
userId: getUserSelector(state).id,
|
userId: getUserSelector(state).id,
|
||||||
threadsEnabled: state.settings.Threads_enabled,
|
threadsEnabled: state.settings.Threads_enabled,
|
||||||
isMasterDetail: state.app.isMasterDetail
|
isMasterDetail: state.app.isMasterDetail
|
Loading…
Reference in New Issue