Skip to content

Commit 1eda250

Browse files
jschulerjschuler
committed
useContextValues
1 parent 640283a commit 1eda250

File tree

4 files changed

+70
-38
lines changed

4 files changed

+70
-38
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.17",
12+
"@patternfly/quickstarts": "1.0.0-rc.18",
1313
"@patternfly/react-core": "^4.101.3",
1414
"asciidoctor": "^2.2.1",
1515
"react": "^16.14.0",

‎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.17",
3+
"version": "1.0.0-rc.18",
44
"description": "PatternFly quick starts",
55
"files": [
66
"dist"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
SelectVariant,
88
ToolbarItem,
99
} from '@patternfly/react-core';
10-
import { QuickStartStatus } from '../../utils/quick-start-types';
1110
import { QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from '../../utils/const';
1211
import { removeQueryArgument, setQueryArgument } from '@console/internal/components/utils';
1312
import { history } from '../../ConsoleInternal/components/utils/router';

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

Lines changed: 68 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import {
77
QuickStartTaskStatus,
88
} from './quick-start-types';
99
import { removeQueryArgument, setQueryArgument } from '../ConsoleInternal/components/utils/router';
10-
import { QUICKSTART_ID_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from './const';
10+
import {
11+
QUICKSTART_ID_FILTER_KEY,
12+
QUICKSTART_TASKS_INITIAL_STATES,
13+
QUICKSTART_SEARCH_FILTER_KEY,
14+
QUICKSTART_STATUS_FILTER_KEY,
15+
} from './const';
1116
import { getTaskStatusKey, getQuickStartStatusCount } from './quick-start-utils';
1217
import PluralResolver from './PluralResolver';
1318
import en from '../locales/en/quickstart.json';
@@ -52,8 +57,8 @@ export type QuickStartContextValues = {
5257
status?: {
5358
statusTypes?: any;
5459
statusFilters?: any;
55-
}
56-
}
60+
};
61+
};
5762
setFilter?: any;
5863
};
5964

@@ -82,53 +87,62 @@ export const getResource = (resource: string, options: any, resourceBundle: any,
8287
return resourceBundle[`${resource}_${suffix}`];
8388
}
8489
}
85-
return resourceBundle && resourceBundle[resource] || '';
86-
}
90+
return (resourceBundle && resourceBundle[resource]) || '';
91+
};
8792

88-
export const QuickStartContextProvider: React.FC<{
89-
children: React.ReactNode;
90-
value: QuickStartContextValues;
91-
}> = ({ children, value }) => {
93+
export const useValuesForQuickStartContext = (
94+
value: QuickStartContextValues = {},
95+
): QuickStartContextValues => {
9296
const combinedValue = {
9397
...QuickStartContextDefaults,
94-
...value
95-
}
96-
const {
97-
activeQuickStartID,
98-
setActiveQuickStartID,
99-
setAllQuickStartStates,
100-
useQueryParams,
98+
...value,
99+
};
100+
const {
101+
activeQuickStartID,
102+
setActiveQuickStartID,
103+
setAllQuickStartStates,
104+
useQueryParams,
101105
allQuickStartStates,
102-
allQuickStarts
106+
allQuickStarts,
103107
} = combinedValue;
104108
const [quickStarts, setQuickStarts] = React.useState(combinedValue.allQuickStarts);
105109
const [resourceBundle, setResourceBundle] = React.useState({
106110
...en,
107-
...combinedValue.resourceBundle
111+
...combinedValue.resourceBundle,
108112
});
109113
const [lng, setLng] = React.useState(combinedValue.lng || 'en');
110114
const changeResourceBundle = (resourceBundle: any) => {
111115
setResourceBundle({
112116
...en,
113-
...resourceBundle
117+
...resourceBundle,
114118
});
115-
}
119+
};
116120
const changeLng = (lng: string) => {
117121
setLng(lng);
118-
}
122+
};
119123
const findResource = (resource: string, count?: number) => {
120124
return getResource(resource, count !== undefined ? { count } : null, resourceBundle, lng);
121-
}
125+
};
122126

