Skip to content

Commit 312e484

Browse files
tjeerddietjeerddie
committed
Fix query error in WfoSubscriptionNoteEdit by using existing data
the component was re-fetching data without query variables which resulted in query errors. - change WfoSubscriptionNoteEdit to use existing data - clean WfoSubscriptionsList and move the subscription list fetch above the table columns so the list can be used in WfoSubscriptionNoteEdit. - change subscriptionResultMappers to work with response or undefined and returns empty list when undefined.
1 parent 9675baf commit 312e484

File tree

3 files changed

+65
-68
lines changed

3 files changed

+65
-68
lines changed

‎packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
11
import type { FC } from 'react';
22
import React from 'react';
33

4-
import { ApiResult, SubscriptionListResponse, UseQuery } from '@/rtk';
54
import { useStartProcessMutation } from '@/rtk/endpoints/forms';
65
import { useUpdateSubscriptionNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation';
76
import { Subscription } from '@/types';
87
import { INVISIBLE_CHARACTER } from '@/utils';
98

109
import { WfoInlineEdit } from '../WfoInlineEdit';
10+
import { SubscriptionListItem } from '../WfoSubscriptionsList';
1111

1212
interface WfoSubscriptionNoteEditProps {
1313
subscriptionId: Subscription['subscriptionId'];
1414
onlyShowOnHover?: boolean;
1515
queryVariables: Record<string, unknown>;
16-
useQuery: UseQuery<SubscriptionListResponse, Subscription>;
16+
endpointName: string | undefined;
17+
data: SubscriptionListItem[];
1718
}
1819

1920
export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
2021
subscriptionId,
2122
onlyShowOnHover = false,
2223
queryVariables,
23-
useQuery,
24+
endpointName,
25+
data,
2426
}) => {
25-
const { selectedItem } = useQuery(queryVariables, {
26-
selectFromResult: (result: ApiResult<SubscriptionListResponse>) => ({
27-
selectedItem: result?.data?.subscriptions?.find(
28-
(sub) => sub.subscriptionId === subscriptionId,
29-
),
30-
}),
31-
});
32-
const endpointName = useQuery().endpointName;
27+
const selectedItem = data.find(
28+
(sub) => sub.subscriptionId === subscriptionId,
29+
);
3330
const [startProcess] = useStartProcessMutation();
3431
const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
3532

‎packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

Lines changed: 52 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,12 @@ import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedT
2222
import { ColumnType } from '@/components/WfoTable/WfoTable';
2323
import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
2424
import { DataDisplayParams, useShowToastMessage } from '@/hooks';
25-
import { UseQuery } from '@/rtk';
2625
import {
27-
SubscriptionListResponse,
2826
useGetSubscriptionListQuery,
2927
useLazyGetSubscriptionListQuery,
3028
} from '@/rtk/endpoints/subscriptionList';
3129
import { mapRtkErrorToWfoError } from '@/rtk/utils';
32-
import { GraphqlQueryVariables, SortOrder, Subscription } from '@/types';
30+
import { GraphqlQueryVariables, SortOrder } from '@/types';
3331
import {
3432
getQueryVariablesForExport,
3533
getTypedFieldFromObject,
@@ -78,6 +76,22 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
7876
const tError = useTranslations('errors');
7977
const { showToastMessage } = useShowToastMessage();
8078

79+
const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
80+
81+
const graphqlQueryVariables: GraphqlQueryVariables<SubscriptionListItem> = {
82+
first: pageSize,
83+
after: pageIndex * pageSize,
84+
sortBy,
85+
filterBy: alwaysOnFilters,
86+
query: queryString || undefined,
87+
};
88+
89+
const { data, isFetching, error, endpointName } =
90+
useGetSubscriptionListQuery(graphqlQueryVariables);
91+
92+
const subscriptionList =
93+
mapGraphQlSubscriptionsResultToSubscriptionListItems(data);
94+
8195
const tableColumnConfig: WfoAdvancedTableColumnConfig<SubscriptionListItem> =
8296
{
8397
subscriptionId: {
@@ -155,15 +169,11 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
155169
renderData: (cellValue, row) => {
156170
return (
157171
<WfoSubscriptionNoteEdit
158-
queryVariables={graphqlQueryVariables}
159172
subscriptionId={row.subscriptionId}
160173
onlyShowOnHover={true}
161-
useQuery={
162-
useGetSubscriptionListQuery as UseQuery<
163-
SubscriptionListResponse,
164-
Subscription
165-
>
166-
}
174+
endpointName={endpointName}
175+
queryVariables={graphqlQueryVariables}
176+
data={subscriptionList}
167177
/>
168178
);
169179
},
@@ -182,19 +192,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
182192
},
183193
};
184194

185-
const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
186-
187-
const graphqlQueryVariables: GraphqlQueryVariables<SubscriptionListItem> = {
188-
first: pageSize,
189-
after: pageIndex * pageSize,
190-
sortBy,
191-
filterBy: alwaysOnFilters,
192-
query: queryString || undefined,
193-
};
194-
195-
const { data, isFetching, error } = useGetSubscriptionListQuery(
196-
graphqlQueryVariables,
197-
);
198195
const [getSubscriptionListTrigger, { isFetching: isFetchingCsv }] =
199196
useLazyGetSubscriptionListQuery();
200197
const getSubscriptionListForExport = () =>
@@ -217,54 +214,55 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
217214
};
218215
const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
219216

217+
const pageChange =
218+
getPageIndexChangeHandler<SubscriptionListItem>(setDataDisplayParam);
219+
const pageSizeChange =
220+
getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam);
221+
const updateQuery =
222+
getQueryStringHandler<SubscriptionListItem>(setDataDisplayParam);
223+
const updateSorting =
224+
getDataSortHandler<SubscriptionListItem>(setDataDisplayParam);
225+
220226
const pagination: Pagination = {
221227
pageIndex: dataDisplayParams.pageIndex,
222228
pageSize: dataDisplayParams.pageSize,
223229
pageSizeOptions: DEFAULT_PAGE_SIZES,
224230
totalItemCount: totalItems ?? 0,
225-
onChangePage:
226-
getPageIndexChangeHandler<SubscriptionListItem>(
227-
setDataDisplayParam,
228-
),
229-
onChangeItemsPerPage:
230-
getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam),
231+
onChangePage: pageChange,
232+
onChangeItemsPerPage: pageSizeChange,
231233
};
232234

235+
const exportData = csvDownloadHandler(
236+
getSubscriptionListForExport,
237+
mapGraphQlSubscriptionsResultToSubscriptionListItems,
238+
mapGraphQlSubscriptionsResultToPageInfo,
239+
Object.keys(tableColumnConfig),
240+
getCsvFileNameWithDate('Subscriptions'),
241+
showToastMessage,
242+
tError,
243+
);
244+
245+
const mapTableConfig = mapSortableAndFilterableValuesToTableColumnConfig(
246+
tableColumnConfig,
247+
sortFields,
248+
filterFields,
249+
);
250+
233251
return (
234252
<WfoAdvancedTable
235253
queryString={dataDisplayParams.queryString}
236-
onUpdateQueryString={getQueryStringHandler<SubscriptionListItem>(
237-
setDataDisplayParam,
238-
)}
239-
data={
240-
data
241-
? mapGraphQlSubscriptionsResultToSubscriptionListItems(data)
242-
: []
243-
}
244-
tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
245-
tableColumnConfig,
246-
sortFields,
247-
filterFields,
248-
)}
254+
onUpdateQueryString={updateQuery}
255+
data={subscriptionList}
256+
tableColumnConfig={mapTableConfig}
249257
defaultHiddenColumns={hiddenColumns}
250258
dataSorting={[dataSorting]}
251259
isLoading={isFetching}
252260
localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
253261
detailModalTitle={'Details - Subscription'}
254262
pagination={pagination}
255263
error={mapRtkErrorToWfoError(error)}
256-
onUpdateDataSorting={getDataSortHandler<SubscriptionListItem>(
257-
setDataDisplayParam,
258-
)}
259-
onExportData={csvDownloadHandler(
260-
getSubscriptionListForExport,
261-
mapGraphQlSubscriptionsResultToSubscriptionListItems,
262-
mapGraphQlSubscriptionsResultToPageInfo,
263-
Object.keys(tableColumnConfig),
264-
getCsvFileNameWithDate('Subscriptions'),
265-
showToastMessage,
266-
tError,
267-
)}
264+
onUpdateDataSorting={updateSorting}
265+
onExportData={exportData}
268266
exportDataIsLoading={isFetchingCsv}
269267
/>
270268
);

‎packages/orchestrator-ui-components/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ export const mapGraphQlSubscriptionsResultToPageInfo = (
2020
) => graphqlResponse.pageInfo;
2121

2222
export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
23-
graphqlResponse: SubscriptionListResponse,
24-
): SubscriptionListItem[] =>
25-
graphqlResponse.subscriptions.map((subscription) => {
23+
graphqlResponse: SubscriptionListResponse | undefined,
24+
): SubscriptionListItem[] => {
25+
if (!graphqlResponse) return [];
26+
return graphqlResponse.subscriptions.map((subscription) => {
2627
const {
2728
description,
2829
insync,
@@ -55,3 +56,4 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
5556
metadata: Object.keys(metadata).length > 0 ? metadata : null,
5657
};
5758
});
59+
};

0 commit comments

Comments
 (0)