client/src/context/WebsiteContext.jsx

import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
import api from '../api/axiosConfig';
import { useAuth } from './AuthContext';

const WebsiteContext = createContext();

export const WebsiteProvider = ({ children }) => {
    const [websites, setWebsites] = useState([]);
    const [loading, setLoading] = useState(true);
    const { user } = useAuth();

    const fetchWebsites = useCallback(async () => {
        if (!user) {
            setWebsites([]);
            setLoading(false);
            return;
        }

        try {
            const response = await api.get('/websites/');
            setWebsites(response.data);
        } catch (error) {
            console.error('Failed to fetch websites:', error);
        } finally {
            setLoading(false);
        }
    }, [user]);

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

    const refreshWebsites = () => {
        setLoading(true);
        return fetchWebsites();
    };

    return (
        <WebsiteContext.Provider value={{ websites, loading, refreshWebsites }}>
            {children}
        </WebsiteContext.Provider>
    );
};

export const useWebsites = () => {
    const context = useContext(WebsiteContext);
    if (!context) {
        throw new Error('useWebsites must be used within a WebsiteProvider');
    }
    return context;
};