import React, { useState, useEffect, useCallback, useContext } from 'react'; import ReactDOM from 'react-dom/client'; const APP_NAME = window.APP_NAME || 'MyAppTemplate'; // Local Storage keys const STORAGE_KEYS = { API_TOKEN: 'clickup_api_token', TEAM_ID: 'clickup_team_id', LIST_ID: 'clickup_list_id', SPACE_ID: 'clickup_space_id', SOURCE_STATUS: 'clickup_source_status', POMODORO_SETTINGS: 'pomodoro_settings' }; const DEFAULT_SETTINGS = { workTime: 25 * 60, breakTime: 3 * 60, pomodoroCount: 4 }; // Create Progress Context const ProgressContext = React.createContext(); // Progress Provider Component const ProgressProvider = ({ children }) => { const [userProgress, setUserProgress] = useState({ consecutive_days: 0, diamonds: 0, expPoints: 0, boxOpens: 0 }); const updateProgress = (newProgress) => { try { const today = new Date().toISOString().split('T')[0]; let updatedProgress = {...newProgress}; // Update consecutive days logic const lastProgressStr = localStorage.getItem('lastProgress'); const lastProgress = lastProgressStr ? JSON.parse(lastProgressStr) : null; if (!lastProgress) { updatedProgress.consecutive_days = 1; } else { const lastCompletedDay = new Date(lastProgress.lastCompletedDate).toISOString().split('T')[0]; if (lastCompletedDay === today) { updatedProgress.consecutive_days = userProgress.consecutive_days; } else if (lastCompletedDay === yesterday()) { updatedProgress.consecutive_days = userProgress.consecutive_days + 1; } else { updatedProgress.consecutive_days = 1; } } // Save to localStorage localStorage.setItem('lastProgress', JSON.stringify({ ...updatedProgress, lastCompletedDate: new Date().toISOString() })); setUserProgress(updatedProgress); console.log('Updated Progress:', updatedProgress); } catch (error) { console.error('Error updating progress:', error); } }; // Hàm tính ngày hôm qua const yesterday = () => { const date = new Date(); date.setDate(date.getDate() - 1); return date.toISOString().split('T')[0]; }; useEffect(() => { const loadInitialProgress = () => { try { const savedProgress = localStorage.getItem('lastProgress'); if (savedProgress) { const progress = JSON.parse(savedProgress); setUserProgress({ consecutive_days: progress.consecutive_days || 0, diamonds: progress.diamonds || 0, expPoints: progress.expPoints || 0, boxOpens: progress.boxOpens || 0 }); } else { setUserProgress({ consecutive_days: 0, diamonds: 0, expPoints: 0, boxOpens: 0 }); } } catch (error) { console.error('Error loading initial progress:', error); setUserProgress({ consecutive_days: 0, diamonds: 0, expPoints: 0, boxOpens: 0 }); } }; loadInitialProgress(); }, []); return ( {children} ); }; const App = () => { const [user, setUser] = useState(null); const [updateToggle, setUpdateToggle] = useState(0); const [mode] = useState('pomodoro'); const [totalPomodoros, setTotalPomodoros] = useState(0); const [initialized, setInitialized] = useState(false); const [winCount, setWinCount] = useState(0); const [loseCount, setLoseCount] = useState(0); // Add new effect to fetch initial user data useEffect(() => { const fetchInitialUserData = async () => { if (user && !initialized) { try { // Fetch the latest pomodoro data for streak const { data: latestData, error: streakError } = await supabase .from('pomodoro_data') .select('*') .eq('user_id', user.id) .order('created_at', { ascending: false }) .limit(1); if (streakError) throw streakError; if (latestData && latestData.length > 0) { const lastStreak = latestData[0].consecutive_days || 0; const lastCompletedDay = latestData[0].created_at.split('T')[0]; // Kiểm tra và cập nhật streak const today = new Date().toISOString().split('T')[0]; const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); const yesterdayStr = yesterday.toISOString().split('T')[0]; let currentStreak = lastStreak; if (lastCompletedDay === today) { // Đã hoàn thành hôm nay, giữ nguyên streak currentStreak = lastStreak; } else if (lastCompletedDay === yesterdayStr) { // Hoàn thành hôm qua, kiểm tra xem đã hoàn thành hôm nay chưa const { data: todayData } = await supabase .from('pomodoro_data') .select('count') .eq('user_id', user.id) .gte('created_at', today) .single(); if (todayData && todayData.count > 0) { // Đã hoàn thành hôm nay, tăng streak currentStreak = lastStreak + 1; } } else { // Bỏ lỡ ngày, reset streak currentStreak = 0; } // Cập nhật userProgress với streak hiện tại const newProgress = { ...userProgress, spinConsecutiveDays: currentStreak }; updateProgress(newProgress); } const { data: pomodoroData, error: pomodoroError } = await supabase .from('pomodoro_data') .select('*') .eq('user_id', user.id) .eq('status', 'completed'); if (!pomodoroError && pomodoroData) { setTotalPomodoros(pomodoroData.length || 0); } const { data: todayPomodoroData, error: todayPomodoroError } = await supabase .from('pomodoro_data') .select('*') .eq('user_id', user.id) .gte('created_at', today) .order('created_at', { ascending: false }); if (pomodoroError) throw pomodoroError; if (pomodoroData && pomodoroData.length > 0) { // Get the latest data const latestData = pomodoroData[0]; // Update progress state with latest data const newProgress = { consecutive_days: latestData.consecutive_days || 0, diamonds: latestData.diamonds || 0, expPoints: latestData.exp_points || 0, boxOpens: latestData.box_opens || 0 }; updateProgress(newProgress); // Update completed count for today setCompletedToday(pomodoroData.length); // Remove time tracking mode check since we only use pomodoro mode const totalTime = pomodoroData.reduce((acc, session) => acc + (session.duration || 0), 0); setTotalTrackedTime(totalTime); // Update completed count const today = new Date().toISOString().split('T')[0]; const { data: todayData, error: countError } = await supabase .from('pomodoro_data') .select('count', { count: 'exact' }) .eq('user_id', user.id) .gte('created_at', today); if (!countError) { setCompletedToday(todayData.count || 0); } } setInitialized(true); } catch (error) { console.error('Error fetching initial user data:', error); } } }; fetchInitialUserData(); }, [user, initialized]); // Empty line for spacing const { userProgress, updateProgress } = useContext(ProgressContext); const [error, setError] = useState(''); useEffect(() => { const getUser = async () => { // Simplified user management without Supabase const savedUser = localStorage.getItem('user'); setUser(savedUser ? JSON.parse(savedUser) : null); setInitialized(false); // Load saved configuration from localStorage first const savedToken = localStorage.getItem(STORAGE_KEYS.API_TOKEN); const savedTeamId = localStorage.getItem(STORAGE_KEYS.TEAM_ID); const savedListId = localStorage.getItem(STORAGE_KEYS.LIST_ID); const savedSpaceId = localStorage.getItem(STORAGE_KEYS.SPACE_ID); const savedSourceStatus = localStorage.getItem(STORAGE_KEYS.SOURCE_STATUS); if (savedToken || savedTeamId || savedListId || savedSpaceId || savedSourceStatus) { setApiConfig(prev => ({ ...prev, apiToken: savedToken || prev.apiToken, teamId: savedTeamId || prev.teamId, listId: savedListId || prev.listId, spaceId: savedSpaceId || prev.spaceId, sourceStatus: savedSourceStatus || prev.sourceStatus })); } if (user) { // Load settings from localStorage const savedSettings = localStorage.getItem('pomodoro_settings'); if (savedSettings) { const parsedSettings = JSON.parse(savedSettings); setSettings({ workTime: parsedSettings.workTime || DEFAULT_SETTINGS.workTime, breakTime: parsedSettings.breakTime || DEFAULT_SETTINGS.breakTime, pomodoroCount: parsedSettings.pomodoroCount || DEFAULT_SETTINGS.pomodoroCount }); } else { // Save default settings localStorage.setItem('pomodoro_settings', JSON.stringify(DEFAULT_SETTINGS)); } } }; getUser(); // Simplified auth state management window.addEventListener('storage', (e) => { if (e.key === 'user') { setUser(e.newValue ? JSON.parse(e.newValue) : null); } }); return () => { window.removeEventListener('storage', () => {}); }; }, []); // Load saved settings on mount useEffect(() => { const loadSavedSettings = async () => { if (user) { // Try to load from Supabase first const savedSettings = localStorage.getItem('pomodoro_settings'); if (savedSettings) { const settings = JSON.parse(savedSettings); setApiConfig({ apiToken: settings.clickup_api_token || '', teamId: settings.clickup_team_id || '', listId: settings.clickup_list_id || '', sourceStatus: settings.clickup_source_status || '' }); } else { // Fall back to localStorage if no Supabase data const savedToken = localStorage.getItem(STORAGE_KEYS.API_TOKEN); const savedTeamId = localStorage.getItem(STORAGE_KEYS.TEAM_ID); const savedListId = localStorage.getItem(STORAGE_KEYS.LIST_ID); const savedSourceStatus = localStorage.getItem(STORAGE_KEYS.SOURCE_STATUS); if (savedToken || savedTeamId || savedListId || savedSourceStatus) { setApiConfig(prev => ({ ...prev, apiToken: savedToken || prev.apiToken, teamId: savedTeamId || prev.teamId, listId: savedListId || prev.listId, sourceStatus: savedSourceStatus || prev.sourceStatus })); } } } }; loadSavedSettings(); }, [user]); // Polling function to fetch latest data const fetchLatestData = async () => { try { // Get data from localStorage instead of supabase const sessions = JSON.parse(localStorage.getItem('pomodoro_sessions') || '[]'); console.log('Latest data fetched from localStorage:', sessions); // Force component update setUpdateToggle(prev => prev + 1); } catch (error) { console.error('Error fetching latest data:', error); } }; // Set up polling interval useEffect(() => { if (!user) return; const fetchAndUpdateData = async () => { const today = new Date().toISOString().split('T')[0]; try { // Fetch latest data const { data: latestData, error } = await supabase .from('pomodoro_data') .select('*') .eq('user_id', user.id) .gte('created_at', today) .order('created_at', { ascending: false }); if (error) throw error; if (latestData && latestData.length > 0) { // Update completed count setCompletedToday(latestData.length); // Update progress with latest session const mostRecent = latestData[0]; const newProgress = { spinConsecutiveDays: mostRecent.consecutive_days || 0, diamonds: mostRecent.diamonds || 0, expPoints: mostRecent.exp_points || 0, boxOpens: mostRecent.box_opens || 0 }; updateProgress(newProgress); // Calculate total time without mode check const totalTime = latestData.reduce((acc, session) => acc + (session.duration || 0), 0); setTotalTrackedTime(totalTime); } } catch (error) { console.error('Error fetching latest data:', error); } }; // Initial fetch fetchAndUpdateData(); // Set up polling every 10 seconds const interval = setInterval(fetchAndUpdateData, 10000); return () => clearInterval(interval); }, [user]); // Function to save pomodoro session to Supabase const savePomodoroSession = async (sessionData) => { try { // Store session in localStorage const sessions = JSON.parse(localStorage.getItem('pomodoro_sessions') || '[]'); const formattedData = { id: Date.now(), user_id: user?.id || 'anonymous', task_id: sessionData.taskId, task_name: sessionData.taskName, start_time: sessionData.startTime.toISOString(), end_time: sessionData.endTime.toISOString(), duration: sessionData.duration, session_status: sessionData.status || 'completed', distraction_status: sessionData.distractionStatus || null, consecutive_days: userProgress?.spinConsecutiveDays || 0, diamonds: userProgress?.diamonds || 0, exp_points: userProgress?.expPoints || 0, box_opens: userProgress?.boxOpens || 0, created_at: new Date().toISOString() }; sessions.push(formattedData); localStorage.setItem('pomodoro_sessions', JSON.stringify(sessions)); console.log('Progress saved to localStorage:', formattedData); // Get latest session data from localStorage const allSessions = JSON.parse(localStorage.getItem('pomodoro_sessions') || '[]'); const latestSession = allSessions[allSessions.length - 1]; if (latestSession) { console.log('Latest session data:', latestSession); } // Force update setUpdateToggle(prev => prev + 1); } catch (error) { console.error('Error saving/fetching progress:', error); } // Force immediate refresh after saving await fetchLatestData(); }; // Remove duplicate fetchLatestData definition const [isLoading, setIsLoading] = useState(false); const [startError, setStartError] = useState(''); const [showDistractPopup, setShowDistractPopup] = useState(false); const [isPopupMinimized, setIsPopupMinimized] = useState(false); const [distractionStatus, setDistractionStatus] = useState(null); // 'perfect', 'win', or 'lose' const [showSettings, setShowSettings] = useState(false); const [settings, setSettings] = useState(DEFAULT_SETTINGS); // Auto-save settings when changed useEffect(() => { if (user) { const saveSettings = async () => { try { await supabase .from('pomodoro_settings') .upsert({ user_id: user.id, work_time: settings.workTime, break_time: settings.breakTime, pomodoro_count: settings.pomodoroCount, updated_at: new Date().toISOString() }); } catch (error) { console.error('Error auto-saving settings:', error); } }; saveSettings(); } }, [settings, user]); // Fetch user settings from Supabase const fetchUserSettings = async () => { try { const { data, error } = await supabase .from('pomodoro_settings') .select('*') .eq('user_id', user.id) .single(); if (error) throw error; if (data) { setSettings({ workTime: data.work_time, breakTime: data.break_time, pomodoroCount: data.pomodoro_count }); // Update API config setApiConfig({ apiToken: data.clickup_api_token || '', teamId: data.clickup_team_id || '', listId: data.clickup_list_id || '', sourceStatus: data.clickup_source_status || '' }); } } catch (error) { console.error('Error fetching user settings:', error); } }; const [tempSettings, setTempSettings] = useState(settings); const [timeLeft, setTimeLeft] = useState(mode === 'pomodoro' ? settings.workTime : 0); const [timeElapsed, setTimeElapsed] = useState(0); const [totalTrackedTime, setTotalTrackedTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const [isWorkTime, setIsWorkTime] = useState(true); const [remainingPomodoros, setRemainingPomodoros] = useState(settings.pomodoroCount); const [tasks, setTasks] = useState([]); const [selectedTask, setSelectedTask] = useState(null); // Remove unused states const [pollingInterval, setPollingInterval] = useState(null); const [connectionStatus, setConnectionStatus] = useState(''); const [apiConfig, setApiConfig] = useState({ apiToken: '', teamId: '', listId: '', spaceId: '', sourceStatus: '' }); const [nextTask, setNextTask] = useState(null); const [availableStatuses, setAvailableStatuses] = useState([]); const [completedToday, setCompletedToday] = useState(0); const [showConfig, setShowConfig] = useState(false); // Fetch tasks from ClickUp const fetchTasks = async () => { console.log('Fetching tasks...'); setIsLoading(true); // Validate configuration if (!apiConfig.apiToken) { setConnectionStatus('Connection failed: API Token is required'); setIsLoading(false); return; } if (!apiConfig.listId) { setConnectionStatus('Connection failed: List ID is required'); setIsLoading(false); return; } try { console.log('Making request with:', { listId: apiConfig.listId, token: `${apiConfig.apiToken.substring(0, 5)}...` // Log first 5 chars of token for security }); const response = await fetch( `https://api.clickup.com/api/v2/list/${apiConfig.listId}/task`, { headers: { 'Authorization': apiConfig.apiToken, 'Content-Type': 'application/json' } } ); if (!response.ok) { const errorText = await response.text(); console.log('Full API Response:', errorText); let errorMessage = `HTTP error! status: ${response.status}`; if (response.status === 400) { errorMessage = 'Invalid request. Please check your List ID format.'; } else if (response.status === 401) { errorMessage = 'Invalid API Token. Please check your API Token.'; } else if (response.status === 404) { errorMessage = 'List not found. Please check your List ID.'; } throw new Error(errorMessage); } const data = await response.json(); if (data.tasks) { const fetchedTasks = data.tasks; console.log('Fetched tasks:', fetchedTasks); // Update the tasks state and maintain selected task if it still exists setTasks(prevTasks => { // Cập nhật danh sách tasks với tasks mới fetch được const updatedTasks = fetchedTasks; // Lọc các task có status phù hợp const availableTasks = updatedTasks.filter(task => task.status.status === apiConfig.sourceStatus ); // Kiểm tra xem task hiện tại còn phù hợp không const currentTaskValid = selectedTask && availableTasks.some(task => task.id === selectedTask.id); // Nếu không có task nào được chọn hoặc task hiện tại không còn phù hợp if (!currentTaskValid && availableTasks.length > 0) { const newSelectedTask = availableTasks[0]; console.log('Auto-selecting new task:', newSelectedTask); setSelectedTask(newSelectedTask); // Cập nhật next task const nextTask = availableTasks[1] || null; setNextTask(nextTask); } // Lọc các task theo status const sourceTasks = fetchedTasks.filter(task => task.status.status === apiConfig.sourceStatus ); const newTasks = fetchedTasks.filter(newTask => !prevTasks.some(oldTask => oldTask.id === newTask.id) ); if (newTasks.length > 0) { console.log('Found new tasks:', newTasks); console.log('Tasks with source status:', sourceTasks); // Auto-select new task when current task is completed if ((!selectedTask || selectedTask.status.status !== apiConfig.sourceStatus) && sourceTasks.length > 0) { const firstNewTask = sourceTasks[0]; console.log('Auto-selecting new task:', firstNewTask); setSelectedTask(firstNewTask); // Update next task const nextNewTask = sourceTasks[1] || null; setNextTask(nextNewTask); } } return updatedTasks; }); // If there's no selected task, automatically select the first available task if (!selectedTask) { const availableTask = fetchedTasks.find(task => task.status.status === apiConfig.sourceStatus ); if (availableTask) { setSelectedTask(availableTask); } } else { // If there's a selected task, check if it still exists and update its data const updatedSelectedTask = fetchedTasks.find(task => task.id === selectedTask.id); if (!updatedSelectedTask) { // If the selected task no longer exists, select the next available task const nextAvailableTask = fetchedTasks.find(task => task.status.status === apiConfig.sourceStatus ); setSelectedTask(nextAvailableTask || null); // Force a re-render setUpdateToggle(prev => prev + 1); } else { // Update the selected task with fresh data setSelectedTask(updatedSelectedTask); } } // Update available statuses const statuses = [...new Set(fetchedTasks.map(task => task.status.status))]; setAvailableStatuses(statuses); return fetchedTasks; // Nếu chưa có sourceStatus được chọn, tự động chọn status đầu tiên if (!apiConfig.sourceStatus && statuses.length > 0) { const newConfig = { ...apiConfig, sourceStatus: statuses[0] }; setApiConfig(newConfig); localStorage.setItem(STORAGE_KEYS.SOURCE_STATUS, statuses[0]); } setError(''); setConnectionStatus('Connection successful! Tasks loaded.'); } else { setTasks([]); setError('No tasks found or invalid response format'); setConnectionStatus('Connection failed: No tasks found'); } } catch (error) { console.error('Error fetching tasks:', error); setTasks([]); setError('Failed to fetch tasks. Please check your configuration.'); setConnectionStatus(`Connection failed: ${error.message}`); } // Calculate win/lose counts from fetched tasks const calculateTaskStats = (taskList) => { const wins = taskList.filter(task => task.status.status === 'WIN').length; const losses = taskList.filter(task => task.status.status === 'LOSE').length; setWinCount(wins); setLoseCount(losses); console.log(`Updated stats from ClickUp - Wins: ${wins}, Losses: ${losses}`); }; if (data && data.tasks) { calculateTaskStats(data.tasks); } setIsLoading(false); }; // Get next available task from the source status const getNextTask = useCallback(() => { const availableTasks = tasks.filter(task => task.status.status === apiConfig.sourceStatus); return availableTasks.length > 0 ? availableTasks[0] : null; }, [tasks, apiConfig.sourceStatus]); // Update selected and next task when tasks change useEffect(() => { if (!selectedTask && tasks.length > 0) { const nextAvailable = getNextTask(); if (nextAvailable) { setSelectedTask(nextAvailable); } setNextTask(tasks.filter(task => task.status.status === apiConfig.sourceStatus && task.id !== nextAvailable?.id )[0] || null); } }, [tasks, selectedTask, getNextTask]); // Format time to MM:SS const formatTime = (seconds) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; }; // Calculate progress for the circle const calculateProgress = () => { const totalTime = isWorkTime ? settings.workTime : settings.breakTime; return ((totalTime - timeLeft) / totalTime) * 100; }; // Audio Context setup const [audioContext, setAudioContext] = useState(null); const initAudioContext = useCallback(() => { if (!audioContext) { const ctx = new (window.AudioContext || window.webkitAudioContext)(); if (ctx.state === 'suspended') { ctx.resume(); } setAudioContext(ctx); return ctx; } return audioContext; }, [audioContext]); const playTickSound = useCallback(() => { const ctx = initAudioContext(); if (!ctx) return; const oscillator = ctx.createOscillator(); const gainNode = ctx.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(600, audioContext.currentTime); gainNode.gain.setValueAtTime(0.2, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + 0.1); }, [audioContext]); const playEndSound = useCallback(() => { const ctx = initAudioContext(); if (!ctx) return; const oscillator = ctx.createOscillator(); const gainNode = ctx.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(1200, audioContext.currentTime); oscillator.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.5); gainNode.gain.setValueAtTime(0.7, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5); oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + 0.5); }, [audioContext, initAudioContext]); // Timer logic useEffect(() => { let interval; const handleTimerEnd = async () => { if (isWorkTime && selectedTask) { try { // Stop the timer first setIsRunning(false); // Show the win/lose popup immediately setShowDistractPopup(true); await savePomodoroSession({ startTime: new Date(Date.now() - settings.workTime * 1000), endTime: new Date(), duration: settings.workTime, status: 'completed', taskId: selectedTask.id, taskName: selectedTask.name, distractionStatus: null }); } catch (error) { console.error('Error saving pomodoro session:', error); } } }; if (isRunning) { initAudioContext(); interval = setInterval(() => { if (mode === 'pomodoro') { if (timeLeft > 0) { setTimeLeft(prev => { if (prev <= 1) { playEndSound(); return 0; } // Only play tick sound during work time if (isWorkTime) { playTickSound(); } return prev - 1; }); } } }, 1000); } else if (timeLeft === 0) { handleTimerEnd(); if (isWorkTime) { if (mode === 'pomodoro') { if (remainingPomodoros > 1) { setRemainingPomodoros(prev => prev - 1); // Start break time only after user makes a choice in the popup setIsWorkTime(false); setTimeLeft(settings.breakTime); // Auto close popup and set status after break time if no choice made const perfectTimer = setTimeout(async () => { if (!distractionStatus && selectedTask) { setDistractionStatus('perfect'); await updateTaskStatus(selectedTask.id, 'Closed'); setCompletedToday(prev => prev + 1); // Increment completion count setShowDistractPopup(false); setIsPopupMinimized(false); } }, settings.breakTime * 1000); return () => clearTimeout(perfectTimer); } else { // Last pomodoro completed setRemainingPomodoros(settings.pomodoroCount); setIsWorkTime(true); setTimeLeft(settings.workTime); setIsRunning(false); } } else { // In time tracking mode, just reset the timer setTimeLeft(settings.workTime); setIsRunning(false); } } else { // Break time ended setIsWorkTime(true); setTimeLeft(settings.workTime); setIsRunning(false); // Break time ended, don't update completion count } // When work session completes (not break) if (isWorkTime && selectedTask) { if (mode === 'pomodoro') { updateTaskStatus(selectedTask.id).then(() => { setSelectedTask(nextTask); setCompletedToday(prev => prev + 1); const newNextTask = tasks.filter(task => task.status.status === apiConfig.sourceStatus && task.id !== nextTask?.id )[0] || null; setNextTask(newNextTask); }); } else { // In time tracking mode, just update time tracking updateClickUpTimeTracking(selectedTask.id, timeElapsed * 1000).then(() => { setCompletedToday(prev => prev + 1); setTimeElapsed(0); }); } } } return () => { clearInterval(interval); }; }, [isRunning, timeLeft, isWorkTime, selectedTask, playTickSound, audioContext]); // Update Custom field Result in ClickUp // Remove unused function // Update time tracking in ClickUp const updateClickUpTimeTracking = async (taskId, timeMs) => { try { const endTime = Math.floor(Date.now() / 1000); const startTime = endTime - Math.floor(timeMs / 1000); const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}/time`, { method: 'POST', headers: { 'Authorization': apiConfig.apiToken, 'Content-Type': 'application/json' }, body: JSON.stringify({ start: startTime, end: endTime, duration: Math.floor(timeMs / 1000), description: 'Pomodoro Work Session' }) }); if (!response.ok) { const errorData = await response.text(); console.error('Time tracking error response:', errorData); throw new Error(`Failed to update time tracking: ${response.status}`); } const data = await response.json(); console.log('Time tracking update successful:', data); } catch (error) { console.error('Error updating time tracking:', error); } }; // Update task status to Closed const updateTaskStatus = async (taskId, status = 'CLOSED') => { try { const response = await fetch(`https://api.clickup.com/api/v2/task/${taskId}`, { method: 'PUT', headers: { 'Authorization': apiConfig.apiToken, 'Content-Type': 'application/json' }, body: JSON.stringify({ status: status }) }); if (!response.ok) { const errorData = await response.text(); console.error('Task status update error:', errorData); throw new Error(`Failed to update task status: ${response.status}`); } const data = await response.json(); console.log('Task status updated to:', status); // Return the updated task data if (status === 'Win' || status === 'Lose') { setSelectedTask(null); } return data; } catch (error) { console.error('Error updating task status:', error); setError('Failed to update task status'); } }; // Reset timer const skipSession = useCallback(() => { // Stop the timer setIsRunning(false); // Save the skipped session if there's a selected task if (selectedTask) { savePomodoroSession({ startTime: new Date(Date.now() - (settings.workTime - timeLeft) * 1000), endTime: new Date(), duration: settings.workTime - timeLeft, status: 'skipped', taskId: selectedTask.id, taskName: selectedTask.name, distractionStatus: null }); } // Reset only the current timer setTimeLeft(settings.workTime); setIsWorkTime(true); }, [selectedTask, settings.workTime, timeLeft]); // Calculate circle parameters const radius = 120; const circumference = 2 * Math.PI * radius; const strokeDashoffset = circumference - (calculateProgress() / 100) * circumference; const handleSaveSettings = () => { console.log('Saving settings:', tempSettings); // Validate input values if (!tempSettings.workTime || tempSettings.workTime < 60) { alert('Thời gian làm việc phải ít nhất 1 phút'); return; } if (!tempSettings.breakTime || tempSettings.breakTime < 60) { alert('Thời gian nghỉ phải ít nhất 1 phút'); return; } if (!tempSettings.pomodoroCount || tempSettings.pomodoroCount < 1) { alert('Số pomodoro mục tiêu phải ít nhất là 1'); return; } try { // Save to local storage const settingsToSave = { workTime: tempSettings.workTime, breakTime: tempSettings.breakTime, pomodoroCount: tempSettings.pomodoroCount }; localStorage.setItem(STORAGE_KEYS.POMODORO_SETTINGS, JSON.stringify(settingsToSave)); // Update app state setSettings(tempSettings); setTimeLeft(isWorkTime ? tempSettings.workTime : tempSettings.breakTime); setRemainingPomodoros(tempSettings.pomodoroCount); // Close settings modal setShowSettings(false); console.log('Settings saved successfully'); } catch (error) { console.error('Error in try-catch block:', error); alert('Có lỗi xảy ra khi lưu cài đặt. Vui lòng thử lại.'); } }; const handleCancelSettings = () => { setTempSettings(settings); setShowSettings(false); }; const StreakMilestone = ({ consecutiveDays = 0, openedMilestones = [] }) => { const milestones = [1, 2, 3, 5, 7, 10, 15, 20, 30, 45, 60, 75, 90, 120, 150, 180, 210, 240, 270, 300, 360]; return (

