feat: implemented files

This commit is contained in:
Fándly Gergő 2022-07-02 13:18:22 +03:00
parent 0d1df64c7f
commit 3fb9e49377
5 changed files with 170 additions and 3 deletions

79
package-lock.json generated
View File

@ -14,11 +14,13 @@
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"aws-sdk": "^2.1166.0",
"pretty-bytes": "^6.0.0",
"react": "18.0.0",
"react-native": "0.69.1",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.14.0"
"react-native-screens": "^3.14.0",
"rn-fetch-blob": "^0.12.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
@ -5378,6 +5380,11 @@
"node": ">=0.10.0"
}
},
"node_modules/base-64": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
"integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
},
"node_modules/base/node_modules/define-property": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
@ -12586,6 +12593,17 @@
"node": ">=6.0.0"
}
},
"node_modules/pretty-bytes": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
"integrity": "sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==",
"engines": {
"node": "^14.13.1 || >=16.0.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/pretty-format": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
@ -13260,6 +13278,31 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/rn-fetch-blob": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/rn-fetch-blob/-/rn-fetch-blob-0.12.0.tgz",
"integrity": "sha512-+QnR7AsJ14zqpVVUbzbtAjq0iI8c9tCg49tIoKO2ezjzRunN7YL6zFSFSWZm6d+mE/l9r+OeDM3jmb2tBb2WbA==",
"dependencies": {
"base-64": "0.1.0",
"glob": "7.0.6"
}
},
"node_modules/rn-fetch-blob/node_modules/glob": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
"integrity": "sha512-f8c0rE8JiCxpa52kWPAOa3ZaYEnzofDzCQLCn3Vdk0Z5OVLq3BsRFJI4S4ykpeVW6QMGBUkMeUpoEgWnMTnw5Q==",
"dependencies": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.2",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
},
"engines": {
"node": "*"
}
},
"node_modules/rsvp": {
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@ -19496,6 +19539,11 @@
}
}
},
"base-64": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
"integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
},
"base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@ -24923,6 +24971,11 @@
"fast-diff": "^1.1.2"
}
},
"pretty-bytes": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
"integrity": "sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg=="
},
"pretty-format": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
@ -25450,6 +25503,30 @@
"glob": "^7.1.3"
}
},
"rn-fetch-blob": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/rn-fetch-blob/-/rn-fetch-blob-0.12.0.tgz",
"integrity": "sha512-+QnR7AsJ14zqpVVUbzbtAjq0iI8c9tCg49tIoKO2ezjzRunN7YL6zFSFSWZm6d+mE/l9r+OeDM3jmb2tBb2WbA==",
"requires": {
"base-64": "0.1.0",
"glob": "7.0.6"
},
"dependencies": {
"glob": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
"integrity": "sha512-f8c0rE8JiCxpa52kWPAOa3ZaYEnzofDzCQLCn3Vdk0Z5OVLq3BsRFJI4S4ykpeVW6QMGBUkMeUpoEgWnMTnw5Q==",
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.2",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
}
}
},
"rsvp": {
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

View File

@ -16,11 +16,13 @@
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"aws-sdk": "^2.1166.0",
"pretty-bytes": "^6.0.0",
"react": "18.0.0",
"react-native": "0.69.1",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.14.0"
"react-native-screens": "^3.14.0",
"rn-fetch-blob": "^0.12.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",

View File

@ -11,6 +11,7 @@ import SignUp from './screens/SignUp';
import Buckets from './screens/Buckets';
import Settings from './screens/Settings';
import DirectoryDetails from './screens/DirectoryDetails';
import FileDetails from './screens/FileDetails';
const Stack = createNativeStackNavigator();
@ -53,6 +54,13 @@ const Navigation = () => {
title: route.params.dir,
})}
/>
<Stack.Screen
name="FileDetails"
component={FileDetails}
options={({route}) => ({
title: route.params.file,
})}
/>
<Stack.Screen
name="Settings"
component={Settings}

View File

@ -21,7 +21,6 @@ const DirectoryDetails = () => {
},
(err, data) => {
if (err) {
console.log(err);
ToastAndroid.show(
'Failed to fetch directory contents',
ToastAndroid.SHORT,

View File

@ -0,0 +1,81 @@
import React, {useState, useEffect} from 'react';
import {
StyleSheet,
ScrollView,
Text,
Button,
ToastAndroid,
PermissionsAndroid,
} from 'react-native';
import {useRoute} from '@react-navigation/native';
import prettyBytes from 'pretty-bytes';
import useS3 from '../hooks/useS3';
const FileDetails = () => {
const route = useRoute();
const s3 = useS3();
const [data, setData] = useState(null);
useEffect(() => {
if (s3 && !data) {
s3.getObject(
{
Bucket: route.params.bucket,
Key: route.params.file,
Range: 'bytes=0-1',
},
(err, data) => {
if (err) {
ToastAndroid.show('Failed to fetch file info', ToastAndroid.SHORT);
return;
}
setData(data);
},
);
}
}, [s3]);
if (!data) {
return <Text>Loading...</Text>;
}
return (
<ScrollView style={styles.root}>
<Text style={styles.bucket}>Bucket: {route.params.bucket}</Text>
<Text style={styles.fileName}>Key: {route.params.file}</Text>
<Text style={styles.info}>
Last modified: {data.LastModified.toISOString()}
</Text>
<Text style={styles.info}>Size: {prettyBytes(data.ContentLength)}</Text>
<Text style={styles.info}>Content type: {data.ContentType}</Text>
</ScrollView>
);
};
const styles = StyleSheet.create({
root: {
flex: 1,
padding: 12,
},
bucket: {
fontSize: 14,
marginBottom: 12,
color: '#000000',
},
fileName: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 12,
color: '#000000',
},
info: {
fontSize: 14,
marginBottom: 12,
},
download: {
marginTop: 16,
},
});
export default FileDetails;