Print Debugging

// Initial version - just crashes somewhere
function processNestedData(data, depth = 0) {
    if (!data) return null;

    if (data.children) {
        return data.children.map(child => processNestedData(child, depth + 1));
    }

    return data.value;
}

// First debugging attempt - add some logs
function processNestedData(data, depth = 0) {
    console.log('processNestedData called with:', data, 'depth:', depth);

    if (!data) {
        console.log('data is null/undefined, returning');
        return null;
    }

    console.log('about to check children');
    if (data.children) {
        console.log('has children, recursing');
        return data.children.map(child => processNestedData(child, depth + 1));
    }

    console.log('returning value:', data.value);
    return data.value;
}

// Still crashing, need more detail
function processNestedData(data, depth = 0) {
    console.log(`[DEPTH ${depth}] Processing:`, JSON.stringify(data));

    if (!data) return null;

    console.log(`[DEPTH ${depth}] Data type:`, typeof data);
    console.log(`[DEPTH ${depth}] Has children:`, !!data.children);

    if (data.children) {
        console.log(`[DEPTH ${depth}] Children count:`, data.children.length);
        console.log(`[DEPTH ${depth}] About to map over children`);

        const result = data.children.map((child, index) => {
            console.log(`[DEPTH ${depth}] Processing child ${index}:`, child);
            return processNestedData(child, depth + 1);
        });

        console.log(`[DEPTH ${depth}] Finished processing children`);
        return result;
    }

    return data.value;
}

// First attempt - add some logs
async function fetchUserProfile(userId) {
    console.log('Fetching profile for user:', userId);  // Round 1

    const response = await fetch(`/api/users/${userId}`);
    const userData = await response.json();

    if (validateUserData(userData)) {
        updateUserCache(userData);
        renderUserProfile(userData);
    }
}

// Still not clear what's wrong, add more logs
async function fetchUserProfile(userId) {
    console.log('Fetching profile for user:', userId);
    console.log('User ID type:', typeof userId, 'Value:', userId);  // Round 2

    const response = await fetch(`/api/users/${userId}`);
    console.log('Response status:', response.status);  // Round 2
    console.log('Response headers:', response.headers);  // Round 2

    const userData = await response.json();
    console.log('Parsed user data:', userData);  // Round 2

    if (validateUserData(userData)) {
        console.log('Validation passed');  // Round 2
        updateUserCache(userData);
        renderUserProfile(userData);
    } else {
        console.log('Validation failed');  // Round 2
    }
}

// Still need to dig deeper, modify validation function
function validateUserData(userData) {
    console.log('Validating user data:', userData);  // Round 3
    console.log('Has email:', !!userData.email);  // Round 3
    console.log('Email value:', userData.email);  // Round 3

    if (!userData.email || userData.email.length === 0) {
        console.log('Email validation failed');  // Round 3
        return false;
    }
    // ... more validation logic with more logs
}

function handleUserAction(actionType, payload) {
    console.log('Handling action:', actionType, payload);

    switch(actionType) {
        case 'LOGIN':
            return authenticateUser(payload)
                .then(result => {
                    console.log('Auth result:', result);  // Is this even called?
                    return updateUserSession(result);
                })
                .then(session => {
                    console.log('Session updated:', session);  // What about this?
                    return redirectToProfile(session.userId);
                });
        case 'LOGOUT':
            return clearUserSession()
                .then(() => {
                    console.log('Session cleared');  // Silent failure?
                    return redirectToHome();
                });
    }
}

async function authenticateUser(credentials) {
    console.log('Authenticating with:', credentials.username);
    // Where do I put the next log? In the API call? In error handling?
    try {
        const response = await fetch('/api/auth', {
            method: 'POST',
            body: JSON.stringify(credentials)
        });
        return await response.json();
    } catch (error) {
        console.log('Auth error:', error);  // But what kind of error?
        throw error;
    }
}

function processNestedData(data, depth = 0) {
    if (!data) return null;  // <- Breakpoint here, add 'data' to watch

    if (data.children) {     // <- Step through, watch 'data.children' update
        return data.children.map(child => processNestedData(child, depth + 1));
    }

    return data.value;
}

async function fetchUserProfile(userId) {
    // Breakpoint here - add userId to watch, see it's undefined
    const response = await fetch(`/api/users/${userId}`);  // Add response to watch
    const userData = await response.json();  // Add userData to watch

    if (validateUserData(userData)) {  // Step into this, watch validation logic
        updateUserCache(userData);     // Watch cache updates in real-time
        renderUserProfile(userData);
    }
}

function handleUserAction(actionType, payload) {
    // Breakpoint here, step through the switch
    // Watch panel shows: actionType: "LOGIN", payload: {username: "john"}
    switch(actionType) {
        case 'LOGIN':
            return authenticateUser(payload)  // Step into, watch variables flow down
                .then(result => updateUserSession(result))  // Watch result propagate
                .then(session => redirectToProfile(session.userId));
    }
}

async function authenticateUser(credentials) {
    // Watch panel now shows: credentials: {username: "john", password: "***"}
    const response = await fetch('/api/auth', {
        method: 'POST',
        body: JSON.stringify(credentials)
    });
    // Watch panel updates: response: Response {status: 200, ok: true, ...}
    return await response.json();
}