From 7dfed88a1b3481c9c4dc214d4816551a5de800e0 Mon Sep 17 00:00:00 2001
From: "erick.valdivia" <erick.valdivia@brightcove.com>
Date: Fri, 5 Apr 2024 13:29:22 -0400
Subject: [PATCH 1/3] usage of upload api

---
 src/http.ts           |  1 +
 src/queries/upload.ts | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/queries/upload.ts

diff --git a/src/http.ts b/src/http.ts
index 0e736f6..9a71615 100644
--- a/src/http.ts
+++ b/src/http.ts
@@ -1,4 +1,5 @@
 export const APIS = {
   products:
     'https://ej64rpzdqi.execute-api.us-east-1.amazonaws.com/dev/products',
+  import: 'https://auf4d66a99.execute-api.us-east-1.amazonaws.com/dev/uploaded',
 };
diff --git a/src/queries/upload.ts b/src/queries/upload.ts
new file mode 100644
index 0000000..ac4898f
--- /dev/null
+++ b/src/queries/upload.ts
@@ -0,0 +1,11 @@
+import { APIS } from '../http';
+
+export const getSignedUrl = async (fileName: string) => {
+  try {
+    const response = await fetch(`${APIS.import}/${fileName}`);
+    const json = await response.json();
+    return json.url;
+  } catch (error) {
+    throw new Error('Error getting signedUrl');
+  }
+};

From 3b3bb11e2a93d7465508038a8c80b0c9bf7b5658 Mon Sep 17 00:00:00 2001
From: "erick.valdivia" <erick.valdivia@brightcove.com>
Date: Fri, 5 Apr 2024 19:06:54 -0400
Subject: [PATCH 2/3] added option to upload file

---
 src/App.tsx             | 41 +++++++++++++++++++++++++++++++++++++----
 src/mutations/upload.ts | 20 ++++++++++++++++++++
 src/types/product.ts    |  4 ++--
 3 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src/mutations/upload.ts

diff --git a/src/App.tsx b/src/App.tsx
index f9bb5e9..223e69e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import './App.css';
 import { getProducts, getProductsById } from './queries/products';
 import { twJoin } from 'tailwind-merge';
+import { uploadFile } from './mutations/upload';
 
 function App() {
   const [productList, setProductList] = useState<Array<Product>>([]);
@@ -29,6 +30,25 @@ function App() {
     }
   };
 
+  const fileUploadHandler = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event?.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    console.log(file.name);
+
+    const response = await uploadFile(file.name, file);
+    if (response) {
+      alert('File upload: success');
+    } else {
+      setError('Error uploading file');
+    }
+  };
+
   return (
     <div className="flex flex-col container space-y-2">
       <h1 className="text-3xl font-bold underline text-red-400">
@@ -47,7 +67,7 @@ function App() {
                 selectProductHandler(product.id);
               }}
             >
-              {product.name}
+              {product.title}
             </li>
           );
         })}
@@ -57,15 +77,28 @@ function App() {
         {isLoading && <div>Loading....</div>}
         {selectedProduct && !isLoading && (
           <div className="w-96">
-            <img src={selectedProduct.image} />
             <div className="flex flex-col bg-slate-800 text-white">
-              <h2>{selectedProduct.name}</h2>
-              <h2>${selectedProduct.price}</h2>
+              <h2>Name: {selectedProduct.title}</h2>
+              <h2>Price: ${selectedProduct.price}</h2>
+              <h2>Count: {selectedProduct.count ?? 0}</h2>
             </div>
           </div>
         )}
       </div>
       {error && <div className="text-xl text-red-600">{error}</div>}
+      <div className="border py-2">
+        <h2>Upload your CSV</h2>
+        <div className="flex flex-col justify-center items-center">
+          <label htmlFor="product">Product file</label>
+          <input
+            type="file"
+            name="product"
+            id="product"
+            multiple={false}
+            onChange={fileUploadHandler}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/mutations/upload.ts b/src/mutations/upload.ts
new file mode 100644
index 0000000..b0540d2
--- /dev/null
+++ b/src/mutations/upload.ts
@@ -0,0 +1,20 @@
+import { getSignedUrl } from '../queries/upload';
+
+export const uploadFile = async (fileName: string, file: File) => {
+  const signedUrl = await getSignedUrl(fileName);
+
+  try {
+    await fetch(signedUrl, {
+      method: 'PUT',
+      body: file,
+      headers: {
+        'Content-Type': 'text/csv',
+        'Content-Disposition': `attachment; filename="${fileName}"`,
+      },
+    });
+    return true;
+  } catch (error) {
+    console.log('uploadFile', error);
+    return false;
+  }
+};
diff --git a/src/types/product.ts b/src/types/product.ts
index 9e0c627..5249776 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -1,6 +1,6 @@
 type Product = {
   id: number;
-  name: string;
+  title: string;
   price: number;
-  image: string;
+  count?: number;
 };

From b0000484225dc4aaaaf922ff42d58ce8cba130e5 Mon Sep 17 00:00:00 2001
From: "erick.valdivia" <erick.valdivia@brightcove.com>
Date: Fri, 5 Apr 2024 21:08:29 -0400
Subject: [PATCH 3/3] added url for this project

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 631537d..f4c1ceb 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,7 @@
+# Deployed URL
+
+https://d1gsz2pixpaq08.cloudfront.net/
+
 # serverless-frontend
 
 # React + TypeScript + Vite