Simple Kinvey Data Store Example

by remotesynth

HTML

<script src="https://da189i1jfloii.cloudfront.net/js/kinvey-html5-sdk-3.10.2.min.js"></script>
<ul id="allEmployees">

</ul>

CSS

* {margin: 0; padding: 0;}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Helvetica, Verdana, sans-serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

JavaScript

const client = Kinvey.init({
  appKey: 'kid_HyHDjW6nz',
  appSecret: '5dad0a434cbf40549ff926c577403e54'
});

const activeUser = Kinvey.User.getActiveUser(client);

function loadDataStore() {
  const dataStore = Kinvey.DataStore.collection('employees');
  const stream = dataStore.find();
  stream.subscribe(
    (employees) => {
      console.log('data retrieved');
      const el = document.getElementById('allEmployees');
      el.innerHTML = '';
      employees.forEach((employee) => {
        el.innerHTML += `
          <li>
            <img src="https://raw.githubusercontent.com/remotesynth/kinvey-data-connect-sample/master/images${employee.photo}">
            <h3>${employee.name}</h3>
            <p>Status: ${employee.status}</p>
          </li>`;
      });
    },
    (error) => {
      console.log(error);
    }
  );
}

if (!activeUser) {
  Kinvey.User.signup()
    .then(() => {
      loadDataStore();
    })
    .catch((error) => {
      console.log(error);
    });
} else {
  loadDataStore();
}