Ft: Global proposals feed page (#102)

* added feed page * added feed * improve UI
near-ndc · Apr 11, 2024 · f9b589a · f9b589a
1 parent 8eaec81
commit f9b589a
Show file tree

Hide file tree

Showing 8 changed files with 687 additions and 173 deletions.
diff --git a/apps/astraplusplus/widget/DAO/Proposals/Card/index.jsx b/apps/astraplusplus/widget/DAO/Proposals/Card/index.jsx
@@ -1,5 +1,5 @@
 const multiSelectMode = props.multiSelectMode ?? false;
-let { proposalString, proposalId, daoId, daoConfig } = props;
+let { proposalString, proposalId, daoId, daoConfig, showNavButton } = props;
 const accountId = context.accountId;
 
 const CoADaoId = props.dev
@@ -579,7 +579,8 @@ return (
       dev: props.dev,
       HoMDaoId,
       CoADaoId,
-      registry
+      registry,
+      showNavButton
     }}
   />
 );
diff --git a/apps/astraplusplus/widget/DAO/Proposals/Card/ui.jsx b/apps/astraplusplus/widget/DAO/Proposals/Card/ui.jsx
@@ -26,8 +26,12 @@ const {
   currentuserCongressHouse,
   CoADaoId,
   HoMDaoId,
-  registry
+  registry,
+  showNavButton
 } = props;
+const proposalURL = `https://near.org//*__@appAccount__*//widget/home?page=dao&tab=proposals&daoId=${daoId}&proposalId=${
+  proposal.id
+}${props.dev ? "&dev=true" : ""}`;
 const accountId = context.accountId;
 const [showNotificationModal, setNotificationModal] = useState(false);
 const [voteDetails, setVoteDetails] = useState(null);
@@ -261,7 +265,16 @@ function renderHeader({ typeName, id, daoId, statusName }) {
     <div className="card__header">
       <div className="d-flex flex-column gap-2">
         <div className="d-flex align-items-center justify-content-between">
-          <h4>{typeName}</h4>
+          <div className="d-flex align-items-center gap-2">
+            <h4>{typeName}</h4>
+            {showNavButton && (
+              <a target="_blank" rel="noopener noreferrer" href={proposalURL}>
+                <h5>
+                  <i class="bi bi-box-arrow-up-right"></i>
+                </h5>
+              </a>
+            )}
+          </div>
           <div className="d-flex align-items-center gap-2">
             {(isCongressDaoID || isVotingBodyDao) &&
               statusName === "Approved" &&
@@ -877,9 +890,7 @@ function renderFooter({ totalVotes, votes, comments, daoId, proposal }) {
       icon: "bi bi-share",
       widget: "Common.Modals.Share",
       props: {
-        url: `https://near.org//*__@appAccount__*//widget/home?page=dao&tab=proposals&daoId=${daoId}&proposalId=${
-          proposal.id
-        }${props.dev ? "&dev=true" : ""}`,
+        url: proposalURL,
         text: "Explore this new proposal from our DAO! Your support and feedback are essential as we work towards a decentralized future. Review the details and join the discussion here:"
       }
     }

diff --git a/apps/astraplusplus/widget/DAO/Proposals/CardsList.jsx b/apps/astraplusplus/widget/DAO/Proposals/CardsList.jsx
@@ -5,7 +5,8 @@ const {
   update,
   isCongressDaoID,
   daoConfig,
-  isVotingBodyDao
+  isVotingBodyDao,
+  showNavButton
 } = props;
 
 return (
@@ -40,7 +41,8 @@ return (
               isCongressDaoID,
               isVotingBodyDao,
               daoConfig,
-              dev: props.dev
+              dev: props.dev,
+              showNavButton
             }}
           />
         );

diff --git a/apps/astraplusplus/widget/DAO/Proposals/ProposalsPikespeak.jsx b/apps/astraplusplus/widget/DAO/Proposals/ProposalsPikespeak.jsx
@@ -369,106 +369,109 @@ return (
         }}
       />
     </div>
