From 94473efbbc1aed12d467dc4fde15ad6c327e74e3 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Thu, 22 Feb 2024 23:06:07 +0530
Subject: [PATCH 1/2] fixed my proposals pagination

---
 .../widget/MyProposals/index.jsx              | 204 ++++++++++++++++--
 1 file changed, 185 insertions(+), 19 deletions(-)

diff --git a/apps/astraplusplus/widget/MyProposals/index.jsx b/apps/astraplusplus/widget/MyProposals/index.jsx
index b78d50b..9e9d357 100644
--- a/apps/astraplusplus/widget/MyProposals/index.jsx
+++ b/apps/astraplusplus/widget/MyProposals/index.jsx
@@ -1,37 +1,203 @@
 const baseApi = "https://api.pikespeak.ai/daos/proposals-by-proposer";
+const publicApiKey = "/*__@replace:pikespeakApiKey__*/";
 const resPerPage = 20;
+const accountId = context.accountId;
+
 const defaultMultiSelectMode = Storage.privateGet("multiSelectMode");
 const defaultTableView = Storage.privateGet("tableView");
 
 if (defaultMultiSelectMode === null) return "";
+if (defaultTableView === null) return "";
 
 State.init({
-    multiSelectMode: defaultMultiSelectMode ?? false,
-    tableView: defaultTableView ?? false
+  page: 0,
+  multiSelectMode: defaultMultiSelectMode ?? false,
+  tableView: defaultTableView ?? false
 });
 
+const forgeUrl = (apiUrl, params) =>
+  apiUrl +
+  Object.keys(params)
+    .sort()
+    .reduce((paramString, p) => paramString + `${p}=${params[p]}&`, "?");
+
 function fetchMyProposals() {
-    asyncFetch(`${baseApi}/${context.accountId}?limit=${resPerPage}&offset=0`, {
-        method: "GET",
-        headers: { "x-api-key": "/*__@replace:pikespeakApiKey__*/" }
-    }).then((resp) => {
-        if (resp?.body) State.update({ proposals: resp });
-    });
+  const resp = fetch(
+    forgeUrl(`${baseApi}/${context.accountId}`, {
+      offset: state.page * resPerPage,
+      limit: resPerPage,
+      proposal_types: state.filters.proposal_types,
+      status: state.filters.status,
+      time_start: state.filters.time_start,
+      time_end: state.filters.time_end
+    }),
+    {
+      mode: "cors",
+      headers: {
+        "x-api-key": publicApiKey
+      }
+    }
+  );
+
+  return resp;
 }
 
-fetchMyProposals();
+const update = (newState) => State.update(newState);
+
+let res = fetchMyProposals();
+
+function hasNextHandler() {
+  const hasNext = false;
+  hasNext = resPerPage === res.body.length;
+  return hasNext;
+}
 
 return (
-    <div>
-        <div className="d-flex justify-content-between flex-wrap mb-3 align-items-center gap-3 pb-3">
-            <h2 className="my-auto">My Proposals</h2>
-        </div>
-
-        <div className="w-100">
-            <Widget
-                src="/*__@appAccount__*//widget/DAO.Proposals.ProposalsPikespeak"
-                props={{ proposals: state.proposals, dev: props.dev }}
+  <>
+    <div
+      className="d-flex align-items-center gap-2 flex-wrap-reverse justify-content-end"
+      id="proposals-top"
+    >
+      <Widget
+        src="nearui.near/widget/Input.Text"
+        props={{
+          placeholder: "Search by proposal ID or name",
+          disabled: true,
+          type,
+          size,
+          icon: (
+            <i
+              className="bi bi-search"
+              style={{
+                color: "#4F46E5"
+              }}
             />
-        </div>
+          ),
+          inputProps: {
+            title: "Disabled because no API for searching yet"
+          }
+        }}
+      />
+      <Widget
+        src="nearui.near/widget/Input.Button"
+        props={{
+          children: state.multiSelectMode ? (
+            <>
+              Multi-Vote
+              <i class="bi bi-x-lg"></i>
+            </>
+          ) : (
+            <>
+              Multi-Vote
+              <i class="bi bi-card-checklist"></i>
+            </>
+          ),
+          variant: "info outline",
+          size: "md",
+          onClick: () => {
+            Storage.privateSet("multiSelectMode", !state.multiSelectMode);
+            State.update({
+              ...state,
+              multiSelectMode: !state.multiSelectMode
+            });
+          }
+        }}
+      />
+      <Widget
+        src="nearui.near/widget/Input.Button"
+        props={{
+          children: (
+            <>
+              Table View
+              {state.tableView ? (
+                <i className="bi bi-x-lg"></i>
+              ) : (
+                <i className="bi bi-table"></i>
+              )}
+            </>
+          ),
+          variant: "info outline",
+          size: "md",
+          onClick: () => {
+            Storage.privateSet("tableView", !state.tableView);
+            State.update({
+              ...state,
+              tableView: !state.tableView
+            });
+          }
+        }}
+      />
+    </div>
+    {res !== null && !res.body && (
+      <div className="alert alert-danger mt-2" role="alert">
+        Couldn't fetch proposals from API. Please try again later.
+      </div>
+    )}
+    <div>
+      {state.tableView ? (
+        <Widget
+          src="/*__@appAccount__*//widget/DAO.Proposals.Table.index"
+          props={{
+            state,
+            resPerPage,
+            proposals: res === null ? null : res.body
+          }}
+        />
+      ) : (
+        <Widget
+          src="/*__@appAccount__*//widget/DAO.Proposals.CardsList"
+          props={{
+            state,
+            resPerPage,
+            proposals: res === null ? null : res.body
+          }}
+        />
+      )}
+
+      <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);
+            }
+          }}
+        />
+      </>
+    )}
+  </>
 );

