mirror of
https://github.com/lockin-bot/react-telegram.git
synced 2026-01-12 15:13:56 +08:00
feat: add useeffect-interval hook implementation
This commit is contained in:
@@ -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": []
|
||||
}
|
||||
|
||||
89
packages/examples/src/useeffect-interval.tsx
Normal file
89
packages/examples/src/useeffect-interval.tsx
Normal 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);
|
||||
Reference in New Issue
Block a user