🏆 CỘT MỐC & PHẦN THƯỞNG

{/* Timeline Section */}

{/* Timeline line */}

{milestones.map((milestone, index) => (

= milestone || openedMilestones.includes(milestone) ? 'linear-gradient(135deg, rgba(255, 165, 0, 0.3), rgba(255, 165, 0, 0.1))' : 'rgba(30, 41, 59, 0.7)', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid', borderColor: consecutiveDays >= milestone || openedMilestones.includes(milestone) ? 'rgba(255, 165, 0, 0.5)' : 'rgba(255, 255, 255, 0.2)', boxShadow: '0 0 20px rgba(255, 165, 0, 0.2)', position: 'relative', transform: 'rotate(-5deg)' }}> {`Milestone

= milestone || openedMilestones.includes(milestone) ? 'none' : 'grayscale(100%) brightness(0.7)' }} /> {(consecutiveDays >= milestone || openedMilestones.includes(milestone)) && (

✓

)}

= milestone || openedMilestones.includes(milestone) ? '#FFA500' : '#ffffff80', fontSize: '16px', fontWeight: '500' }}> Mốc {milestone}

))}

); }; return (

{/* Add custom fonts */} {/* Mode Toggle and Configuration Buttons */}

{showConfig && (

{ if (e.target === e.currentTarget) { setShowConfig(false); } }}>

ClickUp Configuration

API Token: { const newConfig = { ...apiConfig, apiToken: e.target.value }; setApiConfig(newConfig); localStorage.setItem(STORAGE_KEYS.API_TOKEN, e.target.value); // Save to Supabase if user is logged in if (user) { localStorage.setItem('pomodoro_settings', JSON.stringify({ ...JSON.parse(localStorage.getItem('pomodoro_settings') || '{}'), clickup_api_token: e.target.value, updated_at: new Date().toISOString() })); } }} style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }} />

Team ID: { const newConfig = { ...apiConfig, teamId: e.target.value }; setApiConfig(newConfig); localStorage.setItem(STORAGE_KEYS.TEAM_ID, e.target.value); }} style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }} />