-    {res !== null && !res.body && (
+    {res !== null && !res.body ? (
       <div className="alert alert-danger mt-2" role="alert">
-        Couldn't fetch proposals from API. Please try again later.
+        Network issue. Please try again later.
       </div>
-    )}
-    {isVotingBodyDao && (
-      <div className="w-100 mt-2">
-        <Widget
-          src={`/*__@appAccount__*//widget/DAO.Layout.Tabs`}
-          props={{
-            allowHref: false,
-            tabs: {
-              active: {
-                name: "Active"
-              },
-              draft: {
-                name: "Draft"
-              }
-            },
-            tab: state.tab,
-            update: (state) => update(state)
-          }}
-        />
-      </div>
-    )}
-    <div>
-      {state.tableView ? (
-        <Widget
-          src="/*__@appAccount__*//widget/DAO.Proposals.Table.index"
-          props={{
-            state,
-            resPerPage,
-            proposals: res === null ? null : res.body,
-            isCongressDaoID,
-            isVotingBodyDao,
-            daoConfig: state.daoConfig,
-            dev: props.dev
-          }}
-        />
-      ) : (
-        <Widget
-          src="/*__@appAccount__*//widget/DAO.Proposals.CardsList"
-          props={{
-            state,
-            resPerPage,
-            proposals: res === null ? null : res.body,
-            isCongressDaoID,
-            isVotingBodyDao,
-            daoConfig: state.daoConfig,
-            dev: props.dev
-          }}
-        />
-      )}
-
-      <div className="d-flex justify-content-center my-4">
-        <Widget
-          src="nearui.near/widget/Navigation.PrevNext"
-          props={{
-            hasPrev: state.page > 0,
-            hasNext: hasNextHandler(),
-            onPrev: () => {
-              update({
-                page: state.page - 1
-              });
-            },
-            onNext: () => {
-              update({
-                page: state.page + 1
-              });
-            },
-            nextHref: `#proposals-top`
-          }}
-        />
-      </div>
-    </div>
-    {state.multiSelectMode && (
+    ) : (
       <>
-        <div
-          style={{
-            height: 180,
-            width: "100%"
-          }}
-        ></div>
-        <Widget
-          src="/*__@appAccount__*//widget/DAO.Proposals.MultiVote"
-          props={{
-            daoId: state.daoId,
-            view: "submit",
-            onHideMultiSelect: () => {
-              State.update({
-                ...state,
-                multiSelectMode: false
-              });
-              Storage.privateSet("multiSelectMode", false);
-            },
-            isCongressDaoID,
-            isVotingBodyDao,
-            dev: props.dev
-          }}
-        />
+        {isVotingBodyDao && (
+          <div className="w-100 mt-2">
+            <Widget
+              src={`/*__@appAccount__*//widget/DAO.Layout.Tabs`}
+              props={{
+                allowHref: false,
+                tabs: {
+                  active: {
+                    name: "Active"
+                  },
+                  draft: {
+                    name: "Draft"
+                  }
+                },
+                tab: state.tab,
+                update: (state) => update(state)
+              }}
+            />
+          </div>
+        )}
+        <div>
+          {state.tableView ? (
+            <Widget
+              src="/*__@appAccount__*//widget/DAO.Proposals.Table.index"
+              props={{
+                state,
+                resPerPage,
+                proposals: res === null ? null : res.body,
+                isCongressDaoID,
+                isVotingBodyDao,
+                daoConfig: state.daoConfig,
+                dev: props.dev
+              }}
+            />
+          ) : (
+            <Widget
+              src="/*__@appAccount__*//widget/DAO.Proposals.CardsList"
+              props={{
+                state,
+                resPerPage,
+                proposals: res === null ? null : res.body,
+                isCongressDaoID,
+                isVotingBodyDao,
+                daoConfig: state.daoConfig,
+                dev: props.dev
+              }}
+            />
+          )}
+
+          <div className="d-flex justify-content-center my-4">
+            <Widget
+              src="nearui.near/widget/Navigation.PrevNext"
+              props={{
+                hasPrev: state.page > 0,
+                hasNext: hasNextHandler(),
+                onPrev: () => {
+                  update({
+                    page: state.page - 1
+                  });
+                },
+                onNext: () => {
+                  update({
+                    page: state.page + 1
+                  });
+                },
+                nextHref: `#proposals-top`
+              }}
+            />
+          </div>
+        </div>
+        {state.multiSelectMode && (
+          <>
+            <div
+              style={{
+                height: 180,
+                width: "100%"
+              }}
+            ></div>
+            <Widget
+              src="/*__@appAccount__*//widget/DAO.Proposals.MultiVote"
+              props={{
+                daoId: state.daoId,
+                view: "submit",
+                onHideMultiSelect: () => {
+                  State.update({
+                    ...state,
+                    multiSelectMode: false
+                  });
+                  Storage.privateSet("multiSelectMode", false);
+                },
+                isCongressDaoID,
+                isVotingBodyDao,
+                dev: props.dev
+              }}
+            />
+          </>
+        )}
       </>
     )}
   </>