Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support type casting for DataStore hooks #460

Merged
merged 1 commit into from
Apr 13, 2022
Merged

feat: support type casting for DataStore hooks #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
useDataStoreCreateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type CreateCustomerButtonProps = React.PropsWithChildren<
Expand All @@ -24,6 +25,7 @@ export default function CreateCustomerButton(
const createCustomerButtonOnClick = useDataStoreCreateAction({
model: Customer,
fields: { firstName: \\"Din\\", lastName: \\"Djarin\\" },
schema: schema,
});
return (
/* @ts-ignore: TS2322 */
Expand Down Expand Up @@ -53,6 +55,7 @@ import {
useDataStoreDeleteAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type DeleteCustomerButtonProps = React.PropsWithChildren<
Expand All @@ -67,6 +70,7 @@ export default function DeleteCustomerButton(
const deleteCustomerButtonOnClick = useDataStoreDeleteAction({
model: Customer,
id: \\"d9887268-47dd-4899-9568-db5809218751\\",
schema: schema,
});
return (
/* @ts-ignore: TS2322 */
Expand Down Expand Up @@ -96,6 +100,7 @@ import {
useDataStoreUpdateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type UpdateCustomerButtonProps = React.PropsWithChildren<
Expand All @@ -111,6 +116,7 @@ export default function UpdateCustomerButton(
model: Customer,
id: \\"d9887268-47dd-4899-9568-db5809218751\\",
fields: { firstName: \\"Din\\", lastName: \\"Djarin\\" },
schema: schema,
});
return (
/* @ts-ignore: TS2322 */
Expand Down Expand Up @@ -503,6 +509,7 @@ import {
useDataStoreCreateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export type ComponentWithAuthEventBindingProps = React.PropsWithChildren<
Expand All @@ -521,6 +528,7 @@ export default function ComponentWithAuthEventBinding(
userName: authAttributes[\\"username\\"],
favoriteIceCream: authAttributes[\\"custom:favorite_icecream\\"],
},
schema: schema,
});
return (
/* @ts-ignore: TS2322 */
Expand Down Expand Up @@ -5473,6 +5481,7 @@ import {
useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, Flex, FlexProps, TextField } from \\"@aws-amplify/ui-react\\";

export type MyFormProps = React.PropsWithChildren<
Expand All @@ -5488,6 +5497,7 @@ export default function MyForm(props: MyFormProps): React.ReactElement {
model: Customer,
id: \\"d9887268-47dd-4899-9568-db5809218751\\",
fields: { username: usernameTextFieldValue },
schema: schema,
});
return (
/* @ts-ignore: TS2322 */
Expand Down
1 change: 1 addition & 0 deletions packages/codegen-ui-react/lib/imports/import-mapping.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export enum ImportSource {
UI_REACT_INTERNAL = '@aws-amplify/ui-react/internal',
AMPLIFY_DATASTORE = '@aws-amplify/datastore',
LOCAL_MODELS = '../models',
LOCAL_SCHEMA = '../models/schema',
}

export enum ImportValue {
Expand Down
32 changes: 22 additions & 10 deletions packages/codegen-ui-react/lib/workflow/action.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@ export const ActionNameMapping: Partial<Record<Action, ImportValue>> = {
[Action['Amplify.Mutation']]: ImportValue.USE_STATE_MUTATION_ACTION,
};

const DataStoreActions = new Set([
Action['Amplify.DataStoreCreateItemAction'],
Action['Amplify.DataStoreDeleteItemAction'],
Action['Amplify.DataStoreUpdateItemAction'],
]);

function isMutationAction(action: ActionStudioComponentEvent): action is MutationAction {
return (action.action as Action) === Action['Amplify.Mutation'];
}
Expand Down Expand Up @@ -172,22 +178,28 @@ export function buildActionArguments(
importCollection: ImportCollection,
): ObjectLiteralExpression[] | undefined {
if (action.parameters) {
return [
factory.createObjectLiteralExpression(
Object.entries(action.parameters).map(([key, value]) =>
factory.createPropertyAssignment(
factory.createIdentifier(key),
getActionParameterValue(componentMetadata, key, value, importCollection),
),
),
false,
const properties = Object.entries(action.parameters).map(([key, value]) =>
factory.createPropertyAssignment(
factory.createIdentifier(key),
getActionParameterValue(componentMetadata, key, value, importCollection),
),
];
);

if (DataStoreActions.has(action.action as Action)) {
addSchemaToArguments(properties, importCollection);
}
return [factory.createObjectLiteralExpression(properties, false)];
}

return undefined;
}

export function addSchemaToArguments(properties: ts.PropertyAssignment[], importCollection: ImportCollection) {
const SCHEMA = 'schema';
properties.push(factory.createPropertyAssignment(factory.createIdentifier(SCHEMA), factory.createIdentifier(SCHEMA)));
importCollection.addImport(ImportSource.LOCAL_SCHEMA, SCHEMA);
}

export function getActionParameterValue(
componentMetadata: ComponentMetadata,
key: string,
Expand Down
19 changes: 11 additions & 8 deletions packages/test-generator/integration-test-templates/cypress/integration/workflow-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,18 +167,21 @@ describe('Workflow', () => {
});

describe('DataStore', () => {
it('supports creating a datastore item', () => {
cy.get('#user-collection').contains('Din Djarin').should('not.exist');
it('supports creating a datastore item, type-casting scalar values', () => {
const expected = 'Din Djarin | age: 200 | isLoggedIn: true';
cy.get('#user-collection').contains(expected).should('not.exist');
cy.get('#create-item').click();
cy.get('#user-collection').contains('Din Djarin');
cy.get('#user-collection').contains(expected);
});

it('supports updating a datastore item', () => {
cy.get('#user-collection').contains('UpdateMe Me');
cy.get('#user-collection').contains('Moff Gideon').should('not.exist');
it('supports updating a datastore item, type-casting scalar values', () => {
const before = 'UpdateMe Me';
const after = 'Moff Gideon | age: 200 | isLoggedIn: true';
cy.get('#user-collection').contains(before);
cy.get('#user-collection').contains(after).should('not.exist');
cy.get('#update-item').click();
cy.get('#user-collection').contains('UpdateMe Me').should('not.exist');
cy.get('#user-collection').contains('Moff Gideon');
cy.get('#user-collection').contains(before).should('not.exist');
cy.get('#user-collection').contains(after);
});

it('supports deleting a datastore item', () => {
Expand Down
8 changes: 7 additions & 1 deletion packages/test-generator/integration-test-templates/src/ComponentTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
import { useEffect, useState } from 'react';
import { useEffect, useState, useRef } from 'react';
import { AmplifyProvider } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { DataStore } from 'aws-amplify';
Expand Down Expand Up @@ -128,8 +128,13 @@ const initializeListingTestData = async (): Promise<void> => {

export default function ComponentTests() {
const [isInitialized, setInitialized] = useState(false);
const initializeStarted = useRef(false);

useEffect(() => {
const initializeTestUserData = async () => {
if (initializeStarted.current) {
return;
}
// DataStore.clear() doesn't appear to reliably work in this scenario.
indexedDB.deleteDatabase('amplify-datastore');
await Promise.all([initializeUserTestData(), initializeListingTestData()]);
Expand All @@ -142,6 +147,7 @@ export default function ComponentTests() {
};

initializeTestUserData();
initializeStarted.current = true;
}, []);

if (!isInitialized) {
Expand Down
34 changes: 21 additions & 13 deletions packages/test-generator/integration-test-templates/src/WorkflowTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
import { useState, SyntheticEvent, useEffect } from 'react';
import { useState, SyntheticEvent, useEffect, useRef } from 'react';
import '@aws-amplify/ui-react/styles.css';
import { AmplifyProvider, View, Heading, Divider, Button } from '@aws-amplify/ui-react';
import { Hub } from 'aws-amplify';
Expand Down Expand Up @@ -61,6 +61,7 @@ export default function ComplexTests() {
const [hasDisappeared, setDisappeared] = useState(false);
const [authState, setAuthState] = useState<AuthState>('LoggedIn');
const [formIdToUpdate, setFormIdToUpdate] = useState('');
const initializeStarted = useRef(false);

const initializeUserTestData = async (): Promise<void> => {
await DataStore.save(new User({ firstName: 'DeleteMe', lastName: 'Me' }));
Expand Down Expand Up @@ -88,22 +89,29 @@ export default function ComplexTests() {

useEffect(() => {
const initializeTestState = async () => {
if (initializeStarted.current) {
return;
}
// DataStore.clear() doesn't appear to reliably work in this scenario.
indexedDB.deleteDatabase('amplify-datastore');
await initializeUserTestData();
const queriedIdToDelete = (await DataStore.query(User, (criteria) => criteria.firstName('eq', 'DeleteMe')))[0].id;
setIdToDelete(queriedIdToDelete);
const queriedIdToUpdate = (await DataStore.query(User, (criteria) => criteria.firstName('eq', 'UpdateMe')))[0].id;
setIdToUpdate(queriedIdToUpdate);
const queriedFormIdToUpdate = (
await DataStore.query(User, (criteria) => criteria.firstName('eq', 'FormUpdate'))
)[0].id;
setFormIdToUpdate(queriedFormIdToUpdate);
initializeAuthListener();
setInitialized(true);
indexedDB.deleteDatabase('amplify-datastore').onsuccess = async function () {
await initializeUserTestData();
const queriedIdToDelete = (await DataStore.query(User, (criteria) => criteria.firstName('eq', 'DeleteMe')))[0]
.id;
setIdToDelete(queriedIdToDelete);
const queriedIdToUpdate = (await DataStore.query(User, (criteria) => criteria.firstName('eq', 'UpdateMe')))[0]
.id;
setIdToUpdate(queriedIdToUpdate);
const queriedFormIdToUpdate = (
await DataStore.query(User, (criteria) => criteria.firstName('eq', 'FormUpdate'))
)[0].id;
setFormIdToUpdate(queriedFormIdToUpdate);
initializeAuthListener();
setInitialized(true);
};
};

initializeTestState();
initializeStarted.current = true;
}, []);

const complexModels = useDataStoreBinding({
Expand Down
18 changes: 18 additions & 0 deletions packages/test-generator/lib/components/collections/simpleUserCollection.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,24 @@
"property": "user",
"field": "lastName"
}
},
{
"value": " | age: "
},
{
"collectionBindingProperties": {
"property": "user",
"field": "age"
}
},
{
"value": " | isLoggedIn: "
},
{
"collectionBindingProperties": {
"property": "user",
"field": "isLoggedIn"
}
}
]
}
Expand Down
12 changes: 12 additions & 0 deletions packages/test-generator/lib/components/workflow/dataStoreActions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
},
"lastName": {
"value": "Djarin"
},
"isLoggedIn": {
"value": "true"
},
"age": {
"value": "200"
}
}
}
Expand Down Expand Up @@ -66,6 +72,12 @@
},
"lastName": {
"value": "Gideon"
},
"isLoggedIn": {
"value": "true"
},
"age": {
"value": "200"
}
}
}
Expand Down