update statusType

Author: jschuler

packages/dev/package.json

@@ -9,7 +9,7 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.0.0-rc.14",
+    "@patternfly/quickstarts": "1.0.0-rc.15",
     "@patternfly/react-core": "^4.101.3",
     "asciidoctor": "^2.2.1",
     "react": "^16.14.0",

packages/dev/src/App.tsx

@@ -20,7 +20,8 @@ import {
   QuickStartContextProvider,
   QuickStartContextValues,
   QuickStartDrawer,
-  useLocalStorage
+  useLocalStorage,
+  QuickStart
 } from "@patternfly/quickstarts";
 import { allQuickStarts as yamlQuickStarts } from "./quickstarts-data/quick-start-test-data";
 import { loadJSONQuickStarts } from "./quickstarts-data/mas-guides/quickstartLoader";
@@ -56,7 +57,7 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
     allQuickStartsLoaded,
     setAllQuickStartsLoaded,
   ] = React.useState<boolean>(false);
-  const [allQuickStarts, setAllQuickStarts] = React.useState<any[]>([]);
+  const [allQuickStarts, setAllQuickStarts] = React.useState<QuickStart[]>([]);
   React.useEffect(() => {
     const load = async () => {
       const masGuidesQuickstarts = await loadJSONQuickStarts("");

packages/dev/src/DefaultCatalog.tsx

@@ -8,15 +8,15 @@ import { allQuickStarts as yamlQuickStarts } from './quickstarts-data/quick-star
 import { loadJSONQuickStarts } from './quickstarts-data/mas-guides/quickstartLoader';
 
 export const DefaultCatalog = () => {
-//   const { setAllQuickStarts } = React.useContext<QuickStartContextValues>(QuickStartContext);
-//   const load = async () => {
-//     const masGuidesQuickstarts = await loadJSONQuickStarts('');
-//     setAllQuickStarts(yamlQuickStarts.concat(masGuidesQuickstarts));
-//   };
+  // const { setAllQuickStarts } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  // const load = async () => {
+  //   const masGuidesQuickstarts = await loadJSONQuickStarts('');
+  //   setAllQuickStarts(yamlQuickStarts.concat(masGuidesQuickstarts));
+  // };
 
-//   const loadQuickStarts = () => {
-//     load();
-//   };
+  // const loadQuickStarts = () => {
+  //   load();
+  // };
   return (
     <>
       {/* <button onClick={loadQuickStarts}>Load</button> */}

packages/module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "1.0.0-rc.14",
+  "version": "1.0.0-rc.15",
   "description": "PatternFly quick starts",
   "files": [
     "dist"

packages/module/src/QuickStartCatalogPage.tsx

@@ -54,8 +54,14 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
   hint,
   showTitle = true,
 }) => {
-  const { allQuickStarts = quickStarts, allQuickStartStates, getResource, filter, setFilter } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const { allQuickStarts = quickStarts, setAllQuickStarts, allQuickStartStates, getResource, filter, setFilter } = React.useContext<QuickStartContextValues>(QuickStartContext);
 
+  React.useEffect(() => {
+    if (quickStarts) {
+      setAllQuickStarts(quickStarts);
+    }
+  }, [quickStarts]);
+  
   const initialFilteredQuickStarts = showFilter
     ? filterQuickStarts(
         allQuickStarts,

packages/module/src/utils/quick-start-context.tsx

@@ -118,11 +118,11 @@ export const QuickStartContextProvider: React.FC<{
   const initialStatusFilters = initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
 
   const quickStartStatusCount = getQuickStartStatusCount(combinedValue.allQuickStartStates, combinedValue.allQuickStarts);
-  const statusTypes = {
+  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]),
     [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.NOT_STARTED]),
-  };
+  });
   const [statusFilters, setStatusFilters] = React.useState<string[]>(initialStatusFilters);
   const [selectedFilters, setSelectedFilters] = React.useState<string[]>(
     initialStatusFilters.map((filter) => statusTypes[filter]),
@@ -137,7 +137,17 @@ export const QuickStartContextProvider: React.FC<{
       setStatusFilters(value);
       setSelectedFilters(value.map((filterKey) => statusTypes[filterKey]));
     }
-  }
+  };
+
+  const updateAllQuickStarts = (quickStarts: QuickStart[]) => {
+    setQuickStarts(quickStarts);
+    const updatedQuickStartStatusCount = getQuickStartStatusCount(combinedValue.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]),
+    });
+  };
 
   const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates } = combinedValue;
 
@@ -341,7 +351,7 @@ export const QuickStartContextProvider: React.FC<{
   return <QuickStartContext.Provider value={{
     ...combinedValue,
     allQuickStarts: quickStarts,
-    setAllQuickStarts: setQuickStarts,
+    setAllQuickStarts: updateAllQuickStarts,
     resourceBundle,
     setResourceBundle: changeResourceBundle,
     lng,