viniciusCamargo/index.html

## index.html
<html>
<header>
  <title>firestore realtime vanillajs</title>
</header>

<body>
  <h1>new message</h1>

  <div id="messages"></div>

  <form id="form">
    <label for="message">message</label>
    <input type="text" name="message" id="message" autocomplete="off" />

    <input type="submit" value="send">
  </form>

  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-storage.js"></script>
  <script src="index.js"></script>
</body>

</html>

## index.js
const config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
}

firebase.initializeApp(config)

const firestore = firebase.firestore()

firestore.settings({ timestampsInSnapshots: true })

const collection = firestore.collection('messages')

const set = (o) => {
  collection
    .add(o)
    .then((doc) => console.log('message sent'))
    .catch(console.error)
}

const realtimeQuery = (cb) => {
  collection
    .where('created_at', '>', new Date().getTime())
    .orderBy('created_at')
    .onSnapshot((snapshot) => {

      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          document.body.scrollIntoView(false)

          cb(change.doc.data())
        }
      })
    })
}

const addMessage = (message) => {
  const messages = document.querySelector('#messages')

  const str = `
    <div id=${message.id}>
      <h3>
        ${message.user} - ${new Date(message.created_at).toISOString()}
      </h3>
      <p>${message.message}</p>
    </div>
  `

  messages.insertAdjacentHTML('beforeend', str)
}

const form = document.querySelector('#form')

const inputText = document.querySelector('#message')

form.addEventListener('submit', (e) => {
  e.preventDefault()

  const message = inputText.value

  if (message) {
    set({
      message,
      user: 'vanillajs',
      created_at: new Date().getTime()
    })

    inputText.value = ''
  } else {
    throw new Error('empty message')
  }
})

realtimeQuery((message) => {
  console.log('new message', message)

  addMessage(message)
})
	<html>
	<header>
	<title>firestore realtime vanillajs</title>
	</header>

	<body>
	<h1>new message</h1>

	<div id="messages"></div>

	<form id="form">
	<label for="message">message</label>
	<input type="text" name="message" id="message" autocomplete="off" />

	<input type="submit" value="send">
	</form>

	<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-firestore.js"></script>
	<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-storage.js"></script>
	<script src="index.js"></script>
	</body>

	</html>
	const config = {
	apiKey: '',
	authDomain: '',
	databaseURL: '',
	projectId: '',
	storageBucket: '',
	messagingSenderId: ''
	}

	firebase.initializeApp(config)

	const firestore = firebase.firestore()

	firestore.settings({ timestampsInSnapshots: true })

	const collection = firestore.collection('messages')

	const set = (o) => {
	collection
	.add(o)
	.then((doc) => console.log('message sent'))
	.catch(console.error)
	}

	const realtimeQuery = (cb) => {
	collection
	.where('created_at', '>', new Date().getTime())
	.orderBy('created_at')
	.onSnapshot((snapshot) => {

	snapshot.docChanges().forEach((change) => {
	if (change.type === 'added') {
	document.body.scrollIntoView(false)

	cb(change.doc.data())
	}
	})
	})
	}

	const addMessage = (message) => {
	const messages = document.querySelector('#messages')

	const str = `
	<div id=${message.id}>
	<h3>
	${message.user} - ${new Date(message.created_at).toISOString()}
	</h3>
	<p>${message.message}</p>
	</div>
	`

	messages.insertAdjacentHTML('beforeend', str)
	}

	const form = document.querySelector('#form')

	const inputText = document.querySelector('#message')

	form.addEventListener('submit', (e) => {
	e.preventDefault()

	const message = inputText.value

	if (message) {
	set({
	message,
	user: 'vanillajs',
	created_at: new Date().getTime()
	})

	inputText.value = ''
	} else {
	throw new Error('empty message')
	}
	})

	realtimeQuery((message) => {
	console.log('new message', message)

	addMessage(message)
	})