feat: add auth headers to upload request and show alerts in an author…

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

@@ -1,13 +1,28 @@
 import React from "react";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
-import axios from "axios";
+import axios, { AxiosRequestHeaders } from "axios";
 
 type CSVFileImportProps = {
   url: string;
   title: string;
 };
 
+const getAuthToken = () => {
+  return localStorage.getItem("authorization_token");
+};
+
+const getHeaders = () => {
+  const authToken = getAuthToken();
+  const result: AxiosRequestHeaders = {};
+
+  if (authToken) {
+    result.Authorization = `Basic ${getAuthToken()}`;
+  }
+
+  return result;
+};
+
 export default function CSVFileImport({ url, title }: CSVFileImportProps) {
   const [file, setFile] = React.useState<File>();
 
@@ -26,23 +41,20 @@ export default function CSVFileImport({ url, title }: CSVFileImportProps) {
   const uploadFile = async () => {
     if (!file) return;
 
-    // Get the presigned URL
-    const response = await axios({
-      method: "GET",
-      url,
-      params: {
-        name: encodeURIComponent(file.name),
-      },
-    });
-
     try {
+      // Get the presigned URL
+      const response = await axios.get(url, {
+        params: {
+          name: encodeURIComponent(file.name),
+        },
+        headers: getHeaders(),
+      });
+
       await fetch(response.data, {
         method: "PUT",
         body: file,
       });
-    } catch (error) {
-      console.log({ error });
-    }
+    } catch (error) {}
     setFile(undefined);
   };
   return (

src/index.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@mui/material/styles";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
+import axios from "axios";
 import { theme } from "~/theme";
 
 const queryClient = new QueryClient({
@@ -19,6 +20,18 @@ if (import.meta.env.DEV) {
   worker.start({ onUnhandledRequest: "bypass" });
 }
 
+axios.interceptors.response.use(undefined, (error) => {
+  const { response: { status } = { status: 0 } } = error;
+
+  if (status === 401) {
+    return alert(`${status} - Unauthenticated`);
+  }
+
+  if (status === 403) {
+    return alert(`${status} - Invalid authorization token`);
+  }
+});
+
 const container = document.getElementById("app");
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(container!);
@@ -35,3 +48,4 @@ root.render(
     </BrowserRouter>
   </React.StrictMode>
 );
+