Refactor modals out of post to feed

NEARBuilders · Feb 1, 2024 · eefc30f · eefc30f
1 parent f175eb5
commit eefc30f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 38 deletions.
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
@@ -5,17 +5,40 @@ const { Post } = VM.require("buildhub.near/widget/components") || {
   Post: () => <></>,
 };
 
-const { name, template, requiredHashtags, customActions } = props;
+const { name: feedName, template, requiredHashtags, customActions } = props;
+
+// for modals
+const [item, setItem] = useState(null);
+const [showProposeModal, setShowProposeModal] = useState(false);
+const toggleProposeModal = () => {
+  setShowProposeModal(!showProposeModal);
+};
+const modalToggles = {
+  propose: toggleProposeModal,
+};
 
 return (
-  <div key={name}>
+  <div key={feedName}>
+    {feedName.toLowerCase() === "request" && (
+      <>
+        <Widget
+          src="buildhub.near/widget/components.modals.CreateProposal"
+          loading="..."
+          props={{
+            showModal: showProposeModal,
+            toggleModal: toggleProposeModal,
+            item: item,
+          }}
+        />
+      </>
+    )}
     {!context.accountId ? ( // if not logged in
       <Widget src="buildhub.near/widget/components.login-now" props={props} />
     ) : (
       <Widget
         src="buildhub.near/widget/Compose"
         props={{
-          draftKey: name,
+          draftKey: feedName,
           template: template,
           requiredHashtags: requiredHashtags,
         }}
@@ -41,7 +64,8 @@ return (
           noBorder={true}
           currentPath={`/buildhub.near/widget/app?page=feed`}
           customActions={customActions}
-          feedType={name}
+          modalToggles={modalToggles}
+          setItem={setItem}
         />
       )}
     />

diff --git a/apps/builddao/widget/components/Post.jsx b/apps/builddao/widget/components/Post.jsx
@@ -286,26 +286,8 @@ const contentWidget = (
   </>
 );
 
-// need to refactor this
-const [showModal, setShowModal] = useState(false);
-const toggleModal = () => {
-  setShowModal(!showModal);
-};
-
 return (
   <>
-    {props.feedType.toLowerCase() === "request" && (
-      <>
-        <Widget
-          src="buildhub.near/widget/components.modals.CreateProposal"
-          props={{
-            showModal,
-            toggleModal,
-            item: item,
-          }}
-        />
-      </>
-    )}
     <StyledPost key={`Post-${item.path}-${item.blockHeight}`}>
       <Wrapper
         className="w-100 mx-auto"
@@ -330,7 +312,8 @@ return (
                 postType: "post",
                 flagItem: item,
                 customActions: customActions,
-                toggleModal: toggleModal,
+                modalToggles: props.modalToggles,
+                setItem: props.setItem,
               }}
             />
             {fullPostLink ? (

diff --git a/apps/builddao/widget/components/modals/CreateProposal.jsx b/apps/builddao/widget/components/modals/CreateProposal.jsx
@@ -9,7 +9,7 @@ const { Modal, Button, User } = VM.require(
 ) || {
   Modal: () => <></>,
   Button: () => <></>,
-  User: () => <></>
+  User: () => <></>,
 };
 
 const showModal = props.showModal;
@@ -128,7 +128,7 @@ return (
               selectedDAO: selectedDAO,
               item: props.item,
               bootstrapTheme: bootstrapTheme,
-              customCSS: editorCSS
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -141,7 +141,7 @@ return (
               selectedDAO: selectedDAO,
               item: props.item,
               bootstrapTheme: bootstrapTheme,
-              customCSS: editorCSS
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -154,7 +154,7 @@ return (
               selectedDAO: selectedDAO,
               item: props.item,
               bootstrapTheme: bootstrapTheme,
-              customCSS: editorCSS
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -168,7 +168,7 @@ return (
               selectedDAO: selectedDAO,
               item: props.item,
               bootstrapTheme: bootstrapTheme,
-              customCSS: editorCSS
+              customCSS: editorCSS,
             }}
           />
         </>
@@ -182,7 +182,7 @@ return (
               selectedDAO: selectedDAO,
               item: props.item,
               bootstrapTheme: bootstrapTheme,
-              customCSS: editorCSS
+              customCSS: editorCSS,
             }}
           />
         </>

diff --git a/apps/builddao/widget/components/post/Header.jsx b/apps/builddao/widget/components/post/Header.jsx
@@ -95,7 +95,8 @@ const isPremium = !!props.isPremium;
 const flagItem = props.flagItem;
 const customActions = props.customActions ?? [];
 const showTime = props.showTime ?? true;
-const toggleModal = props.toggleModal;
+const modalToggles = props.modalToggles;
+const setItem = props.setItem;
 
 const { href } = VM.require("buildhub.near/widget/lib.url") || (() => {});
 
@@ -195,11 +196,12 @@ return (
             customActions.map((action) => (
               <li key={action.label}>
                 <button
-                  onClick={() =>
-                    action.type === "modal"
-                      ? action.onClick(toggleModal)
-                      : action.onClick(flagItem)
-                  }
+                  onClick={() => {
+                    if (action.type === "modal") {
+                      action.onClick(modalToggles);
+                      setItem(flagItem);
+                    }
+                  }}
                   className="btn btn-outline-dark dropdown-item"
                 >
                   <i className={`bi ${action.icon}`}></i>{" "}

diff --git a/apps/builddao/widget/config/feed.jsx b/apps/builddao/widget/config/feed.jsx
@@ -189,9 +189,10 @@ return {
             type: "modal",
             icon: "bi-file",
             label: "Propose",
-            onClick: (modalToggle) => {
-              console.log("modal", modalToggle);
-              modalToggle();
+            onClick: (modalToggles) => {
+              console.log(modalToggles);
+              const toggle = modalToggles.propose;
+              toggle();
             },
           },
         ],