Fix openCamera, openCropped, lightbox model, and image model usages (#1908)

src/lib/media/picker.e2e.tsx

@@ -1,4 +1,3 @@
-import {RootStoreModel} from 'state/index'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 import RNFS from 'react-native-fs'
 import {CropperOptions} from './types'
@@ -22,18 +21,15 @@ async function getFile() {
   })
 }
 
-export async function openPicker(_store: RootStoreModel): Promise<RNImage[]> {
+export async function openPicker(): Promise<RNImage[]> {
   return [await getFile()]
 }
 
-export async function openCamera(_store: RootStoreModel): Promise<RNImage> {
+export async function openCamera(): Promise<RNImage> {
   return await getFile()
 }
 
-export async function openCropper(
+export async function openCropper(opts: CropperOptions): Promise<RNImage> {
-  _store: RootStoreModel,
-  opts: CropperOptions,
-): Promise<RNImage> {
   return {
     path: opts.path,
     mime: 'image/jpeg',

src/lib/media/picker.tsx

@@ -6,15 +6,6 @@ import {
 import {CameraOpts, CropperOptions} from './types'
 export {openPicker} from './picker.shared'
 
-/**
- * NOTE
- * These methods all include the RootStoreModel as the first param
- * because the web versions require it. The signatures have to remain
- * equivalent between the different forms, but the store param is not
- * used here.
- * -prf
- */
-
 export async function openCamera(opts: CameraOpts): Promise<RNImage> {
   const item = await openCameraFn({
     width: opts.width,

src/view/com/composer/photos/OpenCameraBtn.tsx

@@ -6,7 +6,6 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics/analytics'
-import {useStores} from 'state/index'
 import {openCamera} from 'lib/media/picker'
 import {useCameraPermission} from 'lib/hooks/usePermissions'
 import {HITSLOP_10, POST_IMG_MAX} from 'lib/constants'
@@ -23,7 +22,6 @@ type Props = {
 export function OpenCameraBtn({gallery}: Props) {
   const pal = usePalette('default')
   const {track} = useAnalytics()
-  const store = useStores()
   const {_} = useLingui()
   const {requestCameraAccessIfNeeded} = useCameraPermission()
 
@@ -34,7 +32,7 @@ export function OpenCameraBtn({gallery}: Props) {
         return
       }
 
-      const img = await openCamera(store, {
+      const img = await openCamera({
         width: POST_IMG_MAX.width,
         height: POST_IMG_MAX.height,
         freeStyleCropEnabled: true,
@@ -45,7 +43,7 @@ export function OpenCameraBtn({gallery}: Props) {
       // ignore
       logger.warn('Error using camera', {error: err})
     }
-  }, [gallery, track, store, requestCameraAccessIfNeeded])
+  }, [gallery, track, requestCameraAccessIfNeeded])
 
   const shouldShowCameraButton = isNative || isMobileWeb
   if (!shouldShowCameraButton) {

src/view/com/composer/useExternalLinkFetch.ts

@@ -120,9 +120,7 @@ export function useExternalLinkFetch({
           setExtLink({
             ...extLink,
             isLoading: false, // done
-            localThumb: localThumb
+            localThumb: localThumb ? new ImageModel(localThumb) : undefined,
-              ? new ImageModel(store, localThumb)
-              : undefined,
           })
         })
       return cleanup

src/view/com/lightbox/Lightbox.tsx

@@ -94,7 +94,7 @@ const LightboxFooter = observer(function LightboxFooter({
     altText = opts.images[imageIndex].alt || ''
   } else if (lightbox.name === 'profile-image') {
     const opts = lightbox as models.ProfileImageLightbox
-    uri = opts.profileView.avatar || ''
+    uri = opts.profile.avatar || ''
   }
 
   return (

src/view/com/util/UserAvatar.tsx

@@ -9,7 +9,6 @@ import {
   usePhotoLibraryPermission,
   useCameraPermission,
 } from 'lib/hooks/usePermissions'
-import {useStores} from 'state/index'
 import {colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb, isAndroid} from 'platform/detection'
@@ -184,7 +183,6 @@ export function EditableUserAvatar({
   avatar,
   onSelectNewAvatar,
 }: EditableUserAvatarProps) {
-  const store = useStores()
   const pal = usePalette('default')
   const {_} = useLingui()
   const {requestCameraAccessIfNeeded} = useCameraPermission()
@@ -224,7 +222,7 @@ export function EditableUserAvatar({
             }
 
             onSelectNewAvatar(
-              await openCamera(store, {
+              await openCamera({
                 width: 1000,
                 height: 1000,
                 cropperCircleOverlay: true,
@@ -255,7 +253,7 @@ export function EditableUserAvatar({
               return
             }
 
-            const croppedImage = await openCropper(store, {
+            const croppedImage = await openCropper({
               mediaType: 'photo',
               cropperCircleOverlay: true,
               height: item.height,
@@ -289,7 +287,6 @@ export function EditableUserAvatar({
       onSelectNewAvatar,
       requestCameraAccessIfNeeded,
       requestPhotoAccessIfNeeded,
-      store,
     ],
   )
 

src/view/com/util/UserBanner.tsx

@@ -5,7 +5,6 @@ import {ModerationUI} from '@atproto/api'
 import {Image} from 'expo-image'
 import {colors} from 'lib/styles'
 import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
-import {useStores} from 'state/index'
 import {
   usePhotoLibraryPermission,
   useCameraPermission,
@@ -26,7 +25,6 @@ export function UserBanner({
   moderation?: ModerationUI
   onSelectNewBanner?: (img: RNImage | null) => void
 }) {
-  const store = useStores()
   const pal = usePalette('default')
   const {_} = useLingui()
   const {requestCameraAccessIfNeeded} = useCameraPermission()
@@ -50,7 +48,7 @@ export function UserBanner({
               return
             }
             onSelectNewBanner?.(
-              await openCamera(store, {
+              await openCamera({
                 width: 3000,
                 height: 1000,
               }),
@@ -77,7 +75,7 @@ export function UserBanner({
             }
 
             onSelectNewBanner?.(
-              await openCropper(store, {
+              await openCropper({
                 mediaType: 'photo',
                 path: items[0].path,
                 width: 3000,
@@ -106,7 +104,6 @@ export function UserBanner({
       onSelectNewBanner,
       requestCameraAccessIfNeeded,
       requestPhotoAccessIfNeeded,
-      store,
     ],
   )