feat(aws-amplify-react-native): Add S3Text

packages/aws-amplify-react-native/src/AmplifyTheme.ts

@@ -158,4 +158,8 @@ export default StyleSheet.create({
 		textAlign: 'center',
 		padding: 20,
 	},
+	text: {
+		color: '#152939',
+		fontSize: 14,
+	},
 });

packages/aws-amplify-react-native/src/Storage/S3Text.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from 'react';
+import { Text, StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { Storage, Logger, I18n } from 'aws-amplify';
+
+import AmplifyTheme, { AmplifyThemeType } from '../AmplifyTheme';
+import { AccessLevel } from './common/types';
+
+const logger = new Logger('Storage.S3Text');
+
+interface IS3TextProps {
+	textKey?: string;
+	path?: string;
+	body?: string;
+	contentType?: string;
+	level?: AccessLevel;
+	track?: boolean;
+	identityId?: string;
+	fallbackText?: string;
+	style?: StyleProp<TextStyle>;
+	theme?: AmplifyThemeType;
+}
+
+export const S3Text = ({
+	textKey,
+	path,
+	body,
+	contentType = 'text/*',
+	level = AccessLevel.Public,
+	track = false,
+	identityId,
+	fallbackText = 'Fallback Content',
+	style,
+	theme = AmplifyTheme,
+}: IS3TextProps) => {
+	const [text, error] = useS3Text({
+		textKey,
+		path,
+		level,
+		track,
+		identityId,
+		body,
+		contentType,
+	});
+
+	const textStyle = Object.assign({}, StyleSheet.flatten(theme.text), style);
+
+	return <Text style={textStyle}>{error ? I18n.get(fallbackText) : text}</Text>;
+};
+
+interface IUseS3Text {
+	textKey?: string;
+	path?: string;
+	level: AccessLevel;
+	track: boolean;
+	identityId?: string;
+	body?: string;
+	contentType: string;
+}
+
+export const useS3Text = ({
+	textKey,
+	path,
+	level = AccessLevel.Public,
+	track = false,
+	identityId = '',
+	body,
+	contentType = 'text/*',
+}: IUseS3Text): [string?, Error?] => {
+	if (!textKey && !path) {
+		logger.debug('empty textKey and path');
+		return [undefined, new Error('empty textKey and path')];
+	}
+
+	const key = (textKey ?? path) as string;
+
+	const [text, setText] = useState<string | undefined>();
+	const [error, setError] = useState<Error | undefined>();
+
+	useEffect(() => {
+		(async () => {
+			logger.debug(`loading ${key}...`);
+
+			if (body && textKey) {
+				try {
+					const data = await Storage.put(textKey, body, {
+						contentType,
+						level,
+						track,
+					});
+
+					logger.debug('uploading data:', data);
+				} catch (error) {
+					logger.error(error);
+					setError(error);
+					return;
+				}
+			}
+
+			try {
+				const source = await getTextSource(
+					key,
+					level,
+					track,
+					identityId,
+					logger
+				);
+
+				setText(source);
+			} catch (error) {
+				logger.error(error);
+				setError(error);
+			}
+		})();
+	}, [textKey, path, body]);
+
+	return [text, error];
+};
+
+// helper methods from /packages/amplify-ui-components/src/common/storage-helpers.ts
+
+const readFileAsync = (blob: Blob) => {
+	return new Promise((resolve, reject) => {
+		let reader = new FileReader();
+
+		reader.onload = () => {
+			resolve(reader.result as string);
+		};
+
+		reader.onerror = () => {
+			reject('Failed to read file!');
+			reader.abort();
+		};
+
+		reader.readAsText(blob);
+	});
+};
+
+export const getTextSource = async (
+	key: string,
+	level: AccessLevel,
+	track: boolean,
+	identityId: string,
+	logger: Logger
+) => {
+	if (!Storage || typeof Storage.get !== 'function') {
+		throw new Error();
+	}
+	try {
+		const textSrc = await Storage.get(key, {
+			download: true,
+			level,
+			track,
+			identityId,
+		});
+
+		logger.debug(textSrc);
+		let text = (await readFileAsync(textSrc['Body'])) as string;
+		return text;
+	} catch (error) {
+		throw new Error(error);
+	}
+};

packages/aws-amplify-react-native/src/Storage/common/types.ts

@@ -0,0 +1,5 @@
+export enum AccessLevel {
+	Public = 'public',
+	Private = 'private',
+	Protected = 'protected',
+}

packages/aws-amplify-react-native/src/Storage/index.ts

@@ -13,3 +13,4 @@
 
 export { default as S3Image } from './S3Image';
 export { default as S3Album } from './S3Album';
+export { S3Text, useS3Text } from './S3Text';