diff --git a/packages/dev/package.json b/packages/dev/package.json index 9052a267..2905ee7f 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.13", + "@patternfly/quickstarts": "1.0.0-rc.14", "@patternfly/react-core": "^4.101.3", "asciidoctor": "^2.2.1", "react": "^16.14.0", diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx index 57042fb1..e7f4826b 100644 --- a/packages/dev/src/CustomCatalog.tsx +++ b/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( + const { activeQuickStartID, allQuickStartStates, allQuickStarts, setAllQuickStarts, filter, setFilter } = React.useContext( 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( - 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 ( <> diff --git a/packages/dev/src/DefaultCatalog.tsx b/packages/dev/src/DefaultCatalog.tsx new file mode 100644 index 00000000..1080b342 --- /dev/null +++ b/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(QuickStartContext); +// const load = async () => { +// const masGuidesQuickstarts = await loadJSONQuickStarts(''); +// setAllQuickStarts(yamlQuickStarts.concat(masGuidesQuickstarts)); +// }; + +// const loadQuickStarts = () => { +// load(); +// }; + return ( + <> + {/* */} + + + ); +}; diff --git a/packages/dev/src/index.tsx b/packages/dev/src/index.tsx index 8eb21895..5c8ae45b 100755 --- a/packages/dev/src/index.tsx +++ b/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( - + diff --git a/packages/module/package.json b/packages/module/package.json index c1529f46..81c18815 100644 --- a/packages/module/package.json +++ b/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" diff --git a/packages/module/src/QuickStartCatalogPage.tsx b/packages/module/src/QuickStartCatalogPage.tsx index 19f340e9..dffce898 100644 --- a/packages/module/src/QuickStartCatalogPage.tsx +++ b/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, diff --git a/packages/module/src/utils/quick-start-context.tsx b/packages/module/src/utils/quick-start-context.tsx index b7712234..e10fee62 100644 --- a/packages/module/src/utils/quick-start-context.tsx +++ b/packages/module/src/utils/quick-start-context.tsx @@ -25,6 +25,7 @@ export type QuickStartContextValues = { activeQuickStartID?: string; allQuickStartStates?: AllQuickStartStates; activeQuickStartState?: QuickStartState; + setAllQuickStarts?: React.Dispatch>; setActiveQuickStartID?: React.Dispatch>; setAllQuickStartStates?: React.Dispatch>; 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