Use repo store prop (#480)

* fix: pass repo store as a prop directly

* fix: pagination, type fixes

* fix: comments

apps/gitness/src/pages-v2/repo/repo-list.tsx

@@ -13,11 +13,11 @@ import { useRepoStore } from './stores/repo-store'
 
 export default function ReposListPage() {
   const space = useGetSpaceURLParam() ?? ''
-  const { repositories, totalPages, setRepositories } = useRepoStore()
+  const { setRepositories, page, setPage } = useRepoStore()
 
   /* Query and Pagination */
   const [query] = useDebouncedQueryState('query')
-  const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1))
+  const [queryPage, setQueryPage] = useQueryState('page', parseAsInteger.withDefault(1))
 
   const { data: { body: repoData, headers } = {}, refetch } = useListReposQuery(
     {
@@ -33,6 +33,10 @@ export default function ReposListPage() {
     }
   }, [repoData, headers, setRepositories])
 
+  useEffect(() => {
+    setQueryPage(page)
+  }, [queryPage, page, setPage])
+
   const isRepoStillImporting: boolean = useMemo(() => {
     return repoData?.some(repository => repository.importing) ?? false
   }, [repoData])
@@ -55,12 +59,5 @@ export default function ReposListPage() {
     shouldRun: isRepoStillImporting
   })
 
-  return (
-    <SandboxRepoListPage
-      repositories={repositories}
-      totalPages={totalPages}
-      currentPage={page}
-      setPage={(pageNum: number) => setPage(pageNum)}
-    />
-  )
+  return <SandboxRepoListPage useRepoStore={useRepoStore} />
 }

apps/gitness/src/pages-v2/repo/stores/repo-store.tsx

@@ -10,12 +10,16 @@ interface RepoStore {
   repositories: RepositoryType[] | null
   totalPages: number
   setRepositories: (data: ListReposOkResponse, headers: Headers | undefined) => void
+  page: number
+  setPage: (page: number) => void
 }
 
 export const useRepoStore = create<RepoStore>(set => ({
   repositories: null,
   totalPages: 0,
   isRepoStillImporting: false,
+  page: 1,
+  setPage: page => set({ page }),
 
   setRepositories: (data, headers) => {
     const transformedRepos = data.map(repo => ({

packages/ui/src/views/repo-list/repo-list-page.tsx

@@ -103,9 +103,10 @@ const SORT_DIRECTIONS: SortDirection[] = [
   { label: 'Descending', value: 'desc' }
 ]
 
-const SandboxRepoListPage: React.FC<RepoListProps> = ({ repositories, totalPages, currentPage, setPage }) => {
+const SandboxRepoListPage: React.FC<RepoListProps> = ({ useRepoStore }) => {
   // State for storing saved filters and sorts
   // null means no saved state exists
+  const { repositories, totalPages, page, setPage } = useRepoStore()
   const [savedState, setSavedState] = useState<{
     filters: FilterValue[]
     sorts: SortValue[]
@@ -493,7 +494,7 @@ const SandboxRepoListPage: React.FC<RepoListProps> = ({ repositories, totalPages
             handleResetQuery={handleResetQuery}
           />
           <Spacer size={8} />
-          <PaginationComponent totalPages={totalPages} currentPage={currentPage} goToPage={page => setPage(page)} />
+          <PaginationComponent totalPages={totalPages} currentPage={page} goToPage={page => setPage(page)} />
         </SandboxLayout.Content>
       </SandboxLayout.Main>
     </>

packages/ui/src/views/repo-list/types.ts

@@ -11,9 +11,13 @@ export interface RepositoryType {
   importing?: boolean
 }
 
-export interface RepoListProps {
+interface RepoStore {
   repositories: RepositoryType[] | null
-  setPage: (page: number) => void
   totalPages: number
-  currentPage: number
+  page: number
+  setPage: (page: number) => void
+}
+
+export interface RepoListProps {
+  useRepoStore: () => RepoStore
 }