Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { render } from "vdom-generator";
- function* Clock(props, update) {
- let clockText = new Date().toTimeString();
- const timer = setInterval(() => {
- clockText = new Date().toTimeString();
- update.onAnimationFrame();
- }, props.interval);
- let lastClockText = clockText;
- while ((props = yield)) {
- if (clockText !== lastClockText) {
- yield (
- <span>
- {clockText}
- </span>
- );
- } else {
- yield null;
- }
- }
- clearInterval(timer);
- }
- async function CurrentMessage(props) {
- const messageResponse = await fetch("/api/message");
- const message = await messageResponse.text();
- return (
- <h1>
- {message}
- </h1>
- );
- }
- async function* NumberedMessage(_, update) {
- const getMessage = async number => {
- const messageResponse = await fetch("/api/message");
- return await messageResponse.text();
- };
- let messageNumber = 0;
- const handleUp = () => {
- messageNumber++;
- update();
- };
- const handleDown = () => {
- if (messageNumber > 0) {
- messageNumber--;
- update();
- }
- };
- const container = children =>
- <div>
- {children}
- <button onClick={handleDown}>Down</button>
- <button onClick={handleUp}>Up</button>
- </div>;
- while (yield) {
- yield container(<em>Loading...</em>);
- const message = await getMessage(messageNumber);
- yield container(
- <strong>
- {message}
- </strong>
- );
- }
- }
- const App = props =>
- <div>
- <Clock />
- <CurrentMessage />
- <NumberedMessage />
- </div>;
- render(App, document.getElementById("app"));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement