Skip to content

Commit ac1904c

Browse files
letsbelopezDavid Lopez
andauthored
fix: undefined reference errors in ToLinkMap callback (#1130) (#1133)
Co-authored-by: David Lopez <[email protected]>
1 parent 80194ff commit ac1904c

File tree

7 files changed

+227
-200
lines changed

7 files changed

+227
-200
lines changed

packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap

Lines changed: 182 additions & 176 deletions
Large diffs are not rendered by default.

packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,7 @@ examples:
374374
);
375375
setCurrentPrimaryAuthorDisplayValue(label);
376376
}}
377+
// For autocomplete field only
377378
*/
378379
export function buildOnSelect({
379380
sanitizedFieldName,
@@ -407,7 +408,9 @@ export function buildOnSelect({
407408
nextCurrentDisplayValue = factory.createIdentifier(labelString);
408409

409410
nextCurrentValue = getMatchEveryModelFieldCallExpression({
410-
recordsArrayName: dataApi === 'GraphQL' ? `${fieldName}Records` : getRecordsName(model),
411+
// Autocomplete is special and needs a ref to the model for DataStore because the
412+
// fieldName will not be the same as when the reference was created.
413+
recordsArrayName: getRecordsName(dataApi === 'GraphQL' ? fieldName : model),
411414
JSONName: idString,
412415
});
413416
}

packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ export const getCurrentValueName = (fieldName: string) => {
7272
export const getCurrentDisplayValueName = (fieldName: string) =>
7373
`current${capitalizeFirstLetter(fieldName)}DisplayValue`;
7474

75-
export const getRecordsName = (modelName: string, capitalized = false) =>
76-
`${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(modelName)}Records`;
75+
export const getRecordsName = (name: string, capitalized = false) =>
76+
`${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(name)}Records`;
7777

7878
export const getRecordName = (modelName: string, capitalized = false) =>
7979
`${(capitalized ? capitalizeFirstLetter : lowerCaseFirst)(modelName)}Record`;
@@ -271,7 +271,9 @@ export const getUseStateHooks = (
271271

272272
if (dataApi === 'GraphQL' && relationship) {
273273
acc.push(buildUseStateExpression(`${renderedFieldName}Loading`, factory.createFalse()));
274-
acc.push(buildUseStateExpression(`${renderedFieldName}Records`, factory.createArrayLiteralExpression([], false)));
274+
acc.push(
275+
buildUseStateExpression(getRecordsName(renderedFieldName), factory.createArrayLiteralExpression([], false)),
276+
);
275277
if (hasAutoComplete && !isModelDataType(fieldConfig[1])) {
276278
acc.push(
277279
buildUseStateExpression(

packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
9292
? factory.createBinaryExpression(
9393
factory.createCallExpression(
9494
factory.createPropertyAccessExpression(
95-
factory.createIdentifier(getRecordsName(model)),
95+
factory.createIdentifier(getRecordsName(fieldName)),
9696
factory.createIdentifier('find'),
9797
),
9898
undefined,
@@ -161,6 +161,8 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
161161
)
162162
: factory.createCallExpression(
163163
factory.createPropertyAccessExpression(
164+
// DataStore needs a value to the model instead of the field
165+
// because the value of field may be different where this variable was defined.
164166
factory.createIdentifier(getRecordsName(model)),
165167
factory.createIdentifier('find'),
166168
),
@@ -210,8 +212,13 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
210212
id: r?.id,
211213
label: getDisplayValue['fieldName']?.(r),
212214
}))
215+
// For use in AutoComplete options prop only
213216
*/
214-
function getSuggestionsForRelationshipScalar(modelName: string, key: string, fieldName: string): CallExpression {
217+
function getSuggestionsForRelationshipScalar(
218+
valueRefForBuildingSuggestions: string,
219+
key: string,
220+
fieldName: string,
221+
): CallExpression {
215222
const recordString = 'r';
216223

217224
const labelExpression = getDisplayValueCallChain({ fieldName, recordString });
@@ -220,7 +227,7 @@ function getSuggestionsForRelationshipScalar(modelName: string, key: string, fie
220227
factory.createPropertyAccessExpression(
221228
factory.createCallExpression(
222229
factory.createPropertyAccessExpression(
223-
factory.createIdentifier(getRecordsName(modelName)),
230+
factory.createIdentifier(getRecordsName(valueRefForBuildingSuggestions)),
224231
factory.createIdentifier('filter'),
225232
),
226233
undefined,
@@ -340,6 +347,7 @@ function getSuggestionsForRelationshipScalar(modelName: string, key: string, fie
340347
id: getIDValue['primaryAuthor]?.(r),
341348
label: getDisplayValue['primaryAuthor']?.(r),
342349
}))
350+
For AutoComplete field only
343351
*/
344352
function getModelTypeSuggestions({
345353
modelName,
@@ -354,7 +362,9 @@ function getModelTypeSuggestions({
354362
}): CallExpression {
355363
const recordString = 'r';
356364
const labelExpression = getDisplayValueCallChain({ fieldName, recordString });
357-
const optionsRecords = dataApi === 'GraphQL' ? `${fieldName}Records` : getRecordsName(modelName);
365+
// Autocomplete is special and needs a ref to the model for DataStore because the
366+
// fieldName will not be the same as when the reference was created.
367+
const optionsRecords = getRecordsName(dataApi === 'GraphQL' ? fieldName : modelName);
358368

359369
const mappingFunction = factory.createArrowFunction(
360370
undefined,

packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,19 +60,18 @@ import { getAmplifyJSVersionToRender } from '../../helpers/amplify-js-versioning
6060
export const buildRelationshipQuery = (
6161
relatedModelName: string,
6262
importCollection: ImportCollection,
63+
fieldName: string,
6364
dataApi?: DataApiKind,
6465
renderConfigDependencies?: { [key: string]: string },
6566
) => {
66-
const itemsName = getRecordsName(relatedModelName);
67-
6867
/* istanbul ignore next */
6968
if (dataApi === 'GraphQL') {
7069
return factory.createVariableStatement(
7170
undefined,
7271
factory.createVariableDeclarationList(
7372
[
7473
factory.createVariableDeclaration(
75-
factory.createIdentifier(itemsName),
74+
factory.createIdentifier(getRecordsName(fieldName)),
7675
undefined,
7776
undefined,
7877
wrapInParenthesizedExpression(
@@ -101,7 +100,7 @@ export const buildRelationshipQuery = (
101100
),
102101
];
103102
return buildBaseCollectionVariableStatement(
104-
itemsName,
103+
getRecordsName(relatedModelName),
105104
factory.createCallExpression(factory.createIdentifier('useDataStoreBinding'), undefined, [
106105
factory.createObjectLiteralExpression(objectProperties, true),
107106
]),
@@ -891,7 +890,9 @@ export const buildManyToManyRelationshipStatements = (
891890
undefined,
892891
undefined,
893892
getMatchEveryModelFieldCallExpression({
894-
recordsArrayName: getRecordsName(relatedModelName),
893+
// Special and needs a ref to the model for DataStore because the
894+
// fieldName will not be the same as when the reference was created.
895+
recordsArrayName: getRecordsName(dataApi === 'GraphQL' ? fieldName : relatedModelName),
895896
JSONName: 'id',
896897
}),
897898
),

packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -264,9 +264,7 @@ export const renderArrayFieldComponent = (
264264
],
265265
undefined,
266266
factory.createToken(SyntaxKind.EqualsGreaterThanToken),
267-
dataApi === 'GraphQL' && !isModelDataType(fieldConfig)
268-
? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
269-
: getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
267+
getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
270268
);
271269
}
272270

@@ -451,9 +449,7 @@ export const renderArrayFieldComponent = (
451449
[
452450
factory.createExpressionStatement(
453451
factory.createCallExpression(setFieldValueIdentifier, undefined, [
454-
dataApi === 'GraphQL'
455-
? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi)
456-
: getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
452+
getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi),
457453
]),
458454
),
459455
...setStateStatements,

packages/codegen-ui-react/lib/forms/react-form-renderer.ts

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -591,12 +591,12 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
591591

592592
// Add value state and ref array type fields in ArrayField wrapper
593593

594-
const relatedModelNames: Set<string> = new Set();
594+
const relatedModelNames: Map<string, { relatedModelName: string; fieldName: string }> = new Map();
595595

596596
Object.entries(formMetadata.fieldConfigs).forEach(([field, fieldConfig]) => {
597597
const { sanitizedFieldName, componentType, dataType, relationship } = fieldConfig;
598+
const renderedName = sanitizedFieldName || field;
598599
if (shouldWrapInArrayField(fieldConfig)) {
599-
const renderedName = sanitizedFieldName || field;
600600
if (fieldConfig.relationship) {
601601
statements.push(
602602
buildUseStateExpression(
@@ -636,7 +636,10 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
636636
}
637637

638638
if (relationship && !relatedModelNames.has(relationship.relatedModelName)) {
639-
relatedModelNames.add(relationship.relatedModelName);
639+
relatedModelNames.set(relationship.relatedModelName, {
640+
relatedModelName: relationship.relatedModelName,
641+
fieldName: renderedName,
642+
});
640643
}
641644
});
642645

@@ -673,8 +676,14 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
673676
this.importCollection.addMappedImport(ImportValue.USE_DATA_STORE_BINDING);
674677

675678
statements.push(
676-
...[...relatedModelNames].map((relatedModelName) =>
677-
buildRelationshipQuery(relatedModelName, this.importCollection, dataApi, this.renderConfig.dependencies),
679+
...[...relatedModelNames].map(([, { relatedModelName, fieldName }]) =>
680+
buildRelationshipQuery(
681+
relatedModelName,
682+
this.importCollection,
683+
fieldName,
684+
dataApi,
685+
this.renderConfig.dependencies,
686+
),
678687
),
679688
);
680689
}

0 commit comments

Comments
 (0)