fix(data): replace broken JS example with a working React Native example (5257) (#5283)

* fix(data): replace broken JS example with a working React Native example (5257)

* fix(data): fix JS example typos

* address PR feedback

Author: david-mcafee

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');
         }}
       />
     </>
   );
 }
-```
+```

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}} />
 

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

@@ -0,0 +1,80 @@
+```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
+      })
+    );
+
+    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>
+  );
+};
+```