Merge branch 'develop' into feat/web4-deploy

NEARBuilders · Jul 8, 2024 · 4e2076b · 4e2076b
2 parents d273c6d + 836c111
commit 4e2076b
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 24 deletions.
diff --git a/apps/new/widget/page/project/tabs/Overview.jsx b/apps/new/widget/page/project/tabs/Overview.jsx
@@ -73,19 +73,23 @@ return (
       </p>
     </div>
     <div className="d-flex gap-5">
-      <div className="section">
-        <p className="heading">Location</p>
-        <p className="description d-flex align-items-center gap-2">
-          <MapIcon /> {location ?? "No Location"}
-        </p>
-      </div>
-      <div className="section">
-        <p className="heading">Team Size</p>
-        <p className="description d-flex align-items-center gap-2">
-          <i className="bi bi-person"></i>
-          {teamSize || "unspecified"}
-        </p>
-      </div>
+      {location && (
+        <div className="section">
+          <p className="heading">Location</p>
+          <p className="description d-flex align-items-center gap-2">
+            <MapIcon /> {location ?? "No Location"}
+          </p>
+        </div>
+      )}
+      {teamSize && (
+        <div className="section">
+          <p className="heading">Team Size</p>
+          <p className="description d-flex align-items-center gap-2">
+            <i className="bi bi-person"></i>
+            {teamSize || "unspecified"}
+          </p>
+        </div>
+      )}
     </div>
     <div className="section">
       <p className="heading">Contributors</p>

diff --git a/apps/new/widget/page/projects/Editor.jsx b/apps/new/widget/page/projects/Editor.jsx
@@ -149,14 +149,15 @@ const [projectIdForSocialDB, setProjectId] = useState(null); // for edit changes
 const [contributorSearchTerm, setContributorSearch] = useState("");
 const [showDeleteModal, setShowDeleteModal] = useState(false);
 const [showDeleteSuccessModal, setShowDeleteSuccessModal] = useState(false);
+const [onCreateLoader, setCreateLoader] = useState(false);
 
 function removeWhiteSpace(str) {
   return str.replace(/\s/g, "-").toLowerCase();
 }
 
 function convertArrayToObject(array) {
   const obj = {};
-  array.forEach((value, index) => {
+  (array ?? []).forEach((value, index) => {
     obj[value] = "";
   });
   return obj;
@@ -568,6 +569,7 @@ const DeleteConfirmationModal = () => {
 };
 
 function onCreateProject() {
+  setCreateLoader(true);
   const projectID = isEditScreen ? projectIdForSocialDB : normalize(title, "-");
   const project = {
     title,
@@ -651,8 +653,10 @@ function onCreateProject() {
   } else {
     Social.set(data, {
       onCommit: () => {
+        setCreateLoader(false);
         setShowSuccessModal(true);
       },
+      onCancel: () => setCreateLoader(false),
     });
   }
 }
@@ -759,6 +763,7 @@ const DeleteProjectBtn = () => {
       <Button
         variant="outline"
         className="destructive"
+        loading={showDeleteModal}
         onClick={() => setShowDeleteModal(true)}
       >
         Delete Project
@@ -943,6 +948,7 @@ const SecondScreen = () => {
             variant="primary"
             onClick={onCreateProject}
             disabled={invalidContributorFound}
+            loading={onCreateLoader}
           >
             {isEditScreen ? "Save Changes" : "Create"}
           </Button>

diff --git a/apps/old/widget/components/Button.jsx b/apps/old/widget/components/Button.jsx
@@ -151,7 +151,7 @@ function Button({
   return (
     <StyledButton
       id={id}
-      disabled={disabled}
+      disabled={disabled || loading}
       key={`Button-${type ?? "Normal"}-${variant ?? "Default"}-${id}`}
       className={className}
       variant={variant}

diff --git a/apps/old/widget/components/UploadField.jsx b/apps/old/widget/components/UploadField.jsx
@@ -1,15 +1,47 @@
+const initialMsg = (
+  <>
+    <i className="bi bi-cloud-upload"></i>
+    <div className="d-flex flex-column gap-2">
+      <p>Choose a file or drag & drop it here.</p>
+      <p className="secondary">JPEG, PNG, PDF, and MP4 formats, up to 50 MB.</p>
+    </div>
+  </>
+);
+
 const [img, setImg] = useState("");
-const [msg, setMsg] = useState("Upload");
+const [displayText, setDisplayText] = useState(initialMsg);
+
+const SpinningIcon = styled.i`
+  animation: spin 0.8s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
 const uploadFile = (files) => {
-  setMsg("Uploading...");
+  setDisplayText(
+    <>
+      <SpinningIcon className="bi bi-arrow-repeat" />
+      <p>Uploading...</p>
+    </>,
+  );
   asyncFetch("https://ipfs.near.social/add", {
     method: "POST",
     headers: { Accept: "application/json" },
     body: files[0],
   })
     .catch((e) => {
-      console.error(e);
-      setMsg("Failed to upload");
+      console.error("Upload error:", e);
+      setDisplayText(
+        <>
+          <i className="bi bi-exclamation-triangle text-danger"></i>
+          <p>Failed to upload. Please try again.</p>
+        </>,
+      );
     })
     .then((res) => {
       setImg(res.body.cid);
@@ -18,6 +50,22 @@ const uploadFile = (files) => {
           ipfs_cid: res.body.cid,
         });
       }
+      if (res.body.cid) {
+        setDisplayText(
+          <>
+            <i className="bi bi-check-circle text-success"></i>
+            <p>Upload successful!</p>
+          </>,
+        );
+        setTimeout(() => setDisplayText(""), 1500);
+      } else {
+        setDisplayText(
+          <>
+            <i className="bi bi-exclamation-triangle text-danger"></i>
+            <p>Failed to upload. Please try again.</p>
+          </>,
+        );
+      }
     });
 };
 
@@ -102,11 +150,7 @@ const UploadedImage = styled.img`
 
 return (
   <UploadContainer background={background}>
-    <i class="bi bi-cloud-upload"></i>
-    <div className="d-flex flex-column gap-2">
-      <p>Choose a file or drag & drop it here.</p>
-      <p className="secondary">JPEG, PNG, PDF, and MP4 formats, up to 50 MB.</p>
-    </div>
+    {msg}
     <ButtonContainer>
       <Button>
         <Files