From 25d4e1edc858367c85e5265316ab7353d489e0a6 Mon Sep 17 00:00:00 2001
From: 2nthony <ant.hu@outlook.com>
Date: Tue, 19 Mar 2024 16:01:30 +0800
Subject: [PATCH] feat: delegation, add sort select (#4031)

---
 .../delegation/delegate/common/sortSelect.jsx | 36 +++++++++++++++
 .../delegation/delegate/democracy/index.jsx   | 44 ++++++++++++++++---
 .../delegation/delegate/referenda/index.js    | 44 ++++++++++++++++---
 .../pagination/usePaginationComponent.js      | 11 +++--
 .../store/reducers/democracy/delegates.js     | 11 +++--
 .../store/reducers/referenda/delegates.js     | 11 +++--
 6 files changed, 134 insertions(+), 23 deletions(-)
 create mode 100644 packages/next-common/components/delegation/delegate/common/sortSelect.jsx

diff --git a/packages/next-common/components/delegation/delegate/common/sortSelect.jsx b/packages/next-common/components/delegation/delegate/common/sortSelect.jsx
new file mode 100644
index 0000000000..d1d2294459
--- /dev/null
+++ b/packages/next-common/components/delegation/delegate/common/sortSelect.jsx
@@ -0,0 +1,36 @@
+import { noop } from "lodash-es";
+import Select from "next-common/components/select";
+
+export default function DelegationSortSelect({ sort = "", setSort = noop }) {
+  return (
+    <div className="flex items-center gap-x-2 text12Medium text-textSecondary">
+      Sort by
+      <Select
+        className="w-40 text12Medium"
+        value={sort}
+        onChange={(item) => {
+          setSort(item.value);
+        }}
+        options={[
+          {
+            label: <Label>Delegated Votes</Label>,
+            value: "votes",
+          },
+          {
+            label: <Label>Delegators</Label>,
+            value: "",
+          },
+          {
+            label: <Label>Participation</Label>,
+            value: "participation",
+          },
+        ]}
+        small
+      />
+    </div>
+  );
+}
+
+function Label({ children }) {
+  return <span className="text12Medium">{children}</span>;
+}
diff --git a/packages/next-common/components/delegation/delegate/democracy/index.jsx b/packages/next-common/components/delegation/delegate/democracy/index.jsx
index a075c943e5..57b6220e8a 100644
--- a/packages/next-common/components/delegation/delegate/democracy/index.jsx
+++ b/packages/next-common/components/delegation/delegate/democracy/index.jsx
@@ -5,29 +5,57 @@ import {
   democracyDelegatesTriggerUpdateSelector,
 } from "next-common/store/reducers/democracy/delegates";
 import usePaginationComponent from "next-common/components/pagination/usePaginationComponent";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import DelegatesLoadable from "next-common/components/delegation/delegate/common/loadable";
 import DelegateEmpty from "next-common/components/delegation/delegate/common/empty";
 import Delegates from "./members";
 import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
+import DelegationSortSelect from "../common/sortSelect";
+import { useRouter } from "next/router";
+import { omit } from "lodash-es";
 
 export default function DemocracyDelegates() {
   const dispatch = useDispatch();
+  const router = useRouter();
+
   const democracyDelegatesPageData = useSelector(democracyDelegatesSelector);
   const {
     items: delegates = [],
     pageSize = 18,
     total = 0,
   } = democracyDelegatesPageData || {};
-  const { page, component: pageComponent } = usePaginationComponent(
-    total,
-    pageSize,
-  );
+  const {
+    page,
+    setPage,
+    component: pageComponent,
+  } = usePaginationComponent(total, pageSize);
   const triggerUpdate = useSelector(democracyDelegatesTriggerUpdateSelector);
+  const [sort, setSort] = useState(router.query.sort || "");
 
   useEffect(() => {
-    dispatch(fetchDemocracyDelegates(page, pageSize));
-  }, [page, pageSize, triggerUpdate]);
+    const q = router.query;
+    dispatch(fetchDemocracyDelegates(q.sort || "", q.page || 1, pageSize));
+  }, [router.asPath, triggerUpdate]);
+
+  useEffect(() => {
+    setSort(router.query.sort || "");
+  }, [router.query.sort]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [sort]);
+
+  useEffect(() => {
+    const q = omit(router.query, ["sort", "page"]);
+    if (page > 1) {
+      q.page = page;
+    }
+    if (sort) {
+      q.sort = sort;
+    }
+
+    router.push({ query: q }, null, { shallow: true });
+  }, [sort, page, pageSize]);
 
   return (
     <>
@@ -38,6 +66,8 @@ export default function DemocracyDelegates() {
             <span className="text-textTertiary text14Medium ml-1">{total}</span>
           )}
         </span>
+
+        <DelegationSortSelect sort={sort} setSort={setSort} />
       </TitleContainer>
 
       <DelegatesLoadable delegates={democracyDelegatesPageData}>
diff --git a/packages/next-common/components/delegation/delegate/referenda/index.js b/packages/next-common/components/delegation/delegate/referenda/index.js
index 542aeb5e37..1fc6ff40a1 100644
--- a/packages/next-common/components/delegation/delegate/referenda/index.js
+++ b/packages/next-common/components/delegation/delegate/referenda/index.js
@@ -5,29 +5,57 @@ import {
   referendaDelegatesTriggerUpdateSelector,
 } from "next-common/store/reducers/referenda/delegates";
 import usePaginationComponent from "next-common/components/pagination/usePaginationComponent";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import DelegatesLoadable from "next-common/components/delegation/delegate/common/loadable";
 import DelegateEmpty from "next-common/components/delegation/delegate/common/empty";
 import Delegates from "next-common/components/delegation/delegate/referenda/members";
 import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
