From 5c3048bc9693b3a0401f571060376d9d5d179249 Mon Sep 17 00:00:00 2001
From: David McAfee <mcafd@amazon.com>
Date: Wed, 22 Mar 2023 16:45:33 -0700
Subject: [PATCH 1/3] fix(data): replace broken JS example with a working React
 Native example (5257)

---
 .../datastore/native_common/data-access.mdx   |  2 +-
 .../data-access/observe-update-snippet.mdx    | 81 +++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx

diff --git a/src/fragments/lib/datastore/native_common/data-access.mdx b/src/fragments/lib/datastore/native_common/data-access.mdx
index 5264181f306..f6cfebc90c6 100644
--- a/src/fragments/lib/datastore/native_common/data-access.mdx
+++ b/src/fragments/lib/datastore/native_common/data-access.mdx
@@ -64,7 +64,7 @@ import js_observe_update from "/src/fragments/lib/datastore/js/data-access/obser
 
 <Fragments fragments={{js: js_observe_update}} />
 
-import reactnative2 from "/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx";
+import reactnative2 from "/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx";
 
 <Fragments fragments={{'react-native': reactnative2}} />
 
diff --git a/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx b/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx
new file mode 100644
index 00000000000..d95325aa436
--- /dev/null
+++ b/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx
@@ -0,0 +1,81 @@
+```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.
+
+const App = () => {
+  const [post, setPost] = useState();
+
+  useEffect(() => {
+    /**
+     * This keeps `post` fresh.
+     */
+    const sub = DataStore.observeQuery(Post, (c) =>
+      c.id.eq('5a3b284c-8afc-436a-9027-c8c32bfc8ed2')
+    ).subscribe(({ items }) => {
+      setPost(items[0]);
+    });
+
+    return () => {
+      sub.unsubscribe();
+    };
+  }, []);
+
+  /**
+   * 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
+      })
+    );
+
+    console.log(_post);
+    setPost(_post);
+  }
+
+  return (
+    <SafeAreaView>
+      <StatusBar />
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        <View>
+          <Text>{post?.title}</Text>
+          <Button onPress={onCreate} title={'New Post'} />
+          <TextInput
+            disabled={!post}
+            value={post?.name ?? ''}
+            onChangeText={(text) => {
+              /**
+               * Each keypress updates the post in local React state.
+               */
+              setPost(
+                Post.copyOf(post, (draft) => {
+                  draft.title = text;
+                })
+              );
+            }}
+          />
+          <Button
+            disabled={!post}
+            title={'Save'}
+            onPress={async () => {
+              /**
+               * This post is already up-to-date because `observeQuery` updated it.
+               */
+              if (!post) {
+                return;
+              }
+              const savedPost = await DataStore.save(post);
+              console.log('Post saved: ', savedPost);
+            }}
+          />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+```

From 25da6537fa5107d5ef1ea5aaf5de964fc8351bd2 Mon Sep 17 00:00:00 2001
From: David McAfee <mcafd@amazon.com>
Date: Wed, 22 Mar 2023 16:49:04 -0700
Subject: [PATCH 2/3] fix(data): fix JS example typos

---
 .../js/data-access/observe-update-snippet.mdx | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx b/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx
index 070309c7ac9..c0f8dfb51a4 100644
--- a/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx
+++ b/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx
@@ -9,10 +9,10 @@ function App() {
 
   useEffect(() => {
     /**
-     * This keeps `todo` fresh.
+     * This keeps `post` fresh.
      */
     const sub = DataStore.observeQuery(Post, (c) =>
-      c.id.eq("e4dd1dc5-e85c-4566-8aaa-54a801396456")
+      c.id.eq('e4dd1dc5-e85c-4566-8aaa-54a801396456')
     ).subscribe(({ items }) => {
       setPost(items[0]);
     });
@@ -23,27 +23,27 @@ 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);
-	}
+   * 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 type="button" value="NEW POST" onClick={onCreate} />
       <input
         disabled={!post}
         type="text"
-        value={post?.title ?? ""}
+        value={post?.title ?? ''}
         onChange={({ target: { value } }) => {
           /**
            * Each keypress updates the post in local React state.
@@ -65,10 +65,10 @@ function App() {
            */
           if (!post) return;
           await DataStore.save(post);
-          console.log("Post saved");
+          console.log('Post saved');
         }}
       />
     </>
   );
 }
-```
\ No newline at end of file
+```

From 4791e99a03442b44e8e19945ddabe4c6c7328127 Mon Sep 17 00:00:00 2001
From: David McAfee <mcafd@amazon.com>
Date: Thu, 23 Mar 2023 10:28:01 -0700
Subject: [PATCH 3/3] address PR feedback

---
 .../react-native/data-access/observe-update-snippet.mdx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx b/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx
index d95325aa436..42447c9d86e 100644
--- a/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx
+++ b/src/fragments/lib/datastore/react-native/data-access/observe-update-snippet.mdx
@@ -34,7 +34,6 @@ const App = () => {
       })
     );
 
-    console.log(_post);
     setPost(_post);
   }