bind real api

.eleventy.js

@@ -18,6 +18,8 @@ module.exports = function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy("src/js/**/*.js")
 	eleventyConfig.addPassthroughCopy({ "static": "/" })
 
+	eleventyConfig.addFilter("formatNumber", number => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "));
+
 	return {
 		htmlTemplateEngine: "njk",
 		dir: {

src/index.11tydata.js

@@ -1,3 +1,5 @@
-module.exports = function() {
+module.exports = async function() {
-	return Promise.resolve({count: 69420})
+	const response = await fetch("https://c.compteurdegreve.fr/val")
+	const data = await response.json()
+	return {count: data.value}
 }

src/index.njk

@@ -13,7 +13,7 @@ permalink:
 					<span class="color-pink-2 pb05 inline-block">Contre la réforme des retraites,</span><br>
 					À l’appel de l’ensemble des organisations syndicales, <span class="color-purple-1">le 7 mars</span>
 					<span aria-live="polite">
-						<strong class="counter-number" x-bind="counter">{{count}}</strong>
+						<strong class="counter-number" x-bind="counter">{{count | formatNumber}}</strong>
 						<span class="separator">personnes seront</span>
 						<em class="counter-strikeeeee-lol highlighter-zigzag">en grève<span class="visually-hidden"> !</span></em>
 					</span>

src/js/script.js

@@ -1,5 +1,3 @@
-let internalCount = 0
-
 document.addEventListener('alpine:init', () => {
 	Alpine.data('counter', () => ({
 		count: null,
@@ -57,7 +55,8 @@ document.addEventListener('alpine:init', () => {
 				this.loading = true
 				this.errored = false
 
-				incrementCount().then(() => {
+				incrementCount().then((newCount) => {
+					this.count = newCount
 					this.participating = true
 				}).catch((error) => {
 					this.errored = true
@@ -105,7 +104,7 @@ function subscribeCount(onCount) {
 	function execute() {
 		fetchCount().then(newCount => {
 			if (!unsubscribed) {
-				timeoutId = setTimeout(execute, 2000)
+				timeoutId = setTimeout(execute, 5000)
 				onCount(newCount)
 			}
 		})
@@ -122,35 +121,14 @@ function subscribeCount(onCount) {
 	}
 }
 
-
-
-// fake api
 function fetchCount() {
-	return wait(1000).then(() => {
+	return fetch("https://c.compteurdegreve.fr/val")
-		internalCount += randomInt(0, 9)
+		.then(res => res.json())
-		return internalCount
+		.then(data => data.value)
-	})
-
 }
 
 function incrementCount() {
-	return wait(1000).then(() => {
+	return fetch("https://c.compteurdegreve.fr/incr", { method: "POST", mode: "cors", credentials: "include"})
-		if (!randomInt(0, 1)) {
+		.then(res => res.json())
-			throw new Error()
+		.then(data => data.value)
-		}
-
-		internalCount += 1 + randomInt(0, 9)
-		return internalCount
-	})
-}
-
-
-function wait(ms) {
-	return new Promise(res => setTimeout(res, ms))
-}
-
-function randomInt(min, max) {
-	min = Math.ceil(min)
-	max = Math.floor(max)
-	return Math.floor(Math.random() * (max - min + 1)) + min
 }