Unit 8: Working with APIs

// 1. NATIVE BROWSER FETCH API (Manual ok verification & two-step JSON parsing)
async function fetchWithNative(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      // Mandatory manual check: fetch resolves even on 404/500!
      throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
    }
    const data = await response.json(); // Explicit parsing step required
    return data;
  } catch (error) {
    console.error('Fetch operation failed:', error.message);
    throw error;
  }
}

// 2. AXIOS LIBRARY (Automatic rejection on non-2xx & automatic JSON parsing)
import axios from 'axios';

async function fetchWithAxios(url) {
  try {
    // Automatically rejects on 4xx/5xx status codes
    const response = await axios.get(url, { timeout: 5000 });
    return response.data; // Data is pre-parsed and immediately available
  } catch (error) {
    if (error.response) {
      // Server responded with status code outside 2xx
      console.error(`Server Error: ${error.response.status}`, error.response.data);
    } else if (error.request) {
      // Request dispatched but no response received (network drop)
      console.error('Network Error: No response received');
    } else {
      console.error('Configuration Error:', error.message);
    }
    throw error;
  }
}

import { useState, useEffect } from 'react';

function UserDirectory() {
  const [users, setUsers] = useState([]);
  const [status, setStatus] = useState('loading'); // 'loading' | 'success' | 'error'
  const [errorMessage, setErrorMessage] = useState('');

  const loadUsers = async () => {
    setStatus('loading');
    setErrorMessage('');

    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      if (!response.ok) {
        throw new Error(`Failed to load users: HTTP ${response.status}`);
      }
      const data = await response.json();
      setUsers(data);
      setStatus('success');
    } catch (err) {
      setErrorMessage(err.message || 'An unexpected network error occurred.');
      setStatus('error');
    }
  };

  useEffect(() => {
    loadUsers();
  }, []);

  // 1. Loading UI State
  if (status === 'loading') {
    return <div className="card"><p>Fetching directory records from server...</p></div>;
  }

  // 2. Error UI State with Actionable Recovery
  if (status === 'error') {
    return (
      <div className="callout danger">
        <div className="callout-title">Network Request Error</div>
        <p>{errorMessage}</p>
        <button onClick={loadUsers}>Retry Request</button>
      </div>
    );
  }

  // 3. Empty Data State
  if (users.length === 0) {
    return <div className="card"><p>No active user records found.</p></div>;
  }

  // 4. Success UI State: Mapping over data with stable keys
  return (
    <div className="card">
      <h3>Active Users Directory ({users.length})</h3>
      <ul style={{ paddingLeft: '20px' }}>
        {users.map((user) => (
          <li key={user.id} style={{ marginBottom: '8px' }}>
            <strong>{user.name}</strong> • {user.email} 
            <span style={{ color: '#64748b', fontSize: '11px' }}> ({user.company?.name ?? 'Independent'})</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

const BASE_URL = 'https://jsonplaceholder.typicode.com/posts';

// Standardized headers for JSON transactions
const JSON_HEADERS = {
  'Content-Type': 'application/json',
  'Accept': 'application/json'
};

export const PostService = {
  // CREATE
  async create(newPost) {
    const res = await fetch(BASE_URL, {
      method: 'POST',
      headers: JSON_HEADERS,
      body: JSON.stringify(newPost)
    });
    if (!res.ok) throw new Error(`POST failed: ${res.status}`);
    return res.json();
  },

  // READ ALL
  async getAll() {
    const res = await fetch(BASE_URL);
    if (!res.ok) throw new Error(`GET failed: ${res.status}`);
    return res.json();
  },

  // PARTIAL UPDATE (PATCH)
  async patch(id, partialUpdates) {
    const res = await fetch(`${BASE_URL}/${id}`, {
      method: 'PATCH',
      headers: JSON_HEADERS,
      body: JSON.stringify(partialUpdates)
    });
    if (!res.ok) throw new Error(`PATCH failed: ${res.status}`);
    return res.json();
  },

  // DELETE
  async remove(id) {
    const res = await fetch(`${BASE_URL}/${id}`, {
      method: 'DELETE'
    });
    if (!res.ok) throw new Error(`DELETE failed: ${res.status}`);
    return true; // Successfully deleted
  }
};

import { useState, useEffect } from 'react';

// Custom hook to debounce any rapidly changing value
export function useDebounce(value, delay = 400) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // 1. Establish timer to update value after delay
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // 2. Clear timer if value changes before delay expires (user is still typing)
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

// Consuming Search Component
function LiveProductSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);

  // Debounced search query updates 400ms after user stops typing
  const debouncedQuery = useDebounce(searchTerm, 400);

  useEffect(() => {
    if (!debouncedQuery.trim()) {
      setResults([]);
      return;
    }

    const searchApi = async () => {
      setIsSearching(true);
      try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/posts?title_like=${encodeURIComponent(debouncedQuery)}`);
        const data = await res.json();
        setResults(data);
      } catch (err) {
        console.error('Search query failed:', err);
      } finally {
        setIsSearching(false);
      }
    };

    searchApi();
  }, [debouncedQuery]); // Re-runs strictly when the debounced value changes

  return (
    <div className="card">
      <input
        type="text"
        placeholder="Search posts by title..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{ width: '100%', padding: '8px', borderRadius: '6px', border: '1px solid #cbd5e1' }}
      />
      {isSearching && <p style={{ fontSize: '12px', color: '#0284c7' }}>Querying server...</p>}
      <ul style={{ marginTop: '12px', paddingLeft: '20px' }}>
        {results.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

import { useState, useEffect } from 'react';

function PaginatedPostTable() {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(true);
  const limit = 5;
  const totalItems = 50; // Mock total count (normally supplied by X-Total-Count header)
  const totalPages = Math.ceil(totalItems / limit);

  useEffect(() => {
    const fetchPage = async () => {
      setIsLoading(true);
      try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`);
        const data = await res.json();
        setPosts(data);
      } catch (err) {
        console.error('Pagination fetch error:', err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchPage();
  }, [page]); // Re-fetch automatically whenever page changes

  return (
    <div className="card">
      <h3>Posts Catalog • Page {page} of {totalPages}</h3>
      {isLoading ? (
        <p>Loading page records...</p>
      ) : (
        <ul style={{ paddingLeft: '20px', minHeight: '160px' }}>
          {posts.map((post) => (
            <li key={post.id} style={{ marginBottom: '6px' }}>
              <strong>#{post.id}</strong> {post.title}
            </li>
          ))}
        </ul>
      )}

      {/* Pagination Controls */}
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginTop: '16px' }}>
        <button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>
          &larr; Previous
        </button>
        <span style={{ fontSize: '12px' }}>Page {page}</span>
        <button onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages}>
          Next &rarr;
        </button>
      </div>
    </div>
  );
}