+import DelegationSortSelect from "../common/sortSelect";
+import { useRouter } from "next/router";
+import { omit } from "lodash-es";
 
 export default function ReferendaDelegates() {
   const dispatch = useDispatch();
+  const router = useRouter();
+
   const referendaDelegatesPageData = useSelector(referendaDelegatesSelector);
   const {
     items: delegates = [],
     pageSize = 18,
     total = 0,
   } = referendaDelegatesPageData || {};
-  const { page, component: pageComponent } = usePaginationComponent(
-    total,
-    pageSize,
-  );
+  const {
+    page,
+    setPage,
+    component: pageComponent,
+  } = usePaginationComponent(total, pageSize);
   const triggerUpdate = useSelector(referendaDelegatesTriggerUpdateSelector);
+  const [sort, setSort] = useState(router.query.sort || "");
 
   useEffect(() => {
-    dispatch(fetchReferendaDelegates(page, pageSize));
-  }, [page, pageSize, triggerUpdate]);
+    const q = router.query;
+    dispatch(fetchReferendaDelegates(q.sort || "", q.page || 1, pageSize));
+  }, [router.asPath, triggerUpdate]);
+
+  useEffect(() => {
+    setSort(router.query.sort || "");
+  }, [router.query.sort]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [sort]);
+
+  useEffect(() => {
+    const q = omit(router.query, ["sort", "page"]);
+    if (page > 1) {
+      q.page = page;
+    }
+    if (sort) {
+      q.sort = sort;
+    }
+
+    router.push({ query: q }, null, { shallow: true });
+  }, [sort, page, pageSize]);
 
   return (
     <>
@@ -38,6 +66,8 @@ export default function ReferendaDelegates() {
             <span className="text-textTertiary text14Medium ml-1">{total}</span>
           )}
         </span>
+
+        <DelegationSortSelect sort={sort} setSort={setSort} />
       </TitleContainer>
 
       <DelegatesLoadable delegates={referendaDelegatesPageData}>
diff --git a/packages/next-common/components/pagination/usePaginationComponent.js b/packages/next-common/components/pagination/usePaginationComponent.js
index 30406f2a48..70bd7f7d2e 100644
--- a/packages/next-common/components/pagination/usePaginationComponent.js
+++ b/packages/next-common/components/pagination/usePaginationComponent.js
@@ -1,8 +1,13 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Pagination from "next-common/components/pagination/index";
+import { useRouter } from "next/router";
 
 export default function usePaginationComponent(total, pageSize = 10) {
-  const [page, setPage] = useState(1);
+  const router = useRouter();
+  const [page, setPage] = useState(parseInt(router.query.page || 1));
+  useEffect(() => {
+    setPage(parseInt(router.query.page || 1));
+  }, [router.query.page]);
 
   const onPageChange = useCallback((e, page) => {
     e.preventDefault();
@@ -19,5 +24,5 @@ export default function usePaginationComponent(total, pageSize = 10) {
     />
   );
 
-  return { page, component };
+  return { page, setPage, component };
 }
diff --git a/packages/next-common/store/reducers/democracy/delegates.js b/packages/next-common/store/reducers/democracy/delegates.js
index 118b46e9f0..505840b1f5 100644
--- a/packages/next-common/store/reducers/democracy/delegates.js
+++ b/packages/next-common/store/reducers/democracy/delegates.js
@@ -29,12 +29,16 @@ export const {
   triggerUpdate: setDemocracyDelegatesTriggerUpdate,
 } = democracyDelegatesSlice.actions;
 
-export const fetchDemocracyDelegates =
-  (page = 1, pageSize = 18) =>
-  async (dispatch) => {
+export const fetchDemocracyDelegates = (sort, page = 1, pageSize = 18) => {
+  if (sort === "participation") {
+    sort = "participation_rate";
+  }
+
+  return async (dispatch) => {
     try {
       dispatch(setDemocracyDelegatesLoading(true));
       const { result } = await nextApi.fetch("delegation/democracy/delegates", {
+        sort,
         page,
         pageSize,
       });
@@ -43,6 +47,7 @@ export const fetchDemocracyDelegates =
       dispatch(setDemocracyDelegatesLoading(false));
     }
   };
+};
 
 export const democracyDelegatesSelector = (state) => state[name].delegates;
 export const democracyDelegatesTriggerUpdateSelector = (state) =>
diff --git a/packages/next-common/store/reducers/referenda/delegates.js b/packages/next-common/store/reducers/referenda/delegates.js
index f560ad87f2..8a78f7b2bd 100644
--- a/packages/next-common/store/reducers/referenda/delegates.js
+++ b/packages/next-common/store/reducers/referenda/delegates.js
@@ -29,12 +29,16 @@ export const {
   setTriggerUpdate: setReferendaDelegatesTriggerUpdate,
 } = referendaDelegatesSlice.actions;
 
-export const fetchReferendaDelegates =
-  (page = 1, pageSize = 18) =>
-  async (dispatch) => {
+export const fetchReferendaDelegates = (sort, page = 1, pageSize = 18) => {
+  if (sort === "participation") {
+    sort = "participation_rate";
+  }
+
+  return async (dispatch) => {
     try {
       dispatch(setReferendaDelegatesLoading(true));
       const { result } = await nextApi.fetch("delegation/referenda/delegates", {
+        sort,
         page,
         pageSize,
       });
@@ -43,6 +47,7 @@ export const fetchReferendaDelegates =
       dispatch(setReferendaDelegatesLoading(false));
     }
   };
+};
 
 export const referendaDelegatesSelector = (state) => state[name].delegates;
 export const referendaDelegatesTriggerUpdateSelector = (state) =>