sidney
/
microtecflix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(react): extract CoursePricingCard from array map to fix hook rules violation
Build and Deploy (Gitea) / build-and-deploy (push) Successful in 56s Details

This commit is contained in:
Sidney Gomes 2026-07-22 20:10:36 -03:00
parent 5bbe00b2f3
commit 7599b6bc2e
1 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/AdminPricingManager.tsx
View File

@ -7,6 +7,67 @@ interface AdminPricingManagerProps {
fetchCourses: () => void;
}
function CoursePricingCard({ course, saveLoading, onSave }: { course: Course, saveLoading: string | null, onSave: (id: string, locked: boolean, price: number) => void }) {
const [localPrice, setLocalPrice] = useState(course.price || 0);
const [localLocked, setLocalLocked] = useState(course.isLocked || false);
const isChanged = localPrice !== (course.price || 0) || localLocked !== (course.isLocked || false);
return (
<div className="bg-zinc-900/50 border border-white/10 rounded-xl p-4 flex flex-col justify-between">
<div>
<h3 className="text-white font-bold mb-1 truncate" title={course.title}>{course.title}</h3>
<p className="text-xs text-zinc-500 mb-4">{course.category}</p>
<div className="flex items-center justify-between mb-4 bg-black/40 p-2 rounded-lg">
<span className="text-sm text-zinc-300 font-medium">Acesso</span>
<button
onClick={() => setLocalLocked(!localLocked)}
className={`px-3 py-1 rounded-md text-xs font-bold transition-all ${
localLocked ? 'bg-amber-500/20 text-amber-400 border border-amber-500/30' : 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
}`}
>
{localLocked ? '💰 Pago (Bloqueado)' : '🔓 Gratuito (Livre)'}
</button>
</div>
{localLocked && (
<div className="space-y-1 mb-4">
<label className="text-xs text-zinc-400 font-bold">Preço Avulso (R$)</label>
<div className="relative">
<DollarSign className="w-4 h-4 text-zinc-500 absolute left-3 top-3" />
<input
type="number"
step="0.01"
value={localPrice}
onChange={(e) => setLocalPrice(parseFloat(e.target.value) || 0)}
className="w-full bg-black/40 border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-white focus:outline-none focus:border-red-500 transition-colors"
/>
</div>
</div>
)}
</div>
<button
disabled={!isChanged || saveLoading === `course_${course.id}`}
onClick={() => onSave(course.id, localLocked, localPrice)}
className={`w-full py-2 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all ${
isChanged
? 'bg-red-600 hover:bg-red-700 text-white shadow-[0_0_15px_rgba(220,38,38,0.3)]'
: 'bg-zinc-800 text-zinc-500 cursor-not-allowed'
}`}
>
{saveLoading === `course_${course.id}` ? (
<RefreshCw className="w-4 h-4 animate-spin" />
) : (
<Save className="w-4 h-4" />
)}
Salvar Alteração
</button>
</div>
);
}
export const AdminPricingManager: React.FC<AdminPricingManagerProps> = ({ courses, fetchCourses }) => {
const [plans, setPlans] = useState<Plan[]>([]);
const [loading, setLoading] = useState(true);
@ -126,67 +187,14 @@ export const AdminPricingManager: React.FC<AdminPricingManagerProps> = ({ course
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{courses.map(course => {
// Local state to handle fast typing before saving
const [localPrice, setLocalPrice] = useState(course.price || 0);
const [localLocked, setLocalLocked] = useState(course.isLocked || false);
const isChanged = localPrice !== (course.price || 0) || localLocked !== (course.isLocked || false);
return (
<div key={course.id} className="bg-zinc-900/50 border border-white/10 rounded-xl p-4 flex flex-col justify-between">
<div>
<h3 className="text-white font-bold mb-1 truncate" title={course.title}>{course.title}</h3>
<p className="text-xs text-zinc-500 mb-4">{course.category}</p>
<div className="flex items-center justify-between mb-4 bg-black/40 p-2 rounded-lg">
<span className="text-sm text-zinc-300 font-medium">Acesso</span>
<button
onClick={() => setLocalLocked(!localLocked)}
className={`px-3 py-1 rounded-md text-xs font-bold transition-all ${
localLocked ? 'bg-amber-500/20 text-amber-400 border border-amber-500/30' : 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
}`}
>
{localLocked ? '💰 Pago (Bloqueado)' : '🔓 Gratuito (Livre)'}
</button>
</div>
{localLocked && (
<div className="space-y-1 mb-4">
<label className="text-xs text-zinc-400 font-bold">Preço Avulso (R$)</label>
<div className="relative">
<DollarSign className="w-4 h-4 text-zinc-500 absolute left-3 top-3" />
<input
type="number"
step="0.01"
value={localPrice}
onChange={(e) => setLocalPrice(parseFloat(e.target.value) || 0)}
className="w-full bg-black/40 border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-white focus:outline-none focus:border-red-500 transition-colors"
/>
</div>
</div>
)}
</div>
<button
disabled={!isChanged || saveLoading === `course_${course.id}`}
onClick={() => handleUpdateCoursePrice(course.id, localLocked, localPrice)}
className={`w-full py-2 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all ${
isChanged
? 'bg-red-600 hover:bg-red-700 text-white shadow-[0_0_15px_rgba(220,38,38,0.3)]'
: 'bg-zinc-800 text-zinc-500 cursor-not-allowed'
}`}
>
{saveLoading === `course_${course.id}` ? (
<RefreshCw className="w-4 h-4 animate-spin" />
) : (
<Save className="w-4 h-4" />
)}
Salvar Alteração
</button>
</div>
);
})}
{courses.map(course => (
<CoursePricingCard
key={course.id}
course={course}
saveLoading={saveLoading}
onSave={handleUpdateCoursePrice}
/>
))}
</div>
</div>
</div>