blog.html


<html>
    <head>
        <title>Stitch Blog Example</title>
        <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.3.1/stitch.js"></script>
    </head>
    <body onload="displayCommentsOnLoad()">
      <h3>This is a great blog post</h3>
      <div id="content">
        I like to write about technology because I want to get on the
        front page of hacker news.
      </div>
      <hr>
      <div id="comments"></div>
      
      Add comment:
      <input id="new_comment"><input type="submit" onClick="addComment()">
      <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.3.1/stitch.js"></script>
      
      <script>
              // Initialize the App Client
              const client = stitch.Stitch.initializeDefaultAppClient("nycblog2-uqedx");
              // Get a MongoDB Service Client
              const mongodb = client.getServiceClient(
                stitch.RemoteMongoClient.factory,
                "mongodb-atlas"
              );
              // Get a reference to the blog database
              const db = mongodb.db("nycblog");
  
              function addComment() {
              const newComment = document.getElementById("new_comment");
                  console.log("add comment", client.auth.user.id)
                  db.collection("comments")
                  .insertOne({ owner_id : client.auth.user.id, comment: newComment.value })
                  .then(displayComments);
                  newComment.value = "";
              }
  
              function displayCommentsOnLoad() {
                  client.auth
                      .loginWithCredential(new stitch.AnonymousCredential())
                      .then(displayComments)
                      .catch(console.error);
              }
  
              function displayComments() {
              db.collection("comments")
                  .find({}, {limit: 1000})
                  .toArray()
                  .then(docs => {
                  const html = docs.map(doc => `<div>${doc.comment}</div>`);
                  document.getElementById("comments").innerHTML = html;
                  });
              }
      </script>
    </body>
  </html>