Example application

1import React, { useEffect } from "react";
2import logo from "./logo.svg";
3import "./App.css";
4
5import { Amplify } from 'aws-amplify'
6import { DataStore, Predicates } from "aws-amplify/datastore";
7import { Post, PostStatus } from "./models";
8
9// Use next two lines only if syncing with the cloud
10import amplifyconfig from "./amplifyconfiguration";
11Amplify.configure(amplifyconfig);
12
13async function onCreate() {
14  await DataStore.save(
15    new Post({
16      title: `New title ${Date.now()}`,
17      rating: Math.floor(Math.random() * (8 - 1) + 1),
18      status: PostStatus.ACTIVE,
19    })
20  );
21}
22
23async function onDeleteAll() {
24  await DataStore.delete(Post, Predicates.ALL);
25}
26
27async function onQuery() {
28  const posts = await DataStore.query(Post, (c) => c.rating.gt(4));
29
30  console.log(posts);
31}
32
33function App() {
34  useEffect(() => {
35    const subscription = DataStore.observe(Post).subscribe((msg) => {
36      console.log(msg.model, msg.opType, msg.element);
37    });
38
39    return () => subscription.unsubscribe();
40  }, []);
41
42  return (
43    <div className="App">
44      <header className="App-header">
45        <img src={logo} className="App-logo" alt="logo" />
46        <div>
47          <input type="button" value="NEW" onClick={onCreate} />
48          <input type="button" value="DELETE ALL" onClick={onDeleteAll} />
49          <input type="button" value="QUERY rating > 4" onClick={onQuery} />
50        </div>
51        <p>
52          Edit <code>src/App.js</code> and save to reload.
53        </p>
54        <a
55          className="App-link"
56          href="https://reactjs.org"
57          target="_blank"
58          rel="noopener noreferrer"
59        >
60          Learn React
61        </a>
62      </header>
63    </div>
64  );
65}
66
67export default App;