Merge pull request #99 from decentralised-dataexchange/98-cover-image…

…-and-logo-image-upload-not-working
decentralised-dataexchange · Apr 7, 2024 · 9c85754 · 9c85754
2 parents c4e3c65 + 3405bdd
commit 9c85754
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 67 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,15 @@
     <base href="/">
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Admin Dashboard</title>
+    <title>NordXDataspace (NXD)</title>
+    <link data-rh="true" rel="icon" href="./favicon.ico">
+    <meta data-rh="true" property="og:image" content="https://nxd.foundation/img/nxd-social-v3.png">
+    <meta data-rh="true" name="twitter:image" content="https://nxd.foundation/img/nxd-social-v3.png">
+    <meta data-rh="true" property="og:locale" content="en_GB">
+    <meta data-rh="true" property="og:title" content="NordXDataspace | NordXDataspace">
+    <meta data-rh="true" name="description" content="Enabling trust in the data ecosystem for next-generation data sharing. ">
+    <meta data-rh="true" property="og:description" content="Enabling trust in the data ecosystem for next-generation data sharing. ">
+    <meta property="og:url" content="https://dataspace.nxd.foundation" data-rh="true">
 </head>
 
 <body>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/component/Drawer/style.scss b/src/component/Drawer/style.scss
@@ -1,7 +1,7 @@
 .drawerContainer {
     .MuiDrawer-paper {
         border: 2px solid rgb(133, 133, 133);
-        padding: 20px;
+        // padding: 20px;
         overflow: hidden;
     }
 }

