Task 07

src/components/pages/admin/PageProductImport/components/CSVFileImport.tsx

@@ -32,22 +32,38 @@ export default function CSVFileImport({ url, title }: CSVFileImportProps) {
       return;
     }
 
-    // Get the presigned URL
-    const response = await axios({
-      method: "GET",
-      url,
-      params: {
-        name: encodeURIComponent(file.name),
-      },
-    });
-    console.log("File to upload: ", file.name);
-    console.log("Uploading to: ", response.data);
-    const result = await fetch(response.data, {
-      method: "PUT",
-      body: file,
-    });
-    console.log("Uploading result: ", result);
-    setFile(undefined);
+    try {
+      const authToken = localStorage.getItem("authorization_token");
+      const headers = authToken
+        ? {
+            Authorization: `Basic ${authToken}`,
+          }
+        : undefined;
+
+      // Get the presigned URL
+      const response = await axios({
+        method: "GET",
+        url,
+        headers,
+        params: {
+          name: encodeURIComponent(file.name),
+        },
+      });
+      console.log("File to upload: ", file.name);
+      console.log("Uploading to: ", response.data);
+      const result = await fetch(response.data, {
+        method: "PUT",
+        body: file,
+      });
+      console.log("Uploading result: ", result);
+      setFile(undefined);
+    } catch (error) {
+      if (error === "Unauthorized") {
+        console.log("Unauthorized. Please log in.");
+      } else {
+        console.error("An error occurred:", error);
+      }
+    }
   };
   return (
     <Box>

src/constants/apiPaths.ts

@@ -1,7 +1,7 @@
 const prefix = import.meta.env.VITE_API_PREFIX || ".execute-api2";
 
 const API_PATHS = {
-  product: "https://o2jh3m7b57.execute-api.us-east-1.amazonaws.com/prod",
+  product: "https://6jeal9ve0d.execute-api.us-east-1.amazonaws.com/prod",
   order: `https://${prefix}.eu-west-1.amazonaws.com/dev`,
   import: "https://i6gsu0m0sg.execute-api.us-east-1.amazonaws.com/prod",
   bff: `https://${prefix}.eu-west-1.amazonaws.com/dev`,

src/index.tsx

@@ -7,6 +7,7 @@ import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { theme } from "~/theme";
+import axios from "axios";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -19,6 +20,25 @@ if (import.meta.env.DEV) {
   worker.start({ onUnhandledRequest: "bypass" });
 }
 
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    console.error(error);
+
+    switch (error.response.status) {
+      case 401:
+        alert("401 Unauthorized error");
+        return Promise.reject("Unauthorized");
+        break;
+      case 403:
+        alert("403 Forbidden error");
+        return Promise.reject("Unauthorized");
+        break;
+    }
+    return Promise.reject(error);
+  }
+);
+
 const container = document.getElementById("app");
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(container!);