|
| 1 | +import { useEffect, useState } from 'react'; |
| 2 | +import { useTranslation } from 'react-i18next'; |
| 3 | +import { RefreshCw } from 'lucide-react'; |
| 4 | +import { apiFetch } from '@/data/api-client'; |
| 5 | +import pkg from '../../package.json'; |
| 6 | + |
| 7 | +const CHECK_KEY = 'helios-last-update-check'; |
| 8 | +const CHECK_INTERVAL = 7 * 24 * 60 * 60 * 1000; // 1 vez por semana (regla app-auto-update) |
| 9 | +const REPO_URL = 'https://github.com/gnacho/helios'; |
| 10 | + |
| 11 | +/** a vs b semver ('1.10.0' > '1.9.0'); prefijos 'v' ignorados. */ |
| 12 | +function compareSemver(a: string, b: string): number { |
| 13 | + const pa = a.replace(/^v/, '').split('.').map((n) => parseInt(n, 10) || 0); |
| 14 | + const pb = b.replace(/^v/, '').split('.').map((n) => parseInt(n, 10) || 0); |
| 15 | + for (let i = 0; i < 3; i++) { |
| 16 | + if ((pa[i] || 0) !== (pb[i] || 0)) return (pa[i] || 0) - (pb[i] || 0); |
| 17 | + } |
| 18 | + return 0; |
| 19 | +} |
| 20 | + |
| 21 | +/** |
| 22 | + * Ribbon de actualización (patrón app-auto-update: check semanal + aviso si hay |
| 23 | + * versión nueva en el repo público). Solo admin. GET anónima a GitHub releases |
| 24 | + * (el repo es público), 1 vez por semana vía localStorage; aplicar = redesplegar |
| 25 | + * en el servidor, así que el ribbon enlaza a la release. |
| 26 | + */ |
| 27 | +export default function UpdateRibbon() { |
| 28 | + const { t } = useTranslation(); |
| 29 | + const [state, setState] = useState<'idle' | 'checking' | 'uptodate' | 'available' | 'error'>('idle'); |
| 30 | + const [latestVersion, setLatestVersion] = useState(''); |
| 31 | + |
| 32 | + useEffect(() => { |
| 33 | + let stale = false; |
| 34 | + const run = async () => { |
| 35 | + try { |
| 36 | + // Solo admin ve el ribbon (como el resto de la zona de actualizaciones). |
| 37 | + const me = await apiFetch<{ user?: { role?: string } }>('/api/auth/me').catch(() => null); |
| 38 | + if (me?.user?.role !== 'admin') return; |
| 39 | + |
| 40 | + const last = Number(window.localStorage.getItem(CHECK_KEY) || 0); |
| 41 | + if (Date.now() - last < CHECK_INTERVAL) return; // ya se comprobó esta semana |
| 42 | + window.localStorage.setItem(CHECK_KEY, String(Date.now())); |
| 43 | + |
| 44 | + const repo = REPO_URL.match(/github\.com\/([^/]+\/[^/.]+)/)?.[1]; |
| 45 | + if (!repo) return; |
| 46 | + setState('checking'); |
| 47 | + const res = await fetch(`https://api.github.com/repos/${repo}/releases/latest`, { |
| 48 | + headers: { Accept: 'application/vnd.github+json' }, |
| 49 | + }); |
| 50 | + let version = ''; |
| 51 | + if (res.ok) { |
| 52 | + const data = (await res.json()) as { tag_name?: string }; |
| 53 | + version = data.tag_name || ''; |
| 54 | + } else if (res.status === 404) { |
| 55 | + const tagRes = await fetch(`https://api.github.com/repos/${repo}/tags?per_page=1`, { |
| 56 | + headers: { Accept: 'application/vnd.github+json' }, |
| 57 | + }); |
| 58 | + if (tagRes.ok) { |
| 59 | + const tags = (await tagRes.json()) as { name?: string }[]; |
| 60 | + version = tags[0]?.name || ''; |
| 61 | + } |
| 62 | + } |
| 63 | + if (stale) return; |
| 64 | + if (!version || compareSemver(version, pkg.version) <= 0) setState('uptodate'); |
| 65 | + else { |
| 66 | + setLatestVersion(version.replace(/^v/, '')); |
| 67 | + setState('available'); |
| 68 | + } |
| 69 | + } catch { |
| 70 | + if (!stale) setState('error'); |
| 71 | + } |
| 72 | + }; |
| 73 | + void run(); |
| 74 | + return () => { |
| 75 | + stale = true; |
| 76 | + }; |
| 77 | + }, []); |
| 78 | + |
| 79 | + if (state !== 'available') return null; |
| 80 | + |
| 81 | + return ( |
| 82 | + <div |
| 83 | + role="status" |
| 84 | + className="mb-4 flex items-center gap-2.5 rounded-xl border border-amber-500/35 bg-amber-500/10 px-3.5 py-2.5 text-[13px] font-semibold text-amber-500" |
| 85 | + > |
| 86 | + <RefreshCw className="h-4 w-4 shrink-0" /> |
| 87 | + <span>{t('ajustes.about.updateAvailable', { version: latestVersion })}</span> |
| 88 | + <a |
| 89 | + href={`${REPO_URL}/releases`} |
| 90 | + target="_blank" |
| 91 | + rel="noreferrer" |
| 92 | + className="ml-auto flex h-8 shrink-0 items-center rounded-lg border border-amber-500/40 px-3 text-xs font-medium text-amber-500 transition-colors hover:bg-amber-500/15" |
| 93 | + > |
| 94 | + {t('ajustes.about.viewRelease')} |
| 95 | + </a> |
| 96 | + </div> |
| 97 | + ); |
| 98 | +} |
0 commit comments