update text picker with s3-text

packages/amplify-ui-components/src/common/Translations.ts

@@ -100,4 +100,5 @@ export enum Translations {
   IMAGE_PICKER_PLACEHOLDER_HINT = 'Tap to image select',
   IMAGE_PICKER_BUTTON_TEXT = 'Upload',
   PICKER_TEXT = 'Pick a file',
+  TEXT_FALLBACK_CONTENT = 'Fallback Content',
 }

packages/amplify-ui-components/src/components/amplify-s3-text-picker/__snapshots__/amplify-s3-text-picker.spec.ts.snap

@@ -2,11 +2,7 @@
 
 exports[`amplify-s3-image spec: Render logic -> should render no pre tag without 'path' 1`] = `
 <amplify-s3-text-picker>
-  <div class="text-container">
-    <pre>
-      Pick a file
-    </pre>
-  </div>
+  <amplify-s3-text contenttype="text/*" fallbacktext="Pick a file" level="public"></amplify-s3-text>
   <amplify-picker acceptvalue="text/*"></amplify-picker>
 </amplify-s3-text-picker>
 `;

packages/amplify-ui-components/src/components/amplify-s3-text-picker/amplify-s3-text-picker.tsx

@@ -3,14 +3,13 @@ import { AccessLevel } from '../../common/types/storage-types';
 import { Storage } from '@aws-amplify/storage';
 import { Logger, I18n } from '@aws-amplify/core';
 import { NO_STORAGE_MODULE_FOUND } from '../../common/constants';
-import { calcKey, getTextSource } from '../../common/helpers';
+import { calcKey } from '../../common/helpers';
 import { Translations } from '../../common/Translations';
 
 const logger = new Logger('S3TextPicker');
 
 @Component({
   tag: 'amplify-s3-text-picker',
-  styleUrl: 'amplify-s3-text-picker.scss',
 })
 export class AmplifyS3TextPicker {
   /* String representing directory location to text file */
@@ -26,7 +25,7 @@ export class AmplifyS3TextPicker {
   /* Callback used to generate custom key value */
   @Prop() fileToKey: (data: object) => string;
   /* Source content of text */
-  @State() src: string = I18n.get(Translations.PICKER_TEXT);
+  @State() src: string;
 
   async handleInput(event: Event) {
     const file = (event.target as HTMLInputElement).files[0];
@@ -35,8 +34,9 @@ export class AmplifyS3TextPicker {
       throw new Error('No file was selected');
     }
 
-    const { path = '', level, fileToKey, track, identityId } = this;
+    const { path = '', level, fileToKey, track } = this;
     const key = path + calcKey(file, fileToKey);
+
     if (!Storage || typeof Storage.put !== 'function') {
       throw new Error(NO_STORAGE_MODULE_FOUND);
     }
@@ -48,7 +48,7 @@ export class AmplifyS3TextPicker {
         track,
       });
       logger.debug('handle pick data', data);
-      this.src = await getTextSource(key, level, track, identityId, logger);
+      this.src = key;
     } catch (error) {
       logger.debug(error);
       throw new Error(error);
@@ -58,9 +58,15 @@ export class AmplifyS3TextPicker {
   render() {
     return (
       <Host>
-        <div class="text-container">
-          <pre>{this.src}</pre>
-        </div>
+        <amplify-s3-text
+          textKey={this.src}
+          path={this.path}
+          level={this.level}
+          track={this.track}
+          identityId={this.identityId}
+          contentType={this.contentType}
+          fallbackText={I18n.get(Translations.PICKER_TEXT)}
+        />
         <amplify-picker inputHandler={e => this.handleInput(e)} acceptValue={'text/*'}></amplify-picker>
       </Host>
     );

packages/amplify-ui-components/src/components/amplify-s3-text/__snapshots__/amplify-s3-text.spec.ts.snap

@@ -2,6 +2,12 @@
 
 exports[`amplify-s3-image spec: Render logic -> should render no pre tag without 'textKey' or 'path' 1`] = `
 <amplify-s3-text>
-  <div></div>
+  <div>
+    <div class="text-container">
+      <pre>
+        Fallback Content
+      </pre>
+    </div>
+  </div>
 </amplify-s3-text>
 `;

packages/amplify-ui-components/src/components/amplify-s3-text/amplify-s3-text.tsx

@@ -1,9 +1,10 @@
 import { Component, Prop, h, State, Watch } from '@stencil/core';
 import { AccessLevel } from '../../common/types/storage-types';
 import { Storage } from '@aws-amplify/storage';
-import { Logger } from '@aws-amplify/core';
+import { Logger, I18n } from '@aws-amplify/core';
 import { getTextSource } from '../../common/helpers';
 import { NO_STORAGE_MODULE_FOUND } from '../../common/constants';
+import { Translations } from '../../common/Translations';
 
 const logger = new Logger('S3Text');
 
@@ -26,9 +27,12 @@ export class AmplifyS3Text {
   @Prop() track: boolean;
   /* Cognito identity id of the another user's image */
   @Prop() identityId: string;
+  /* Fallback content */
+  @Prop() fallbackText: string = I18n.get(Translations.TEXT_FALLBACK_CONTENT);
   /* Source content of text */
   @State() src: string;
 
+  @Watch('textKey')
   @Watch('body')
   async watchHandler() {
     await this.load();
@@ -71,11 +75,7 @@ export class AmplifyS3Text {
   render() {
     return (
       <div>
-        {this.src && (
-          <div class="text-container">
-            <pre>{this.src}</pre>
-          </div>
-        )}
+        <div class="text-container">{this.src ? <pre>{this.src}</pre> : <pre>{this.fallbackText}</pre>}</div>
       </div>
     );
   }