68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { useState } from 'react';
|
|
import ClassSelection from './ClassSelection';
|
|
import NameModal from './modal/NameModal';
|
|
import ConfirmationModal from './modal/ConfirmationModal';
|
|
import { PetClassInfo } from '../types/Pet';
|
|
import { createPet } from '../services/api/api';
|
|
|
|
interface PetRegisterProps {
|
|
onPetCreated: (newPet: any) => void;
|
|
}
|
|
|
|
export default function PetRegister({ onPetCreated }: PetRegisterProps) {
|
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
const [showNameModal, setShowNameModal] = useState(false);
|
|
const [petName, setPetName] = useState('');
|
|
const [selectedClass, setSelectedClass] = useState<{ key: string; info: PetClassInfo } | null>(null);
|
|
|
|
const handleClassSelect = (classKey: string, classInfo: PetClassInfo) => {
|
|
setSelectedClass({ key: classKey, info: classInfo });
|
|
setShowConfirmation(true);
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
if (!selectedClass) return;
|
|
setShowConfirmation(false);
|
|
setShowNameModal(true);
|
|
setPetName('');
|
|
};
|
|
|
|
const handleNameSubmit = async () => {
|
|
if (!selectedClass || !petName.trim()) return;
|
|
|
|
try {
|
|
const newPet = await createPet({
|
|
name: petName.trim(),
|
|
class: selectedClass.key,
|
|
});
|
|
onPetCreated(newPet);
|
|
} catch (error) {
|
|
console.error('Error creating pet:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white">
|
|
{showNameModal && selectedClass ? (
|
|
<NameModal
|
|
selectedClass={selectedClass}
|
|
petName={petName}
|
|
setPetName={setPetName}
|
|
handleNameSubmit={handleNameSubmit}
|
|
setShowNameModal={setShowNameModal}
|
|
setSelectedClass={setSelectedClass}
|
|
/>
|
|
) : showConfirmation && selectedClass ? (
|
|
<ConfirmationModal
|
|
selectedClass={selectedClass}
|
|
handleConfirm={handleConfirm}
|
|
setShowConfirmation={setShowConfirmation}
|
|
setSelectedClass={setSelectedClass}
|
|
/>
|
|
) : (
|
|
<ClassSelection onSelect={handleClassSelect} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|