toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use new observables approach

Browse source
This commit is contained in:
Elias Nahum 2022-03-23 10:06:54 -03:00
parent 092e1d9ba5
commit 54218d8f3d
No known key found for this signature in database
GPG key ID: E038DB71E0B61702
3 changed files with 18 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/screens/reactions/index.ts
View file

@ -3,27 +3,25 @@
import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
import withObservables from '@nozbe/with-observables';
import {of as of$} from 'rxjs';
import {switchMap} from 'rxjs/operators';
import {MM_TABLES} from '@constants/database';
import {observePost} from '@queries/servers/post';
import Reactions from './reactions';
import type {WithDatabaseArgs} from '@typings/database/database';
import type PostModel from '@typings/database/models/servers/post';
type EnhancedProps = WithDatabaseArgs & {
postId: string;
}
const {POST} = MM_TABLES.SERVER;
const enhanced = withObservables([], ({postId, database}: EnhancedProps) => {
const post = database.get<PostModel>(POST).findAndObserve(postId);
const post = observePost(database, postId);
return {
reactions: post.pipe(
switchMap((p) => p.reactions.observe()),
switchMap((p) => (p ? p.reactions.observe() : of$(undefined))),
),
};
});

17
app/screens/reactions/reactions.tsx
View file

@ -15,14 +15,14 @@ import type ReactionModel from '@typings/database/models/servers/reaction';
type Props = {
initialEmoji: string;
reactions: ReactionModel[];
reactions?: ReactionModel[];
}
const Reactions = ({initialEmoji, reactions}: Props) => {
const [sortedReactions, setSortedReactions] = useState(Array.from(new Set(reactions.map((r) => getEmojiFirstAlias(r.emojiName)))));
const [sortedReactions, setSortedReactions] = useState(Array.from(new Set(reactions?.map((r) => getEmojiFirstAlias(r.emojiName)))));
const [index, setIndex] = useState(sortedReactions.indexOf(initialEmoji));
const reactionsByName = useMemo(() => {
return reactions.reduce((acc, reaction) => {
return reactions?.reduce((acc, reaction) => {
const emojiAlias = getEmojiFirstAlias(reaction.emojiName);
if (acc.has(emojiAlias)) {
const rs = acc.get(emojiAlias);
@ -41,6 +41,9 @@ const Reactions = ({initialEmoji, reactions}: Props) => {
const renderContent = useCallback(() => {
const emojiAlias = sortedReactions[index];
if (!reactionsByName) {
return null;
}
return (
<>
@ -61,11 +64,11 @@ const Reactions = ({initialEmoji, reactions}: Props) => {
useEffect(() => {
// This helps keep the reactions in the same position at all times until unmounted
const rs = reactions.map((r) => getEmojiFirstAlias(r.emojiName));
const rs = reactions?.map((r) => getEmojiFirstAlias(r.emojiName));
const sorted = new Set([...sortedReactions]);
const added = rs.filter((r) => !sorted.has(r));
added.forEach(sorted.add, sorted);
const removed = [...sorted].filter((s) => !rs.includes(s));
const added = rs?.filter((r) => !sorted.has(r));
added?.forEach(sorted.add, sorted);
const removed = [...sorted].filter((s) => !rs?.includes(s));
removed.forEach(sorted.delete, sorted);
setSortedReactions(Array.from(sorted));
}, [reactions]);

23
app/screens/reactions/reactors_list/reactor/index.ts
View file

@ -1,33 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {Q} from '@nozbe/watermelondb';
import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
import withObservables from '@nozbe/with-observables';
import {of as of$} from 'rxjs';
import {switchMap} from 'rxjs/operators';
import {MM_TABLES} from '@constants/database';
import {observeUser} from '@app/queries/servers/user';
import {WithDatabaseArgs} from '@typings/database/database';
import Reactor from './reactor';
import type ReactionModel from '@typings/database/models/servers/reaction';
import type UserModel from '@typings/database/models/servers/user';
const {SERVER: {USER}} = MM_TABLES;
const enhance = withObservables(['reaction'], ({database, reaction}: {reaction: ReactionModel} & WithDatabaseArgs) => {
const user = database.get<UserModel>(USER).query(
Q.where('id', reaction.userId),
Q.take(1),
).observe().pipe(
switchMap((result) => (result.length ? result[0].observe() : of$(undefined))),
);
return {
user,
};
});
const enhance = withObservables(['reaction'], ({database, reaction}: {reaction: ReactionModel} & WithDatabaseArgs) => ({
user: observeUser(database, reaction.userId),
}));
export default withDatabase(enhance(Reactor));