fixed OUI Upload

app/containers/System/containers/Manufacturer/index.js

@@ -1,8 +1,11 @@
-import React from 'react';
-import { useMutation, useLazyQuery, gql } from '@apollo/client';
+import React, { useState } from 'react';
+import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
 import { Manufacturer as ManufacturerPage } from '@tip-wlan/wlan-cloud-ui-library';
-import { OUI_UPLOAD } from 'graphql/mutations';
+
+import { AUTH_TOKEN } from 'constants/index';
+import { GET_API_URL } from 'graphql/queries';
+import { getItem } from 'utils/localStorage';
 
 const GET_OUI = gql`
   query GetOui($oui: String!) {
@@ -27,7 +30,13 @@ const UPDATE_OUI = gql`
     }
   }
 `;
+
+const token = getItem(AUTH_TOKEN);
+
 const System = () => {
+  const [loadingFileUpload, setLoadingFileUpload] = useState(false);
+
+  const { data: apiUrl } = useQuery(GET_API_URL);
   const [updateOUI] = useMutation(UPDATE_OUI);
   const [searchOUI, { data }] = useLazyQuery(GET_OUI, {
     onError: () => {
@@ -46,7 +55,6 @@ const System = () => {
     },
     fetchPolicy: 'no-cache',
   });
-  const [fileUpload] = useMutation(OUI_UPLOAD);
 
   const handleUpdateOUI = (oui, manufacturerAlias, manufacturerName) => {
     updateOUI({
@@ -74,33 +82,54 @@ const System = () => {
     searchOUI({ variables: { oui } });
   };
 
-  const handleFileUpload = (fileName, file) =>
-    fileUpload({ variables: { fileName, file } })
-      .then(resp => {
-        if (resp?.ouiUpload?.success) {
-          notification.success({
-            message: 'Success',
-            description: 'File successfully uploaded.',
-          });
-        } else {
+  const handleFileUpload = (fileName, file) => {
+    if (apiUrl?.getApiUrl) {
+      setLoadingFileUpload(true);
+
+      fetch(`${apiUrl?.getApiUrl}portal/manufacturer/oui/upload?fileName=${fileName}`, {
+        method: 'POST',
+        headers: {
+          Authorization: token ? `Bearer ${token.access_token}` : '',
+          'Content-Type': 'application/octet-stream',
+        },
+        body: file,
+      })
+        .then(response => response.json())
+        .then(resp => {
+          if (resp?.success) {
+            notification.success({
+              message: 'Success',
+              description: 'File successfully uploaded.',
+            });
+          } else {
+            notification.error({
+              message: 'Error',
+              description: 'File could not be uploaded.',
+            });
+          }
+        })
+        .catch(() => {
           notification.error({
             message: 'Error',
             description: 'File could not be uploaded.',
           });
-        }
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'File could not be uploaded.',
         })
-      );
+        .finally(() => setLoadingFileUpload(false));
+    } else {
+      notification.error({
+        message: 'Error',
+        description: 'File could not be uploaded.',
+      });
+    }
+  };
+
   return (
     <ManufacturerPage
       onSearchOUI={handleSearchOUI}
       onUpdateOUI={handleUpdateOUI}
       returnedOUI={data && data.getOui}
       fileUpload={handleFileUpload}
+      loadingFileUpload={loadingFileUpload}
     />
   );
 };

app/graphql/queries.js

@@ -1,5 +1,11 @@
 import { gql } from '@apollo/client';
 
+export const GET_API_URL = gql`
+  query GetApiUrl {
+    getApiUrl
+  }
+`;
+
 export const GET_ALL_LOCATIONS = gql`
   query GetAllLocations($customerId: ID!) {
     getAllLocations(customerId: $customerId) {