Merge pull request #88 from decentralised-dataexchange/60-api-integra…

…tion-disp-connections Fix: #60, Admin Api Integration and Upload cover and logo Image issue…
decentralised-dataexchange · Apr 6, 2024 · 71c2951 · 71c2951
2 parents 43b29e3 + 60004c6
commit 71c2951
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 31 deletions.
diff --git a/src/component/OrganisationDetails/OrgCoverImageUpload.tsx b/src/component/OrganisationDetails/OrgCoverImageUpload.tsx
@@ -1,13 +1,15 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import BannerCamera from "../../../public/img/camera_photo1.png";
 import DefaultBanner from "../../../public/img/OrganisationDefaultLogo.png";
 import { defaultCoverImage } from '../../utils/defalultImages';
 import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import Image from "mui-image";
-import { useAppSelector } from "../../customHooks";
+import { useAppDispatch, useAppSelector } from "../../customHooks";
 import { doApiPutImage } from "../../utils/fetchWrapper";
 import { ENDPOINTS } from "../../utils/apiEndpoints";
+import { HttpService } from "../../service/HttpService";
+import { adminAction } from "../../redux/actionCreators/login";
 
 const BannerContainer = styled("div")({
   height: 200,
@@ -27,9 +29,19 @@ type Props = {
 };
 
 const OrgCoverImageUpload = (props: Props) => {
-  let coverImageBase64;
+  const dispatch = useAppDispatch();
   const { editMode, setCoverImageBase64 } = props;
 
+  const [ imageBase64, setImageBase64] = useState('')
+
+  const imagesSet = useAppSelector(
+    (state) => state?.gettingStart?.imageSet
+  )
+
+  useEffect(() => {
+    setImageBase64(imagesSet?.cover)
+  }, [imagesSet]);
+
   const myFile: { file: string; imagePreviewUrl: any } = {
     file: "",
     imagePreviewUrl: "",
@@ -50,15 +62,18 @@ const OrgCoverImageUpload = (props: Props) => {
       const formData = new FormData();
       file && formData.append('orgimage', file);
       const url = ENDPOINTS.getCoverImage();
-      doApiPutImage(url, formData).then((res) => {
-        console.log(res, "res");
-      })
+      HttpService.updateOrganisationCoverImage(formData)
+        .then((res) => {
+          HttpService.getCoverImage().then((imageBase64) => {
+            console.log(imageBase64, "imageBase64")
+            setImageBase64(imageBase64);
+          });
+        })
+        .catch((error) => {
+          console.log(`Error: ${error}`);
+        });
   };
 
-  const imagesSet = useAppSelector(
-    (state) => state?.gettingStart?.imageSet
-  )
-
   return (
     <BannerContainer>
       <Image
@@ -69,9 +84,9 @@ const OrgCoverImageUpload = (props: Props) => {
         duration={0}
         style={{ opacity: editMode ? 0.25 : 1, transitionDuration: "0ms" }}
         src={
-          !imagesSet?.cover
+          !imageBase64
             ? defaultCoverImage
-            : imagesSet?.cover
+            : imageBase64
         }
       />
 

diff --git a/src/component/OrganisationDetails/OrgLogoImageUpload.tsx b/src/component/OrganisationDetails/OrgLogoImageUpload.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Avatar, Box } from "@mui/material";
 import LogoCammera from "../../../public/img/camera_photo2.png";
 import DefaultLogo from "../../../public/img/OrganisationDefaultLogo.png";
 import { defaultLogoImg } from "../../utils/defalultImages";
 import { useAppSelector } from "../../customHooks";
 import { ENDPOINTS } from "../../utils/apiEndpoints";
 import { doApiPutImage } from "../../utils/fetchWrapper";
+import { HttpService } from "../../service/HttpService";
 
 
 type Props = {
@@ -15,12 +16,17 @@ type Props = {
 };
 
 const OrgLogoImageUpload = (props: Props) => {
-  const {editMode, setLogoImageBase64 } = props;
+  const {editMode } = props;
+  const [ imageBase64, setLogoImageBase64] = useState('')
 
   const imagesSet = useAppSelector(
     (state) => state?.gettingStart?.imageSet
   )
 
+  useEffect(() => {
+    setLogoImageBase64(imagesSet?.logo)
+  }, [imagesSet]);
+
   const myFile: { file: string; imagePreviewUrl: any } = {
     file: "",
     imagePreviewUrl: "",
@@ -34,24 +40,32 @@ const OrgLogoImageUpload = (props: Props) => {
       myFile.file = file;
       myFile.imagePreviewUrl = reader.result;
     };
-
-    // if (file.type.match(image)) {
       reader.readAsDataURL(file);
 
       const formData = new FormData();
       file && formData.append('orgimage', file);
-      const url = ENDPOINTS.getLogoImage();
-      doApiPutImage(url, formData);
-    // }
+      HttpService.updateOrganisationLogoImage(formData)
+        .then((res) => {
+          console.log(res, "res")
+          // Get the newly uploaded image from the server
+          HttpService.getLogoImage().then((imageBase64) => {
+            localStorage.getItem('cachedLogoImage');
+            setLogoImageBase64(imageBase64);
+            localStorage.getItem('cachedLogoImage');
+          });
+        })
+        .catch((error) => {
+          console.log(`Error: ${error}`);
+        });
   };
 
   return (
     <Box>
       <Avatar
         src={
-          !imagesSet?.logo
+          !imageBase64
             ? defaultLogoImg
-            : imagesSet?.logo
+            : imageBase64
         }
         alt="logo"
         style={{

diff --git a/src/redux/sagas/gettingStart.ts b/src/redux/sagas/gettingStart.ts
@@ -8,17 +8,8 @@ import { imageBlobToBase64 } from '../../utils/utils';
 export function* gettingStart() {
   try {
     const url = ENDPOINTS.gettingStart();
-    const coverImageUrl = ENDPOINTS.getCoverImage();
-    const logoImageUrl = ENDPOINTS.getLogoImage();
     const res = yield doApiGet(url);
     yield put(gettingStartAction.gettingStartActionSuccess(res));
-    const [logo, cover] = yield all([
-      yield doApiGetBlob(logoImageUrl),
-      yield doApiGetBlob(coverImageUrl)
-    ]);
-    yield imageBlobToBase64(logo, 'logo');
-    yield imageBlobToBase64(cover, 'cover');
-
   } catch (error) {
     yield put(gettingStartAction.gettingStartActionFailure(error));
   }

diff --git a/src/service/HttpService.ts b/src/service/HttpService.ts
@@ -1,5 +1,6 @@
 import axios from "axios";
 import { ENDPOINTS } from "../utils/apiEndpoints";
+import { imageBlobToBase64 } from "../utils/ImageUtils";
 
 export const httpClient = axios.create({
   baseURL: "https://api.nxd.foundation",
@@ -60,4 +61,49 @@ export const HttpService = {
     };
     return httpClient.put(ENDPOINTS.updateOpenApiUrl(), payload, config);
   },
+  updateOrganisationLogoImage: async (formData: any): Promise<any> => {
+    const config: object = {
+      headers: { ...getAuthenticatedHeaders() },
+    };
+    const payload = formData;
+    return httpClient
+      .put(ENDPOINTS.getLogoImage(), payload, config)
+      .then((res) => {
+        return res.data.Organization;
+      });
+  },
+  getCoverImage: async (): Promise<any> => {
+    const config: object = {
+      headers: { ...getAuthenticatedHeaders() },
+      responseType: "arraybuffer",
+    };
+    return httpClient.get(ENDPOINTS.getCoverImage(), config).then((res) => {
+      console.log(res, "RES")
+      return imageBlobToBase64(res.data);
+    });
+  },
+  getLogoImage: async (): Promise<any> => {
+    const config: object = {
+      headers: { ...getAuthenticatedHeaders() },
+      responseType: "arraybuffer",
+    };
+    return httpClient.get(ENDPOINTS.getLogoImage(), config).then((res) => {
+      console.log(res, "RES")
+      localStorage.setItem('cachedCoverImage', imageBlobToBase64(res.data));
+      return imageBlobToBase64(res.data);
+    });
+  },
+  updateOrganisationCoverImage: async (
+    formData: any
+  ): Promise<any> => {
+    const config: object = {
+      headers: { ...getAuthenticatedHeaders() },
+    };
+    const payload = formData;
+    return httpClient
+      .put(ENDPOINTS.getCoverImage(), payload, config)
+      .then((res) => {
+        return res.data.Organization;
+      });
+  },
 };
diff --git a/src/utils/ImageUtils.tsx b/src/utils/ImageUtils.tsx
@@ -0,0 +1,8 @@
+export const imageBlobToBase64 = (imageBlob: any) => {
+    return btoa(
+      new Uint8Array(imageBlob).reduce(
+        (data, byte) => data + String.fromCharCode(byte),
+        ""
+      )
+    )
+  }
diff --git a/src/utils/fetchWrapper.ts b/src/utils/fetchWrapper.ts
@@ -109,7 +109,7 @@ export const doApiPutImage = (url, data) => {
   let _header = headers({
     "content-type": "multipart/form-data",
 });
-  fetch(url, 
+  fetch(`${baseUrl}${url}`, 
     Object.assign({}, {
       method: 'put',
       headers: _header,