List ID: { const newConfig = { ...apiConfig, listId: e.target.value }; setApiConfig(newConfig); localStorage.setItem(STORAGE_KEYS.LIST_ID, e.target.value); }} style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }} />

Space ID: { const newConfig = { ...apiConfig, spaceId: e.target.value }; setApiConfig(newConfig); localStorage.setItem(STORAGE_KEYS.SPACE_ID, e.target.value); }} style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }} />

Status:

{connectionStatus && (

{connectionStatus}

)}

)} {/* Current Task, Stats and Progress Display */}

{/* Win Stats */}

{winCount}

Chiến thắng

🔥

{userProgress.consecutive_days}

Ngày Liên Tiếp

{/* Pomodoro Progress Bar */}

{/* Current Task Display */}

Nhiệm Vụ Hiện Tại

{/* Remove Total Tracked Time Display section */} {/* Progress Display */}

TIẾN ĐỘ HOÀN THÀNH MỤC TIÊU

{settings.pomodoroCount - remainingPomodoros}/{settings.pomodoroCount}

{/* Lose Stats */}

{loseCount}

Thất bại

⚡

{totalPomodoros}

Tổng Số Pomodoro

{/* Remove the separate current task container */}

{/* Task selection area */} {/* Remove Work Time text */} {/* Timer Display */}

