Skip to content

Commit ca01076

Browse files
jschulerjschuler
committed
set filters from context
1 parent 8975b42 commit ca01076

File tree

10 files changed

+119
-119
lines changed

10 files changed

+119
-119
lines changed

‎packages/dev/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"serve": "serve public"
1010
},
1111
"dependencies": {
12-
"@patternfly/quickstarts": "1.0.0-rc.10",
12+
"@patternfly/quickstarts": "1.0.0-rc.11",
1313
"@patternfly/react-core": "^4.101.3",
1414
"asciidoctor": "^2.2.1",
1515
"react": "^16.14.0",

‎packages/dev/src/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,10 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
122122
lng: localStorage.getItem('bridge/language'),
123123
resourceBundle: {
124124
...resourceBundle,
125-
"Start": "Let's goooo"
125+
"Start": "Let's go!",
126+
"Continue": "Resume",
127+
"Restart": "Start over"
126128
},
127-
useQueryParams: false
128129
};
129130

130131
return (

‎packages/dev/src/CustomCatalog.tsx‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import * as React from 'react';
22
import {
3-
QUICKSTART_SEARCH_FILTER_KEY,
4-
QUICKSTART_STATUS_FILTER_KEY,
53
QuickStart,
64
QuickStartCatalog,
75
QuickStartCatalogEmptyState,
@@ -13,10 +11,9 @@ import {
1311
QuickStartContext,
1412
QuickStartContextValues,
1513
QuickStartTile,
16-
clearQuickStartFilters,
14+
clearFilterParams,
1715
filterQuickStarts,
1816
getQuickStartStatus,
19-
getQuickStartStatusCount,
2017
} from '@patternfly/quickstarts';
2118
import {
2219
Divider,
@@ -28,51 +25,40 @@ import {
2825
} from '@patternfly/react-core';
2926

3027
export const CustomCatalog: React.FC = () => {
31-
const { activeQuickStartID, allQuickStartStates, allQuickStarts } = React.useContext<QuickStartContextValues>(
28+
const { activeQuickStartID, allQuickStartStates, allQuickStarts, filter, setFilter } = React.useContext<QuickStartContextValues>(
3229
QuickStartContext,
3330
);
3431

35-
const initialQueryParams = new URLSearchParams(window.location.search);
36-
const initialSearchQuery = initialQueryParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
37-
const [searchInputText, setSearchInputText] = React.useState<string>(initialSearchQuery);
38-
const initialStatusFilters =
39-
initialQueryParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
40-
const [statusFilters, setStatusFilters] = React.useState<string[]>(initialStatusFilters);
41-
4232
const sortFnc = (q1: QuickStart, q2: QuickStart) =>
4333
q1.spec.displayName.localeCompare(q2.spec.displayName);
4434
const initialFilteredQuickStarts = filterQuickStarts(
4535
allQuickStarts,
46-
initialSearchQuery,
47-
initialStatusFilters,
36+
filter.keyword,
37+
filter.status.statusFilters,
4838
allQuickStartStates,
4939
).sort(sortFnc);
5040
const [filteredQuickStarts, setFilteredQuickStarts] = React.useState<QuickStart[]>(
5141
initialFilteredQuickStarts,
5242
);
5343

54-
const quickStartStatusCount = React.useMemo(
55-
() => getQuickStartStatusCount(allQuickStartStates, allQuickStarts),
56-
[allQuickStartStates, allQuickStarts],
57-
);
5844
const onSearchInputChange = (searchValue: string) => {
5945
const result = filterQuickStarts(
6046
allQuickStarts,
6147
searchValue,
62-
statusFilters,
48+
filter.status.statusFilters,
6349
allQuickStartStates,
6450
).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
65-
setSearchInputText(searchValue);
51+
setFilter('keyword', searchValue);
6652
setFilteredQuickStarts(result);
6753
};
6854
const onStatusChange = (statusList: string[]) => {
6955
const result = filterQuickStarts(
7056
allQuickStarts,
71-
searchInputText,
57+
filter.keyword,
7258
statusList,
7359
allQuickStartStates,
7460
).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
75-
setStatusFilters(statusList);
61+
setFilter('status', statusList);
7662
setFilteredQuickStarts(result);
7763
};
7864

@@ -138,7 +124,9 @@ export const CustomCatalog: React.FC = () => {
138124
);
139125

140126
const clearFilters = () => {
141-
clearQuickStartFilters();
127+
setFilter('keyword', '');
128+
setFilter('status', []);
129+
clearFilterParams();
142130
setFilteredQuickStarts(
143131
allQuickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)),
144132
);
@@ -152,7 +140,6 @@ export const CustomCatalog: React.FC = () => {
152140
<ToolbarContent>
153141
<QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
154142
{/* <QuickStartCatalogFilterStatusWrapper
155-
quickStartStatusCount={quickStartStatusCount}
156143
onStatusChange={onStatusChange}
157144
/> */}
158145
<QuickStartCatalogFilterCountWrapper quickStartsCount={filteredQuickStarts.length} />

‎packages/dev/src/Home.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,6 @@ import {
44
QuickStartContext
55
} from "@patternfly/quickstarts";
66
import i18n from './i18n/i18n';
7-
// import {
8-
// ProcedureAsciiDocParser,
9-
// getQuickStartStatus,
10-
// getQuickStartStatusCount
11-
// } from "./quickstarts-data/mocks/parsers";
12-
// import { allAsciiDocImports } from "./quickstarts-data/quick-start-test-data";
13-
// import { FormInput } from "./FormInput";
147

158
export const Home: React.FunctionComponent = () => {
169
// const [inputValue, setInputValue] = React.useState("");

‎packages/module/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@patternfly/quickstarts",
3-
"version": "1.0.0-rc.10",
3+
"version": "1.0.0-rc.11",
44
"description": "PatternFly quick starts",
55
"files": [
66
"dist"

‎packages/module/src/ConsoleInternal/components/utils/router.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const removeQueryArgument = (k: string) => {
5454
}
5555
};
5656

57-
export const clearQuickStartFilters = () => {
57+
export const clearFilterParams = () => {
5858
removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
5959
removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
6060
};

‎packages/module/src/QuickStartCatalogPage.tsx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import QuickStartCatalog from './catalog/QuickStartCatalog';
33
import { QuickStart } from './utils/quick-start-types';
4-
import { filterQuickStarts, getQuickStartStatusCount } from './utils/quick-start-utils';
4+
import { filterQuickStarts } from './utils/quick-start-utils';
55
import { QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from './utils/const';
66
import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
77
import {
@@ -15,7 +15,7 @@ import {
1515
Title,
1616
} from '@patternfly/react-core';
1717
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
18-
import { EmptyBox, LoadingBox, removeQueryArgument } from '@console/internal/components/utils';
18+
import { EmptyBox, LoadingBox, clearFilterParams } from '@console/internal/components/utils';
1919
import QuickStartCatalogFilter from './catalog/Toolbar/QuickStartCatalogFilter';
2020

2121
type QuickStartCatalogPageProps = {
@@ -55,37 +55,38 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
5555
hint,
5656
showTitle = true,
5757
}) => {
58-
const { allQuickStarts = quickStarts, allQuickStartStates, getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
58+
const { allQuickStarts = quickStarts, allQuickStartStates, getResource, filter, setFilter } = React.useContext<QuickStartContextValues>(QuickStartContext);
5959

60-
const initialQueryParams = new URLSearchParams(window.location.search);
61-
const initialSearchQuery = initialQueryParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
62-
const [searchInputText, setSearchInputText] = React.useState<string>(initialSearchQuery);
63-
const initialStatusFilters =
64-
initialQueryParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
65-
const [statusFilters, setStatusFilters] = React.useState<string[]>(initialStatusFilters);
60+
// const initialQueryParams = new URLSearchParams(window.location.search);
61+
// const initialSearchQuery = initialQueryParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
62+
// const [searchInputText, setSearchInputText] = React.useState<string>(initialSearchQuery);
63+
// const initialStatusFilters =
64+
// initialQueryParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
65+
// const [statusFilters, setStatusFilters] = React.useState<string[]>(initialStatusFilters);
6666

6767
const initialFilteredQuickStarts = showFilter
6868
? filterQuickStarts(
6969
allQuickStarts,
70-
initialSearchQuery,
71-
initialStatusFilters,
70+
filter.keyword,
71+
filter.status.statusFilters,
7272
allQuickStartStates,
7373
).sort(sortFnc)
7474
: allQuickStarts;
7575

7676
const [filteredQuickStarts, setFilteredQuickStarts] = React.useState(initialFilteredQuickStarts);
7777
React.useEffect(() => {
7878
const filteredQuickStarts = showFilter
79-
? filterQuickStarts(allQuickStarts, searchInputText, statusFilters, allQuickStartStates).sort(
79+
? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(
8080
sortFnc,
8181
)
8282
: allQuickStarts;
8383
setFilteredQuickStarts(filteredQuickStarts);
8484
}, [allQuickStarts]);
8585

8686
const clearFilters = () => {
87-
removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
88-
removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
87+
setFilter('keyword', '');
88+
setFilter('status', []);
89+
clearFilterParams();
8990
setFilteredQuickStarts(
9091
allQuickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)),
9192
);
@@ -95,29 +96,24 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
9596
const result = filterQuickStarts(
9697
allQuickStarts,
9798
searchValue,
98-
statusFilters,
99+
filter.status.statusFilters,
99100
allQuickStartStates,
100101
).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
101-
setSearchInputText(searchValue);
102+
setFilter('keyword', searchValue);
102103
setFilteredQuickStarts(result);
103104
};
104105

105106
const onStatusChange = (statusList) => {
106107
const result = filterQuickStarts(
107108
allQuickStarts,
108-
searchInputText,
109+
filter.keyword,
109110
statusList,
110111
allQuickStartStates,
111112
).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
112-
setStatusFilters(statusList);
113+
setFilter('status', statusList);
113114
setFilteredQuickStarts(result);
114115
};
115116

116-
const quickStartStatusCount = React.useMemo(
117-
() => getQuickStartStatusCount(allQuickStartStates, allQuickStarts),
118-
[allQuickStartStates, allQuickStarts],
119-
);
120-
121117
if (!allQuickStarts) return <LoadingBox />;
122118
return allQuickStarts.length === 0 ? (
123119
<EmptyBox label={getResource('Quick Starts')} />
@@ -136,7 +132,6 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
136132
<>
137133
<QuickStartCatalogFilter
138134
quickStartsCount={filteredQuickStarts.length}
139-
quickStartStatusCount={quickStartStatusCount}
140135
onSearchInputChange={onSearchInputChange}
141136
onStatusChange={onStatusChange}
142137
/>

‎packages/module/src/catalog/Toolbar/QuickStartCatalogFilter.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import { Toolbar, ToolbarContent, ToolbarProps } from '@patternfly/react-core';
3-
import { QuickStartStatus } from '../../utils/quick-start-types';
43
import {
54
QuickStartCatalogFilterCountWrapper,
65
QuickStartCatalogFilterSearchWrapper,
@@ -11,14 +10,12 @@ import './QuickStartCatalogFilter.scss';
1110

1211
interface QuickStartCatalogFilterProps extends Omit<ToolbarProps, 'ref'> {
1312
quickStartsCount: number;
14-
quickStartStatusCount: Record<QuickStartStatus, number>;
1513
onSearchInputChange: any;
1614
onStatusChange: any;
1715
}
1816

1917
const QuickStartCatalogFilter: React.FC<QuickStartCatalogFilterProps> = ({
2018
quickStartsCount,
21-
quickStartStatusCount,
2219
onSearchInputChange = () => {},
2320
onStatusChange = () => {},
2421
...props
@@ -29,7 +26,6 @@ const QuickStartCatalogFilter: React.FC<QuickStartCatalogFilterProps> = ({
2926
<ToolbarContent>
3027
<QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
3128
<QuickStartCatalogFilterStatusWrapper
32-
quickStartStatusCount={quickStartStatusCount}
3329
onStatusChange={onStatusChange}
3430
/>
3531
<QuickStartCatalogFilterCountWrapper quickStartsCount={quickStartsCount} />

0 commit comments

Comments
 (0)