- {userRole === 'admin'
- ? 'As an admin, you can manage the characters below.'
- : 'As a user, you can view the available characters.'}
-
+
Characters
+ {message &&
{message}
}
+
{userRole === 'admin' && (
- <>
-
-
-
+
)}
- {/* Show characters list */}
-
+
+
{characters.length === 0 ? (
-
No characters found.
+
No characters found.
) : (
-
+
{characters.map((character) => (
- -
- onSelectCharacter(character._id)}
- >
- {character.name}
-
-
-
+
-
+ {character.name}
{userRole === 'admin' && (
-
+ <>
+
+
+
)}
))}
)}
-
-
+
+
+
+
);
}
-Characters.propTypes = {
- onSelectCharacter: PropTypes.func.isRequired,
- returnToInfo: PropTypes.func.isRequired,
- onAddCharacter: PropTypes.func.isRequired,
-};
export default Characters;
diff --git a/frontend/src/components/CharactersForm.jsx b/frontend/src/components/CharactersForm.jsx
index 0686053..6ba039e 100644
--- a/frontend/src/components/CharactersForm.jsx
+++ b/frontend/src/components/CharactersForm.jsx
@@ -1,259 +1,105 @@
import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
import { apiRequest } from './utils/api';
-import { getUserRole } from './utils/auth';
-import PropTypes from 'prop-types';
-
import TextInput from './form/TextInput';
import NumberInput from './form/NumberInput';
import ArrayInput from './form/ArrayInput';
import CheckboxInput from './form/CheckboxInput';
-
-import BtnNeonGradient from './buttons/BtnNeonGradient';
import SpaceBtn from './buttons/SpaceBtn';
-function CharacterForm({ characterId, onSave, onCancel }) {
- const [userRole, setUserRole] = useState('user');
+function CharacterForm() {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const isEditing = Boolean(id);
const [character, setCharacter] = useState({
- name: '',
- height: 0,
- species: '',
- homeworld: '',
- affiliation: '',
- stats: {
- forceRating: 0,
- combatSkill: 0,
- pilotingAbility: 0,
- diplomacyRating: 0,
- },
- weapons: [],
- vehicles: [],
- isJedi: false,
- apprentices: [],
- master: '',
- notableAchievements: [],
+ name: '', height: 0, species: '', homeworld: '', affiliation: '',
+ stats: { forceRating: 0, combatSkill: 0, pilotingAbility: 0, diplomacyRating: 0 },
+ weapons: [], vehicles: [], isJedi: false, apprentices: [], master: '', notableAchievements: [],
});
const [error, setError] = useState(null);
- const [loading, setLoading] = useState(false); // Default to false
+ const [loading, setLoading] = useState(false);
useEffect(() => {
- const role = getUserRole();
- setUserRole(role);
-
- if (characterId) {
+ if (isEditing) {
const fetchCharacterData = async () => {
setLoading(true);
try {
- const data = await apiRequest('GET', `/characters/${characterId}`);
- setCharacter((prev) => ({
- ...prev,
- ...data,
- stats: { ...prev.stats, ...data.stats },
- }));
- } catch (err) {
+ const data = await apiRequest('GET', `/characters/${id}`);
+ setCharacter(prev => ({ ...prev, ...data, stats: { ...prev.stats, ...data.stats } }));
+ } catch {
setError('Failed to load character data.');
- console.error('Error fetching character:', err.message);
} finally {
setLoading(false);
}
};
fetchCharacterData();
}
- }, [characterId]);
+ }, [id, isEditing]);
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
-
const [field, subfield] = name.split('.');
if (type === 'checkbox') {
- setCharacter((prev) => ({ ...prev, [name]: checked }));
+ setCharacter(prev => ({ ...prev, [name]: checked }));
} else if (subfield) {
- // Handle nested state (e.g., stats.forceRating)
- setCharacter((prev) => ({
- ...prev,
- [field]: {
- ...prev[field],
- [subfield]: type === 'number' ? parseFloat(value) || 0 : value,
- },
- }));
- } else if (
- ['weapons', 'vehicles', 'apprentices', 'notableAchievements'].includes(
- name
- )
- ) {
- // Handle array inputs
- setCharacter((prev) => ({
- ...prev,
- [name]: value.split(',').map((item) => item.trim()),
- }));
+ setCharacter(prev => ({ ...prev, [field]: { ...prev[field], [subfield]: type === 'number' ? parseFloat(value) || 0 : value } }));
+ } else if (['weapons', 'vehicles', 'apprentices', 'notableAchievements'].includes(name)) {
+ setCharacter(prev => ({ ...prev, [name]: value.split(',').map(item => item.trim()) }));
} else {
- // Handle standard inputs
- setCharacter((prev) => ({
- ...prev,
- [name]: type === 'number' ? parseFloat(value) || 0 : value,
- }));
+ setCharacter(prev => ({ ...prev, [name]: type === 'number' ? parseFloat(value) || 0 : value }));
}
};
const handleSubmit = async (e) => {
e.preventDefault();
- setError(null); // Clear previous errors
+ setError(null);
- const method = characterId ? 'PUT' : 'POST';
- const endpoint = characterId ? `/characters/${characterId}` : '/characters';
+ const method = isEditing ? 'PUT' : 'POST';
+ const endpoint = isEditing ? `/characters/${id}` : '/characters';
try {
- const savedData = await apiRequest(method, endpoint, character);
- onSave(savedData);
+ await apiRequest(method, endpoint, character);
+ navigate('/characters');
} catch (err) {
- setError(
- err.message || 'An unexpected error occurred. Please try again.'
- );
- console.error('Error saving character:', err);
+ setError(err.message || 'An error occurred.');
}
};
- if (loading) {
- return
Loading character...
;
- }
+ if (loading) return
Loading...
;
return (
-