bug fix: pfp not working on mobile (#2443)

* base * better
gallery-so · Apr 26, 2024 · b3705d8 · b3705d8
1 parent 19ff3a6
commit b3705d8
Showing 1 changed file with 40 additions and 3 deletions.
diff --git a/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx b/apps/mobile/src/components/ProfilePicture/ProfilePicture.tsx
@@ -3,7 +3,9 @@ import { useFragment } from 'react-relay';
 import { graphql } from 'relay-runtime';
 
 import { ProfilePictureFragment$key } from '~/generated/ProfilePictureFragment.graphql';
+import { ProfilePictureValidFragment$key } from '~/generated/ProfilePictureValidFragment.graphql';
 import { ReportingErrorBoundary } from '~/shared/errors/ReportingErrorBoundary';
+import { useGetSinglePreviewImage } from '~/shared/relay/useGetPreviewImages';
 
 import { RawProfilePicture, RawProfilePictureProps } from './RawProfilePicture';
 
@@ -21,6 +23,7 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
         profileImage {
           ... on TokenProfileImage {
             token {
+              ...ProfilePictureValidFragment
               definition {
                 media {
                   ... on Media {
@@ -48,7 +51,7 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
   );
 
   const { token, profileImage: ensImage } = user?.profileImage ?? {};
-  const imageUrl = token?.definition?.media?.previewURLs?.small ?? ensImage?.previewURLs?.small;
+  const ensImageUrl = ensImage?.previewURLs?.small;
 
   const letter = user?.username?.[0]?.toUpperCase();
 
@@ -64,15 +67,29 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
     />
   );
 
-  if (imageUrl) {
+  if (ensImageUrl) {
     return (
       <ReportingErrorBoundary fallback={fallbackProfilePicture}>
         <RawProfilePicture
           eventElementId="ProfilePicture"
           eventName="ProfilePicture pressed"
           // TODO analytics prop drill
           eventContext={null}
-          imageUrl={imageUrl}
+          imageUrl={ensImageUrl}
+          style={style}
+          {...rest}
+        />
+      </ReportingErrorBoundary>
+    );
+  } else if (token) {
+    return (
+      <ReportingErrorBoundary fallback={fallbackProfilePicture}>
+        <ValidProfilePicture
+          eventElementId="ProfilePicture"
+          eventName="ProfilePicture pressed"
+          // TODO analytics prop drill
+          eventContext={null}
+          tokenRef={token}
           style={style}
           {...rest}
         />
@@ -82,3 +99,23 @@ export function ProfilePicture({ userRef, style, ...rest }: ProfilePictureProps)
     return fallbackProfilePicture;
   }
 }
+
+type ValidProfilePictureProps = {
+  style?: ViewProps['style'];
+  tokenRef: ProfilePictureValidFragment$key;
+} & Omit<RawProfilePictureProps, 'imageUrl'>;
+
+function ValidProfilePicture({ tokenRef, style, ...rest }: ValidProfilePictureProps) {
+  const token = useFragment(
+    graphql`
+      fragment ProfilePictureValidFragment on Token {
+        ...useGetPreviewImagesSingleFragment
+      }
+    `,
+    tokenRef
+  );
+
+  const imageUrl = useGetSinglePreviewImage({ tokenRef: token, size: 'small' }) ?? '';
+
+  return <RawProfilePicture imageUrl={imageUrl} style={style} {...rest} />;
+}