From e6bc1abaefed3232a91c444f6965268c60e2ec70 Mon Sep 17 00:00:00 2001
From: Bratalix <bratalix@gmail.com>
Date: Mon, 30 Aug 2021 17:09:19 -0700
Subject: [PATCH 1/6] Allow for customised file uploads

---
 .../__fixtures__/s3-dropzone-custom.tsx       | 44 +++++++++++++++++++
 .../__tests__/s3-dropzone.test.tsx            |  2 +-
 packages/s3-file-upload/src/s3-dropzone.tsx   | 22 +++++++---
 3 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx

diff --git a/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx b/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx
new file mode 100644
index 00000000..9a1e6e02
--- /dev/null
+++ b/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import {S3Dropzone} from '../src';
+
+const host = 'https://resources.churchandnation.org';
+const uploadUrl = 'https://new.churchandnation.org/api/sermon-upload';
+
+const fixtures = {
+  EmptyDropzone: (
+    <S3Dropzone
+      host={host}
+      uploadUrl={uploadUrl}
+      onChange={(fileName) => console.log(fileName)}
+      customElementTitle="File Upload"
+      errorJSX={<p>
+        File could not load due to an error. Please contact{' '}
+        <a href="mailto:support@newfrontdoor.org">
+          support@newfrontdoor.org
+        </a>
+        .
+      </p>}
+      loadingJSX={<p>Custom Loading...</p>}
+      acceptFileTypes="application/pdf, video/mp4, audio/*"
+    >
+      <p>File Uploaded.</p>
+    </S3Dropzone>
+  ),
+  InitialFile: (
+    <S3Dropzone
+      host={host}
+      uploadUrl={uploadUrl}
+      title="1 Minute of Silence"
+      initialFileName="9Tv3svhO5_4ceerG-silence.mp3"
+      onChange={(fileName) => console.log(fileName)}
+      customElementTitle="Custom Title"
+      errorJSX={<p>Custom Error</p>}
+      loadingJSX={<p>Custom Loading...</p>}
+      acceptFileTypes="application/pdf, video/mp4, audio/*"
+    >
+      <p>File Uploaded: {}</p>
+    </S3Dropzone>
+  )
+};
+
+export default fixtures;
diff --git a/packages/s3-file-upload/__tests__/s3-dropzone.test.tsx b/packages/s3-file-upload/__tests__/s3-dropzone.test.tsx
index 6ab1e6ec..fea0f0e4 100644
--- a/packages/s3-file-upload/__tests__/s3-dropzone.test.tsx
+++ b/packages/s3-file-upload/__tests__/s3-dropzone.test.tsx
@@ -68,7 +68,7 @@ test('it renders a dropzone', async () => {
     [
       'Upload Audio',
       'Drag ‘n’ drop some files here, or click to select files',
-      'Try dropping an audio file here, or click to select file for upload.'
+      'Try dropping a file here, or click to select file for upload.'
     ].join('')
   );
 
diff --git a/packages/s3-file-upload/src/s3-dropzone.tsx b/packages/s3-file-upload/src/s3-dropzone.tsx
index 3baa45dc..58d0d67d 100644
--- a/packages/s3-file-upload/src/s3-dropzone.tsx
+++ b/packages/s3-file-upload/src/s3-dropzone.tsx
@@ -29,6 +29,10 @@ export type S3DropzoneProps = {
   uploadUrl: string;
   title?: string;
   initialFileName?: string;
+  errorJSX?: React.ReactElement;
+  loadingJSX?: React.ReactElement;
+  acceptFileTypes?: string;
+  customElementTitle?: string;
   onChange(result?: UploadFileResult): void;
 };
 
@@ -38,6 +42,10 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
   title,
   uploadUrl,
   initialFileName,
+  errorJSX,
+  loadingJSX,
+  acceptFileTypes,
+  customElementTitle,
   onChange
 }) => {
   const {
@@ -56,7 +64,7 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
 
   const {getRootProps, getInputProps, isDragActive, isDragReject} = useDropzone(
     {
-      accept: 'audio/*',
+      accept: acceptFileTypes ? acceptFileTypes : 'audio/*',
       onDrop(acceptedFiles) {
         const [firstFile] = acceptedFiles;
         void startFileUpload(firstFile).then((result) => {
@@ -72,8 +80,8 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
 
   return (
     <div data-testid="s3-dropzone">
-      <h2>{fileUrl ? title : 'Upload Audio'}</h2>
-      {isError && (
+      <h2>{fileUrl ? title : (customElementTitle ? customElementTitle : 'Upload Audio')}</h2>
+      {isError && (errorJSX ? errorJSX : (
         <div>
           <p>
             Audio could not load due to an error. Please contact{' '}
@@ -83,8 +91,8 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
             .
           </p>
         </div>
-      )}
-      {isLoading && (
+      ))}
+      {isLoading && (loadingJSX ? loadingJSX : (
         <div>
           <ScaleLoader
             height={30}
@@ -99,7 +107,7 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
             while file is loading.
           </p>
         </div>
-      )}
+      ))}
       {isSuccess &&
         fileUrl &&
         cloneElement(children, {
@@ -123,7 +131,7 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
             <p>Unsupported file type...</p>
           ) : (
             <p>
-              Try dropping an audio file here, or click to select file for
+              Try dropping a file here, or click to select file for
               upload.
             </p>
           )}

From 816b60ebe00fbb89c40d1ff81b752dfad83eaa32 Mon Sep 17 00:00:00 2001
From: Bratalix <bratalix@gmail.com>
Date: Mon, 30 Aug 2021 17:26:31 -0700
Subject: [PATCH 2/6] Custom file uploads changeset

---
 .changeset/fuzzy-zebras-change.md                           | 5 +++++
 packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fuzzy-zebras-change.md

diff --git a/.changeset/fuzzy-zebras-change.md b/.changeset/fuzzy-zebras-change.md
new file mode 100644
index 00000000..ad03996b
--- /dev/null
+++ b/.changeset/fuzzy-zebras-change.md
@@ -0,0 +1,5 @@
+---
+"@newfrontdoor/s3-file-upload": major
+---
+
+Adding options to allow for customised file uploads
diff --git a/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx b/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx
index 9a1e6e02..6274bc71 100644
--- a/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx
+++ b/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {S3Dropzone} from '../src';
 
 const host = 'https://resources.churchandnation.org';
-const uploadUrl = 'https://new.churchandnation.org/api/sermon-upload';
+const uploadUrl = 'http://localhost:3000/api/sermon-upload';
 
 const fixtures = {
   EmptyDropzone: (

From ff93193478922677f63967f66e84a6a874353fc2 Mon Sep 17 00:00:00 2001
From: Jonathan Haines <jonno.haines@gmail.com>
Date: Tue, 31 Aug 2021 11:01:19 +1000
Subject: [PATCH 3/6] Add use-s3-dropzone hook

---
 .changeset/fuzzy-zebras-change.md             |  4 +-
 packages/s3-file-upload/src/s3-dropzone.tsx   | 42 ++++--------
 .../s3-file-upload/src/use-s3-dropzone.ts     | 68 +++++++++++++++++++
 3 files changed, 85 insertions(+), 29 deletions(-)
 create mode 100644 packages/s3-file-upload/src/use-s3-dropzone.ts

diff --git a/.changeset/fuzzy-zebras-change.md b/.changeset/fuzzy-zebras-change.md
index ad03996b..5b6d56bb 100644
--- a/.changeset/fuzzy-zebras-change.md
+++ b/.changeset/fuzzy-zebras-change.md
@@ -1,5 +1,5 @@
 ---
-"@newfrontdoor/s3-file-upload": major
+"@newfrontdoor/s3-file-upload": minor
 ---
 
-Adding options to allow for customised file uploads
+Add `use-s3-dropzone` hook for S3 file uploads
diff --git a/packages/s3-file-upload/src/s3-dropzone.tsx b/packages/s3-file-upload/src/s3-dropzone.tsx
index 58d0d67d..a30f21bd 100644
--- a/packages/s3-file-upload/src/s3-dropzone.tsx
+++ b/packages/s3-file-upload/src/s3-dropzone.tsx
@@ -2,9 +2,8 @@
 import {jsx} from 'theme-ui';
 import {cloneElement, FC} from 'react';
 import PropTypes from 'prop-types';
-import {useDropzone} from 'react-dropzone';
 import {ScaleLoader} from 'react-spinners';
-import {useS3FileUpload, UploadFileResult} from './use-s3-file-upload';
+import {useS3Dropzone, UploadFileResult} from './use-s3-dropzone';
 
 const baseStyle = {
   borderWidth: 2,
@@ -31,7 +30,7 @@ export type S3DropzoneProps = {
   initialFileName?: string;
   errorJSX?: React.ReactElement;
   loadingJSX?: React.ReactElement;
-  acceptFileTypes?: string;
+  accept?: string | string[];
   customElementTitle?: string;
   onChange(result?: UploadFileResult): void;
 };
@@ -42,10 +41,6 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
   title,
   uploadUrl,
   initialFileName,
-  errorJSX,
-  loadingJSX,
-  acceptFileTypes,
-  customElementTitle,
   onChange
 }) => {
   const {
@@ -55,33 +50,26 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
     isError,
     isSuccess,
     isIdle,
-    startFileUpload
-  } = useS3FileUpload({
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject
+  } = useS3Dropzone({
     host,
     uploadUrl,
-    initialFileName
+    initialFileName,
+    accept: 'audio/*',
+    onChange,
   });
 
-  const {getRootProps, getInputProps, isDragActive, isDragReject} = useDropzone(
-    {
-      accept: acceptFileTypes ? acceptFileTypes : 'audio/*',
-      onDrop(acceptedFiles) {
-        const [firstFile] = acceptedFiles;
-        void startFileUpload(firstFile).then((result) => {
-          onChange(result);
-        });
-      }
-    }
-  );
-
   let styles = {...baseStyle};
   styles = isDragActive ? {...styles, ...activeStyle} : styles;
   styles = isDragReject ? {...styles, ...rejectStyle} : styles;
 
   return (
     <div data-testid="s3-dropzone">
-      <h2>{fileUrl ? title : (customElementTitle ? customElementTitle : 'Upload Audio')}</h2>
-      {isError && (errorJSX ? errorJSX : (
+      <h2>{fileUrl ? title : 'Upload Audio'}</h2>
+      {isError && (
         <div>
           <p>
             Audio could not load due to an error. Please contact{' '}
@@ -91,8 +79,8 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
             .
           </p>
         </div>
-      ))}
-      {isLoading && (loadingJSX ? loadingJSX : (
+      )}
+      {isLoading && (
         <div>
           <ScaleLoader
             height={30}
@@ -107,7 +95,7 @@ export const S3Dropzone: FC<S3DropzoneProps> = ({
             while file is loading.
           </p>
         </div>
-      ))}
+      )}
       {isSuccess &&
         fileUrl &&
         cloneElement(children, {
diff --git a/packages/s3-file-upload/src/use-s3-dropzone.ts b/packages/s3-file-upload/src/use-s3-dropzone.ts
new file mode 100644
index 00000000..d3140cf9
--- /dev/null
+++ b/packages/s3-file-upload/src/use-s3-dropzone.ts
@@ -0,0 +1,68 @@
+import {useDropzone, DropzoneState} from 'react-dropzone';
+import {useS3FileUpload, UploadFileResult} from './use-s3-file-upload';
+export type {UploadFileResult} from './use-s3-file-upload';
+
+export type S3DropzoneOptions = {
+  host: string;
+  uploadUrl: string;
+  title?: string;
+  initialFileName?: string;
+  errorJSX?: React.ReactElement;
+  loadingJSX?: React.ReactElement;
+  accept?: string | string[];
+  customElementTitle?: string;
+  onChange(result?: UploadFileResult): void;
+};
+
+export type S3DropzoneState = DropzoneState & {
+  fileUrl: URL | null,
+  fileName?: string,
+  isLoading: boolean,
+  isError: boolean,
+  isSuccess: boolean,
+  isIdle: boolean,
+}
+
+export function useS3Dropzone({
+  host,
+  uploadUrl,
+  initialFileName,
+  accept,
+  onChange
+}: S3DropzoneOptions): S3DropzoneState {
+  const {
+    fileUrl,
+    fileName,
+    isLoading,
+    isError,
+    isSuccess,
+    isIdle,
+    startFileUpload
+  } = useS3FileUpload({
+    host,
+    uploadUrl,
+    initialFileName
+  });
+
+  const dropzoneState = useDropzone(
+    {
+      accept,
+      onDrop(acceptedFiles) {
+        const [firstFile] = acceptedFiles;
+        void startFileUpload(firstFile).then((result) => {
+          onChange(result);
+        });
+      }
+    }
+  );
+
+  return {
+    fileUrl,
+    fileName,
+    isLoading,
+    isError,
+    isSuccess,
+    isIdle,
+    ...dropzoneState
+  }
+}

From 996fcf016291ee814ca55a265957cf581cb72e16 Mon Sep 17 00:00:00 2001
From: Jonathan Haines <jonno.haines@gmail.com>
Date: Tue, 31 Aug 2021 11:02:13 +1000
Subject: [PATCH 4/6] Remove extra fixture

---
 .../__fixtures__/s3-dropzone-custom.tsx       | 44 -------------------
 1 file changed, 44 deletions(-)
 delete mode 100644 packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx

diff --git a/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx b/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx
deleted file mode 100644
index 6274bc71..00000000
--- a/packages/s3-file-upload/__fixtures__/s3-dropzone-custom.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import {S3Dropzone} from '../src';
-
-const host = 'https://resources.churchandnation.org';
-const uploadUrl = 'http://localhost:3000/api/sermon-upload';
-
-const fixtures = {
-  EmptyDropzone: (
-    <S3Dropzone
-      host={host}
-      uploadUrl={uploadUrl}
-      onChange={(fileName) => console.log(fileName)}
-      customElementTitle="File Upload"
-      errorJSX={<p>
-        File could not load due to an error. Please contact{' '}
-        <a href="mailto:support@newfrontdoor.org">
-          support@newfrontdoor.org
-        </a>
-        .
-      </p>}
-      loadingJSX={<p>Custom Loading...</p>}
-      acceptFileTypes="application/pdf, video/mp4, audio/*"
-    >
-      <p>File Uploaded.</p>
-    </S3Dropzone>
-  ),
-  InitialFile: (
-    <S3Dropzone
-      host={host}
-      uploadUrl={uploadUrl}
-      title="1 Minute of Silence"
-      initialFileName="9Tv3svhO5_4ceerG-silence.mp3"
-      onChange={(fileName) => console.log(fileName)}
-      customElementTitle="Custom Title"
-      errorJSX={<p>Custom Error</p>}
-      loadingJSX={<p>Custom Loading...</p>}
-      acceptFileTypes="application/pdf, video/mp4, audio/*"
-    >
-      <p>File Uploaded: {}</p>
-    </S3Dropzone>
-  )
-};
-
-export default fixtures;

From 14ade10622c0fe8ac1085156eefe406e38d5d376 Mon Sep 17 00:00:00 2001
From: Jonathan Haines <jonno.haines@gmail.com>
Date: Tue, 31 Aug 2021 11:03:34 +1000
Subject: [PATCH 5/6] Update exports

---
 packages/s3-file-upload/src/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/s3-file-upload/src/index.ts b/packages/s3-file-upload/src/index.ts
index 6a9e97e0..1a7c7a76 100644
--- a/packages/s3-file-upload/src/index.ts
+++ b/packages/s3-file-upload/src/index.ts
@@ -1,2 +1,3 @@
 export {S3Dropzone} from './s3-dropzone';
-export {useS3FileUpload} from './use-s3-file-upload';
+export * from './use-s3-file-upload';
+export * from './use-s3-dropzone';

From eb3a38ff0a5fa60647c73b78d941db43998facb2 Mon Sep 17 00:00:00 2001
From: Jonathan Haines <jonno.haines@gmail.com>
Date: Tue, 31 Aug 2021 11:26:37 +1000
Subject: [PATCH 6/6] Remove extra props

---
 packages/s3-file-upload/src/s3-dropzone.tsx    | 4 ----
 packages/s3-file-upload/src/use-s3-dropzone.ts | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/packages/s3-file-upload/src/s3-dropzone.tsx b/packages/s3-file-upload/src/s3-dropzone.tsx
index a30f21bd..5fa054c0 100644
--- a/packages/s3-file-upload/src/s3-dropzone.tsx
+++ b/packages/s3-file-upload/src/s3-dropzone.tsx
@@ -28,10 +28,6 @@ export type S3DropzoneProps = {
   uploadUrl: string;
   title?: string;
   initialFileName?: string;
-  errorJSX?: React.ReactElement;
-  loadingJSX?: React.ReactElement;
-  accept?: string | string[];
-  customElementTitle?: string;
   onChange(result?: UploadFileResult): void;
 };
 
diff --git a/packages/s3-file-upload/src/use-s3-dropzone.ts b/packages/s3-file-upload/src/use-s3-dropzone.ts
index d3140cf9..b9ce4655 100644
--- a/packages/s3-file-upload/src/use-s3-dropzone.ts
+++ b/packages/s3-file-upload/src/use-s3-dropzone.ts
@@ -5,12 +5,8 @@ export type {UploadFileResult} from './use-s3-file-upload';
 export type S3DropzoneOptions = {
   host: string;
   uploadUrl: string;
-  title?: string;
   initialFileName?: string;
-  errorJSX?: React.ReactElement;
-  loadingJSX?: React.ReactElement;
   accept?: string | string[];
-  customElementTitle?: string;
   onChange(result?: UploadFileResult): void;
 };