Refactor lightbox model to plain object (#5999)

* Refactor lightbox model to plain object

* Rename name to type

src/view/com/lightbox/Lightbox.tsx

@@ -9,12 +9,7 @@ import {useLingui} from '@lingui/react'
 import {saveImageToMediaLibrary, shareImageModal} from '#/lib/media/manip'
 import {colors, s} from '#/lib/styles'
 import {isIOS} from '#/platform/detection'
-import {
-  ImagesLightbox,
-  ProfileImageLightbox,
-  useLightbox,
-  useLightboxControls,
-} from '#/state/lightbox'
+import {useLightbox, useLightboxControls} from '#/state/lightbox'
 import {ScrollView} from '#/view/com/util/Views'
 import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
@@ -32,8 +27,8 @@ export function Lightbox() {
 
   if (!activeLightbox) {
     return null
-  } else if (activeLightbox.name === 'profile-image') {
-    const opts = activeLightbox as ProfileImageLightbox
+  } else if (activeLightbox.type === 'profile-image') {
+    const opts = activeLightbox
     return (
       <ImageView
         images={[{uri: opts.profile.avatar || ''}]}
@@ -43,8 +38,8 @@ export function Lightbox() {
         FooterComponent={LightboxFooter}
       />
     )
-  } else if (activeLightbox.name === 'images') {
-    const opts = activeLightbox as ImagesLightbox
+  } else if (activeLightbox.type === 'images') {
+    const opts = activeLightbox
     return (
       <ImageView
         images={opts.images.map(img => ({...img}))}
@@ -107,12 +102,12 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) {
 
   let altText = ''
   let uri = ''
-  if (lightbox.name === 'images') {
-    const opts = lightbox as ImagesLightbox
+  if (lightbox.type === 'images') {
+    const opts = lightbox
     uri = opts.images[imageIndex].uri
     altText = opts.images[imageIndex].alt || ''
-  } else if (lightbox.name === 'profile-image') {
-    const opts = lightbox as ProfileImageLightbox
+  } else if (lightbox.type === 'profile-image') {
+    const opts = lightbox
     uri = opts.profile.avatar || ''
   }
 

src/view/com/lightbox/Lightbox.web.tsx

@@ -2,30 +2,26 @@ import React, {useCallback, useEffect, useState} from 'react'
 import {
   Image,
   ImageStyle,
+  Pressable,
+  StyleSheet,
   TouchableOpacity,
   TouchableWithoutFeedback,
-  StyleSheet,
   View,
-  Pressable,
   ViewStyle,
 } from 'react-native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {colors, s} from 'lib/styles'
-import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
-import {Text} from '../util/text/Text'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
-import {
-  useLightbox,
-  useLightboxControls,
-  ImagesLightbox,
-  ProfileImageLightbox,
-} from '#/state/lightbox'
+import {useLingui} from '@lingui/react'
+
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {colors, s} from '#/lib/styles'
+import {useLightbox, useLightboxControls} from '#/state/lightbox'
+import {Text} from '../util/text/Text'
+import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
 
 interface Img {
   uri: string
@@ -43,15 +39,15 @@ export function Lightbox() {
   }
 
   const initialIndex =
-    activeLightbox instanceof ImagesLightbox ? activeLightbox.index : 0
+    activeLightbox.type === 'images' ? activeLightbox.index : 0
 
   let imgs: Img[] | undefined
-  if (activeLightbox instanceof ProfileImageLightbox) {
+  if (activeLightbox.type === 'profile-image') {
     const opts = activeLightbox
     if (opts.profile.avatar) {
       imgs = [{uri: opts.profile.avatar}]
     }
-  } else if (activeLightbox instanceof ImagesLightbox) {
+  } else if (activeLightbox.type === 'images') {
     const opts = activeLightbox
     imgs = opts.images
   }