feat: Implemented listing

src/screens/Buckets.js

@@ -1,10 +1,32 @@
-import React from 'react';
-import {StyleSheet, View, Text, ScrollView} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {ScrollView, ToastAndroid} from 'react-native';
+import useS3 from '../hooks/useS3';
+import Bucket from '../components/Bucket';
 
 const Buckets = () => {
-	return (
-		<Text>Signed in!!!</Text>
-	)
-}
+	const s3 = useS3();
+	const [buckets, setBuckets] = useState([]);
 
-export default Buckets;
+	useEffect(() => {
+		if (s3 && !buckets.length) {
+			s3.listBuckets({}, (err, data) => {
+				if (err) {
+					ToastAndroid.show('Failed to fetch buckets', ToastAndroid.SHORT);
+					return;
+				}
+
+				setBuckets(data.Buckets);
+			});
+		}
+	}, [s3]);
+
+	return (
+		<ScrollView>
+			{buckets.map(bucket => (
+				<Bucket key={bucket.Name} bucket={bucket} />
+			))}
+		</ScrollView>
+	);
+};
+
+export default Buckets;

src/screens/DirectoryDetails.js

@@ -0,0 +1,58 @@
+import React, {useState, useEffect} from 'react';
+import {ScrollView, ToastAndroid} from 'react-native';
+import {useRoute} from '@react-navigation/native';
+import useS3 from '../hooks/useS3';
+import Directory from '../components/Directory';
+import File from '../components/File';
+
+const DirectoryDetails = () => {
+	const route = useRoute();
+	const s3 = useS3();
+	const [contents, setContents] = useState({dirs: [], files: []});
+
+	useEffect(() => {
+		if (s3 && !contents.length) {
+			s3.listObjects(
+				{
+					Bucket: route.params.bucket,
+					Prefix: route.params.dir == '/' ? '' : route.params.dir,
+					Delimiter: '/',
+					MaxKeys: 5000,
+				},
+				(err, data) => {
+					if (err) {
+						console.log(err);
+						ToastAndroid.show(
+							'Failed to fetch directory contents',
+							ToastAndroid.SHORT,
+						);
+						return;
+					}
+
+					setContents({dirs: data.CommonPrefixes, files: data.Contents});
+				},
+			);
+		}
+	}, [s3]);
+
+	return (
+		<ScrollView>
+			{contents.dirs.map(dir => (
+				<Directory
+					key={'dir-' + dir.Prefix}
+					bucket={route.params.bucket}
+					dir={dir}
+				/>
+			))}
+			{contents.files.map(file => (
+				<File
+					key={'file-' + file.Key}
+					bucket={route.params.bucket}
+					file={file}
+				/>
+			))}
+		</ScrollView>
+	);
+};
+
+export default DirectoryDetails;

src/screens/Settings.js

@@ -3,10 +3,19 @@ import {StyleSheet, View, Text, Button, TextInput} from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import useLogout from '../hooks/useLogout';
 import {useNavigation} from '@react-navigation/native';
+import useSettings from '../hooks/useSettings';
 
 const Settings = () => {
 	const logOut = useLogout();
 	const navigation = useNavigation();
+	const [
+		isLoaded,
+		save,
+		awsKeyId,
+		setAwsKeyId,
+		awsSecretAccessKey,
+		setAwsSecretAccessKey,
+	] = useSettings();
 
 	const onLogout = useCallback(() => {
 		logOut().then(() => {
@@ -14,9 +23,32 @@ const Settings = () => {
 		});
 	}, [logOut]);
 
+	const onSave = useCallback(() => {
+		save().then(() => navigation.goBack());
+	}, [save, navigation]);
+
+	if (!isLoaded) {
+		return <Text>Loading...</Text>;
+	}
+
 	return (
 		<KeyboardAwareScrollView style={styles.root}>
+			<Text style={styles.label}>AWS Key ID</Text>
+			<TextInput
+				style={styles.input}
+				value={awsKeyId}
+				onChangeText={setAwsKeyId}
+			/>
+			<Text style={styles.label}>AWS Secret Access Key</Text>
+			<TextInput
+				style={styles.input}
+				value={awsSecretAccessKey}
+				onChangeText={setAwsSecretAccessKey}
+			/>
 			<View style={styles.button}>
+				<Button onPress={onSave} title="Save" />
+			</View>
+			<View style={[styles.button, styles.logout]}>
 				<Button onPress={onLogout} title="Sign out" />
 			</View>
 		</KeyboardAwareScrollView>
@@ -29,9 +61,14 @@ const styles = StyleSheet.create({
 		backgroundColor: '#FEFEFE',
 		padding: 10,
 	},
+	label: {
+		fontSize: 14,
+		color: '#333333',
+	},
 	input: {
 		height: 40,
 		margin: 12,
+		marginBottom: 24,
 		borderWidth: 1,
 		padding: 10,
 		borderRadius: 3,
@@ -42,6 +79,9 @@ const styles = StyleSheet.create({
 		margin: 12,
 		marginBottom: 32,
 	},
+	logout: {
+		marginTop: 64,
+	},
 });
 
 export default Settings;

src/screens/SignIn.js

@@ -29,7 +29,6 @@ const SignIn = () => {
 
 		logIn(email, pass)
 			.then(() => {
-				console.log('asdasd');
 				navigation.reset({index: 0, routes: [{name: 'Buckets'}]});
 			})
 			.catch(() => {});