diff --git a/app/javascript/components/contributing/ContributorsList.tsx b/app/javascript/components/contributing/ContributorsList.tsx index 35e071d3ae..b83db4e500 100644 --- a/app/javascript/components/contributing/ContributorsList.tsx +++ b/app/javascript/components/contributing/ContributorsList.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { Pagination } from '@/components/common' import { TrackSelect } from '@/components/common/TrackSelect' import type { PaginatedResult, Contributor, Track } from '@/components/types' @@ -39,6 +39,8 @@ export default function ContributorsList({ tracks: readonly Track[] }): JSX.Element { const { request, setPage, setQuery } = useList(initialRequest) + const [currentData, setCurrentData] = + useState>() const { status, data: resolvedData, @@ -49,6 +51,10 @@ export default function ContributorsList({ request ) + useEffect(() => { + if (!isFetching) setCurrentData(resolvedData) + }, [isFetching, resolvedData]) + const requestQuery = useDeepMemo(request.query) const setQueryValue = useCallback( (key: K, value: QueryValueTypes[K]) => { @@ -115,10 +121,10 @@ export default function ContributorsList({ error={error} defaultError={DEFAULT_ERROR} > - {resolvedData ? ( + {currentData ? ( <>
- {resolvedData.results.map((contributor) => ( + {currentData.results.map((contributor) => ( { setPage(p) scrollToTop('contributors-list', 32) diff --git a/app/javascript/components/contributing/TasksList.tsx b/app/javascript/components/contributing/TasksList.tsx index fdab72edf7..c2c33670b7 100644 --- a/app/javascript/components/contributing/TasksList.tsx +++ b/app/javascript/components/contributing/TasksList.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import pluralize from 'pluralize' import { Pagination } from '@/components/common' import { useDeepMemo } from '@/hooks/use-deep-memo' @@ -66,6 +66,9 @@ export default function TasksList({ tracks: readonly Track[] }): JSX.Element { const { request, setPage, setQuery, setOrder } = useList(initialRequest) + const [currentData, setCurrentData] = useState< + PaginatedResult | undefined + >() const { status, data: resolvedData, @@ -76,6 +79,10 @@ export default function TasksList({ request ) + useEffect(() => { + if (!isFetching) setCurrentData(resolvedData) + }, [isFetching, resolvedData]) + const track = tracks.find((t) => t.slug === request.query.trackSlug) || tracks[0] const isFiltering = @@ -146,17 +153,17 @@ export default function TasksList({ error={error} defaultError={DEFAULT_ERROR} > - {resolvedData ? ( + {currentData ? (

- Showing {resolvedData.meta.totalCount}{' '} - {pluralize('task', resolvedData.meta.totalCount)} + Showing {currentData.meta.totalCount}{' '} + {pluralize('task', currentData.meta.totalCount)} / - out of {resolvedData.meta.unscopedTotal} possible{' '} - {pluralize('task', resolvedData.meta.unscopedTotal)} + out of {currentData.meta.unscopedTotal} possible{' '} + {pluralize('task', currentData.meta.unscopedTotal)}

{isFiltering ? : null}
- {resolvedData.results.map((task) => ( + {currentData.results.map((task) => ( ))} { setPage(p) scrollToTop('tasks-list', 32) diff --git a/app/javascript/components/track/ExerciseCommunitySolutionsList.tsx b/app/javascript/components/track/ExerciseCommunitySolutionsList.tsx index b6b66704ec..a3c71b22df 100644 --- a/app/javascript/components/track/ExerciseCommunitySolutionsList.tsx +++ b/app/javascript/components/track/ExerciseCommunitySolutionsList.tsx @@ -3,7 +3,7 @@ import { usePaginatedRequestQuery, type Request } from '@/hooks/request-query' import { useHistory, removeEmpty } from '@/hooks/use-history' import { useList } from '@/hooks/use-list' import { scrollToTop } from '@/utils/scroll-to-top' -import { Icon, Pagination } from '@/components/common' +import { Pagination } from '@/components/common' import CommunitySolution from '../common/CommunitySolution' import { FetchingBoundary } from '@/components/FetchingBoundary' import { ResultsZone } from '@/components/ResultsZone' @@ -52,6 +52,9 @@ export function ExerciseCommunitySolutionsList({ setCriteria: setRequestCriteria, } = useList(initialRequest) + const [currentData, setCurrentData] = + useState>() + const { status, data: resolvedData, @@ -64,6 +67,11 @@ export function ExerciseCommunitySolutionsList({ ['exercise-community-solution-list', request.endpoint, request.query], request ) + + useEffect(() => { + if (!isFetching) setCurrentData(resolvedData) + }, [isFetching, resolvedData]) + const [criteria, setCriteria] = useState(request.query.criteria) const [layout, setLayout] = useLocalStorage<`${'grid' | 'lines'}-layout`>( 'community-solutions-layout', @@ -92,7 +100,7 @@ export function ExerciseCommunitySolutionsList({ data-scroll-top-anchor="exercise-community-solutions-list" className="lg-container c-community-solutions-list" > - {resolvedData ?

Explore how others solved this exercise

: null} + {currentData ?

Explore how others solved this exercise

: null}
- {resolvedData ? ( + {currentData ? (
- {resolvedData.results.map((solution) => { + {currentData.results.map((solution) => { return ( { setPage(p) scrollToTop('exercise-community-solutions-list', 32)