Task5 s3

README.md

@@ -1,3 +1,7 @@
+# Deployed URL
+
+https://d1gsz2pixpaq08.cloudfront.net/
+
 # serverless-frontend
 
 # React + TypeScript + Vite

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">
@@ -62,14 +82,27 @@ function App() {
         {selectedProduct && !isLoading && (
           <div className="w-96">
             <div className="flex flex-col bg-slate-800 text-white">
-              <h2>{selectedProduct.title}</h2>
-              <h2>${selectedProduct.price}</h2>
-              <h2>Stock: {selectedProduct.count}</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>
   );
 }

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',
 };

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;
+  }
+};

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');
+  }
+};