import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

export default axiosInstance;

import { useState } from 'react';
import axiosInstance from '../api/axios.config';

export const useApi = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // CREATE
  const createItem = async (endpoint, data) => {
    setLoading(true);
    try {
      const response = await axiosInstance.post(endpoint, data);
      setLoading(false);
      return response.data;
    } catch (err) {
      setError(err.message);
      setLoading(false);
      throw err;
    }
  };

  // READ
  const getItems = async (endpoint) => {
    setLoading(true);
    try {
      const response = await axiosInstance.get(endpoint);
      setLoading(false);
      return response.data;
    } catch (err) {
      setError(err.message);
      setLoading(false);
      throw err;
    }
  };

  // UPDATE
  const updateItem = async (endpoint, data) => {
    setLoading(true);
    try {
      const response = await axiosInstance.put(endpoint, data);
      setLoading(false);
      return response.data;
    } catch (err) {
      setError(err.message);
      setLoading(false);
      throw err;
    }
  };

  // DELETE
  const deleteItem = async (endpoint) => {
    setLoading(true);
    try {
      const response = await axiosInstance.delete(endpoint);
      setLoading(false);
      return response.data;
    } catch (err) {
      setError(err.message);
      setLoading(false);
      throw err;
    }
  };

  return {
    loading,
    error,
    createItem,
    getItems,
    updateItem,
    deleteItem
  };
};

import React, { useEffect, useState } from 'react';
import { useApi } from '../hooks/useApi';

const ItemList = () => {
  const [items, setItems] = useState([]);
  const { loading, error, getItems, createItem, updateItem, deleteItem } = useApi();

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

  const fetchItems = async () => {
    try {
      const data = await getItems('/items');
      setItems(data);
    } catch (error) {
      console.error('Failed to fetch items:', error);
    }
  };

  const handleCreate = async (newItem) => {
    try {
      await createItem('/items', newItem);
      fetchItems(); // Refresh the list
    } catch (error) {
      console.error('Failed to create item:', error);
    }
  };

  const handleUpdate = async (id, updatedItem) => {
    try {
      await updateItem(`/items/${id}`, updatedItem);
      fetchItems();
    } catch (error) {
      console.error('Failed to update item:', error);
    }
  };

  const handleDelete = async (id) => {
    try {
      await deleteItem(`/items/${id}`);
      fetchItems();
    } catch (error) {
      console.error('Failed to delete item:', error);
    }
  };

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    // Your JSX for rendering items and handling CRUD operations
  );
};

export default ItemList;