From fb991dd49ec2aaaade3d53eaea258dceb42f521b Mon Sep 17 00:00:00 2001
From: Francisco Mazzoni <francisco@supabase.io>
Date: Mon, 1 Aug 2022 09:09:02 -0300
Subject: [PATCH] allow nullable pagination input

---
 .../grid/components/footer/pagination/Pagination.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/studio/components/grid/components/footer/pagination/Pagination.tsx b/studio/components/grid/components/footer/pagination/Pagination.tsx
index 31609a32fd0..22597427acd 100644
--- a/studio/components/grid/components/footer/pagination/Pagination.tsx
+++ b/studio/components/grid/components/footer/pagination/Pagination.tsx
@@ -24,7 +24,7 @@ type PaginationProps = {}
 const Pagination: FC<PaginationProps> = () => {
   const state = useTrackedState()
   const dispatch = useDispatch()
-  const [page, setPage] = useState(state.page)
+  const [page, setPage] = useState<number | null>(state.page)
   const maxPages = Math.ceil(state.totalRows / state.rowsPerPage)
   const totalPages = state.totalRows > 0 ? maxPages : 1
 
@@ -90,8 +90,10 @@ const Pagination: FC<PaginationProps> = () => {
   function onPageChange(event: React.ChangeEvent<HTMLInputElement>) {
     const value = event.target.value
     const pageNum = Number(value) > maxPages ? maxPages : Number(value)
-    setPage(pageNum)
-    updatePageDebounced(pageNum, dispatch)
+    setPage(pageNum || null)
+    if (pageNum) {
+      updatePageDebounced(pageNum, dispatch)
+    }
   }
 
   function onRowsPerPageChange(value: string | number) {
@@ -114,6 +116,8 @@ const Pagination: FC<PaginationProps> = () => {
           <p className="text-scale-1100 text-sm">Page</p>
           <div className="sb-grid-pagination-input-container">
             <InputNumber
+              // [Fran] we'll have to upgrade the UI component types to accept the null value when users delete the input content
+              // @ts-ignore
               value={page}
               onChange={onPageChange}
               size="tiny"