diff --git a/src/component/OrganisationDetails/OrgCoverImageUpload.tsx b/src/component/OrganisationDetails/OrgCoverImageUpload.tsx
@@ -26,21 +26,13 @@ type Props = {
   editMode: boolean;
   coverImageBase64: string | undefined;
   setCoverImageBase64: React.Dispatch<React.SetStateAction<any>>;
+  handleEdit: () => void
 };
 
 const OrgCoverImageUpload = (props: Props) => {
-  const dispatch = useAppDispatch();
-  const { editMode, setCoverImageBase64 } = props;
+  const { editMode, handleEdit } = props;
+  let coverImageBase64 = localStorage.getItem('cachedCoverImage')
 
-  const [ imageBase64, setImageBase64] = useState('')
-
-  const imagesSet = useAppSelector(
-    (state) => state?.gettingStart?.imageSet
-  )
-
-  useEffect(() => {
-    setImageBase64(imagesSet?.cover)
-  }, [imagesSet]);
 
   const myFile: { file: string; imagePreviewUrl: any } = {
     file: "",
@@ -65,8 +57,8 @@ const OrgCoverImageUpload = (props: Props) => {
       HttpService.updateOrganisationCoverImage(formData)
         .then((res) => {
           HttpService.getCoverImage().then((imageBase64) => {
-            console.log(imageBase64, "imageBase64")
-            setImageBase64(imageBase64);
+            handleEdit();
+            localStorage.setItem('cachedCoverImage', imageBase64)
           });
         })
         .catch((error) => {
@@ -84,9 +76,9 @@ const OrgCoverImageUpload = (props: Props) => {
         duration={0}
         style={{ opacity: editMode ? 0.25 : 1, transitionDuration: "0ms" }}
         src={
-          !imageBase64
+          !coverImageBase64
             ? defaultCoverImage
-            : imageBase64
+            : coverImageBase64
         }
       />
 

diff --git a/src/component/OrganisationDetails/OrgDetailsContainer.tsx b/src/component/OrganisationDetails/OrgDetailsContainer.tsx
@@ -10,6 +10,8 @@ import './style.scss';
 import { useTranslation } from "react-i18next";
 import { useAppSelector , useAppDispatch} from "../../customHooks";
 import { updateDataSource } from "../../redux/actionCreators/gettingStart";
+import { HttpService } from "../../service/HttpService";
+import GeneralModal from "../../component/Modals/generalModal";
 
 const DetailsContainer = styled("div")({
   height: "auto",
@@ -48,13 +50,12 @@ const OrganisationDetailsContainer = (props: Props) => {
   const [openRightSideDrawer, setOpenRightSideDrawer] = useState(false)
   const {
     editMode,
-    logoImageBase64,
     organisationDetails,
     handleEdit,
-    setOganisationDetails,
-    setLogoImageBase64,
     isEnableAddCredential
   } = props;
+  const [coverImageBase64, setCoverImageBase64] = useState();
+  const [logoImageBase64, setLogoImageBase64] = useState();
   const dispatch = useAppDispatch();
   const [ formValue, setFormValue ] = useState(
     {
@@ -71,6 +72,14 @@ const OrganisationDetailsContainer = (props: Props) => {
         'policyUrl': organisationDetails?.policyUrl, 
         'description': organisationDetails?.description
       })
+      HttpService.getCoverImage().then((coverImage) => {
+        setCoverImageBase64(coverImage);
+        localStorage.setItem('cachedCoverImage', coverImage)
+      });
+      HttpService.getLogoImage().then((logoImage) => {
+        setLogoImageBase64(logoImage);
+        localStorage.setItem('cachedLogoImage', logoImage)
+      });
     }, [organisationDetails])
 
   const callRightSideDrawer = () => {
@@ -127,6 +136,7 @@ const addCredentialClass = isVerify ? 'view-credential' : !isEnableAddCredential
             editMode={editMode}
             logoImageBase64={logoImageBase64}
             setLogoImageBase64={setLogoImageBase64}
+            handleEdit={handleEdit}
           />
 
           <Box

diff --git a/src/component/OrganisationDetails/OrgLogoImageUpload.tsx b/src/component/OrganisationDetails/OrgLogoImageUpload.tsx
@@ -16,16 +16,8 @@ type Props = {
 };
 
 const OrgLogoImageUpload = (props: Props) => {
-  const {editMode } = props;
-  const [ imageBase64, setLogoImageBase64] = useState('')
-
-  const imagesSet = useAppSelector(
-    (state) => state?.gettingStart?.imageSet
-  )
-
-  useEffect(() => {
-    setLogoImageBase64(imagesSet?.logo)
-  }, [imagesSet]);
+  const {editMode, handleEdit, setLogoImageBase64 } = props;
+  const logoImageBase64 = localStorage.getItem('cachedLogoImage');
 
   const myFile: { file: string; imagePreviewUrl: any } = {
     file: "",
@@ -46,12 +38,11 @@ const OrgLogoImageUpload = (props: Props) => {
       file && formData.append('orgimage', file);
       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');
+            handleEdit();
+            setLogoImageBase64(imageBase64)
+            localStorage.setItem('cachedLogoImage', imageBase64);
           });
         })
         .catch((error) => {
@@ -63,9 +54,9 @@ const OrgLogoImageUpload = (props: Props) => {
     <Box>
       <Avatar
         src={
-          !imageBase64
+          !logoImageBase64
             ? defaultLogoImg
-            : imageBase64
+            : logoImageBase64
         }
         alt="logo"
         style={{

diff --git a/src/container/Account/style.scss b/src/container/Account/style.scss
@@ -28,4 +28,10 @@
     .css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root {
         border-radius: 100px !important;
     }
+}
+
+.manageAdmin-container {
+    .css-jcincl {
+        font-size: 0.875rem !important;
+    }
 }
diff --git a/src/container/AddCredential/index.tsx b/src/container/AddCredential/index.tsx
@@ -65,22 +65,47 @@ const AddCredentialComponent = ({ callRightSideDrawer, isVerify }) => {
             className="drawerContent"
         >
             <Box className="titleContainer">
-                <Box component={"span"} alignItems="center">{currentIndex ? <ArrowBackIosNewIcon sx={{ cursor: "pointer" }} onClick={() => handleBack(currentIndex)} /> :'' }</Box>
-                <Typography className='walletHeader'>{t('gettingStarted.connectWalletTitle')} - {contentArray[currentIndex].headerName}</Typography>
-                <Box onClick={callRightSideDrawer} sx={{ cursor: "pointer", paddingLeft: isMobile ? '0' : currentIndex ? '210px' : '240px' }}>
+                {/* <Box component={"span"} alignItems="center">{currentIndex ? <ArrowBackIosNewIcon sx={{ cursor: "pointer" }} onClick={() => handleBack(currentIndex)} /> :'' }</Box> */}
+                <Typography className='walletHeader'>{currentIndex > 0 ? `${t('gettingStarted.viewCredential')}` : t('gettingStarted.connectWalletTitle') + contentArray[currentIndex].headerName}</Typography>
+                <Box onClick={callRightSideDrawer} sx={{ cursor: "pointer", padding: '20px' }}>
                     <CloseIcon />
                 </Box>
             </Box>
             <Box className="contentContainer">{contentArray[currentIndex].component}</Box>
-            <Box className="btnContainer">
-                <Button className="btn cancelBtn" size="small"onClick={callRightSideDrawer}>
-                    {t('common.cancel')}
-                </Button>
-                {currentIndex ==0 ? <Button onClick={() => handleAddComponent(currentIndex)} className="btn nextBtn" size="small" >
-                    {isLoader ? 'loading...' : `${t('common.confirm')}`}
-                </Button> : ''
-                }   
-            </Box>
+            <Box className="modal-footer">
+            <Button
+              onClick={callRightSideDrawer}
+              className="delete-btn"
+              sx={{
+                marginRight: "10px",
+                color: "black",
+                "&:hover": {
+                  backgroundColor: "black",
+                  color: "white",
+                },
+              }}
+              variant="outlined"
+            >
+              {t("common.cancel")}
+            </Button>
+            {currentIndex ==0 ? <Button
+              className="delete-btn"
+              onClick={() => handleAddComponent(currentIndex)}
+              variant="outlined"
+              sx={{
+                marginRight: "20px",
+                cursor: isLoader ? "not-allowed" : "pointer",
+                color: isLoader ? "#6D7676" : "black",
+                "&:hover": {
+                  backgroundColor: isLoader ? "#6D7676" : "black",
+                  color: "white",
+                },
+              }}
+            >
+              {isLoader ? 'loading...' : `${t('common.confirm')}`}
+            </Button> : ''
+            }
+          </Box>
         </Box>
     );
 }

diff --git a/src/container/AddCredential/style.scss b/src/container/AddCredential/style.scss
@@ -18,11 +18,19 @@
         display: flex;
         align-items: center;
         padding: 0 10px;
+        font-size: 16px;
+        background-color: #03182b;
+        display: flex;
+        align-items: center;
+        height: 80px;
+        width: 100%;
+        justify-content: space-between;
+        color: white;
     }
 
     .contentContainer {
         flex-grow: 1;
-        padding: 0 10px;
+        padding: 10px 20px;
         overflow-y: auto;
         height: calc(100% - 20%);
     }
@@ -114,4 +122,8 @@
     .title-font {
         font-size: 0.875rem;
     }
+
+    .modal-footer {
+        width: 600px;
+    }
 }
diff --git a/src/container/GettingStarted/index.tsx b/src/container/GettingStarted/index.tsx
@@ -67,6 +67,7 @@ const GettingStarted = () => {
           editMode={editMode}
           coverImageBase64={'logoImageBase64'}
           setCoverImageBase64={'logoImageBase64'}
+          handleEdit={handleEdit}
         />
         <OrganisationDetailsContainer
               editMode={editMode}

diff --git a/src/redux/sagas/loginSaga.ts b/src/redux/sagas/loginSaga.ts
@@ -27,20 +27,6 @@ export function* admin() {
     const adminUrl = ENDPOINTS.getAdminDetails();
     const adminRes = yield doApiGet(adminUrl);
     yield put(loginAction.loginSuccess(adminRes));
-    const coverImageUrl = ENDPOINTS.getCoverImage();
-    const logoImageUrl = ENDPOINTS.getLogoImage();
-    const [logo, cover] = yield all([
-      yield doApiGetBlob(logoImageUrl),
-      yield doApiGetBlob(coverImageUrl)
-    ]);
-    yield imageBlobToBase64(logo, 'logo');
-    yield imageBlobToBase64(cover, 'cover');
-
-    localStorage.getItem('cachedLogoImage');
-    localStorage.getItem('cachedCoverImage');
-    yield put(gettingStartAction.setImages(
-      localStorage.getItem('cachedLogoImage'), localStorage.getItem('cachedCoverImage')
-    ))
   } catch(err) {
     yield put(loginAction.loginFailure(err));
   }

diff --git a/src/service/HttpService.ts b/src/service/HttpService.ts
@@ -78,7 +78,6 @@ export const HttpService = {
       responseType: "arraybuffer",
     };
     return httpClient.get(ENDPOINTS.getCoverImage(), config).then((res) => {
-      console.log(res, "RES")
       return imageBlobToBase64(res.data);
     });
   },
@@ -88,8 +87,6 @@ export const HttpService = {
       responseType: "arraybuffer",
     };
     return httpClient.get(ENDPOINTS.getLogoImage(), config).then((res) => {
-      console.log(res, "RES")
-      localStorage.setItem('cachedCoverImage', imageBlobToBase64(res.data));
       return imageBlobToBase64(res.data);
     });
   },

diff --git a/src/utils/ImageUtils.tsx b/src/utils/ImageUtils.tsx
@@ -1,8 +1,10 @@
 export const imageBlobToBase64 = (imageBlob: any) => {
-    return btoa(
+  const baseName = 'data:image/jpeg;charset=utf-8;base64';
+  const base64 = btoa(
       new Uint8Array(imageBlob).reduce(
         (data, byte) => data + String.fromCharCode(byte),
         ""
       )
     )
+    return `${baseName},${base64}`
   }