{/* Flip Counter */}

{/* Minutes */}

{String(Math.floor(timeLeft / 60)).padStart(2, '0')[0]}

{mode === 'pomodoro' ? String(Math.floor(timeLeft / 60)).padStart(2, '0')[1] : String(Math.floor(timeElapsed / 60)).padStart(2, '0')[1]}

{/* Seconds */}

{mode === 'pomodoro' ? String(timeLeft % 60).padStart(2, '0')[0] : String(timeElapsed % 60).padStart(2, '0')[0]}

{mode === 'pomodoro' ? String(timeLeft % 60).padStart(2, '0')[1] : String(timeElapsed % 60).padStart(2, '0')[1]}

{/* Progress Bar */}

{startError && (

{startError}

)}

{/* Empty line for spacing */}

{/* Settings Modal */} {showSettings && (

Cài đặt Pomodoro

Thời gian 1 Pomodoro (phút): setTempSettings({ ...tempSettings, workTime: Math.max(1, parseInt(e.target.value)) * 60 })} style={{ width: '80px', padding: '12px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '14px', color: '#1a1a1a', backgroundColor: '#f8fafc', transition: 'all 0.2s ease', ':focus': { borderColor: '#2ecc71', backgroundColor: 'white', outline: 'none' } }} min="1" />

Thời gian nghỉ (phút): setTempSettings({ ...tempSettings, breakTime: Math.max(1, parseInt(e.target.value)) * 60 })} style={{ width: '80px', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }} min="1" />

Số Pomodoro Mục Tiêu Hôm Nay: setTempSettings({ ...tempSettings, pomodoroCount: Math.max(1, parseInt(e.target.value)) })} style={{ width: '80px', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }} min="1" />

)} {/* Minimized Popup */} {isPopupMinimized && (

{ setIsPopupMinimized(false); setShowDistractPopup(true); }} > ⚔️ Chọn Thắng/Thua

)} {/* Distraction Popup */} {showDistractPopup && !isPopupMinimized && (

{ if (e.target === e.currentTarget) { setShowDistractPopup(false); setIsPopupMinimized(true); } }}>

⚔️ Có xao nhãng không? ⚔️

{ if (selectedTask) { try { setDistractionStatus('win'); // Save session with win status await savePomodoroSession({ startTime: new Date(Date.now() - settings.workTime * 1000), endTime: new Date(), duration: settings.workTime, status: 'win', taskId: selectedTask.id, taskName: selectedTask.name, distractionStatus: 'win' }); const updatedTask = await updateTaskStatus(selectedTask.id, 'WIN'); setWinCount(prevCount => prevCount + 1); // Kiểm tra và cập nhật streak từ localStorage const today = new Date().toISOString().split('T')[0]; const sessions = JSON.parse(localStorage.getItem('pomodoro_sessions') || '[]'); const lastSession = sessions[sessions.length - 1]; let newStreak = userProgress.consecutive_days || 0; if (!lastSession || lastSession.length === 0) { newStreak = 1; } else { const lastCompletedDay = new Date(lastSession[0].created_at).toISOString().split('T')[0]; if (lastCompletedDay === today) { newStreak = userProgress.consecutive_days; } else { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); const yesterdayStr = yesterday.toISOString().split('T')[0]; if (lastCompletedDay === yesterdayStr) { newStreak = userProgress.consecutive_days + 1; } else { newStreak = 1; } } } const newProgress = { ...userProgress, consecutive_days: newStreak }; await updateProgress(newProgress); setCompletedToday(prev => prev + 1); // Update tasks without fetching setTasks(prevTasks => { return prevTasks.map(task => task.id === selectedTask.id ? {...task, status: {status: 'Win'}} : task ); }); setIsRunning(true); } catch (error) { console.error('Error updating task status:', error); } } setShowDistractPopup(false); // Break time is already running, no need to start it }}>

Có, nhưng tao vượt qua

{ if (selectedTask) { try { setDistractionStatus('lose'); // Save session with lose status await savePomodoroSession({ startTime: new Date(Date.now() - settings.workTime * 1000), endTime: new Date(), duration: settings.workTime, status: 'lose', taskId: selectedTask.id, taskName: selectedTask.name, distractionStatus: 'lose' }); const updatedTask = await updateTaskStatus(selectedTask.id, 'LOSE'); setLoseCount(prevCount => prevCount + 1); // Update tasks without fetching setTasks(prevTasks => { return prevTasks.map(task => task.id === selectedTask.id ? {...task, status: {status: 'Lose'}} : task ); }); setIsRunning(true); } catch (error) { console.error('Error updating task status:', error); } } setShowDistractPopup(false); // Break time is already running, no need to start it }}>

Có, và tao thua sấp mặt

Click vào phía bạn chọn

)}

); // Auto connect and fetch tasks on load useEffect(() => { const autoConnect = async () => { if (apiConfig.apiToken && apiConfig.listId) { try { console.log('Auto connecting to ClickUp...'); const fetchedTasks = await fetchTasks(); setConnectionStatus('Connection successful! Tasks loaded.'); } catch (error) { console.error('Auto-connect failed:', error); setConnectionStatus('Auto-connect failed. Please connect manually.'); } } }; autoConnect(); }, [apiConfig.apiToken, apiConfig.listId]); // Setup polling for task updates useEffect(() => { const fetchAndUpdateTasks = async () => { if (!apiConfig.apiToken || !apiConfig.listId) return; const calculateTaskStats = (taskList) => { const wins = taskList.filter(task => task.status.status === 'WIN').length; const losses = taskList.filter(task => task.status.status === 'LOSE').length; setWinCount(wins); setLoseCount(losses); console.log(`Updated stats from polling - Wins: ${wins}, Losses: ${losses}`); }; try { const response = await fetch( `https://api.clickup.com/api/v2/list/${apiConfig.listId}/task?include_closed=true`, { headers: { 'Authorization': apiConfig.apiToken, 'Content-Type': 'application/json' } } ); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); if (!data.tasks) throw new Error('No tasks found in response'); const fetchedTasks = data.tasks; // So sánh và cập nhật tasks đã thay đổi setTasks(prevTasks => { const updatedTasks = fetchedTasks.map(newTask => { const existingTask = prevTasks.find(t => t.id === newTask.id); // Nếu task không tồn tại hoặc có sự thay đổi, sử dụng version mới if (!existingTask || JSON.stringify(existingTask) !== JSON.stringify(newTask)) { console.log(`Task ${newTask.id} has been updated:`, newTask); // Force a re-render when task is updated setUpdateToggle(prev => prev + 1); return newTask; } // Nếu không có thay đổi, giữ nguyên task cũ return existingTask; }); // Cập nhật selected task nếu cần if (selectedTask) { const updatedSelectedTask = updatedTasks.find(t => t.id === selectedTask.id); if (updatedSelectedTask && JSON.stringify(updatedSelectedTask) !== JSON.stringify(selectedTask)) { setSelectedTask(updatedSelectedTask); } } return updatedTasks; }); // Lọc các task có status phù hợp // Lọc các task có status START để hiển thị trong dropdown const availableStartTasks = fetchedTasks.filter(task => task.status.status === 'START' ); console.log('Available START tasks:', availableStartTasks); // Cập nhật selected task nếu cần if (availableStartTasks.length > 0) { const currentTaskValid = selectedTask && availableStartTasks.some(task => task.id === selectedTask.id); if (!currentTaskValid) { // Nếu không có task được chọn hoặc task hiện tại không hợp lệ const firstAvailableTask = availableTasks[0]; console.log('Selecting new task:', firstAvailableTask); setSelectedTask(firstAvailableTask); setNextTask(availableTasks[1] || null); } else { // Cập nhật thông tin của task hiện tại const updatedSelectedTask = availableTasks.find(task => task.id === selectedTask.id ); if (updatedSelectedTask) { setSelectedTask(updatedSelectedTask); const nextAvailable = availableTasks.find(task => task.id !== selectedTask.id ); setNextTask(nextAvailable || null); } } } else { // Không có task nào có status phù hợp setSelectedTask(null); setNextTask(null); } // Cập nhật state tasks setTasks(fetchedTasks); // Kiểm tra và cập nhật selected task if (availableTasks.length > 0) { // Kiểm tra xem task hiện tại còn hợp lệ không const currentTaskStillValid = selectedTask && availableTasks.some(task => task.id === selectedTask.id); if (!currentTaskStillValid) { // Nếu task hiện tại không còn hợp lệ, chọn task mới const newSelectedTask = availableTasks[0]; console.log('Current task invalid, switching to:', newSelectedTask); setSelectedTask(newSelectedTask); setNextTask(availableTasks[1] || null); } else if (selectedTask) { // Cập nhật thông tin mới nhất của task hiện tại const updatedTask = availableTasks.find(task => task.id === selectedTask.id ); if (updatedTask) { setSelectedTask(updatedTask); // Cập nhật next task const nextAvailable = availableTasks.find(task => task.id !== updatedTask.id ); setNextTask(nextAvailable || null); } } } else { // Không có task nào có status phù hợp setSelectedTask(null); setNextTask(null); } // Recalculate stats when tasks are updated calculateTaskStats(fetchedTasks); if (newTasks.length > 0) { console.log('Found new tasks:', newTasks); // Force immediate task selection update if (!selectedTask || selectedTask.status.status !== apiConfig.sourceStatus) { const firstNewTask = newTasks[0]; console.log('Auto-selecting new task:', firstNewTask); setSelectedTask(firstNewTask); // Update next task const nextNewTask = newTasks[1] || null; setNextTask(nextNewTask); } } isFirstRun = false; } catch (error) { console.error('Error in polling:', error); } }; // Setup polling const interval = setInterval(fetchAndUpdateTasks, 2000); // Cleanup return () => clearInterval(interval); setPollingInterval(interval); // Cleanup interval on unmount return () => { if (interval) { clearInterval(interval); } }; }, [showDistractPopup]); // Re-setup polling when distraction popup state changes // Add effect to update counts when tasks change useEffect(() => { // Increment win count when WIN status is set if (selectedTask && distractionStatus === 'win') { setWinCount(prevCount => prevCount + 1); } // Increment lose count when LOSE status is set if (selectedTask && distractionStatus === 'lose') { setLoseCount(prevCount => prevCount + 1); } console.log('Updated counts - Win:', newWinCount, 'Lose:', newLoseCount); }, [tasks]); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render( );