import { useState } from 'react';

function TaskListManager() {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Audit API contracts' },
    { id: 2, title: 'Configure Axios interceptors' },
    { id: 3, title: 'Implement debounce hook' }
  ]);
  const [errorMessage, setErrorMessage] = useState('');

  const handleDeleteOptimistic = async (idToDelete) => {
    // 1. Capture snapshot for rollback
    const backupSnapshot = [...tasks];

    // 2. Optimistic UI Update: remove from local state immediately
    setTasks((prev) => prev.filter((t) => t.id !== idToDelete));
    setErrorMessage('');

    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${idToDelete}`, {
        method: 'DELETE'
      });

      if (!response.ok) {
        throw new Error('Server rejected deletion request.');
      }
      // Success: Server confirmed deletion, no further action required
    } catch (err) {
      // 3. Rollback Phase: Restore previous state snapshot on network failure
      setTasks(backupSnapshot);
      setErrorMessage(`Failed to delete task. Changes reverted. (${err.message})`);
    }
  };

  return (
    <div className="card">
      <h3>Optimistic Task Removal</h3>
      {errorMessage && <p style={{ color: 'red', fontSize: '12px' }}>{errorMessage}</p>}
      <ul style={{ paddingLeft: '20px' }}>
        {tasks.map((task) => (
          <li key={task.id} style={{ marginBottom: '8px' }}>
            {task.title}{' '}
            <button onClick={() => handleDeleteOptimistic(task.id)} style={{ color: '#ef4444' }}>
              Delete Instantly
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}