diff --git a/packages/dev/package.json b/packages/dev/package.json index 331ea6d6..53a7c2a7 100644 --- a/packages/dev/package.json +++ b/packages/dev/package.json @@ -9,7 +9,7 @@ "serve": "serve public" }, "dependencies": { - "@patternfly/quickstarts": "1.0.0-rc.16", + "@patternfly/quickstarts": "1.0.0-rc.17", "@patternfly/react-core": "^4.101.3", "asciidoctor": "^2.2.1", "react": "^16.14.0", diff --git a/packages/module/package.json b/packages/module/package.json index 4fe868ff..16bda0d1 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/quickstarts", - "version": "1.0.0-rc.16", + "version": "1.0.0-rc.17", "description": "PatternFly quick starts", "files": [ "dist" diff --git a/packages/module/src/QuickStartCatalogPage.tsx b/packages/module/src/QuickStartCatalogPage.tsx index f660589b..7247b8c8 100644 --- a/packages/module/src/QuickStartCatalogPage.tsx +++ b/packages/module/src/QuickStartCatalogPage.tsx @@ -79,7 +79,7 @@ export const QuickStartCatalogPage: React.FC = ({ ) : allQuickStarts; setFilteredQuickStarts(filteredQuickStarts); - }, [allQuickStarts]); + }, [allQuickStarts, allQuickStartStates]); const clearFilters = () => { setFilter('keyword', ''); diff --git a/packages/module/src/utils/quick-start-context.tsx b/packages/module/src/utils/quick-start-context.tsx index 854142c9..ddca86a4 100644 --- a/packages/module/src/utils/quick-start-context.tsx +++ b/packages/module/src/utils/quick-start-context.tsx @@ -93,6 +93,14 @@ export const QuickStartContextProvider: React.FC<{ ...QuickStartContextDefaults, ...value } + const { + activeQuickStartID, + setActiveQuickStartID, + setAllQuickStartStates, + useQueryParams, + allQuickStartStates, + allQuickStarts + } = combinedValue; const [quickStarts, setQuickStarts] = React.useState(combinedValue.allQuickStarts); const [resourceBundle, setResourceBundle] = React.useState({ ...en, @@ -116,7 +124,7 @@ export const QuickStartContextProvider: React.FC<{ const initialSearchQuery = initialSearchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || ''; const initialStatusFilters = initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || []; - const quickStartStatusCount = getQuickStartStatusCount(combinedValue.allQuickStartStates, combinedValue.allQuickStarts); + const quickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, allQuickStarts); const [statusTypes, setStatusTypes] = React.useState({ [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.COMPLETE]), [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.IN_PROGRESS]), @@ -134,17 +142,18 @@ export const QuickStartContextProvider: React.FC<{ } }; - const updateAllQuickStarts = (quickStarts: QuickStart[]) => { - setQuickStarts(quickStarts); - const updatedQuickStartStatusCount = getQuickStartStatusCount(combinedValue.allQuickStartStates, quickStarts); + React.useEffect(() => { + const updatedQuickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, quickStarts); setStatusTypes({ [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.COMPLETE]), [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.IN_PROGRESS]), [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.NOT_STARTED]), }); - }; + }, [allQuickStartStates, quickStarts]) - const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates } = combinedValue; + const updateAllQuickStarts = (quickStarts: QuickStart[]) => { + setQuickStarts(quickStarts); + }; const setActiveQuickStart = useCallback( (quickStartId: string, totalTasks?: number) => {