download asset form box

keithluchtel · May 29, 2022 · 2993e82 · 2993e82
1 parent cc9b3f6
commit 2993e82
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 49 deletions.
diff --git a/app/components/asset-list/recycler-asset-list/asset-items/asset-item.tsx b/app/components/asset-list/recycler-asset-list/asset-items/asset-item.tsx
@@ -1,9 +1,9 @@
 import React, { memo } from "react"
 import { StyleSheet, View, Image, NativeSyntheticEvent, ImageErrorEventData } from "react-native"
 import { Icon, Text, useTheme } from "@rneui/themed"
+
 import { Asset } from "../../../../types"
 import { Checkbox } from "../../../checkbox/checkbox"
-
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated"
 import { SharedElement } from "react-navigation-shared-element"
 import { convertDurationToTime } from "../../../../utils/helper"
@@ -48,19 +48,17 @@ const AssetItem = (props: Props): JSX.Element => {
       borderColor: theme.colors.background
     }]}>
       <Animated.View style={[styles.imageContainer, imageContainerAnimatedStyle]}>
-        <SharedElement style={styles.sharedElementContainer} id={asset.uri}>
-          {props?.isDeleted && props?.isSynced ?
-            <Icon type="material-community" name="alpha-f-box-outline" size={50} color="gray" />
-            : <Image
-              style={styles.image}
-              source={{
-                uri: asset?.uri,
-              }}
-              fadeDuration={100}
-              resizeMode="cover"
-              onError={props.onError}
-            />}
-        </SharedElement>
+        {props?.isDeleted && props?.isSynced ? <Icon type="material-community" name="alpha-f-box-outline" size={50} color="gray" /> : <SharedElement style={styles.sharedElementContainer} id={asset.uri}>
+          <Image
+            style={styles.image}
+            source={{
+              uri: asset?.uri,
+            }}
+            fadeDuration={100}
+            resizeMode="cover"
+            onError={props.onError}
+          />
+        </SharedElement>}
       </Animated.View>
       {asset?.mediaType === "video" &&
         <View style={styles.videoIconContainer}>
@@ -96,10 +94,11 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: "hidden",
     zIndex: 0,
+    justifyContent:"center"
   },
   sharedElementContainer: {
     flex: 1,
-    justifyContent:"center"
+    justifyContent: "center"
   },
   videoIconContainer: {
     right: 10,

diff --git a/app/screens/photo/index.tsx b/app/screens/photo/index.tsx
@@ -9,7 +9,7 @@ import Animated, {
   useAnimatedGestureHandler,
 } from "react-native-reanimated"
 import { snapPoint } from "react-native-redash"
-import { ActivityIndicator, Alert, Dimensions, StyleSheet } from "react-native"
+import { ActivityIndicator, Alert, Dimensions, StyleSheet, View } from "react-native"
 import { SharedElement } from "react-navigation-shared-element"
 import {
   TapGestureHandler,
@@ -21,10 +21,10 @@ import { widthPercentageToDP } from "react-native-responsive-screen"
 import { RouteProp, NavigationProp } from "@react-navigation/native"
 import { file, fula } from "react-native-fula"
 import { Asset } from "../../types"
-import { palette } from "../../theme"
+import { Constants, palette } from "../../theme"
 import { Header } from "../../components"
 import { HomeNavigationParamList } from "../../navigators"
-import { Icon } from "@rneui/themed"
+import { Card, Icon } from "@rneui/themed"
 import { HeaderArrowBack } from "../../components/header"
 import { useRecoilState } from "recoil"
 import { boxsState } from "../../store"
@@ -69,6 +69,7 @@ export const PhotoScreen: React.FC<PhotoScreenProps> = ({ navigation, route }) =
 
   const wrapperAnimatedStyle = useAnimatedStyle(() => {
     return {
+      paddingTop: Constants.HeaderHeight,
       backgroundColor: palette.black,
       flex: 1,
       opacity: animatedOpacity.value,
@@ -87,7 +88,33 @@ export const PhotoScreen: React.FC<PhotoScreenProps> = ({ navigation, route }) =
   const goBack = () => {
     navigation.goBack()
   }
-  const uploadOrDownload = async () => {
+  const downloadFromBox = async () => {
+    if (asset?.isSynced && asset?.isDeleted) {
+      setLoading(true);
+      setTimeout(async () => {
+        try {
+          const result = await file.receive(asset?.cid, false)
+          console.log("downloadFromBox:",result)
+          setAsset(prev => ({
+            ...prev,
+            uri: result.uri,
+            isDeleted: false
+          }))
+          Assets.addOrUpdate([{
+            id: asset.id,
+            uri:result.uri,
+            isDeleted:false
+          }]);
+        } catch (error) {
+          console.log("uploadOrDownload", error)
+          Alert.alert("Error", "Unable to receive the file")
+        } finally {
+          setLoading(false)
+        }
+      }, 0);
+    }
+  }
+  const uploadToBox = async () => {
     if (!asset?.isSynced && !asset?.isDeleted) {
       setLoading(true);
       setTimeout(async () => {
@@ -114,23 +141,6 @@ export const PhotoScreen: React.FC<PhotoScreenProps> = ({ navigation, route }) =
           setLoading(false)
         }
       }, 0);
-    } else if (asset?.isSynced && asset?.isDeleted) {
-      setLoading(true);
-      setTimeout(async () => {
-        try {
-          const result = await file.receive(asset?.cid, false)
-          setAsset(prev => ({
-            ...prev,
-            uri: result.uri,
-            isDeleted: false
-          }))
-        } catch (error) {
-          console.log("uploadOrDownload", error)
-          Alert.alert("Error", "Unable to receive the file")
-        } finally {
-          setLoading(false)
-        }
-      }, 0);
     }
   }
   const onPanGesture = useAnimatedGestureHandler({
@@ -210,26 +220,36 @@ export const PhotoScreen: React.FC<PhotoScreenProps> = ({ navigation, route }) =
   const renderHeader = () => {
     return (<Header
       leftComponent={<HeaderArrowBack navigation={navigation} />}
-      rightComponent={loading ? <ActivityIndicator size="small" /> : <Icon type="material-community"
-        name={asset?.isSynced && !asset?.isDeleted ? "cloud-check" : (asset?.isSynced && asset?.isDeleted ? "cloud-download" : "cloud-upload-outline")} onPress={uploadOrDownload} />}
-    />)
+      rightComponent={loading ? <ActivityIndicator size="small" /> :
+        (asset?.isSynced ? <Icon type="material-community" name="cloud-check" />
+          : (!asset?.isSynced && !asset?.isDeleted ? <Icon type="material-community" name="cloud-upload-outline" onPress={uploadToBox} /> : null))
+      } />)
+  }
+  const renderDownloadSection = () => {
+    return (<Card containerStyle={{ borderWidth: 0 }} >
+      <Icon type="material-community" name="cloud-download-outline" size={78} onPress={downloadFromBox} />
+      <Card.Title>Tap to download</Card.Title>
+    </Card>)
   }
   return (
     <PanGestureHandler maxPointers={1} minPointers={1} onGestureEvent={onPanGesture}>
       <Animated.View style={wrapperAnimatedStyle}>
         {renderHeader()}
         <Animated.View style={animatedStyle}>
           <TapGestureHandler onActivated={() => onDoubleTap()} numberOfTaps={2}>
-            <SharedElement style={imageContainerStyle} id={asset.uri}>
-              <PinchGestureHandler onGestureEvent={onPinchHandler}>
-                <Animated.Image
-                  source={{ uri: asset.uri }}
-                  fadeDuration={0}
-                  resizeMode="contain"
-                  style={[styles.image, animatedImage]}
-                />
-              </PinchGestureHandler>
-            </SharedElement>
+            <View>
+              {asset?.isSynced && asset?.isDeleted && renderDownloadSection()}
+              {!asset?.isDeleted && <SharedElement style={imageContainerStyle} id={asset.uri}>
+                <PinchGestureHandler onGestureEvent={onPinchHandler}>
+                  <Animated.Image
+                    source={{ uri: asset.uri }}
+                    fadeDuration={0}
+                    resizeMode="contain"
+                    style={[styles.image, animatedImage]}
+                  />
+                </PinchGestureHandler>
+              </SharedElement>}
+            </View>
           </TapGestureHandler>
         </Animated.View>
       </Animated.View>