fix images in create form (#577)

PotLock · Aug 29, 2024 · bbe5cff · bbe5cff
1 parent 7026f23
commit bbe5cff
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 73 deletions.
diff --git a/apps/potlock/widget/Profile/BannerHeader.jsx b/apps/potlock/widget/Profile/BannerHeader.jsx
@@ -10,6 +10,14 @@ const editable = props.bgImageOnChange && props.profileImageOnChange;
 
 const profile = props.profile ?? Social.getr(`${accountId}/profile`);
 
+const uploadFileUpdateState = (body, callback) => {
+  asyncFetch("https://ipfs.near.social/add", {
+    method: "POST",
+    headers: { Accept: "application/json" },
+    body,
+  }).then(callback);
+};
+
 // Loading Skeleton
 const loadingSkeleton = styled.keyframes`
   0% {
@@ -77,12 +85,15 @@ if (profile === null) {
 
 const name = profile.name || "No-name profile";
 const image = profile.image;
-const backgroundImage = props.backgroundImage || profile.backgroundImage;
-const profileImage = props.profileImage || image;
 const imageStyle = props.imageStyle ?? {};
 const backgroundStyle = props.backgroundStyle ?? {};
 const containerStyle = props.containerStyle ?? {};
 
+State.init({
+  profileImage: props.profileImage || profile.image,
+  backgroundImage: props.backgroundImage || profile.backgroundImage,
+});
+
 const statuses = {
   Approved: {
     icon: (
@@ -394,8 +405,28 @@ const CameraSvg = ({ height }) => (
   </svg>
 );
 
-return (
-  <Container className="pt-0 position-relative" style={{ ...containerStyle }}>
+const Avatar = ({ imageStyle, profileImage }) => {
+  return (
+    <ProfileImageContainer>
+      <Widget
+        src={"${config_account}/widget/Project.ProfileImage"}
+        props={{
+          image: profileImage,
+          profile: {},
+          accountId,
+          style: { ...imageStyle },
+          imageClassName: "rounded-circle",
+          thumbnail: false,
+          fast: false,
+        }}
+      />
+      <CameraSvg height={24} />
+    </ProfileImageContainer>
+  );
+};
+
+const BackgroundImage = ({ backgroundImage, backgroundStyle }) => {
+  return (
     <BackgroundImageContainer>
       <Widget
         src="${alias_mob}/widget/Image"
@@ -408,55 +439,66 @@ return (
         }}
       />
       <CameraSvg height={48} />
-      {editable && (
+    </BackgroundImageContainer>
+  );
+};
+
+return (
+  <Container className="pt-0 position-relative" style={{ ...containerStyle }}>
+    {editable ? (
+      <Files
+        multiple={false}
+        accepts={["image/*"]}
+        minFileSize={1}
+        style={{
+          zIndex: 4,
+          top: 0,
+          width: "100%",
+          height: backgroundStyle.height ?? "100%",
+          position: "absolute",
+        }}
+        clickable
+        onChange={(files) => {
+          if (files) {
+            uploadFileUpdateState(files[0], (res) => {
+              const ipfs_cid = res.body.cid;
+              State.update({ backgroundImage: { ipfs_cid } });
+              props.bgImageOnChange({ ipfs_cid });
+            });
+          }
+        }}
+      >
+        <BackgroundImage
+          backgroundImage={state.backgroundImage}
+          backgroundStyle={backgroundStyle}
+        />
+      </Files>
+    ) : (
+      <BackgroundImage backgroundImage={state.backgroundImage} backgroundStyle={backgroundStyle} />
+    )}
+    <ProfileWraper>
+      {editable ? (
         <Files
           multiple={false}
           accepts={["image/*"]}
           minFileSize={1}
-          style={{
-            zIndex: 4,
-            top: 0,
-            width: "100%",
-            height: backgroundStyle.height ?? "100%",
-            position: "absolute",
-          }}
           clickable
-          onChange={props.bgImageOnChange}
-        />
-      )}
-    </BackgroundImageContainer>
-    <ProfileWraper>
-      <ProfileImageContainer>
-        <CameraSvg height={24} />
-        <Widget
-          src={"${config_account}/widget/Project.ProfileImage"}
-          props={{
-            profile,
-            accountId,
-            style: { ...imageStyle },
-            imageClassName: "rounded-circle",
-            thumbnail: false,
-            image: profileImage,
+          onChange={(files) => {
+            if (files) {
+              uploadFileUpdateState(files[0], (res) => {
+                const ipfs_cid = res.body.cid;
+                State.update({ profileImage: { ipfs_cid } });
+                console.log("ipfs_cid: ", ipfs_cid);
+                props.profileImageOnChange({ ipfs_cid });
+              });
+            }
           }}
-        />
-
-        {editable && (
-          <Files
-            multiple={false}
-            accepts={["image/*"]}
-            minFileSize={1}
-            style={{
-              position: "absolute",
-              width: "100%",
-              height: "100%",
-              left: 0,
-              top: 0,
-            }}
-            clickable
-            onChange={props.profileImageOnChange}
-          ></Files>
-        )}
-      </ProfileImageContainer>
+        >
+          <Avatar imageStyle={imageStyle} profileImage={state.profileImage} />
+        </Files>
+      ) : (
+        <Avatar imageStyle={imageStyle} profileImage={state.profileImage} />
+      )}
       {ShowFollowers && (
         <ProfileStats>
           {tab === "profile" && nadaBotVerified ? (

diff --git a/apps/potlock/widget/Project/CreateForm.jsx b/apps/potlock/widget/Project/CreateForm.jsx
@@ -954,18 +954,6 @@ if (props.edit && !userHasPermissions) {
   return <h3 style={{ textAlign: "center", paddingTop: "32px" }}>Unauthorized</h3>;
 }
 
-const uploadFileUpdateState = (body, callback) => {
-  asyncFetch("https://ipfs.near.social/add", {
-    method: "POST",
-    headers: { Accept: "application/json" },
-    body,
-  }).then(callback);
-};
-
-// console.log("state in create form: ", state);
-
-console.log(state.fundingSources);
-
 return (
   <Container>
     {!state.socialDataFetched || !registrations ? (
@@ -1038,21 +1026,11 @@ return (
             // allowEdit: true,
             backgroundImage: state.backgroundImage,
             profileImage: state.profileImage,
-            bgImageOnChange: (files) => {
-              if (files) {
-                uploadFileUpdateState(files[0], (res) => {
-                  const ipfs_cid = res.body.cid;
-                  State.update({ backgroundImage: { ipfs_cid } });
-                });
-              }
+            bgImageOnChange: (img) => {
+              State.update({ backgroundImage: img });
             },
-            profileImageOnChange: (files) => {
-              if (files) {
-                uploadFileUpdateState(files[0], (res) => {
-                  const ipfs_cid = res.body.cid;
-                  State.update({ profileImage: { ipfs_cid } });
-                });
-              }
+            profileImageOnChange: (img) => {
+              State.update({ profileImage: img });
             },
             children: (
               <LowerBannerContainer>