118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
import * as FileSystem from "expo-file-system";
|
|
import {
|
|
Button,
|
|
Container,
|
|
Content,
|
|
Text as NBText,
|
|
Thumbnail,
|
|
View,
|
|
} from "native-base";
|
|
import React, { useEffect, useState } from "react";
|
|
import { FlatList, StyleSheet, Text, TouchableOpacity } from "react-native";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
removeAllPhotos,
|
|
uploadAllPhotos,
|
|
} from "../../redux/photos/photos.actions";
|
|
import { selectPhotos } from "../../redux/photos/photos.selectors";
|
|
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
photos: selectPhotos,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
removeAllPhotos: () => dispatch(removeAllPhotos()),
|
|
uploadAllphotos: () => dispatch(uploadAllPhotos()),
|
|
});
|
|
|
|
export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
const [imgIndex, setImgIndex] = useState(0);
|
|
const [imagesInDir, setImagesInDir] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const check = async () => {
|
|
setImagesInDir(
|
|
await FileSystem.readDirectoryAsync(
|
|
FileSystem.documentDirectory + "photos"
|
|
)
|
|
);
|
|
};
|
|
photos.length;
|
|
check();
|
|
}, [photos]);
|
|
|
|
return (
|
|
<Container>
|
|
<Content>
|
|
<View style={styles.actions}>
|
|
<Button onPress={() => removeAllPhotos()}>
|
|
<NBText>Delete all</NBText>
|
|
</Button>
|
|
<Button onPress={() => uploadAllphotos()}>
|
|
<NBText>Upload all</NBText>
|
|
</Button>
|
|
</View>
|
|
<Text>{`${photos.length} Photos`}</Text>
|
|
<FlatList
|
|
data={photos}
|
|
style={{ flex: 5 }}
|
|
contentContainerStyle={styles.listContentContainer}
|
|
keyExtractor={(item) => item.id}
|
|
numColumns={5}
|
|
renderItem={(object) =>
|
|
object.item.video ? (
|
|
<Text>Video</Text>
|
|
) : (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setImgIndex(object.index);
|
|
setPreviewVisible(true);
|
|
}}
|
|
>
|
|
<Thumbnail square large source={{ uri: object.item.uri }} />
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
/>
|
|
|
|
<MediaCacheOverlay
|
|
imgIndex={imgIndex}
|
|
setImgIndex={setImgIndex}
|
|
previewVisible={previewVisible}
|
|
setPreviewVisible={setPreviewVisible}
|
|
/>
|
|
</Content>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
actions: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
},
|
|
listContentContainer: {
|
|
flex: 1,
|
|
},
|
|
thumbnail: {
|
|
width: 10,
|
|
height: 10,
|
|
// backgroundColor: "tomato",
|
|
},
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);
|
|
|
|
// <FlatList
|
|
// data={imagesInDir}
|
|
// style={{}}
|
|
// keyExtractor={(item) => item.id}
|
|
// renderItem={(object) => <Text>{object.item}</Text>}
|
|
// />;
|