125 lines
3.9 KiB
JavaScript
125 lines
3.9 KiB
JavaScript
// ⚠️ COMPILARE PRIMA DI INIZIARE
|
|
const BASE_URL = 'http://localhost:3000/api';
|
|
|
|
/**
|
|
* ESERCIZIO 3: Recupera un utente E tutti i suoi post
|
|
*
|
|
* Devi completare questa funzione:
|
|
* 1. Leggi l'ID dell'utente
|
|
* 2. Fai DUE fetch:
|
|
* - GET /users/{id}
|
|
* - GET /posts
|
|
* 3. Filtra i post per trovare solo quelli di questo utente (usando userId)
|
|
* 4. Mostra i risultati
|
|
* 5. Gestisci gli errori
|
|
*/
|
|
async function fetchUserAndPosts() {
|
|
const userId = document.getElementById('userId').value;
|
|
const loading = document.getElementById('loading');
|
|
const userProfile = document.getElementById('userProfile');
|
|
const postsContainer = document.getElementById('postsContainer');
|
|
|
|
if (!userId || userId < 1 || userId > 40) {
|
|
userProfile.innerHTML = '<div class="error">❌ Inserisci un ID valido tra 1 e 40</div>';
|
|
return;
|
|
}
|
|
|
|
loading.style.display = 'block';
|
|
userProfile.innerHTML = '';
|
|
postsContainer.innerHTML = '';
|
|
|
|
try {
|
|
// 👇 SCRIVI QUI IL TUO CODICE 👇
|
|
// 1. Fetch utente
|
|
// const userResponse = await fetch(...);
|
|
// const user = await userResponse.json();
|
|
|
|
// 2. Fetch tutti i post
|
|
// const postsResponse = await fetch(...);
|
|
// const allPosts = await postsResponse.json();
|
|
|
|
// 3. Filtra i post di questo utente
|
|
// const userPosts = allPosts.filter(post => post.userId === user.id);
|
|
|
|
// 4. Visualizza
|
|
// displayUserWithPosts(user, userPosts);
|
|
|
|
// PLACEHOLDER - Rimuovi questa riga quando completi
|
|
throw new Error('Codice non implementato - Completa la funzione fetchUserAndPosts()');
|
|
|
|
} catch (error) {
|
|
userProfile.innerHTML = `
|
|
<div class="error">
|
|
<strong>❌ Errore:</strong> ${error.message}
|
|
</div>
|
|
`;
|
|
console.error('Errore:', error);
|
|
} finally {
|
|
loading.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Visualizza utente e post
|
|
* (Questa funzione è già fatta - non modificare)
|
|
*/
|
|
function displayUserWithPosts(user, posts) {
|
|
const userProfile = document.getElementById('userProfile');
|
|
const postsContainer = document.getElementById('postsContainer');
|
|
|
|
// CARD UTENTE
|
|
const userHTML = `
|
|
<div class="user-card">
|
|
<div class="card-header">
|
|
<img src="${user.avatar}" alt="Avatar" class="avatar">
|
|
<div class="user-info">
|
|
<h2>${user.nome} ${user.cognome}</h2>
|
|
<p class="email">📧 ${user.email}</p>
|
|
<p class="location">📍 ${user.comune}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
userProfile.innerHTML = userHTML;
|
|
|
|
// POST DELL'UTENTE
|
|
if (!posts || posts.length === 0) {
|
|
postsContainer.innerHTML = `
|
|
<div class="posts-section">
|
|
<h2>📄 Post (0)</h2>
|
|
<div class="empty">Questo utente non ha scritto nessun post</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const postsHTML = `
|
|
<div class="posts-section">
|
|
<h2>📄 Post (${posts.length})</h2>
|
|
${posts.map(post => `
|
|
<div class="post-card">
|
|
<div class="post-header">
|
|
<h3>${post.titolo}</h3>
|
|
<span class="post-date">📅 ${post.data}</span>
|
|
</div>
|
|
<p class="post-content">${post.contenuto}</p>
|
|
<div class="post-footer">
|
|
<span class="likes">❤️ ${post.likes} likes</span>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
postsContainer.innerHTML = postsHTML;
|
|
}
|
|
|
|
// COLLEGA IL BOTTONE
|
|
document.getElementById('btnFetch').addEventListener('click', fetchUserAndPosts);
|
|
|
|
// PERMETTI ENTER
|
|
document.getElementById('userId').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') fetchUserAndPosts();
|
|
});
|