fix: padronizacao dos botoes salvar do admin, encapsulamento em <span> e adicao de ErrorBoundary contra tela branca
Build and Deploy (Gitea) / build-and-deploy (push) Failing after 31s Details

This commit is contained in:
Sidney Gomes 2026-07-21 17:59:06 -03:00
parent 1ccf30979d
commit 9a69d11d58
4 changed files with 80 additions and 13 deletions

View File

@ -1,6 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import App from './App.tsx'; import App from './App.tsx';
import AdminApp from './AdminApp.tsx'; import AdminApp from './AdminApp.tsx';
import { ErrorBoundary } from './components/ErrorBoundary.tsx';
export default function Root() { export default function Root() {
const [simulatedDomain] = useState<'student' | 'admin'>(() => { const [simulatedDomain] = useState<'student' | 'admin'>(() => {
@ -33,8 +34,10 @@ export default function Root() {
}, [isAdmin]); }, [isAdmin]);
return ( return (
<div className="relative min-h-screen"> <ErrorBoundary>
{isAdmin ? <AdminApp /> : <App />} <div className="relative min-h-screen">
</div> {isAdmin ? <AdminApp /> : <App />}
</div>
</ErrorBoundary>
); );
} }

View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { import {
GraduationCap, Plus, Edit, Trash2, FolderPlus, FilePlus, ChevronRight, GraduationCap, Plus, Edit, Trash2, FolderPlus, FilePlus, ChevronRight,
ArrowLeft, Film, Youtube, RefreshCw, Layers, CheckCircle ArrowLeft, Film, Youtube, RefreshCw, Layers, CheckCircle, CheckCircle2
} from 'lucide-react'; } from 'lucide-react';
interface Lesson { interface Lesson {
@ -510,9 +510,10 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
<div className="md:col-span-2 flex justify-end"> <div className="md:col-span-2 flex justify-end">
<button <button
type="submit" type="submit"
className="glass-btn-primary text-white text-xs font-bold px-6 py-3 rounded-lg cursor-pointer" className="glass-btn-primary text-white font-extrabold text-xs md:text-sm py-3 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer"
> >
{editingCourse ? 'Salvar Alterações' : 'Criar Curso'} <CheckCircle2 size={18} />
<span>{editingCourse ? 'Salvar Alterações' : 'Criar Curso'}</span>
</button> </button>
</div> </div>
</form> </form>
@ -579,8 +580,9 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
/> />
</div> </div>
<div className="flex space-x-2"> <div className="flex space-x-2">
<button type="submit" className="glass-btn-primary text-white text-xs font-bold px-4 py-2.5 rounded-lg"> <button type="submit" className="glass-btn-primary text-white font-extrabold text-xs py-2.5 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer">
Salvar <CheckCircle2 size={16} />
<span>Salvar Módulo</span>
</button> </button>
<button type="button" onClick={() => setShowModuleForm(false)} className="text-xs text-zinc-500 px-2"> <button type="button" onClick={() => setShowModuleForm(false)} className="text-xs text-zinc-500 px-2">
Cancelar Cancelar
@ -667,8 +669,9 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
</div> </div>
<div className="md:col-span-3 flex justify-end"> <div className="md:col-span-3 flex justify-end">
<button type="submit" className="glass-btn-primary text-white font-bold text-xs px-6 py-2.5 rounded-lg"> <button type="submit" className="glass-btn-primary text-white font-extrabold text-xs md:text-sm py-3 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer">
{editingLesson ? 'Salvar Aula' : 'Criar Aula'} <CheckCircle2 size={18} />
<span>{editingLesson ? 'Salvar Aula' : 'Criar Aula'}</span>
</button> </button>
</div> </div>
</form> </form>
@ -922,8 +925,9 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
<button onClick={() => setShowActivityModal(false)} className="px-4 py-2 text-sm text-zinc-400 hover:text-white"> <button onClick={() => setShowActivityModal(false)} className="px-4 py-2 text-sm text-zinc-400 hover:text-white">
Cancelar Cancelar
</button> </button>
<button onClick={handleSaveActivity} className="glass-btn-primary px-6 py-2 rounded-lg text-sm font-bold text-white"> <button onClick={handleSaveActivity} className="glass-btn-primary text-white font-extrabold text-xs md:text-sm py-3 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer">
Salvar Atividade <CheckCircle2 size={18} />
<span>Salvar Atividade</span>
</button> </button>
</div> </div>
</div> </div>

View File

@ -924,7 +924,7 @@ export default function AdminDashboard({ token }: AdminDashboardProps) {
) : ( ) : (
<CheckCircle2 size={18} /> <CheckCircle2 size={18} />
)} )}
{isSavingSettings ? 'Salvando...' : 'Salvar Configurações'} <span>{isSavingSettings ? 'Salvando...' : 'Salvar Configurações'}</span>
</button> </button>
</div> </div>
</form> </form>

View File

@ -0,0 +1,60 @@
import React, { Component, ErrorInfo, ReactNode } from 'react';
import { RefreshCw, AlertTriangle } from 'lucide-react';
interface Props {
children: ReactNode;
}
interface State {
hasError: boolean;
error: Error | null;
}
export class ErrorBoundary extends Component<Props, State> {
public state: State = {
hasError: false,
error: null
};
public static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error('Uncaught error caught by ErrorBoundary:', error, errorInfo);
}
private handleReload = () => {
this.setState({ hasError: false, error: null });
window.location.reload();
};
public render() {
if (this.state.hasError) {
return (
<div className="min-h-screen bg-black text-white flex items-center justify-center p-6 text-center">
<div className="max-w-md glass-card p-8 rounded-2xl border border-white/10 space-y-6 shadow-2xl animate-fade-in">
<div className="bg-[#E50914]/10 text-[#E50914] p-4 rounded-full inline-block">
<AlertTriangle size={36} />
</div>
<div className="space-y-2">
<h2 className="text-xl font-black text-white">Recarregando Interface</h2>
<p className="text-xs text-zinc-400">
Uma alteração de estrutura foi detectada pelo navegador. Clique no botão abaixo para restaurar a página.
</p>
</div>
<button
onClick={this.handleReload}
className="w-full glass-btn-primary text-white font-extrabold text-sm py-3 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center justify-center gap-2 cursor-pointer"
>
<RefreshCw size={18} />
<span>Restaurar Página</span>
</button>
</div>
</div>
);
}
return this.props.children;
}
}