refactor: componentizar lógica de App.jsx manteniendo funcionalidad
This commit is contained in:
Alexis
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>frontend</title>
|
||||
<title>Deck of Cards</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+2
-236
@@ -1,243 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
import { calculateValueFunction } from './services/docService';
|
||||
import BasicMode from './pages/BasicMode';
|
||||
|
||||
function App() {
|
||||
|
||||
const [criterionName, setCriterionName] = useState('');
|
||||
const [levels, setLevels] = useState(['', '', '']);
|
||||
const [blankCards, setBlankCards] = useState([0, 0]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [result, setResult] = useState(null);
|
||||
|
||||
const handleCalculate = async () => {
|
||||
setIsLoading(true);
|
||||
setResult(null);
|
||||
|
||||
const firstIndex = "0";
|
||||
const lastIndex = (levels.length - 1).toString();
|
||||
|
||||
const currentReferences = {
|
||||
[firstIndex]: 0,
|
||||
[lastIndex]: 1
|
||||
};
|
||||
|
||||
const payload = {
|
||||
criterion_name: criterionName || "Criterio sin nombre",
|
||||
levels: levels,
|
||||
blank_cards: blankCards,
|
||||
references: currentReferences
|
||||
};
|
||||
|
||||
try {
|
||||
const data = await calculateValueFunction(payload);
|
||||
setResult(data);
|
||||
} catch (error) {
|
||||
alert("No se ha podido conectar con el backend: " + error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleLevelChange = (index, newValue) => {
|
||||
const newLevels = [...levels];
|
||||
newLevels[index] = newValue;
|
||||
setLevels(newLevels);
|
||||
};
|
||||
|
||||
const handleAddLevel = () => {
|
||||
setLevels([...levels, '']);
|
||||
setBlankCards([...blankCards, 0]);
|
||||
};
|
||||
|
||||
const handleRemoveLevel = (indexToRemove) => {
|
||||
if (levels.length <= 2) return;
|
||||
const newLevels = levels.filter((_, index) => index !== indexToRemove);
|
||||
const blankIndexToRemove = indexToRemove === 0 ? 0 : indexToRemove - 1;
|
||||
const newBlankCards = blankCards.filter((_, index) => index !== blankIndexToRemove);
|
||||
setLevels(newLevels);
|
||||
setBlankCards(newBlankCards);
|
||||
};
|
||||
|
||||
const handleBlankCardChange = (index, delta) => {
|
||||
const newBlankCards = [...blankCards];
|
||||
const newValue = newBlankCards[index] + delta;
|
||||
if (newValue >= 0) {
|
||||
newBlankCards[index] = newValue;
|
||||
setBlankCards(newBlankCards);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 p-8 font-sans text-slate-800 flex flex-col items-center">
|
||||
|
||||
{/* TÍTULO */}
|
||||
<div className="w-full max-w-2xl bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-12">
|
||||
<label className="block text-sm font-bold text-slate-400 uppercase tracking-widest mb-2 text-center">
|
||||
Nombre del Criterio
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ej. Calidad del aceite..."
|
||||
value={criterionName}
|
||||
onChange={(e) => setCriterionName(e.target.value)}
|
||||
className="w-full text-3xl font-bold p-2 text-center text-slate-700 border-b-2 border-transparent hover:border-slate-200 focus:border-blue-500 outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* TIMELINE VERTICAL */}
|
||||
<div className="w-full max-w-lg flex flex-col items-center">
|
||||
{levels.map((level, index) => (
|
||||
<div key={index} className="w-full flex flex-col items-center">
|
||||
|
||||
{/* CARTA DE NIVEL (etiqueta) */}
|
||||
<div className="relative w-72 h-44 bg-white border-2 border-slate-200 rounded-xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] flex flex-col items-center justify-center transition-transform hover:-translate-y-1 hover:shadow-[0_12px_40px_rgb(0,0,0,0.12)] group">
|
||||
|
||||
{/* Botón Eliminar */}
|
||||
{levels.length > 2 && (
|
||||
<button
|
||||
onClick={() => handleRemoveLevel(index)}
|
||||
className="absolute -top-3 -right-3 w-8 h-8 bg-white text-slate-400 rounded-full border border-slate-200 flex items-center justify-center font-bold hover:bg-red-500 hover:text-white hover:border-red-500 transition-colors z-10 opacity-0 group-hover:opacity-100 shadow-sm"
|
||||
title="Eliminar carta"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Detalles tipo naipe */}
|
||||
<span className="absolute top-4 left-4 text-sm font-black text-slate-300">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="absolute bottom-4 right-4 text-sm font-black text-slate-300 rotate-180">
|
||||
{index + 1}
|
||||
</span>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Escribe aquí..."
|
||||
value={level}
|
||||
onChange={(e) => handleLevelChange(index, e.target.value)}
|
||||
className="w-4/5 text-center text-2xl font-bold text-slate-700 bg-transparent border-b-2 border-dashed border-slate-300 focus:border-blue-500 outline-none pb-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CONECTOR Y CARTAS BLANCAS */}
|
||||
{index < levels.length - 1 && (
|
||||
<div className="flex flex-col items-center my-2 w-full">
|
||||
<div className="w-0.5 h-6 bg-slate-300"></div>
|
||||
|
||||
<div className="flex items-center gap-3 bg-white px-4 py-2 rounded-full shadow-sm border border-slate-200 z-10">
|
||||
<span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Blancas:</span>
|
||||
<button
|
||||
onClick={() => handleBlankCardChange(index, -1)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
|
||||
>-</button>
|
||||
<span className="text-base font-bold w-6 text-center text-blue-600">
|
||||
{blankCards[index]}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleBlankCardChange(index, 1)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
|
||||
>+</button>
|
||||
</div>
|
||||
|
||||
{blankCards[index] > 0 && (
|
||||
<div className="flex flex-col items-center -space-y-4 mt-3 mb-1">
|
||||
{Array.from({ length: blankCards[index] }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-16 h-8 bg-blue-50 border-2 border-blue-200 rounded shadow-sm opacity-80"
|
||||
style={{ zIndex: i }}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-0.5 h-6 bg-slate-300"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* BOTÓN AÑADIR */}
|
||||
<div className="w-72 mt-6">
|
||||
<button
|
||||
onClick={handleAddLevel}
|
||||
className="w-full h-24 border-4 border-dashed border-slate-300 rounded-xl flex flex-col items-center justify-center gap-1 text-slate-400 font-semibold hover:bg-blue-50 hover:border-blue-400 hover:text-blue-500 transition-all active:scale-[0.98]"
|
||||
>
|
||||
<span className="text-3xl leading-none">+</span>
|
||||
<span className="text-sm">Añadir Carta</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* BOTÓN DE CALCULAR */}
|
||||
<div className="w-full max-w-lg mt-12 pt-8 border-t-2 border-slate-200 flex flex-col items-center">
|
||||
<button
|
||||
onClick={handleCalculate}
|
||||
disabled={isLoading}
|
||||
className={`w-full py-4 text-white text-xl font-bold rounded-xl shadow-lg transition-all active:scale-[0.98] ${
|
||||
isLoading ? 'bg-slate-400 cursor-not-allowed' : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 hover:shadow-xl'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? 'Calculando...' : 'Calcular Valores DoC'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* GRÁFICA */}
|
||||
{result && (
|
||||
<div className="w-full max-w-4xl mt-12 p-8 bg-white rounded-2xl shadow-xl border border-slate-100">
|
||||
<h3 className="text-2xl font-bold text-slate-800 mb-8 text-center">
|
||||
Función de Valor: {result.criterion_name}
|
||||
</h3>
|
||||
|
||||
<div className="w-full mt-4">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart
|
||||
data={Object.entries(result.values).map(([label, value]) => ({
|
||||
nombre: label,
|
||||
valor: value
|
||||
}))}
|
||||
margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
|
||||
<XAxis
|
||||
dataKey="nombre"
|
||||
tick={{ fill: '#475569', fontWeight: 600 }}
|
||||
dy={10}
|
||||
/>
|
||||
|
||||
<YAxis
|
||||
domain={[0, 1]}
|
||||
tick={{ fill: '#475569' }}
|
||||
dx={-10}
|
||||
/>
|
||||
|
||||
<Tooltip
|
||||
contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
|
||||
formatter={(value) => [value.toFixed(4), 'Valor DoC']}
|
||||
labelStyle={{ fontWeight: 'bold', color: '#1e293b', marginBottom: '4px' }}
|
||||
/>
|
||||
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="valor"
|
||||
stroke="#2563eb"
|
||||
strokeWidth={4}
|
||||
activeDot={{ r: 8, strokeWidth: 0 }}
|
||||
dot={{ r: 6, fill: '#2563eb', stroke: '#ffffff', strokeWidth: 2 }}
|
||||
animationDuration={1500}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<BasicMode/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
export default function AddLevelButton({ handleAddLevel }) {
|
||||
return (
|
||||
<div className="w-72 mt-6">
|
||||
<button
|
||||
onClick={handleAddLevel}
|
||||
className="w-full h-24 border-4 border-dashed border-slate-300 rounded-xl flex flex-col items-center justify-center gap-1 text-slate-400 font-semibold hover:bg-blue-50 hover:border-blue-400 hover:text-blue-500 transition-all active:scale-[0.98]"
|
||||
>
|
||||
<span className="text-3xl leading-none">+</span>
|
||||
<span className="text-sm">Añadir Carta</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
export default function BlankCardsCounter({ index, blankCardsCount, handleBlankCardChange }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center my-2 w-full">
|
||||
<div className="w-0.5 h-6 bg-slate-300"></div>
|
||||
|
||||
<div className="flex items-center gap-3 bg-white px-4 py-2 rounded-full shadow-sm border border-slate-200 z-10">
|
||||
<span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Blancas:</span>
|
||||
<button
|
||||
onClick={() => handleBlankCardChange(index, -1)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
|
||||
>-</button>
|
||||
<span className="text-base font-bold w-6 text-center text-blue-600">
|
||||
{blankCardsCount}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleBlankCardChange(index, 1)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
|
||||
>+</button>
|
||||
</div>
|
||||
|
||||
{blankCardsCount > 0 && (
|
||||
<div className="flex flex-col items-center -space-y-4 mt-3 mb-1">
|
||||
{Array.from({ length: blankCardsCount }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-16 h-8 bg-blue-50 border-2 border-blue-200 rounded shadow-sm opacity-80"
|
||||
style={{ zIndex: i }}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-0.5 h-6 bg-slate-300"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
export default function CardEditor({ index, level, handleLevelChange, handleRemoveLevel, totalLevels }) {
|
||||
return (
|
||||
<div className="relative w-72 h-44 bg-white border-2 border-slate-200 rounded-xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] flex flex-col items-center justify-center transition-transform hover:-translate-y-1 hover:shadow-[0_12px_40px_rgb(0,0,0,0.12)] group">
|
||||
|
||||
{/* Botón Eliminar */}
|
||||
{totalLevels > 2 && (
|
||||
<button
|
||||
onClick={() => handleRemoveLevel(index)}
|
||||
className="absolute -top-3 -right-3 w-8 h-8 bg-white text-slate-400 rounded-full border border-slate-200 flex items-center justify-center font-bold hover:bg-red-500 hover:text-white hover:border-red-500 transition-colors z-10 opacity-0 group-hover:opacity-100 shadow-sm"
|
||||
title="Eliminar carta"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Detalles tipo naipe */}
|
||||
<span className="absolute top-4 left-4 text-sm font-black text-slate-300">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="absolute bottom-4 right-4 text-sm font-black text-slate-300 rotate-180">
|
||||
{index + 1}
|
||||
</span>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Escribe aquí..."
|
||||
value={level}
|
||||
onChange={(e) => handleLevelChange(index, e.target.value)}
|
||||
className="w-4/5 text-center text-2xl font-bold text-slate-700 bg-transparent border-b-2 border-dashed border-slate-300 focus:border-blue-500 outline-none pb-1"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export default function CriterionInput({ criterionName, setCriterionName }) {
|
||||
return (
|
||||
<div className="w-full max-w-2xl bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-12">
|
||||
<label className="block text-sm font-bold text-slate-400 uppercase tracking-widest mb-2 text-center">
|
||||
Nombre del Criterio
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ej. Calidad del aceite..."
|
||||
value={criterionName}
|
||||
onChange={(e) => setCriterionName(e.target.value)}
|
||||
className="w-full text-3xl font-bold p-2 text-center text-slate-700 border-b-2 border-transparent hover:border-slate-200 focus:border-blue-500 outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
|
||||
export default function ValueFunctionChart({ result }) {
|
||||
if (!result) return null;
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-4xl mt-12 p-8 bg-white rounded-2xl shadow-xl border border-slate-100">
|
||||
<h3 className="text-2xl font-bold text-slate-800 mb-8 text-center">
|
||||
Función de Valor: {result.criterion_name}
|
||||
</h3>
|
||||
|
||||
<div className="w-full mt-4">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart
|
||||
data={Object.entries(result.values).map(([label, value]) => ({
|
||||
nombre: label,
|
||||
valor: value
|
||||
}))}
|
||||
margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="nombre" tick={{ fill: '#475569', fontWeight: 600 }} dy={10} />
|
||||
<YAxis domain={[0, 1]} tick={{ fill: '#475569' }} dx={-10} />
|
||||
<Tooltip
|
||||
contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
|
||||
formatter={(value) => [value.toFixed(4), 'Valor DoC']}
|
||||
labelStyle={{ fontWeight: 'bold', color: '#1e293b', marginBottom: '4px' }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="valor"
|
||||
stroke="#2563eb"
|
||||
strokeWidth={4}
|
||||
activeDot={{ r: 8, strokeWidth: 0 }}
|
||||
dot={{ r: 6, fill: '#2563eb', stroke: '#ffffff', strokeWidth: 2 }}
|
||||
animationDuration={1500}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useState } from 'react';
|
||||
import CriterionInput from '../components/CriterionInput';
|
||||
import CardEditor from '../components/CardEditor';
|
||||
import BlankCardsCounter from '../components/BlankCardsCounter';
|
||||
import AddLevelButton from '../components/AddLevelButton';
|
||||
import ValueFunctionChart from '../components/ValueFunctionChart';
|
||||
import { calculateValueFunction } from '../services/docService';
|
||||
|
||||
export default function BasicMode() {
|
||||
const [criterionName, setCriterionName] = useState('');
|
||||
const [levels, setLevels] = useState(['', '', '']);
|
||||
const [blankCards, setBlankCards] = useState([0, 0]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [result, setResult] = useState(null);
|
||||
|
||||
const handleCalculate = async () => {
|
||||
setIsLoading(true);
|
||||
setResult(null);
|
||||
|
||||
const firstIndex = "0";
|
||||
const lastIndex = (levels.length - 1).toString();
|
||||
|
||||
const currentReferences = {
|
||||
[firstIndex]: 0,
|
||||
[lastIndex]: 1
|
||||
};
|
||||
|
||||
const payload = {
|
||||
criterion_name: criterionName || "Criterio sin nombre",
|
||||
levels: levels,
|
||||
blank_cards: blankCards,
|
||||
references: currentReferences
|
||||
};
|
||||
|
||||
try {
|
||||
const data = await calculateValueFunction(payload);
|
||||
setResult(data);
|
||||
} catch (error) {
|
||||
alert("No se ha podido conectar con el backend: " + error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLevelChange = (index, newValue) => {
|
||||
const newLevels = [...levels];
|
||||
newLevels[index] = newValue;
|
||||
setLevels(newLevels);
|
||||
};
|
||||
|
||||
const handleAddLevel = () => {
|
||||
setLevels([...levels, '']);
|
||||
setBlankCards([...blankCards, 0]);
|
||||
};
|
||||
|
||||
const handleRemoveLevel = (indexToRemove) => {
|
||||
if (levels.length <= 2) return;
|
||||
const newLevels = levels.filter((_, index) => index !== indexToRemove);
|
||||
const blankIndexToRemove = indexToRemove === 0 ? 0 : indexToRemove - 1;
|
||||
const newBlankCards = blankCards.filter((_, index) => index !== blankIndexToRemove);
|
||||
setLevels(newLevels);
|
||||
setBlankCards(newBlankCards);
|
||||
};
|
||||
|
||||
const handleBlankCardChange = (index, delta) => {
|
||||
const newBlankCards = [...blankCards];
|
||||
const newValue = newBlankCards[index] + delta;
|
||||
if (newValue >= 0) {
|
||||
newBlankCards[index] = newValue;
|
||||
setBlankCards(newBlankCards);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center">
|
||||
|
||||
<CriterionInput
|
||||
criterionName={criterionName}
|
||||
setCriterionName={setCriterionName}
|
||||
/>
|
||||
|
||||
<div className="w-full max-w-lg flex flex-col items-center">
|
||||
{levels.map((level, index) => (
|
||||
<div key={index} className="w-full flex flex-col items-center">
|
||||
|
||||
<CardEditor
|
||||
index={index}
|
||||
level={level}
|
||||
handleLevelChange={handleLevelChange}
|
||||
handleRemoveLevel={handleRemoveLevel}
|
||||
totalLevels={levels.length}
|
||||
/>
|
||||
|
||||
{index < levels.length - 1 && (
|
||||
<BlankCardsCounter
|
||||
index={index}
|
||||
blankCardsCount={blankCards[index]}
|
||||
handleBlankCardChange={handleBlankCardChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<AddLevelButton handleAddLevel={handleAddLevel} />
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-lg mt-12 pt-8 border-t-2 border-slate-200 flex flex-col items-center">
|
||||
<button
|
||||
onClick={handleCalculate}
|
||||
disabled={isLoading}
|
||||
className={`w-full py-4 text-white text-xl font-bold rounded-xl shadow-lg transition-all active:scale-[0.98] ${
|
||||
isLoading ? 'bg-slate-400 cursor-not-allowed' : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 hover:shadow-xl'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? 'Calculando...' : 'Calcular Valores DoC'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ValueFunctionChart result={result} />
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user