Skip to content

Commit

Permalink
fix: add missing support for GraphQL collections without pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@awinberg-aws
awinberg-aws committed Sep 6, 2023
1 parent 96e6df6 commit 19f3e5f
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 62 deletions.
51 changes: 34 additions & 17 deletions packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -913,6 +913,7 @@ export default function AuthorProfileCollection(
const [loading, setLoading] = React.useState(true);
const [maxViewed, setMaxViewed] = React.useState(1);
const pageSize = 8;
const isPaginated = false;
React.useEffect(() => {
nextToken[instanceKey] = \\"\\";
apiCache[instanceKey] = [];
Expand All @@ -933,7 +934,7 @@ export default function AuthorProfileCollection(
const cacheUntil = page * pageSize + 1;
const newCache = apiCache[instanceKey].slice();
let newNext = nextToken[instanceKey];
while (newCache.length < cacheUntil && newNext != null) {
while ((newCache.length < cacheUntil || !isPaginated) && newNext != null) {
setLoading(true);
const variables: any = {
limit: pageSize,
Expand All @@ -950,7 +951,9 @@ export default function AuthorProfileCollection(
newCache.push(...result.items);
newNext = result.nextToken;
}
const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
const cacheSlice = isPaginated
? newCache.slice((page - 1) * pageSize, page * pageSize)
: newCache;
setItems(cacheSlice);
setHasMorePages(!!newNext);
setLoading(false);
Expand All @@ -973,6 +976,7 @@ export default function AuthorProfileCollection(
alignItems=\\"stretch\\"
justifyContent=\\"stretch\\"
itemsPerPage={pageSize}
isPaginated={!isApiPagination && isPaginated}
items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
{...getOverrideProps(overrides, \\"AuthorProfileCollection\\")}
{...rest}
Expand All @@ -990,7 +994,7 @@ export default function AuthorProfileCollection(
);
}}
</Collection>
{isApiPagination && (
{isApiPagination && isPaginated && (
<Pagination
currentPage={pageIndex}
totalPages={maxViewed}
Expand Down Expand Up @@ -1075,6 +1079,7 @@ export default function CollectionOfCustomButtons(
const [loading, setLoading] = React.useState(true);
const [maxViewed, setMaxViewed] = React.useState(1);
const pageSize = 6;
const isPaginated = true;
React.useEffect(() => {
nextToken[instanceKey] = \\"\\";
apiCache[instanceKey] = [];
Expand All @@ -1095,7 +1100,7 @@ export default function CollectionOfCustomButtons(
const cacheUntil = page * pageSize + 1;
const newCache = apiCache[instanceKey].slice();
let newNext = nextToken[instanceKey];
while (newCache.length < cacheUntil && newNext != null) {
while ((newCache.length < cacheUntil || !isPaginated) && newNext != null) {
setLoading(true);
const variables: any = {
limit: pageSize,
Expand Down Expand Up @@ -1124,7 +1129,9 @@ export default function CollectionOfCustomButtons(
newCache.push(...result.items);
newNext = result.nextToken;
}
const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
const cacheSlice = isPaginated
? newCache.slice((page - 1) * pageSize, page * pageSize)
: newCache;
setItems(cacheSlice);
setHasMorePages(!!newNext);
setLoading(false);
Expand Down Expand Up @@ -1160,10 +1167,10 @@ export default function CollectionOfCustomButtons(
<div>
<Collection
type=\\"list\\"
isPaginated={!isApiPagination}
gap=\\"1.5rem\\"
backgroundColor={backgroundColor}
itemsPerPage={pageSize}
isPaginated={!isApiPagination && isPaginated}
items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
{...getOverrideProps(overrides, \\"CollectionOfCustomButtons\\")}
{...rest}
Expand All @@ -1188,7 +1195,7 @@ export default function CollectionOfCustomButtons(
);
}}
</Collection>
{isApiPagination && (
{isApiPagination && isPaginated && (
<Pagination
currentPage={pageIndex}
totalPages={maxViewed}
Expand Down Expand Up @@ -1253,6 +1260,7 @@ export default function ListingCardCollection(
const [loading, setLoading] = React.useState(true);
const [maxViewed, setMaxViewed] = React.useState(1);
const pageSize = 6;
const isPaginated = true;
React.useEffect(() => {
nextToken[instanceKey] = \\"\\";
apiCache[instanceKey] = [];
Expand All @@ -1273,7 +1281,7 @@ export default function ListingCardCollection(
const cacheUntil = page * pageSize + 1;
const newCache = apiCache[instanceKey].slice();
let newNext = nextToken[instanceKey];
while (newCache.length < cacheUntil && newNext != null) {
while ((newCache.length < cacheUntil || !isPaginated) && newNext != null) {
setLoading(true);
const variables: any = {
limit: pageSize,
Expand All @@ -1290,7 +1298,9 @@ export default function ListingCardCollection(
newCache.push(...result.items);
newNext = result.nextToken;
}
const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
const cacheSlice = isPaginated
? newCache.slice((page - 1) * pageSize, page * pageSize)
: newCache;
setItems(cacheSlice);
setHasMorePages(!!newNext);
setLoading(false);
Expand All @@ -1307,12 +1317,12 @@ export default function ListingCardCollection(
/* @ts-ignore: TS2322 */
<div>
<Collection
isPaginated={!isApiPagination}
collectionType=\\"grid\\"
type=\\"list\\"
columns=\\"2\\"
order=\\"left-to-right\\"
itemsPerPage={pageSize}
isPaginated={!isApiPagination && isPaginated}
items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
{...getOverrideProps(overrides, \\"ListingCardCollection\\")}
{...rest}
Expand All @@ -1333,7 +1343,7 @@ export default function ListingCardCollection(
);
}}
</Collection>
{isApiPagination && (
{isApiPagination && isPaginated && (
<Pagination
currentPage={pageIndex}
totalPages={maxViewed}
Expand Down Expand Up @@ -1397,6 +1407,7 @@ export default function ListingCardCollection(
const [loading, setLoading] = React.useState(true);
const [maxViewed, setMaxViewed] = React.useState(1);
const pageSize = 6;
const isPaginated = true;
React.useEffect(() => {
nextToken[instanceKey] = \\"\\";
apiCache[instanceKey] = [];
Expand All @@ -1417,7 +1428,9 @@ export default function ListingCardCollection(
const cacheUntil = page * pageSize + 1;
const newCache = apiCache[instanceKey].slice();
let newNext = nextToken[instanceKey];
const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
const cacheSlice = isPaginated
? newCache.slice((page - 1) * pageSize, page * pageSize)
: newCache;
setItems(cacheSlice);
setHasMorePages(!!newNext);
setLoading(false);
Expand All @@ -1435,8 +1448,8 @@ export default function ListingCardCollection(
<div>
<Collection
type=\\"list\\"
isPaginated={!isApiPagination}
itemsPerPage={pageSize}
isPaginated={!isApiPagination && isPaginated}
items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
{...getOverrideProps(overrides, \\"ListingCardCollection\\")}
{...rest}
Expand All @@ -1453,7 +1466,7 @@ export default function ListingCardCollection(
);
}}
</Collection>
{isApiPagination && (
{isApiPagination && isPaginated && (
<Pagination
currentPage={pageIndex}
totalPages={maxViewed}
Expand Down Expand Up @@ -1518,6 +1531,7 @@ export default function AuthorProfileCollection(
const [loading, setLoading] = React.useState(true);
const [maxViewed, setMaxViewed] = React.useState(1);
const pageSize = 8;
const isPaginated = false;
React.useEffect(() => {
nextToken[instanceKey] = \\"\\";
apiCache[instanceKey] = [];
Expand All @@ -1538,7 +1552,7 @@ export default function AuthorProfileCollection(
const cacheUntil = page * pageSize + 1;
const newCache = apiCache[instanceKey].slice();
let newNext = nextToken[instanceKey];
while (newCache.length < cacheUntil && newNext != null) {
while ((newCache.length < cacheUntil || !isPaginated) && newNext != null) {
setLoading(true);
const variables: any = {
limit: pageSize,
Expand All @@ -1555,7 +1569,9 @@ export default function AuthorProfileCollection(
newCache.push(...result.items);
newNext = result.nextToken;
}
const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
const cacheSlice = isPaginated
? newCache.slice((page - 1) * pageSize, page * pageSize)
: newCache;
setItems(cacheSlice);
setHasMorePages(!!newNext);
setLoading(false);
Expand All @@ -1578,6 +1594,7 @@ export default function AuthorProfileCollection(
alignItems=\\"stretch\\"
justifyContent=\\"stretch\\"
itemsPerPage={pageSize}
isPaginated={!isApiPagination && isPaginated}
items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
{...getOverrideProps(overrides, \\"AuthorProfileCollection\\")}
{...rest}
Expand All @@ -1595,7 +1612,7 @@ export default function AuthorProfileCollection(
);
}}
</Collection>
{isApiPagination && (
{isApiPagination && isPaginated && (
<Pagination
currentPage={pageIndex}
totalPages={maxViewed}
Expand Down
37 changes: 20 additions & 17 deletions packages/codegen-ui-react/lib/amplify-ui-renderers/collection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,22 +66,7 @@ export default class CollectionRenderer extends ReactComponentRenderer<BaseCompo
private renderCollectionOpeningElement(itemsVariableName?: string): JsxOpeningElement {
const propsArray = Object.entries(this.component.properties).reduce((acc: JsxAttribute[], [key, value]) => {
if (this.renderConfig.apiConfiguration?.dataApi === 'GraphQL') {
if (key === 'isPaginated') {
return [
...acc,
factory.createJsxAttribute(
factory.createIdentifier('isPaginated'),
factory.createJsxExpression(
undefined,
factory.createPrefixUnaryExpression(
ts.SyntaxKind.ExclamationToken,
factory.createIdentifier('isApiPagination'),
),
),
),
];
}
if (key === 'itemsPerPage') {
if (key === 'isPaginated' || key === 'itemsPerPage') {
return acc;
}
}
Expand All @@ -96,6 +81,20 @@ export default class CollectionRenderer extends ReactComponentRenderer<BaseCompo
factory.createIdentifier('itemsPerPage'),
factory.createJsxExpression(undefined, factory.createIdentifier('pageSize')),
),
factory.createJsxAttribute(
factory.createIdentifier('isPaginated'),
factory.createJsxExpression(
undefined,
factory.createBinaryExpression(
factory.createPrefixUnaryExpression(
ts.SyntaxKind.ExclamationToken,
factory.createIdentifier('isApiPagination'),
),
factory.createToken(ts.SyntaxKind.AmpersandAmpersandToken),
factory.createIdentifier('isPaginated'),
),
),
),
);

itemsAttribute = factory.createJsxAttribute(
Expand Down Expand Up @@ -322,7 +321,11 @@ export default class CollectionRenderer extends ReactComponentRenderer<BaseCompo
factory.createJsxExpression(
undefined,
factory.createBinaryExpression(
factory.createIdentifier('isApiPagination'),
factory.createBinaryExpression(
factory.createIdentifier('isApiPagination'),
factory.createToken(ts.SyntaxKind.AmpersandAmpersandToken),
factory.createIdentifier('isPaginated'),
),
factory.createToken(ts.SyntaxKind.AmpersandAmpersandToken),
factory.createJsxSelfClosingElement(
factory.createIdentifier('Pagination'),
Expand Down
79 changes: 51 additions & 28 deletions packages/codegen-ui-react/lib/react-studio-template-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1662,6 +1662,14 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
}
statements.push(buildInitConstVariableExpression('pageSize', factory.createNumericLiteral(pageSize)));

// const isPaginated = false;
let factoryMethodIsPaginatedValue: () => ts.TrueLiteral | ts.FalseLiteral = factory.createFalse;
if (isFixedPropertyWithValue(component.properties.isPaginated)) {
const isPaginated = Boolean(component.properties.isPaginated.value);
factoryMethodIsPaginatedValue = isPaginated ? factory.createTrue : factory.createFalse;
}
statements.push(buildInitConstVariableExpression('isPaginated', factoryMethodIsPaginatedValue()));

/*
React.useEffect(() => {
nextToken[instanceKey] = '';
Expand Down Expand Up @@ -1993,13 +2001,22 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
statements.push(
factory.createWhileStatement(
factory.createBinaryExpression(
factory.createBinaryExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier('newCache'),
factory.createIdentifier('length'),
factory.createParenthesizedExpression(
factory.createBinaryExpression(
factory.createBinaryExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier('newCache'),
factory.createIdentifier('length'),
),
factory.createToken(ts.SyntaxKind.LessThanToken),
factory.createIdentifier('cacheUntil'),
),
factory.createToken(ts.SyntaxKind.BarBarToken),
factory.createPrefixUnaryExpression(
ts.SyntaxKind.ExclamationToken,
factory.createIdentifier('isPaginated'),
),
),
factory.createToken(ts.SyntaxKind.LessThanToken),
factory.createIdentifier('cacheUntil'),
),
factory.createToken(ts.SyntaxKind.AmpersandAmpersandToken),
factory.createParenthesizedExpression(
Expand Down Expand Up @@ -2154,30 +2171,36 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
statements.push(
buildInitConstVariableExpression(
'cacheSlice',
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier('newCache'),
factory.createIdentifier('slice'),
),
undefined,
[
factory.createBinaryExpression(
factory.createParenthesizedExpression(
factory.createBinaryExpression(
factory.createIdentifier('page'),
factory.createToken(ts.SyntaxKind.MinusToken),
factory.createNumericLiteral('1'),
factory.createConditionalExpression(
factory.createIdentifier('isPaginated'),
factory.createToken(ts.SyntaxKind.QuestionToken),
factory.createCallExpression(
factory.createPropertyAccessExpression(
factory.createIdentifier('newCache'),
factory.createIdentifier('slice'),
),
undefined,
[
factory.createBinaryExpression(
factory.createParenthesizedExpression(
factory.createBinaryExpression(
factory.createIdentifier('page'),
factory.createToken(ts.SyntaxKind.MinusToken),
factory.createNumericLiteral('1'),
),
),
factory.createToken(ts.SyntaxKind.AsteriskToken),
factory.createIdentifier('pageSize'),
),
factory.createToken(ts.SyntaxKind.AsteriskToken),
factory.createIdentifier('pageSize'),
),
factory.createBinaryExpression(
factory.createIdentifier('page'),
factory.createToken(ts.SyntaxKind.AsteriskToken),
factory.createIdentifier('pageSize'),
),
],
factory.createBinaryExpression(
factory.createIdentifier('page'),
factory.createToken(ts.SyntaxKind.AsteriskToken),
factory.createIdentifier('pageSize'),
),
],
),
factory.createToken(ts.SyntaxKind.ColonToken),
factory.createIdentifier('newCache'),
),
),
);
Expand Down

0 comments on commit 19f3e5f

Please sign in to comment.