From 8674d185436e43abef543acfa42b332f007f0182 Mon Sep 17 00:00:00 2001
From: yanyongyu <yanyongyu_1@126.com>
Date: Sun, 9 Jan 2022 20:27:43 +0800
Subject: [PATCH] :bug: fix pagination display error

---
 website/src/components/Paginate/index.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/website/src/components/Paginate/index.tsx b/website/src/components/Paginate/index.tsx
index b3df7416..9edcc1c1 100644
--- a/website/src/components/Paginate/index.tsx
+++ b/website/src/components/Paginate/index.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useState } from "react";
 import { usePagination } from "react-use-pagination";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -16,19 +16,22 @@ export default function Paginate({
   previousEnabled,
   nextEnabled,
 }: ReturnType<typeof usePagination>): JSX.Element {
-  const ref = useRef<HTMLElement>();
-  const maxWidth = useContentWidth(ref.current?.parentElement ?? undefined);
+  const [containerElement, setContainerElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  const ref = useCallback((element: HTMLElement | null) => {
+    setContainerElement(element);
+  }, []);
+
+  const maxWidth = useContentWidth(
+    containerElement?.parentElement ?? undefined
+  );
   const maxLength = Math.min(
     (maxWidth && Math.floor(maxWidth / 50) - 2) || totalPages,
     totalPages
   );
 
-  const onPageChange = useCallback(
-    (selectedItem: { selected: number }) => {
-      setPage(selectedItem.selected);
-    },
-    [setPage]
-  );
   const range = useCallback((start: number, end: number) => {
     const result = [];
     start = start > 0 ? start : 1;
@@ -38,7 +41,6 @@ export default function Paginate({
     return result;
   }, []);
 
-  // FIXME: responsive width
   const pages: (React.ReactNode | number)[] = [];
   const ellipsis = <FontAwesomeIcon icon="ellipsis-h" />;