Spaces:
Sleeping
Sleeping
File size: 3,257 Bytes
aa120c6 19d90a0 aa120c6 19d90a0 aa120c6 19d90a0 aa120c6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import './TierList.css';
const API_BASE_URL = "/api";
const TierListManager = () => {
const [tierLists, setTierLists] = useState([]);
const [newListName, setNewListName] = useState('');
const navigate = useNavigate();
useEffect(() => {
fetchTierLists();
}, []);
const fetchTierLists = () => {
fetch(`${API_BASE_URL}/tierlist/read`)
.then(response => response.json())
.then(data => setTierLists(data))
.catch(error => console.error('Error fetching tier lists:', error));
};
const createTierList = (e) => {
e.preventDefault();
fetch(`${API_BASE_URL}/tierlist/create`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: newListName }),
})
.then(response => response.json())
.then(data => {
if (data.success) {
setNewListName('');
fetchTierLists();
}
})
.catch(error => console.error('Error creating tier list:', error));
};
const deleteTierList = (id) => {
fetch(`${API_BASE_URL}/tierlist/delete`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id }),
})
.then(response => response.json())
.then(data => {
if (data.success) {
fetchTierLists();
}
})
.catch(error => console.error('Error deleting tier list:', error));
};
return (
<div className="tier-list-manager">
<h2>Your Tier Lists</h2>
<form onSubmit={createTierList} className="create-list-form">
<input
type="text"
value={newListName}
onChange={(e) => setNewListName(e.target.value)}
placeholder="New tier list name"
required
/>
<button type="submit">Create New List</button>
</form>
<div className="tier-lists">
{tierLists.map(list => (
<div key={list.id} className="tier-list-item">
<h3>{list.name}</h3>
<div className="tier-list-actions">
<button onClick={() => navigate(`/start-ranking/${list.id}`)}>
Start Ranking
</button>
<button onClick={() => navigate(`/your-ranks/${list.id}`)}>
View Rankings
</button>
<button onClick={() => deleteTierList(list.id)} className="delete">
Delete
</button>
</div>
</div>
))}
</div>
</div>
);
};
export default TierListManager; |