+ Your GitHub connection is no longer valid. Reconnect your GitHub account to continue syncing data. +
diff --git a/src/components/DashboardWidgets.tsx b/src/components/DashboardWidgets.tsx index 2a70a670d..97e9100a0 100644 --- a/src/components/DashboardWidgets.tsx +++ b/src/components/DashboardWidgets.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; - +import GitHubTokenExpiredBanner from "@/components/GitHubTokenExpiredBanner"; import ContributionGraph from "@/components/ContributionGraph"; import ContributionHeatmap from "@/components/ContributionHeatmap"; import PRMetrics from "@/components/PRMetrics"; @@ -25,6 +25,8 @@ import WidgetErrorBoundary from "@/components/WidgetErrorBoundary"; export default function DashboardWidgets() { return ( <> + + diff --git a/src/components/DiscussionsWidget.tsx b/src/components/DiscussionsWidget.tsx index daf2905ed..d9d292234 100644 --- a/src/components/DiscussionsWidget.tsx +++ b/src/components/DiscussionsWidget.tsx @@ -1,6 +1,7 @@ "use client"; import { useCallback, useEffect, useState } from "react"; +import { signOut } from "next-auth/react"; interface DiscussionData { discussionsStarted: number; @@ -12,16 +13,26 @@ export default function DiscussionsWidget() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const [githubAuthInvalid, setGithubAuthInvalid] = useState(false); const fetchData = useCallback(() => { setLoading(true); setError(null); + setGithubAuthInvalid(false); fetch("/api/metrics/discussions") - .then((r) => { + .then(async (r) => { + const body = await r.json(); + if (body?.error === "token_expired") { + setGithubAuthInvalid(true); + return null; + } if (!r.ok) throw new Error("API error"); - return r.json(); + return body as DiscussionData; + }) + .then((d) => { + if (!d) return; + setData(d); }) - .then((d: DiscussionData) => setData(d)) .catch(() => setError("We couldn't load your discussion metrics right now.") ) @@ -67,6 +78,24 @@ export default function DiscussionsWidget() { /> ))}
+ Your GitHub connection is no longer valid. Reconnect your GitHub + account to continue syncing data. +
{error}
+ GitHub connection lost.{" "} + Your GitHub connection is no longer valid. Please reconnect your GitHub + account to continue syncing data. +
diff --git a/src/components/TodayFocusHero.tsx b/src/components/TodayFocusHero.tsx index 848dd320b..e9bd25de6 100644 --- a/src/components/TodayFocusHero.tsx +++ b/src/components/TodayFocusHero.tsx @@ -1,6 +1,7 @@ "use client"; -import { useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import type { DailyFocusRecord } from "@/app/api/daily-focus/route"; type TodayFocusHeroProps = { userName?: string | null; @@ -14,13 +15,21 @@ const PROMPTS = [ "Make one part of your project better today.", ]; +// Legacy localStorage key prefix — used only for migration on first load. const STORAGE_PREFIX = "devtrack_today_goal_"; function getTodayKey(date = new Date()): string { - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, "0"); - const day = String(date.getDate()).padStart(2, "0"); - return `${STORAGE_PREFIX}${year}-${month}-${day}`; + const y = date.getFullYear(); + const m = String(date.getMonth() + 1).padStart(2, "0"); + const d = String(date.getDate()).padStart(2, "0"); + return `${STORAGE_PREFIX}${y}-${m}-${d}`; +} + +function getTodayDate(date = new Date()): string { + const y = date.getFullYear(); + const m = String(date.getMonth() + 1).padStart(2, "0"); + const d = String(date.getDate()).padStart(2, "0"); + return `${y}-${m}-${d}`; } function getGreeting(hour: number): "morning" | "afternoon" | "evening" { @@ -39,9 +48,17 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) { const [inputValue, setInputValue] = useState(""); const [isEditing, setIsEditing] = useState(false); const [prompt, setPrompt] = useState(PROMPTS[0]); - const [greeting, setGreeting] = useState<"morning" | "afternoon" | "evening">("morning"); - const [todayKey, setTodayKey] = useState(""); + const [greeting, setGreeting] = useState<"morning" | "afternoon" | "evening">( + "morning" + ); const [isMounted, setIsMounted] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [isSaving, setIsSaving] = useState(false); + const [serverError, setServerError] = useState(null); + + // Stable refs so async callbacks never capture stale values. + const todayDate = useRef(""); + const todayKey = useRef(""); const greetingLabel = useMemo(() => { const base = @@ -53,50 +70,224 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) { return userName?.trim() ? `${base}, ${userName.trim()}` : base; }, [greeting, userName]); + // Migrate an existing localStorage entry to the server. + // Only removes the localStorage copy after a confirmed successful PUT. + const migrateLocalStorage = useCallback( + async (stored: string, date: string, key: string): Promise => { + try { + const res = await fetch("/api/daily-focus", { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ goal_text: stored, focus_date: date }), + }); + if (res.ok) { + try { + window.localStorage.removeItem(key); + } catch { + // Removing is best-effort. + } + return true; + } + } catch { + // Network failure — keep localStorage as-is. + } + return false; + }, + [] + ); + + const loadFocus = useCallback( + async (date: string, key: string) => { + setIsLoading(true); + setServerError(null); + try { + const res = await fetch(`/api/daily-focus?date=${date}`); + + if (!res.ok) { + if (res.status === 401) { + // Not signed in — use localStorage only (read-only mode). + try { + const stored = window.localStorage.getItem(key)?.trim() ?? ""; + setGoal(stored); + setInputValue(stored); + setIsEditing(stored.length === 0); + } catch { + setIsEditing(true); + } + return; + } + setServerError("Failed to load today's focus."); + return; + } + + const json = (await res.json()) as { + focus: DailyFocusRecord | null; + }; + + if (json.focus) { + // Server is the source of truth — discard any leftover localStorage copy. + setGoal(json.focus.goal_text); + setInputValue(json.focus.goal_text); + setIsEditing(false); + try { + window.localStorage.removeItem(key); + } catch { + // Best-effort cleanup. + } + } else { + // No server record — check for a localStorage value to migrate. + try { + const stored = window.localStorage.getItem(key)?.trim() ?? ""; + if (stored) { + await migrateLocalStorage(stored, date, key); + setGoal(stored); + setInputValue(stored); + setIsEditing(false); + } else { + setGoal(""); + setInputValue(""); + setIsEditing(true); + } + } catch { + setGoal(""); + setInputValue(""); + setIsEditing(true); + } + } + } catch { + // Network failure — fall back to localStorage. + try { + const stored = window.localStorage.getItem(key)?.trim() ?? ""; + setGoal(stored); + setInputValue(stored); + setIsEditing(stored.length === 0); + } catch { + setGoal(""); + setInputValue(""); + setIsEditing(true); + } + setServerError( + "Could not reach the server. Changes may not sync across devices." + ); + } finally { + setIsLoading(false); + } + }, + [migrateLocalStorage] + ); + useEffect(() => { const now = new Date(); - const nextKey = getTodayKey(now); - setTodayKey(nextKey); + todayDate.current = getTodayDate(now); + todayKey.current = getTodayKey(now); setGreeting(getGreeting(now.getHours())); setPrompt(getDailyPrompt(now)); - - try { - const storedGoal = window.localStorage.getItem(nextKey)?.trim() ?? ""; - setGoal(storedGoal); - setInputValue(storedGoal); - setIsEditing(storedGoal.length === 0); - } catch (e) { - setGoal(""); - setInputValue(""); - setIsEditing(true); - } - setIsMounted(true); - }, []); + void loadFocus(todayDate.current, todayKey.current); + }, [loadFocus]); + + async function handleSave() { + const trimmed = inputValue.trim(); + const date = todayDate.current; + const key = todayKey.current; + if (!trimmed || !date) return; - function handleSave() { - const trimmedGoal = inputValue.trim(); - if (!trimmedGoal || !todayKey) return; + // Optimistic update. + const prevGoal = goal; + setGoal(trimmed); + setInputValue(trimmed); + setIsEditing(false); + setIsSaving(true); + setServerError(null); try { - window.localStorage.setItem(todayKey, trimmedGoal); - } catch (e) {} + const res = await fetch("/api/daily-focus", { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ goal_text: trimmed, focus_date: date }), + }); - setGoal(trimmedGoal); - setInputValue(trimmedGoal); - setIsEditing(false); - } + if (!res.ok) { + // Roll back on server error. + setGoal(prevGoal); + setInputValue(trimmed); + setIsEditing(true); + setServerError("Failed to save. Please try again."); + // Keep a localStorage fallback so data is not lost. + try { + window.localStorage.setItem(key, trimmed); + } catch { + // Storage write failed. + } + return; + } - function handleClear() { - if (!todayKey) return; + // Successfully persisted — remove any stale localStorage copy. + try { + window.localStorage.removeItem(key); + } catch { + // Best-effort cleanup. + } + } catch { + // Network failure — keep the optimistic state and save locally. + try { + window.localStorage.setItem(key, trimmed); + } catch { + // Storage write failed. + } + setServerError( + "Saved locally. Will sync when your connection is restored." + ); + } finally { + setIsSaving(false); + } + } - try { - window.localStorage.removeItem(todayKey); - } catch (e) {} + async function handleClear() { + const date = todayDate.current; + const key = todayKey.current; + if (!date) return; + // Optimistic update. + const prevGoal = goal; setGoal(""); setInputValue(""); setIsEditing(true); + setIsSaving(true); + setServerError(null); + + try { + const res = await fetch(`/api/daily-focus?date=${date}`, { + method: "DELETE", + }); + + if (!res.ok) { + // Roll back. + setGoal(prevGoal); + setInputValue(prevGoal); + setIsEditing(false); + setServerError("Failed to clear. Please try again."); + return; + } + + try { + window.localStorage.removeItem(key); + } catch { + // Best-effort cleanup. + } + } catch { + // Network failure — keep the optimistic cleared state. + try { + window.localStorage.removeItem(key); + } catch { + // Best-effort cleanup. + } + setServerError( + "Cleared locally. Will sync when your connection is restored." + ); + } finally { + setIsSaving(false); + } } function handleEdit() { @@ -104,6 +295,7 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) { setIsEditing(true); } + // SSR skeleton — identical to the original to avoid layout shift. if (!isMounted) { return ( @@ -150,7 +342,12 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
@@ -161,20 +358,30 @@ export default function TodayFocusHero({ userName }: TodayFocusHeroProps) {
+ {serverError} +