From 4eaa922e63c954f89e04d68c819a691e8ca4b1f6 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Thu, 22 Feb 2024 23:15:51 +0530
Subject: [PATCH 2/2] fix table view

---
 .../widget/DAO/Proposals/Table/index.jsx      | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/apps/astraplusplus/widget/DAO/Proposals/Table/index.jsx b/apps/astraplusplus/widget/DAO/Proposals/Table/index.jsx
index ffd9bde..0219ff5 100644
--- a/apps/astraplusplus/widget/DAO/Proposals/Table/index.jsx
+++ b/apps/astraplusplus/widget/DAO/Proposals/Table/index.jsx
@@ -159,36 +159,38 @@ return (
         </thead>
         <tbody>
           {proposals !== null &&
-            proposals.map(({ proposal, proposal_type, proposal_id }, i) => {
-              if (!isCongressDaoID && !isVotingBodyDao) {
-                proposal.kind = {
-                  [proposal_type]: {
-                    ...proposal.kind
-                  }
-                };
+            proposals.map(
+              ({ proposal, proposal_type, proposal_id, dao_id }, i) => {
+                if (!isCongressDaoID && !isVotingBodyDao) {
+                  proposal.kind = {
+                    [proposal_type]: {
+                      ...proposal.kind
+                    }
+                  };
+                }
+                proposal.id = proposal_id;
+                if (proposal.status === "Removed") return <></>;
+                return (
+                  <Widget
+                    src="/*__@appAccount__*//widget/DAO.Proposals.Table.Row"
+                    props={{
+                      proposal,
+                      proposal_type,
+                      proposal_id,
+                      i,
+                      daoId: daoId ?? dao_id,
+                      multiSelectMode,
+                      isAllowedTo,
+                      isCongressDaoID,
+                      isVotingBodyDao,
+                      daoConfig,
+                      isHuman,
+                      dev: props.dev
+                    }}
+                  />
+                );
               }
-              proposal.id = proposal_id;
-              if (proposal.status === "Removed") return <></>;
-              return (
-                <Widget
-                  src="/*__@appAccount__*//widget/DAO.Proposals.Table.Row"
-                  props={{
-                    proposal,
-                    proposal_type,
-                    proposal_id,
-                    i,
-                    daoId,
-                    multiSelectMode,
-                    isAllowedTo,
-                    isCongressDaoID,
-                    isVotingBodyDao,
-                    daoConfig,
-                    isHuman,
-                    dev: props.dev
-                  }}
-                />
-              );
-            })}
+            )}
         </tbody>
       </table>
     )}