clicking on image in reaction modal opens up their profile

homebase-id · Aug 27, 2024 · b8e1cc8 · b8e1cc8
1 parent acdd792
commit b8e1cc8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/packages/mobile/src/components/Chat/Reactions/Modal/ReactionsModal.tsx b/packages/mobile/src/components/Chat/Reactions/Modal/ReactionsModal.tsx
@@ -11,6 +11,7 @@ import { Avatar, OwnerAvatar } from '../../../ui/Avatars/Avatar';
 import { AuthorName } from '../../../ui/Name';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { Backdrop } from '../../../ui/Modal/Backdrop';
+import { openURL } from '../../../../utils/utils';
 
 export const ReactionsModal = memo(
   forwardRef(
@@ -109,6 +110,7 @@ export const ReactionTile = ({
             width: 42,
             height: 42,
           }}
+          onPress={() => openURL(`https://${authorOdinId}/`)}
         />
       ) : (
         <OwnerAvatar

diff --git a/packages/mobile/src/components/ui/Avatars/Avatar.tsx b/packages/mobile/src/components/ui/Avatars/Avatar.tsx
@@ -1,7 +1,16 @@
 import { CONTACT_PROFILE_IMAGE_KEY, ContactConfig } from '@homebase-id/js-lib/network';
 import { GetTargetDriveFromProfileId, BuiltInProfiles } from '@homebase-id/js-lib/profile';
 import { memo, useMemo, useState } from 'react';
-import { ImageStyle, StyleProp, ViewStyle, View, StyleSheet, Image, Platform } from 'react-native';
+import {
+  ImageStyle,
+  StyleProp,
+  ViewStyle,
+  View,
+  StyleSheet,
+  Image,
+  Platform,
+  Pressable,
+} from 'react-native';
 import useContact from '../../../hooks/contact/useContact';
 import { useProfile } from '../../../hooks/profile/useProfile';
 import { useDarkMode } from '../../../hooks/useDarkMode';
@@ -15,6 +24,7 @@ export const Avatar = memo(
   (props: {
     odinId: string;
     style?: ImageStyle;
+    onPress?: () => void;
     imageSize?: { width: number; height: number };
   }) => {
     const { data: contact } = useContact(props.odinId).fetch;
@@ -29,34 +39,38 @@ export const Avatar = memo(
             imageSize={props.imageSize || { width: 48, height: 48 }}
             fit="contain"
             lastModified={contact?.fileMetadata.updated}
+            onClick={props.onPress}
           />
         </View>
       );
     } else {
-      return <PublicAvatar odinId={props.odinId} style={props.style} imageSize={props.imageSize} />;
+      return <PublicAvatar {...props} />;
     }
   }
 );
 
 export const PublicAvatar = (props: {
   odinId: string;
   style?: ImageStyle;
+  onPress?: () => void;
   imageSize?: { width: number; height: number };
 }) => {
   const [isSvg, setIsSvg] = useState(false);
   if (!isSvg) {
     return (
-      <Image
-        style={{
-          ...styles.tinyLogo,
-          ...props.style,
-        }}
-        onError={(e) => {
-          // console.error('Error loading image', e.nativeEvent.error);
-          setIsSvg(true);
-        }}
-        source={{ uri: `https://${props.odinId}/pub/image` }}
-      />
+      <Pressable onPress={props.onPress}>
+        <Image
+          style={{
+            ...styles.tinyLogo,
+            ...props.style,
+          }}
+          onError={(e) => {
+            // console.error('Error loading image', e.nativeEvent.error);
+            setIsSvg(true);
+          }}
+          source={{ uri: `https://${props.odinId}/pub/image` }}
+        />
+      </Pressable>
     );
   } else {
     return (
@@ -71,12 +85,14 @@ export const PublicAvatar = (props: {
           Platform.OS === 'android' ? props.style : undefined,
         ]}
       >
-        <SvgUri
-          width={props.imageSize?.width}
-          height={props.imageSize?.height}
-          uri={`https://${props.odinId}/pub/image`}
-          style={{ overflow: 'hidden', ...props.style }}
-        />
+        <Pressable onPress={props.onPress}>
+          <SvgUri
+            width={props.imageSize?.width}
+            height={props.imageSize?.height}
+            uri={`https://${props.odinId}/pub/image`}
+            style={{ overflow: 'hidden', ...props.style }}
+          />
+        </Pressable>
       </View>
     );
   }