From 60004c6fcb8a85955d689279e580061cd8b7629c Mon Sep 17 00:00:00 2001 From: karthik cs Date: Sat, 6 Apr 2024 22:38:32 +0530 Subject: [PATCH] Fix: #60, Admin Api Integration and Upload cover and logo Image issue resolved --- .../OrgCoverImageUpload.tsx | 39 +++++++++++----- .../OrgLogoImageUpload.tsx | 32 +++++++++---- src/redux/sagas/gettingStart.ts | 9 ---- src/service/HttpService.ts | 46 +++++++++++++++++++ src/utils/ImageUtils.tsx | 8 ++++ src/utils/fetchWrapper.ts | 2 +- 6 files changed, 105 insertions(+), 31 deletions(-) create mode 100644 src/utils/ImageUtils.tsx diff --git a/src/component/OrganisationDetails/OrgCoverImageUpload.tsx b/src/component/OrganisationDetails/OrgCoverImageUpload.tsx index b2e2c2f..1dcd86c 100644 --- 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 ( { 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 index ccf1687..04c02a1 100644 --- a/src/component/OrganisationDetails/OrgLogoImageUpload.tsx +++ b/src/component/OrganisationDetails/OrgLogoImageUpload.tsx @@ -1,4 +1,4 @@ -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"; @@ -6,6 +6,7 @@ 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 ( => { + const config: object = { + headers: { ...getAuthenticatedHeaders() }, + }; + const payload = formData; + return httpClient + .put(ENDPOINTS.getLogoImage(), payload, config) + .then((res) => { + return res.data.Organization; + }); + }, + getCoverImage: async (): Promise => { + 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 => { + 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 => { + 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 new file mode 100644 index 0000000..eb2019e --- /dev/null +++ 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), + "" + ) + ) + } \ No newline at end of file diff --git a/src/utils/fetchWrapper.ts b/src/utils/fetchWrapper.ts index 29c3bfa..0ce64a5 100644 --- 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,