fix(reactions): view reactions not showing all users

Author: m-doescode

src/components/sheets/ViewReactionsSheet.tsx

@@ -1,64 +1,52 @@
-import { useRef, useState, useContext } from 'react';
-import { View, Text, Image, ScrollView, Pressable, StyleSheet, ViewStyle, StyleProp, TouchableOpacity } from 'react-native';
+import { useRef, useState, useContext, useEffect } from 'react';
+import { View, Text, Image, Pressable, StyleSheet, ViewStyle, StyleProp, TouchableOpacity } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 import { observer } from 'mobx-react-lite';
 
 import type BottomSheetCore from '@gorhom/bottom-sheet';
 import { BottomSheet } from '@clerotri/components/common/BottomSheet';
 import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import { app, setFunction } from '@clerotri/Generic';
-import { Message } from 'revolt.js';
+import { Member, Message, User } from 'revolt.js';
 import { client } from '@clerotri/lib/client';
 import { commonValues, ThemeContext, Theme } from '@clerotri/lib/themes';
-import { Style } from 'util';
 import { MiniProfile } from '../common/profile';
 
 type ReactionPile = {
   emoji: string;
   reactors: string[];
 };
 
-const Reactors = observer(({message, reaction, style}: {message: Message | null, reaction: string | null, style: StyleProp<ViewStyle>}) => {
-  if (!message || !reaction || !message.reactions.get(reaction)) return <></>;
-
-  const rawReactors = Array.from(message.reactions.get(reaction)!.values());
-  let reactors: string[] = [];
-  for (const r of rawReactors) {
-    reactors.push(r);
-  }
-
-  return (<>
-    {reactors.map((e) => {
-      const user = client.users.get(e);
-      if (user && user.relationship != 'Blocked')
-        return <TouchableOpacity
-          style={style}
-          onPress={() => {
-            app.openProfile(user);
-          }}
-        >
-          <MiniProfile key={`viewreactions-content-${user._id}`} user={user} />
-        </TouchableOpacity>
-    })}
-  </>);
-});
-
 export const ViewReactionsSheet = observer(() => {
   const {currentTheme} = useContext(ThemeContext);
   const localStyles = generateLocalStyles(currentTheme);
 
   const [message, setMessage] = useState(null as Message | null);
   const [reaction, setReaction] = useState(null as string | null);
-  const currentReaction = () => message && (reaction && message.reactions.get(reaction) && message.reactions.get(reaction)!.size > 0 && reaction) || message?.reactions.keys().next()?.toString();
 
   const sheetRef = useRef<BottomSheetCore>(null);
 
   setFunction('openViewReactions', async (m: Message | null, emoji: string) => {
     setMessage(m);
-    setReaction(emoji);
+    setReaction(emoji || (m?.reactions.keys().next().value ?? null));
     m ? sheetRef.current?.expand() : sheetRef.current?.close();
   });
 
-  // const [messageReactions, setMessageReactions] = useState([] as ReactionPile[] | null);
+  const [reactors, setReactors] = useState([] as User[]);
+
+  useEffect(() => {
+    if (!message || !reaction || !message.reactions.get(reaction)) return;
+
+    const rawReactors = Array.from(message.reactions.get(reaction)!.values());
+    setReactors([]);
+    const fetchedReactors = [] as User[];
+    for (const r of rawReactors) {
+      client.users.fetch(r).then((u) => {
+        fetchedReactors.push(u);
+        setReactors([...fetchedReactors]);
+      });
+    }
+  }, [message, reaction]);
 
   const rawReactions = Array.from(message?.reactions ?? []);
   let reactions: ReactionPile[] = [];
@@ -69,7 +57,7 @@ export const ViewReactionsSheet = observer(() => {
   return (
     <BottomSheet outerScroll={'custom'} sheetRef={sheetRef}>
       {!message ? <></> : (
-        <View style={{ paddingHorizontal: 16, height: 200}}>
+        <View style={{ paddingHorizontal: 16, flex: 1}}>
           <ScrollView horizontal style={{
             marginVertical: commonValues.sizes.small,
             maxHeight: 36,
@@ -81,7 +69,7 @@ export const ViewReactionsSheet = observer(() => {
                   style={{
                     padding: commonValues.sizes.small,
                     borderRadius: commonValues.sizes.small,
-                    borderColor: currentReaction() && r.emoji == currentReaction()
+                    borderColor: reaction && r.emoji == reaction
                       ? currentTheme.accentColor
                       : currentTheme.backgroundTertiary,
                     backgroundColor: currentTheme.backgroundSecondary,
@@ -109,7 +97,17 @@ export const ViewReactionsSheet = observer(() => {
             })}
           </ScrollView>
           <BottomSheetScrollView>
-            <Reactors message={message} reaction={reaction} style={localStyles.reactorButton} />
+            {reactors.map((user) => {
+              if (user && user.relationship != 'Blocked')
+                return <TouchableOpacity
+                  style={localStyles.reactorButton}
+                  onPress={() => {
+                    app.openProfile(user);
+                  }}
+                >
+                  <MiniProfile key={`viewreactions-content-${user._id}`} user={user} />
+                </TouchableOpacity>
+            })}
           </BottomSheetScrollView>
         </View>
       )}