fix: add pagination to search result

rango-exchange · Dec 5, 2023 · f09dbd3 · f09dbd3
1 parent 1dff9a0
commit f09dbd3
Show file tree

Hide file tree

Showing 18 changed files with 228 additions and 12 deletions.
diff --git a/components/icons/ChevronRight.tsx b/components/icons/ChevronRight.tsx
@@ -12,7 +12,7 @@ function SvgChevronRight(props: SvgIconPropsWithChildren) {
           fillRule="evenodd"
           clipRule="evenodd"
           d="M5.44239 3.08171C5.33344 3.19065 5.33344 3.36729 5.44239 3.47623L9.96616 8L5.44239 12.5238C5.33344 12.6327 5.33344 12.8093 5.44239 12.9183C5.55133 13.0272 5.72797 13.0272 5.83691 12.9183L10.5579 8.19726C10.6669 8.08832 10.6669 7.91168 10.5579 7.80274L5.83691 3.08171C5.72797 2.97276 5.55133 2.97276 5.44239 3.08171Z"
-          fill="#A2A2A2"
+          fill="currentColor"
         />
       </g>
     </svg>,

diff --git a/components/icons/FirstPage.tsx b/components/icons/FirstPage.tsx
@@ -0,0 +1,26 @@
+import React, { createElement } from 'react';
+import type { SvgIconPropsWithChildren } from '../common/SvgIcon';
+import { SvgIcon } from '../common/SvgIcon';
+function SvgFirstPage(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 10 12" xmlns="http://www.w3.org/2000/svg">
+      <g id="Group">
+        <g id="Group_2">
+          <path
+            id="Vector"
+            d="M5.1993 5.84008L9.88833 10.5292C9.95885 10.6009 9.99818 10.6976 9.99776 10.7981C9.99734 10.8987 9.9572 10.995 9.88608 11.0661C9.81497 11.1372 9.71864 11.1773 9.61808 11.1777C9.51752 11.1781 9.42088 11.1388 9.3492 11.0682L4.42624 6.14528C4.34238 6.06142 4.30579 5.94846 4.31633 5.83906C4.31115 5.78334 4.31832 5.72717 4.33734 5.67454C4.35636 5.62192 4.38676 5.57414 4.42637 5.53461L9.34946 0.611658C9.42095 0.540165 9.51791 0.5 9.61902 0.5C9.72013 0.5 9.81709 0.540165 9.88859 0.611658C9.96008 0.683151 10.0002 0.780117 10.0002 0.881223C10.0002 0.98233 9.96008 1.0793 9.88859 1.15079L5.1993 5.84008Z"
+            fill="currentColor"
+          />
+          <path
+            id="Vector_2"
+            d="M0.884476 5.84008L5.57389 10.5292C5.64441 10.6009 5.68374 10.6976 5.68332 10.7981C5.6829 10.8987 5.64276 10.995 5.57164 11.0661C5.50052 11.1372 5.4042 11.1773 5.30364 11.1777C5.20308 11.1781 5.10643 11.1388 5.03476 11.0682L0.111802 6.14528C0.0279398 6.06142 -0.00865459 5.94846 0.00189209 5.83906C-0.00328493 5.78334 0.00389194 5.72717 0.0229115 5.67455C0.0419316 5.62192 0.0723262 5.57414 0.111928 5.53461L5.03476 0.611658C5.10625 0.540165 5.20322 0.5 5.30432 0.5C5.40543 0.5 5.5024 0.540165 5.57389 0.611658C5.64538 0.683151 5.68555 0.780117 5.68555 0.881223C5.68555 0.98233 5.64538 1.0793 5.57389 1.15079L0.884476 5.84008Z"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+    </svg>,
+  );
+}
+export default SvgFirstPage;
diff --git a/components/icons/LastPage.tsx b/components/icons/LastPage.tsx
@@ -0,0 +1,26 @@
+import React, { createElement } from 'react';
+import type { SvgIconPropsWithChildren } from '../common/SvgIcon';
+import { SvgIcon } from '../common/SvgIcon';
+function SvgLastPage(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 10 12" xmlns="http://www.w3.org/2000/svg">
+      <g id="Group">
+        <g id="Group_2">
+          <path
+            id="Vector"
+            d="M4.80094 5.84008L0.111912 10.5292C0.0413946 10.6009 0.00206298 10.6976 0.00248426 10.7981C0.00290554 10.8987 0.0430456 10.995 0.114161 11.0661C0.185276 11.1372 0.281605 11.1773 0.382165 11.1777C0.482725 11.1781 0.579368 11.1388 0.651043 11.0682L5.574 6.14528C5.65786 6.06142 5.69446 5.94846 5.68391 5.83906C5.6891 5.78334 5.68192 5.72717 5.6629 5.67454C5.64388 5.62192 5.61348 5.57414 5.57387 5.53461L0.650789 0.611658C0.579296 0.540165 0.48233 0.5 0.381223 0.5C0.280117 0.5 0.183151 0.540165 0.111658 0.611658C0.0401644 0.683151 0 0.780117 0 0.881223C0 0.98233 0.0401644 1.0793 0.111658 1.15079L4.80094 5.84008Z"
+            fill="currentColor"
+          />
+          <path
+            id="Vector_2"
+            d="M9.11577 5.84008L4.42635 10.5292C4.35584 10.6009 4.31651 10.6976 4.31693 10.7981C4.31735 10.8987 4.35749 10.995 4.4286 11.0661C4.49972 11.1372 4.59605 11.1773 4.69661 11.1777C4.79717 11.1781 4.89381 11.1388 4.96549 11.0682L9.88844 6.14528C9.9723 6.06142 10.0089 5.94846 9.99835 5.83906C10.0035 5.78334 9.99635 5.72717 9.97733 5.67455C9.95831 5.62192 9.92792 5.57414 9.88832 5.53461L4.96549 0.611658C4.89399 0.540165 4.79703 0.5 4.69592 0.5C4.59481 0.5 4.49785 0.540165 4.42635 0.611658C4.35486 0.683151 4.3147 0.780117 4.3147 0.881223C4.3147 0.98233 4.35486 1.0793 4.42635 1.15079L9.11577 5.84008Z"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+    </svg>,
+  );
+}
+export default SvgLastPage;
diff --git a/components/icons/NextPage.tsx b/components/icons/NextPage.tsx
@@ -0,0 +1,21 @@
+import React, { createElement } from 'react';
+import type { SvgIconPropsWithChildren } from '../common/SvgIcon';
+import { SvgIcon } from '../common/SvgIcon';
+function SvgNextPage(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <g id="Chevron-right">
+        <path
+          id="Vector (Stroke)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.44214 3.08171C5.3332 3.19065 5.3332 3.36729 5.44214 3.47623L9.96591 8L5.44214 12.5238C5.3332 12.6327 5.3332 12.8093 5.44214 12.9183C5.55109 13.0272 5.72772 13.0272 5.83667 12.9183L10.5577 8.19726C10.6666 8.08832 10.6666 7.91168 10.5577 7.80274L5.83667 3.08171C5.72772 2.97276 5.55109 2.97276 5.44214 3.08171Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>,
+  );
+}
+export default SvgNextPage;
diff --git a/components/icons/PrevPage.tsx b/components/icons/PrevPage.tsx
@@ -0,0 +1,21 @@
+import React, { createElement } from 'react';
+import type { SvgIconPropsWithChildren } from '../common/SvgIcon';
+import { SvgIcon } from '../common/SvgIcon';
+function SvgPrevPage(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <g id="Chevron-Left">
+        <path
+          id="Vector (Stroke)"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.5577 3.08171C10.6667 3.19065 10.6667 3.36729 10.5577 3.47623L6.03397 8L10.5577 12.5238C10.6667 12.6327 10.6667 12.8093 10.5577 12.9183C10.4488 13.0272 10.2722 13.0272 10.1632 12.9183L5.44218 8.19726C5.33324 8.08832 5.33324 7.91168 5.44218 7.80274L10.1632 3.08171C10.2722 2.97276 10.4488 2.97276 10.5577 3.08171Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>,
+  );
+}
+export default SvgPrevPage;
diff --git a/components/icons/index.ts b/components/icons/index.ts
@@ -9,11 +9,15 @@ export { default as CopyIcon } from './Copy';
 export { default as DiscordIcon } from './Discord';
 export { default as DocsIcon } from './Docs';
 export { default as FailIcon } from './Fail';
