feat(data): add TypeScript examples to DataStore docs; fix broken examples; fix syntax errors (#5155)

* feat(data): add TypeScript code examples

* add additional samples; fix errors

* more samples

* add relational examples

* add sync examples

* minor fixes

* fix typo

* minor fixes

* fix existing code snippet bug for relational models

* example updates

* fix(data): fix for #5156

* fix(data): fix for TS conflict handler issue: aws-amplify/amplify-js#11006

* feat(data): update PR template with E2E test check for code examples

* fix(data): fix DataStore 'update with predicate' example. Fixes #5231

* fix(data): simplify random number generation in docs examples

* ts docs updates

* updates

* add async / await to examples

Author: david-mcafee

.github/PULL_REQUEST_TEMPLATE.md

@@ -30,10 +30,10 @@ Which platform(s) are affected by this PR (if applicable)?
 
 - [ ] Are any files being deleted with this PR? If so, have the needed redirects been created?
 
-- [ ] Are all links in MDX files using the MDX link syntax rather than HTML link syntax? <br />
-      _ref: MDX: `[link](https://link.com)`
+- [ ] Are all links in MDX files using the MDX link syntax rather than HTML link syntax? <br /> 
+      _ref: MDX: `[link](https://link.com)` 
             HTML: `<a href="https://link.com">link</a>`_
-            
+
 ### When this PR is ready to merge, please check the box below
 - [ ] Ready to merge
 

src/fragments/lib/datastore/js/conflict.mdx

@@ -6,6 +6,42 @@ Finally you can configure the number of records to sync as an upper bound on ite
 
 The code below illustrates a conflict resolution handler for the `Post` model that retries a mutation with the same title, but the most recent remote data for all other fields. The conflict resolution handler discards conflicts for all other models (by returning the `DISCARD` symbol imported from `@aws-amplify/datastore`).
 
+<BlockSwitcher>
+<Block name="TypeScript">
+
+```ts
+import {
+  DISCARD,
+  PersistentModelConstructor,
+} from "@aws-amplify/datastore";
+
+DataStore.configure({
+  errorHandler: (error) => {
+    console.warn("Unrecoverable error", { error });
+  },
+  conflictHandler: async (data) => {
+    // Example conflict handler
+    if (data.modelConstructor as PersistentModelConstructor<Todo> === Todo) {
+      const remoteModel = data.remoteModel as Todo;
+      const localModel = data.localModel as Todo;
+      
+      const newModel = Todo.copyOf(remoteModel, (d) => {
+        d.name = localModel.name;
+      });
+      
+      return newModel;
+    }
+
+    return DISCARD;
+  },
+  maxRecordsToSync: 30000,
+  fullSyncInterval: 60, // minutes
+});
+```
+
+</Block>
+<Block name="JavaScript">
+
 ```js
 import { DISCARD } from "@aws-amplify/datastore";
 
@@ -15,7 +51,6 @@ DataStore.configure({
   },
   conflictHandler: async (data) => {
     // Example conflict handler
-
     const modelConstructor = data.modelConstructor;
     if (modelConstructor === Post) {
       const remoteModel = data.remoteModel;
@@ -32,3 +67,6 @@ DataStore.configure({
   fullSyncInterval: 60, // minutes
 });
 ```
+
+</Block>
+</BlockSwitcher>

src/fragments/lib/datastore/js/data-access/delete-snippet.mdx

@@ -1,8 +1,25 @@
+<BlockSwitcher>
+<Block name="TypeScript">
+
+```ts
+const toDelete = await DataStore.query(Post, '1234567');
+if (toDelete) {
+  DataStore.delete(toDelete);
+}
+```
+
+</Block>
+<Block name="JavaScript">
+
 ```js
-const todelete = await DataStore.query(Post, '1234567');
-DataStore.delete(todelete);
+const toDelete = await DataStore.query(Post, '1234567');
+DataStore.delete(toDelete);
 ```
 
+</Block>
+</BlockSwitcher>
+
+
 You can also pass predicate operators to delete multiple items. For example, the following will delete all draft posts:
 
 ```js
@@ -11,13 +28,30 @@ await DataStore.delete(Post, (post) => post.status.eq(PostStatus.INACTIVE));
 
 Additionally, you can perform a conditional delete. For instance, only delete **if** a post is in draft status by passing in an instance of a model:
 
+<BlockSwitcher>
+<Block name="TypeScript">
+
+```ts
+const toDelete = await DataStore.query(Post, '123');
+if (toDelete) {
+  DataStore.delete(toDelete, (post) => post.status.eq(PostStatus.INACTIVE));
+}
+``` 
+
+</Block>
+<Block name="JavaScript">
+
 ```js
 const todelete = await DataStore.query(Post, '123');
 DataStore.delete(todelete, (post) => post.status.eq(PostStatus.INACTIVE));
 ```
 
+</Block>
+</BlockSwitcher>
+
+
 Also, to delete all items for a model you can use `Predicates.ALL`:
 
 ```js
 await DataStore.delete(Post, Predicates.ALL);
-```
+```

src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx

@@ -1,11 +1,11 @@
-```ts
+```js
 // Example showing how to observe the model and keep state updated before
 // performing a save. This uses the useEffect React hook, but you can
 // substitute for a similar mechanism in your application lifecycle with
 // other frameworks.
 
 function App() {
-  const [post, setPost] = useState<Post>();
+  const [post, setPost] = useState();
 
   useEffect(() => {
     /**
@@ -22,31 +22,49 @@ function App() {
     };
   }, []);
 
+  /**
+	* Create a new Post
+	*/
+	async function onCreate() {
+		const post = await DataStore.save(
+			new Post({
+				title: `New title ${Date.now()}`,
+				rating: Math.floor(Math.random() * (8 - 1) + 1),
+				status: PostStatus.ACTIVE,
+			})
+		);
+		setPost(post);
+	}
+
   return (
     <>
       <h1>{post?.title}</h1>
+      <input type="button" value="NEW TODO" onClick={onCreate} />
       <input
+        disabled={!post}
         type="text"
         value={post?.title ?? ""}
         onChange={({ target: { value } }) => {
           /**
            * Each keypress updates the post in local React state.
            */
           setPost(
-            Post.copyOf(post!, (draft) => {
+            Post.copyOf(post, (draft) => {
               draft.title = value;
             })
           );
         }}
       />
       <input
+        disabled={!post}
         type="button"
         value="Save"
         onClick={async () => {
           /**
            * This post is already up-to-date because `observeQuery` updated it.
            */
-          await DataStore.save(post!);
+          if (!post) return;
+          await DataStore.save(post);
           console.log("Post saved");
         }}
       />

src/fragments/lib/datastore/js/data-access/query-pagination-snippet.mdx

@@ -3,4 +3,4 @@ const posts = await DataStore.query(Post, Predicates.ALL, {
   page: 0,
   limit: 100
 });
-```
+```

src/fragments/lib/datastore/js/data-access/query-predicate-multiple-snippet.mdx

@@ -5,4 +5,4 @@ const posts = await DataStore.query(Post, (c) => c.and(c => [
   c.rating.gt(4),
   c.status.eq(PostStatus.ACTIVE)
 ]));
-```
+```

src/fragments/lib/datastore/js/data-access/query-predicate-or-snippet.mdx

@@ -6,4 +6,4 @@ const posts = await DataStore.query(Post, (c) =>
     c.rating.gt(4),
     c.status.eq(PostStatus.ACTIVE)
   ]));
-```
+```

src/fragments/lib/datastore/js/data-access/query-predicate-snippet.mdx

@@ -1,3 +1,3 @@
 ```js
-const posts = await DataStore.query(Post, c => c.rating.gt(4));
+const posts = await DataStore.query(Post, (c) => c.rating.gt(4));
 ```

src/fragments/lib/datastore/js/data-access/query-sort-multiple-snippet.mdx

@@ -1,5 +1,5 @@
 ```js
 const posts = await DataStore.query(Post, Predicates.ALL, {
-  sort: s => s.rating(SortDirection.ASCENDING).title(SortDirection.DESCENDING)
+  sort: (s) => s.rating(SortDirection.ASCENDING).title(SortDirection.DESCENDING)
 });
 ```

src/fragments/lib/datastore/js/data-access/query-sort-snippet.mdx

@@ -1,5 +1,5 @@
 ```js
 const posts = await DataStore.query(Post, Predicates.ALL, {
-  sort: s => s.rating(SortDirection.ASCENDING)
+  sort: (s) => s.rating(SortDirection.ASCENDING)
 });
 ```