context setAllQuickStarts setter

Author: jschuler

packages/dev/package.json

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

packages/dev/src/CustomCatalog.tsx

@@ -23,22 +23,34 @@ import {
   TextContent,
   ToolbarContent,
 } from '@patternfly/react-core';
+import { allQuickStarts as yamlQuickStarts } from "./quickstarts-data/quick-start-test-data";
+import { loadJSONQuickStarts } from "./quickstarts-data/mas-guides/quickstartLoader";
 
 export const CustomCatalog: React.FC = () => {
-  const { activeQuickStartID, allQuickStartStates, allQuickStarts, filter, setFilter } = React.useContext<QuickStartContextValues>(
+  const { activeQuickStartID, allQuickStartStates, allQuickStarts, setAllQuickStarts, filter, setFilter } = React.useContext<QuickStartContextValues>(
     QuickStartContext,
   );
 
+  React.useEffect(() => {
+    // callback on state change
+    setFilteredQuickStarts(filterQuickStarts(
+      allQuickStarts,
+      filter.keyword,
+      filter.status.statusFilters,
+      allQuickStartStates,
+    ).sort(sortFnc),)
+  }, [allQuickStarts]);
+
   const sortFnc = (q1: QuickStart, q2: QuickStart) =>
     q1.spec.displayName.localeCompare(q2.spec.displayName);
-  const initialFilteredQuickStarts = filterQuickStarts(
-    allQuickStarts,
-    filter.keyword,
-    filter.status.statusFilters,
-    allQuickStartStates,
-  ).sort(sortFnc);
+
   const [filteredQuickStarts, setFilteredQuickStarts] = React.useState<QuickStart[]>(
-    initialFilteredQuickStarts,
+    filterQuickStarts(
+      allQuickStarts,
+      filter.keyword,
+      filter.status.statusFilters,
+      allQuickStartStates,
+    ).sort(sortFnc),
   );
 
   const onSearchInputChange = (searchValue: string) => {
@@ -132,6 +144,15 @@ export const CustomCatalog: React.FC = () => {
     );
   };
 
+  // const load = async () => {
+  //   const masGuidesQuickstarts = await loadJSONQuickStarts("");
+  //   setAllQuickStarts(yamlQuickStarts.concat(masGuidesQuickstarts));
+  // };
+
+  // const loadQuickStarts = () => {
+  //   load();
+  // }
+
   return (
     <>
       <QuickStartCatalogHeader title="Resources" />

packages/dev/src/DefaultCatalog.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  QuickStartCatalogPage,
+  QuickStartContextValues,
+  QuickStartContext,
+} from '@patternfly/quickstarts';
+import { allQuickStarts as yamlQuickStarts } from './quickstarts-data/quick-start-test-data';
+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 loadQuickStarts = () => {
+//     load();
+//   };
+  return (
+    <>
+      {/* <button onClick={loadQuickStarts}>Load</button> */}
+      <QuickStartCatalogPage
+        showFilter
+        hint="Learn how to create, import, and run applications with step-by-step instructions and tasks."
+      />
+    </>
+  );
+};

packages/dev/src/index.tsx

@@ -8,12 +8,8 @@ import ReactDOM from "react-dom";
 import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
 import './i18n/i18n';
 import App from "./App";
-import {
-  LoadingBox,
-  QuickStart,
-  QuickStartCatalogPage,
-} from "@patternfly/quickstarts";
 import { Home } from "./Home";
+import { DefaultCatalog } from "./DefaultCatalog";
 import { CustomCatalog } from "./CustomCatalog";
 
 ReactDOM.render(
@@ -26,10 +22,7 @@ ReactDOM.render(
       </Route>
       <Route exact path="/quickstarts">
         <App showCardFooters={false}>
-          <QuickStartCatalogPage
-            showFilter
-            hint="Learn how to create, import, and run applications with step-by-step instructions and tasks."
-          />
+          <DefaultCatalog />
         </App>
       </Route>
       <Route exact path="/custom-catalog">

packages/module/package.json

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

packages/module/src/QuickStartCatalogPage.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import QuickStartCatalog from './catalog/QuickStartCatalog';
 import { QuickStart } from './utils/quick-start-types';
 import { filterQuickStarts } from './utils/quick-start-utils';
-import { QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from './utils/const';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 import {
   Button,

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

@@ -25,6 +25,7 @@ export type QuickStartContextValues = {
   activeQuickStartID?: string;
   allQuickStartStates?: AllQuickStartStates;
   activeQuickStartState?: QuickStartState;
+  setAllQuickStarts?: React.Dispatch<React.SetStateAction<QuickStart[]>>;
   setActiveQuickStartID?: React.Dispatch<React.SetStateAction<string>>;
   setAllQuickStartStates?: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
   setActiveQuickStart?: (quickStartId: string, totalTasks?: number) => void;
@@ -62,6 +63,7 @@ export const QuickStartContextDefaults = {
   activeQuickStartID: '',
   allQuickStartStates: {},
   activeQuickStartState: {},
+  setAllQuickStarts: () => {},
   setActiveQuickStart: () => {},
   startQuickStart: () => {},
   restartQuickStart: () => {},
@@ -92,6 +94,7 @@ export const QuickStartContextProvider: React.FC<{
     ...QuickStartContextDefaults,
     ...value
   }
+  const [quickStarts, setQuickStarts] = React.useState(combinedValue.allQuickStarts);
   const [resourceBundle, setResourceBundle] = React.useState({
     ...en,
     ...combinedValue.resourceBundle
@@ -337,6 +340,8 @@ export const QuickStartContextProvider: React.FC<{
 
   return <QuickStartContext.Provider value={{
     ...combinedValue,
+    allQuickStarts: quickStarts,
+    setAllQuickStarts: setQuickStarts,
     resourceBundle,
     setResourceBundle: changeResourceBundle,
     lng,