feat: add useeffect-interval hook implementation

This commit is contained in:
Kyle Fang
2025-07-01 11:33:00 +08:00
parent c1601d2e5b
commit 9c85277f85
2 changed files with 92 additions and 16 deletions

View File

@@ -1,30 +1,17 @@
{
"permissions": {
"allow": [
"Bash(bun add:*)",
"Bash(bun test:*)",
"Bash(bun run:*)",
"Bash(bun info:*)",
"Bash(npm view:*)",
"Bash(bun:*)",
"Bash(find:*)",
"Bash(bun remove:*)",
"Bash(bunx tsc:*)",
"Bash(rm:*)",
"Bash(grep:*)",
"Bash(git add:*)",
"Bash(git commit:*)",
"Bash(bun tsc:*)",
"Bash(ls:*)",
"Bash(bun x tsc:*)",
"Bash(bun:*)",
"Bash(mkdir:*)",
"Bash(cp:*)",
"Bash(rg:*)",
"Bash(mv:*)",
"Bash(gh workflow:*)",
"Bash(gh run list:*)",
"Bash(gh run view:*)",
"Bash(git push:*)"
"Bash(gh:*)",
"Bash(git:*)"
],
"deny": []
}

View File

@@ -0,0 +1,89 @@
/// <reference types="@react-telegram/core" />
import React, { useState, useEffect } from 'react';
import { MtcuteAdapter } from '@react-telegram/mtcute-adapter';
// Timer component with useEffect and setInterval
const TimerApp = () => {
const [count, setCount] = useState(0);
const [isRunning, setIsRunning] = useState(true);
useEffect(() => {
// Only set up interval if isRunning is true
if (!isRunning) return;
const interval = setInterval(() => {
setCount((prevCount) => prevCount + 1);
}, 1000);
// Cleanup function to clear interval
return () => {
clearInterval(interval);
};
}, [isRunning]); // Re-run effect when isRunning changes
return (
<>
<b> Timer with useEffect</b>
<br />
<br />
<i>Seconds elapsed: {count}</i>
<br />
<br />
Status: {isRunning ? '🟢 Running' : '🔴 Paused'}
<br />
<br />
<row>
<button onClick={() => setIsRunning(!isRunning)}>
{isRunning ? '⏸️ Pause' : '▶️ Resume'}
</button>
<button onClick={() => setCount(0)}>🔄 Reset</button>
</row>
<br />
<blockquote>
This example demonstrates useEffect with setInterval.
The timer automatically increments every second and properly
cleans up when paused or when the component unmounts.
</blockquote>
</>
);
};
// Main bot setup
async function main() {
// You'll need to set these environment variables
const config = {
apiId: parseInt(process.env.API_ID || '0'),
apiHash: process.env.API_HASH || '',
botToken: process.env.BOT_TOKEN || '',
storage: process.env.STORAGE_PATH || '.mtcute'
};
if (!config.apiId || !config.apiHash || !config.botToken) {
console.error('Please set API_ID, API_HASH, and BOT_TOKEN environment variables');
process.exit(1);
}
const adapter = new MtcuteAdapter(config);
// Set up command handler for timer
adapter.onCommand('timer', () => <TimerApp />);
adapter.onCommand('start', () => (
<>
<b>🤖 Timer Bot</b>
<br />
<br />
Welcome! This bot demonstrates useEffect with setInterval.
<br />
<br />
Use /timer to start the timer example.
</>
));
// Start the bot
await adapter.start(config.botToken);
console.log('Timer bot is running! Send /start to begin.');
}
// Run the bot
main().catch(console.error);