Skip to content

Commit 735a899

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 for WfoSubscriptionNoteEdit. - change subscriptionResultMappers to work with response or undefined and returns empty list when undefined.
1 parent 9675baf commit 735a899

File tree

3 files changed

+66
-76
lines changed

3 files changed

+66
-76
lines changed

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

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +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';
7-
import { Subscription } from '@/types';
86
import { INVISIBLE_CHARACTER } from '@/utils';
97

108
import { WfoInlineEdit } from '../WfoInlineEdit';
9+
import { SubscriptionListItem } from '../WfoSubscriptionsList';
1110

1211
interface WfoSubscriptionNoteEditProps {
13-
subscriptionId: Subscription['subscriptionId'];
1412
onlyShowOnHover?: boolean;
1513
queryVariables: Record<string, unknown>;
16-
useQuery: UseQuery<SubscriptionListResponse, Subscription>;
14+
endpointName: string | undefined;
15+
subscription: SubscriptionListItem;
1716
}
1817

1918
export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
20-
subscriptionId,
2119
onlyShowOnHover = false,
2220
queryVariables,
23-
useQuery,
21+
endpointName,
22+
subscription,
2423
}) => {
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;
3324
const [startProcess] = useStartProcessMutation();
3425
const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
3526

3627
const triggerNoteModifyWorkflow = (note: string) => {
3728
const noteModifyPayload = [
38-
{ subscription_id: subscriptionId },
29+
{ subscription_id: subscription.subscriptionId },
3930
{ note: note === INVISIBLE_CHARACTER ? '' : note },
4031
];
4132
startProcess({
@@ -45,7 +36,7 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
4536

4637
updateSub({
4738
queryName: endpointName ?? '',
48-
subscriptionId: subscriptionId,
39+
subscriptionId: subscription.subscriptionId,
4940
graphQlQueryVariables: queryVariables,
5041
note: note,
5142
});
@@ -54,8 +45,8 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
5445
return (
5546
<WfoInlineEdit
5647
value={
57-
selectedItem?.note?.trim()
58-
? selectedItem.note
48+
subscription?.note?.trim()
49+
? subscription.note
5950
: INVISIBLE_CHARACTER
6051
}
6152
onlyShowOnHover={onlyShowOnHover}

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

Lines changed: 52 additions & 55 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,10 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
155169
renderData: (cellValue, row) => {
156170
return (
157171
<WfoSubscriptionNoteEdit
158-
queryVariables={graphqlQueryVariables}
159-
subscriptionId={row.subscriptionId}
160172
onlyShowOnHover={true}
161-
useQuery={
162-
useGetSubscriptionListQuery as UseQuery<
163-
SubscriptionListResponse,
164-
Subscription
165-
>
166-
}
173+
endpointName={endpointName}
174+
queryVariables={graphqlQueryVariables}
175+
subscription={row}
167176
/>
168177
);
169178
},
@@ -182,19 +191,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
182191
},
183192
};
184193

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-
);
198194
const [getSubscriptionListTrigger, { isFetching: isFetchingCsv }] =
199195
useLazyGetSubscriptionListQuery();
200196
const getSubscriptionListForExport = () =>
@@ -217,54 +213,55 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
217213
};
218214
const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
219215

216+
const pageChange =
217+
getPageIndexChangeHandler<SubscriptionListItem>(setDataDisplayParam);
218+
const pageSizeChange =
219+
getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam);
220+
const updateQuery =
221+
getQueryStringHandler<SubscriptionListItem>(setDataDisplayParam);
222+
const updateSorting =
223+
getDataSortHandler<SubscriptionListItem>(setDataDisplayParam);
224+
220225
const pagination: Pagination = {
221226
pageIndex: dataDisplayParams.pageIndex,
222227
pageSize: dataDisplayParams.pageSize,
223228
pageSizeOptions: DEFAULT_PAGE_SIZES,
224229
totalItemCount: totalItems ?? 0,
225-
onChangePage:
226-
getPageIndexChangeHandler<SubscriptionListItem>(
227-
setDataDisplayParam,
228-
),
229-
onChangeItemsPerPage:
230-
getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam),
230+
onChangePage: pageChange,
231+
onChangeItemsPerPage: pageSizeChange,
231232
};
232233

234+
const exportData = csvDownloadHandler(
235+
getSubscriptionListForExport,
236+
mapGraphQlSubscriptionsResultToSubscriptionListItems,
237+
mapGraphQlSubscriptionsResultToPageInfo,
238+
Object.keys(tableColumnConfig),
239+
getCsvFileNameWithDate('Subscriptions'),
240+
showToastMessage,
241+
tError,
242+
);
243+
244+
const tableConfig = mapSortableAndFilterableValuesToTableColumnConfig(
245+
tableColumnConfig,
246+
sortFields,
247+
filterFields,
248+
);
249+
233250
return (
234251
<WfoAdvancedTable
235252
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-
)}
253+
onUpdateQueryString={updateQuery}
254+
data={subscriptionList}
255+
tableColumnConfig={tableConfig}
249256
defaultHiddenColumns={hiddenColumns}
250257
dataSorting={[dataSorting]}
251258
isLoading={isFetching}
252259
localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
253260
detailModalTitle={'Details - Subscription'}
254261
pagination={pagination}
255262
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-
)}
263+
onUpdateDataSorting={updateSorting}
264+
onExportData={exportData}
268265
exportDataIsLoading={isFetchingCsv}
269266
/>
270267
);

‎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)