+export { default as FirstPageIcon } from './FirstPage';
 export { default as GassIcon } from './Gass';
 export { default as GithubIcon } from './Github';
+export { default as LastPageIcon } from './LastPage';
 export { default as LinkIcon } from './Link';
 export { default as MediumIcon } from './Medium';
 export { default as NextIcon } from './Next';
+export { default as NextPageIcon } from './NextPage';
+export { default as PrevPageIcon } from './PrevPage';
 export { default as RefreshIcon } from './Refresh';
 export { default as RunningIcon } from './Running';
 export { default as SearchIcon } from './Search';

diff --git a/components/search/Pagination/Pagination.type.ts b/components/search/Pagination/Pagination.type.ts
@@ -0,0 +1,5 @@
+export interface PropsType {
+  query: string;
+  total: number;
+  page: number;
+}
diff --git a/components/search/Pagination/idnex.tsx b/components/search/Pagination/idnex.tsx
@@ -0,0 +1,71 @@
+import { SEARCH_RESULT_OFFSET as offsetPage } from 'constant';
+import { PropsType } from './Pagination.type';
+import {
+  FirstPageIcon,
+  LastPageIcon,
+  NextPageIcon,
+  PrevPageIcon,
+} from 'components/icons';
+import Link from 'next/link';
+
+function Pagination(props: PropsType) {
+  const { page, total, query } = props;
+  const totalPage = Math.ceil(total / offsetPage);
+
+  return (
+    <div className="flex items-center justify-center">
+      {page > 0 && totalPage > 1 ? (
+        <>
+          <Link
+            href={`/search?query=${query}&page=0`}
+            className="flex items-center rounded-micro justify-center w-[2.5rem] h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <FirstPageIcon size="0.625rem" />
+          </Link>
+          <Link
+            href={`/search?query=${query}&page=${page - 1}`}
+            className="flex items-center mx-10 rounded-micro justify-center w-[2.5rem] h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <PrevPageIcon />
+          </Link>
+        </>
+      ) : (
+        <>
+          <button className="flex items-center justify-center w-[2.5rem] h-[2.5rem]  text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <FirstPageIcon size="0.625rem" />
+          </button>
+          <button className="flex items-center mx-10 justify-center w-[2.5rem] h-[2.5rem]  text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <PrevPageIcon />
+          </button>
+        </>
+      )}
+      <div className="flex w-[7.125rem] h-[2.5rem] items-center justify-center px-10 py-5 rounded-micro bg-surfacesBackground text-12 font-medium text-neutral-800">{`Page ${
+        page + 1
+      } of ${totalPage}`}</div>
+
+      {page + 1 < totalPage && totalPage > 1 ? (
+        <>
+          <Link
+            href={`/search?query=${query}&page=${page + 1}`}
+            className="flex items-center  mx-10 rounded-micro justify-center w-[2.5rem] h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <NextPageIcon />
+          </Link>
+          <Link
+            href={`/search?query=${query}&page=${totalPage - 1}`}
+            className="flex items-center rounded-micro justify-center w-[2.5rem] h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <LastPageIcon size="0.625rem" />
+          </Link>
+        </>
+      ) : (
+        <>
+          <button className="flex items-center mx-10 justify-center w-[2.5rem] h-[2.5rem]  text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <NextPageIcon />
+          </button>
+          <button className="flex items-center  justify-center w-[2.5rem] h-[2.5rem]  text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <LastPageIcon size="0.625rem" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Pagination;
diff --git a/components/search/Result/Result.type.ts b/components/search/Result/Result.type.ts
@@ -3,4 +3,6 @@ import { SwapType } from 'types';
 export interface PropsType {
   data: SwapType[];
   query: string;
+  total: number;
+  page: number;
 }
diff --git a/components/search/Result/index.tsx b/components/search/Result/index.tsx
@@ -1,8 +1,9 @@
 import Table from 'components/common/Table';
 import { PropsType } from './Result.type';
+import Pagination from '../Pagination/idnex';
 
 function Result(props: PropsType) {
-  const { data, query } = props;
+  const { data, query, total, page } = props;
   return (
     <div className="container mt-[3.125rem] rounded-normal bg-baseForeground p-35">
       <div className="flex flex-col">
@@ -11,12 +12,15 @@ function Result(props: PropsType) {
             Search Results
           </h2>
           <p className="text-16 text-neutral-800">
-            {`Found ${data.length} Rango swaps for ${query}`}
+            {`Found ${total} Rango swaps for ${query}`}
           </p>
         </div>
         <div className="mt-25">
           <Table data={data} />
         </div>
+        <div className="mt-25">
+          <Pagination page={page} total={total} query={query} />
+        </div>
       </div>
     </div>
   );

diff --git a/constant/index.ts b/constant/index.ts
@@ -12,4 +12,6 @@ export const STATUS: any = {
   null: 'Pending',
 };
 
+export const SEARCH_RESULT_OFFSET = 14;
+
 export const API_URL = process.env.NEXT_PUBLIC_BASE_URL;
diff --git a/pages/search.tsx b/pages/search.tsx
@@ -15,8 +15,9 @@ interface PropsType {
 function Search(props: PropsType) {
   const { status } = props;
   const router = useRouter();
-  const { query } = router.query;
-  const { data } = useSWR(query, getWalletSwaps);
+  const { query, page } = router.query;
+  const { data } = useSWR([query, page], getWalletSwaps);
+  const { transactions, total } = data || {};
 
   return status || (data && data.error && data.status) ? (
     <Error statusCode={data?.status || status} />
@@ -29,8 +30,13 @@ function Search(props: PropsType) {
         <div className="w-full bg-neutral-300 flex justify-center">
           {data && (
             <>
-              {data.transactions && data.transactions.length ? (
-                <Result data={data.transactions} query={query as string} />
+              {transactions && transactions.length ? (
+                <Result
+                  total={total}
+                  page={Number(page || 0)}
+                  data={transactions}
+                  query={query as string}
+                />
               ) : (
                 <NotFound query={query as string} />
               )}
@@ -48,8 +54,7 @@ function Search(props: PropsType) {
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const query = context.query.query;
-
+  const { query } = context?.query || {};
   const result = await getSearchResult(query as string);
   if (result?.error) return { props: { status: result.status } };
   if (result?.length && result[0].matchType === MATCH_TYPE.REQUESTID) {

diff --git a/services/index.ts b/services/index.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { API_URL } from '../constant';
+import { API_URL, SEARCH_RESULT_OFFSET } from '../constant';
 
 export const getLastSwaps = async () =>
   await fetch(
@@ -33,9 +33,11 @@ export const getSearchResult = async (query: string) =>
       return [];
     });
 
-export const getWalletSwaps = async (address: string) =>
+export const getWalletSwaps = async (address: string, page?: number) =>
   await fetch(
-    `${API_URL}/tx/wallet?walletAddress=${address}&count=10&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
+    `${API_URL}/tx/wallet?walletAddress=${address}&offset=${SEARCH_RESULT_OFFSET}&page=${
+      page || 0
+    }&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
   ).then(async (res) => await res.json());
 
 export const getTxDetails = async (requestId: string) =>

diff --git a/svgs/configs/.svgrrc.default.cjs b/svgs/configs/.svgrrc.default.cjs
@@ -26,6 +26,7 @@ module.exports = {
     '#469BF5': 'currentColor',
     '#727272': 'currentColor',
     '#B8B8B8': 'currentColor',
+    '#A2A2A2': 'currentColor',
   },
   template: require('./template/react.cjs'),
   indexTemplate: require('./template/index.cjs'),

diff --git a/svgs/resources/firstPage.svg b/svgs/resources/firstPage.svg
diff --git a/svgs/resources/lastPage.svg b/svgs/resources/lastPage.svg
diff --git a/svgs/resources/nextPage.svg b/svgs/resources/nextPage.svg
diff --git a/svgs/resources/prevPage.svg b/svgs/resources/prevPage.svg