123127
const initialSearchParams = new URLSearchParams(window.location.search);
124128
const initialSearchQuery = initialSearchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
125-
const initialStatusFilters = initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
129+
const initialStatusFilters =
130+
initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
126131

127132
const quickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, allQuickStarts);
128133
const [statusTypes, setStatusTypes] = React.useState({
129-
[QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.COMPLETE]),
130-
[QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
131-
[QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.NOT_STARTED]),
134+
[QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace(
135+
'{{statusCount, number}}',
136+
quickStartStatusCount[QuickStartStatus.COMPLETE],
137+
),
138+
[QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace(
139+
'{{statusCount, number}}',
140+
quickStartStatusCount[QuickStartStatus.IN_PROGRESS],
141+
),
142+
[QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace(
143+
'{{statusCount, number}}',
144+
quickStartStatusCount[QuickStartStatus.NOT_STARTED],
145+
),
132146
});
133147
const [statusFilters, setStatusFilters] = React.useState<string[]>(initialStatusFilters);
134148

@@ -145,16 +159,25 @@ export const QuickStartContextProvider: React.FC<{
145159
React.useEffect(() => {
146160
const updatedQuickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, quickStarts);
147161
setStatusTypes({
148-
[QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.COMPLETE]),
149-
[QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
150-
[QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.NOT_STARTED]),
162+
[QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace(
163+
'{{statusCount, number}}',
164+
updatedQuickStartStatusCount[QuickStartStatus.COMPLETE],
165+
),
166+
[QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace(
167+
'{{statusCount, number}}',
168+
updatedQuickStartStatusCount[QuickStartStatus.IN_PROGRESS],
169+
),
170+
[QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace(
171+
'{{statusCount, number}}',
172+
updatedQuickStartStatusCount[QuickStartStatus.NOT_STARTED],
173+
),
151174
});
152-
}, [allQuickStartStates, quickStarts])
175+
}, [allQuickStartStates, quickStarts]);
153176

154177
const updateAllQuickStarts = (quickStarts: QuickStart[]) => {
155178
setQuickStarts(quickStarts);
156179
};
157-
180+
158181
const setActiveQuickStart = useCallback(
159182
(quickStartId: string, totalTasks?: number) => {
160183
setActiveQuickStartID((id) => {
@@ -352,7 +375,7 @@ export const QuickStartContextProvider: React.FC<{
352375
[allQuickStartStates],
353376
);
354377

355-
return <QuickStartContext.Provider value={{
378+
return {
356379
...combinedValue,
357380
allQuickStarts: quickStarts,
358381
setAllQuickStarts: updateAllQuickStarts,
@@ -366,7 +389,7 @@ export const QuickStartContextProvider: React.FC<{
366389
status: {
367390
statusTypes,
368391
statusFilters,
369-
}
392+
},
370393
},
371394
setFilter,
372395
activeQuickStartState,
@@ -378,7 +401,18 @@ export const QuickStartContextProvider: React.FC<{
378401
setQuickStartTaskNumber,
379402
setQuickStartTaskStatus,
380403
getQuickStartForId,
381-
}}>{children}</QuickStartContext.Provider>;
404+
};
405+
};
406+
407+
export const QuickStartContextProvider: React.FC<{
408+
children: React.ReactNode;
409+
value: QuickStartContextValues;
410+
}> = ({ children, value }) => {
411+
return (
412+
<QuickStartContext.Provider value={useValuesForQuickStartContext(value)}>
413+
{children}
414+
</QuickStartContext.Provider>
415+
);
382416
};
383417

384418
export const getDefaultQuickStartState = (
@@ -396,4 +430,3 @@ export const getDefaultQuickStartState = (
396430
}
397431
return defaultQuickStartState;
398432
};
399-

0 commit comments

Comments
 (0)