From 071d0cfd812ac18be4ac1d999bfd5dff9824d732 Mon Sep 17 00:00:00 2001
From: "erick.valdivia" <erick.valdivia@brightcove.com>
Date: Mon, 13 May 2024 10:22:35 -0400
Subject: [PATCH 1/3] added token

---
 src/api/index.ts             | 41 ++++++++++++++++++------------------
 src/components/UploadCsv.tsx |  2 +-
 src/main.tsx                 |  4 ++++
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 7c3e17f..dd7afe0 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -19,33 +19,32 @@ export const getProductsById = async (productId: number) => {
 };
 
 export const getSignedUrl = async (fileName: string) => {
-  try {
-    const response = await fetch(`${APIS.import}/${fileName}`);
+  const credentials = localStorage.getItem('authorization_token') ?? '';
+  const token = btoa(credentials);
+
+  const response = await fetch(`${APIS.import}/${fileName}`, {
+    headers: { Authorization: `Basic ${token}` },
+  });
+  if (response.ok) {
     const json = await response.json();
     return json.url;
-  } catch (error) {
-    throw new Error('Error getting signedUrl');
+  } else {
+    throw response;
   }
 };
 
-export const uploadFile = async (payload: {
-  fileName: string;
-  file: File;
-}): Promise<boolean> => {
+export const uploadFile = async (payload: { fileName: string; file: File }) => {
   const signedUrl = await getSignedUrl(payload.fileName);
 
-  try {
-    await fetch(signedUrl, {
-      method: 'PUT',
-      body: payload.file,
-      headers: {
-        'Content-Type': 'text/csv',
-        'Content-Disposition': `attachment; filename="${payload.fileName}"`,
-      },
-    });
-    return true;
-  } catch (error) {
-    console.log('uploadFile', error);
-    return false;
+  const response = await fetch(signedUrl, {
+    method: 'PUT',
+    body: payload.file,
+    headers: {
+      'Content-Type': 'text/csv',
+      'Content-Disposition': `attachment; filename="${payload.fileName}"`,
+    },
+  });
+  if (!response.ok) {
+    throw response;
   }
 };
diff --git a/src/components/UploadCsv.tsx b/src/components/UploadCsv.tsx
index 160b372..5d23014 100644
--- a/src/components/UploadCsv.tsx
+++ b/src/components/UploadCsv.tsx
@@ -15,7 +15,7 @@ export default function UploadCsv() {
       });
     },
     onError: (error) => {
-      console.error(error);
+      console.error(error.message);
       toast({
         title: 'Error!',
         description: 'Something went wrong',
diff --git a/src/main.tsx b/src/main.tsx
index af077b6..473233a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -25,6 +25,10 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: '/upload',
+    element: <UploadCsv />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

From 00f896f8e9ea714d7db2946d2370d1956a2a37a8 Mon Sep 17 00:00:00 2001
From: "erick.valdivia" <erick.valdivia@brightcove.com>
Date: Mon, 13 May 2024 10:46:45 -0400
Subject: [PATCH 2/3] test

---
 src/api/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index dd7afe0..ed301ca 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -23,7 +23,9 @@ export const getSignedUrl = async (fileName: string) => {
   const token = btoa(credentials);
 
   const response = await fetch(`${APIS.import}/${fileName}`, {
-    headers: { Authorization: `Basic ${token}` },
+    headers: {
+      Authorization: `Basic ${token}`,
+    },
   });
   if (response.ok) {
     const json = await response.json();

From aea1d251049c00217e2bd25d0a91217ae8bf6a4f Mon Sep 17 00:00:00 2001
From: "erick.valdivia" <erick.valdivia@brightcove.com>
Date: Mon, 13 May 2024 11:14:27 -0400
Subject: [PATCH 3/3] added unauthorized message

---
 README.md                    |  4 ++++
 src/components/UploadCsv.tsx | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 631537d..95e122d 100644
--- a/README.md
+++ b/README.md
@@ -30,3 +30,7 @@ export default {
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+# Note to me
+
+If project does not update, invalidate in cloudfront.
diff --git a/src/components/UploadCsv.tsx b/src/components/UploadCsv.tsx
index 5d23014..5aedf77 100644
--- a/src/components/UploadCsv.tsx
+++ b/src/components/UploadCsv.tsx
@@ -14,11 +14,15 @@ export default function UploadCsv() {
         title: 'Products uploaded',
       });
     },
-    onError: (error) => {
-      console.error(error.message);
+    onError: (error: any) => {
+      let description = 'Something went wrong';
+      if (error.status === 401 || error.status === 403) {
+        console.error(error);
+        description = 'Unauthorized';
+      }
       toast({
         title: 'Error!',
-        description: 'Something went wrong',
+        description,
       });
     },
   });