append the offset to the query string of the page URL when paginati…

…ng (#811)

Append the offset to the query string of the page URL.

lib/ui/hooks/usePaginate.ts

@@ -1,7 +1,28 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 const usePaginate = () => {
-  const [paginate, setPaginate] = useState({ offset: 0 });
+  const router = useRouter();
+
+  const offset = router.query.offset ? Number(router.query.offset) : 0;
+
+  const [paginate, setPaginate] = useState({ offset });
+
+  useEffect(() => {
+    // Prevent pushing the same URL to the history
+    if (offset === paginate.offset) {
+      return;
+    }
+
+    const path = router.asPath.split('?')[0];
+
+    router.push(`${path}?offset=${paginate.offset}`, undefined, { shallow: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paginate]);
+
+  useEffect(() => {
+    setPaginate({ offset });
+  }, [offset]);
 
   return {
     paginate,