2023-09-10 12:22:22 +00:00
|
|
|
import type { Signal } from "@preact/signals";
|
|
|
|
import { Button } from "../components/Button.tsx";
|
2023-09-10 13:05:07 +00:00
|
|
|
import { useState, useEffect } from "preact/hooks";
|
2023-09-10 12:22:22 +00:00
|
|
|
|
|
|
|
interface SharedProps {
|
|
|
|
hasClicked: Signal<boolean>;
|
2023-09-10 13:10:39 +00:00
|
|
|
globalCount: string;
|
2023-09-10 12:22:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default function Counter(props: SharedProps) {
|
2023-09-10 13:05:07 +00:00
|
|
|
const count = useState(0);
|
2023-09-10 12:22:22 +00:00
|
|
|
const onClick = () => {
|
|
|
|
|
2023-09-10 12:28:22 +00:00
|
|
|
// set a timer to update the global count, resetting
|
|
|
|
// whenever a user activity is detected
|
|
|
|
let timer: number;
|
|
|
|
timer = setTimeout(async () => {
|
|
|
|
// TODO: add the upload code here
|
2023-09-10 12:31:19 +00:00
|
|
|
}, 5000);
|
2023-09-10 12:28:22 +00:00
|
|
|
|
|
|
|
window.onclick = () => {
|
|
|
|
clearTimeout(timer);
|
|
|
|
timer = setTimeout(async () => {
|
|
|
|
// Upload code goes here
|
2023-09-10 12:31:19 +00:00
|
|
|
}, 5000);
|
2023-09-10 12:28:22 +00:00
|
|
|
}
|
2023-09-10 12:22:22 +00:00
|
|
|
}
|
2023-09-10 13:05:07 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
let es = new EventSource(window.location.href);
|
|
|
|
|
|
|
|
es.addEventListener("open", () => {
|
2023-09-11 03:31:28 +00:00
|
|
|
console.log(`[${new Date()}] Connected to statistics stream`);
|
2023-09-10 13:05:07 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
es.addEventListener("message", (e) => {
|
|
|
|
});
|
|
|
|
|
|
|
|
// TODO: Reconnect backoff logic could be improved
|
|
|
|
es.addEventListener("error", () => {
|
2023-09-11 03:31:28 +00:00
|
|
|
console.warn(`[${new Date()}] Disconnected from statistics stream, attempting to reconnect...`);
|
2023-09-10 13:05:07 +00:00
|
|
|
const backoff = 1000 + Math.random() * 5000;
|
|
|
|
new Promise((resolve) => setTimeout(resolve, backoff));
|
|
|
|
es = new EventSource(window.location.href);
|
|
|
|
})
|
|
|
|
}, [])
|
|
|
|
|
2023-09-10 12:22:22 +00:00
|
|
|
return (
|
|
|
|
<div class="max-w-sm text-center rounded overflow-hidden">
|
|
|
|
<div class="px-6 py-4">
|
2023-09-10 13:05:07 +00:00
|
|
|
<p class="text-3xl">{count}</p>
|
2023-09-10 12:22:22 +00:00
|
|
|
<p class="text-gray-700 text-base">Times clicked</p>
|
|
|
|
</div>
|
|
|
|
<div class="px-6 pt-4 pb-2">
|
|
|
|
<Button onClick={onClick}>Squish that button</Button>
|
|
|
|
</div>
|
|
|
|
<div class="px-6 pt-4 pb-2">
|
2023-09-10 13:10:39 +00:00
|
|
|
<p>Everyone has clicked the button {parseInt(props.globalCount)} times!</p>
|
2023-09-10 12:22:22 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|