React Custom Hook Komposition: Orkestrering af Kompleks Logik for Globale Udviklere

            // useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, JSON.stringify(options)]); // Afhængigheder for genhentning

  return { data, loading, error };
}

export default useFetch;

// usePagination.js
import { useState } from 'react';

function usePagination(totalPages, initialPage = 1) {
  const [currentPage, setCurrentPage] = useState(initialPage);

  const nextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const prevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToPage = (page) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };

  return {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
    goToPage,
    setPage: setCurrentPage // Direkte sætter, hvis nødvendigt
  };
}

export default usePagination;

// usePaginatedFetch.js (Sammensat Hook)
import useFetch from './useFetch';
import usePagination from './usePagination';

function usePaginatedFetch(baseUrl, initialPage = 1, itemsPerPage = 10) {
  // Vi skal kende totalt antal sider for at initialisere usePagination. Dette kan kræve en indledende hentning eller en ekstern kilde.
  // For simpelhedens skyld her, lad os antage, at totalPages er på en eller anden måde kendt eller hentes separat først.
  // En mere robust løsning ville hente totalt antal sider først eller bruge en server-drevet pagineringsmetode.

  // Pladsholder for totalPages - i en rigtig app ville dette komme fra et API-svar.
  const [totalPages, setTotalPages] = useState(1);
  const [apiData, setApiData] = useState(null);
  const [fetchLoading, setFetchLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  // Brug pagineringshook til at administrere side-state
  const { currentPage, ...paginationControls } = usePagination(totalPages, initialPage);

  // Konstruer URL'en for den aktuelle side
  const apiUrl = `${baseUrl}?page=${currentPage}&limit=${itemsPerPage}`;

  // Brug fetch hook til at hente data for den aktuelle side
  const { data: pageData, loading: pageLoading, error: pageError } = useFetch(apiUrl);

  // Effekt for at opdatere totalPages og data, når pageData ændres eller indledende hentning sker
  useEffect(() => {
    if (pageData) {
      // Antager, at API-svaret har en struktur som { items: [...], total: N }
      setApiData(pageData.items || pageData);
      if (pageData.total !== undefined && pageData.total !== totalPages) {
        setTotalPages(Math.ceil(pageData.total / itemsPerPage));
      } else if (Array.isArray(pageData)) { // Fallback, hvis total ikke er angivet
        setTotalPages(Math.max(1, Math.ceil(pageData.length / itemsPerPage)));
      }
      setFetchLoading(false);
    } else {
      setApiData(null);
      setFetchLoading(pageLoading);
    }
    setFetchError(pageError);
  }, [pageData, pageLoading, pageError, itemsPerPage, totalPages]);

  return {
    data: apiData,
    loading: fetchLoading,
    error: fetchError,
    ...paginationControls // Spred pagineringskontroller (nextPage, prevPage, etc.)
  };
}

export default usePaginatedFetch;

            

              
                Copy
              
            
          

            
import React from 'react';
import usePaginatedFetch from './usePaginatedFetch';

function ProductList() {
  const apiUrl = 'https://api.example.com/products'; // Erstat med dit API-endpoint
  const { data: products, loading, error, nextPage, prevPage, currentPage, totalPages } = usePaginatedFetch(apiUrl, 1, 5);

  if (loading) return 
Indlæser produkter...
;
  if (error) return 
Fejl ved indlæsning af produkter: {error.message}
;
  if (!products || products.length === 0) return 
Ingen produkter fundet.
;

  return (
    

      
Produkter
      

        {products.map(product => (
          
{product.name}
        ))}
      
      

        Forrige
         Side {currentPage} af {totalPages} 
        Næste
      
    
  );
}

export default ProductList;

            

              
                Copy
              
            
          

            // useWebSocket.js (Hjælpehook for WebSocket)
import { useState, useEffect } from 'react';

function useWebSocket(url) {
  const [message, setMessage] = useState(null);
  const [isConnecting, setIsConnecting] = useState(true);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    if (!url) return;
    setIsConnecting(true);
    setIsConnected(false);
    const ws = new WebSocket(url);

    ws.onopen = () => {
      console.log('WebSocket Forbundet');
      setIsConnected(true);
      setIsConnecting(false);
    };

    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        setMessage(data);
      } catch (e) {
        console.error('Fejl ved parsing af WebSocket-meddelelse:', e);
        setMessage(event.data); // Håndter ikke-JSON-meddelelser om nødvendigt
      }
    };

    ws.onclose = () => {
      console.log('WebSocket Afbrudt');
      setIsConnected(false);
      setIsConnecting(false);
      // Valgfrit: Implementer genopkoblingslogik her
    };

    ws.onerror = (error) => {
      console.error('WebSocket Fejl:', error);
      setIsConnected(false);
      setIsConnecting(false);
    };

    // Oprydningsfunktion
    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, [url]);

  return { message, isConnecting, isConnected };
}

export default useWebSocket;

// useFetchWithRealtime.js (Sammensat Hook)
import useFetch from './useFetch';
import useWebSocket from './useWebSocket';

function useFetchWithRealtime(fetchUrl, realtimeUrl, initialData = null) {
  const fetchResult = useFetch(fetchUrl);
  // Antager, at realtidsopdateringer er baseret på samme ressource eller en relateret.
  // Strukturen af realtidsmeddelelser skal stemme overens med, hvordan vi opdaterer fetchResult.data.
  const { message: realtimeMessage } = useWebSocket(realtimeUrl);

  const [combinedData, setCombinedData] = useState(initialData);
  const [isRealtimeUpdating, setIsRealtimeUpdating] = useState(false);

  // Effekt for at integrere realtidsopdateringer med hentede data
  useEffect(() => {
    if (fetchResult.data) {
      // Initialiser combinedData med de indledende hentede data
      setCombinedData(fetchResult.data);
      setIsRealtimeUpdating(false);
    }
  }, [fetchResult.data]);

  useEffect(() => {
    if (realtimeMessage && fetchResult.data) {
      setIsRealtimeUpdating(true);
      // Logik til at flette eller erstatte data baseret på realtimeMessage
      // Dette afhænger stærkt af din API og realtidsmeddelelsesstruktur.
      // Eksempel: Hvis realtimeMessage indeholder en opdateret post for en liste:
      if (Array.isArray(fetchResult.data)) {
        setCombinedData(prevData => {
          const updatedItems = prevData.map(item =>
            item.id === realtimeMessage.id ? { ...item, ...realtimeMessage } : item
          );
          // Hvis realtidsmeddelelsen er for en ny post, kan du pushe den.
          // Hvis det er for en slettet post, kan du filtrere den ud.
          return updatedItems;
        });
      } else if (typeof fetchResult.data === 'object' && fetchResult.data !== null) {
        // Eksempel: Hvis det er en enkelt objekt-opdatering
        if (realtimeMessage.id === fetchResult.data.id) {
          setCombinedData({ ...fetchResult.data, ...realtimeMessage });
        }
      }
      // Nulstil opdateringsflag efter en kort forsinkelse eller håndter anderledes
      const timer = setTimeout(() => setIsRealtimeUpdating(false), 500);
      return () => clearTimeout(timer);
    }
  }, [realtimeMessage, fetchResult.data]); // Afhængigheder for at reagere på opdateringer

  return {
    data: combinedData,
    loading: fetchResult.loading,
    error: fetchResult.error,
    isRealtimeUpdating
  };
}

export default useFetchWithRealtime;

            

              
                Copy
              
            
          

            
import React from 'react';
import useFetchWithRealtime from './useFetchWithRealtime';

function DashboardWidgets() {
  const dataUrl = 'https://api.example.com/widgets';
  const wsUrl = 'wss://api.example.com/widgets/updates'; // WebSocket endpoint

  const { data: widgets, loading, error, isRealtimeUpdating } = useFetchWithRealtime(dataUrl, wsUrl);

  if (loading) return 
Indlæser widgets...
;
  if (error) return 
Fejl: {error.message}
;

  return (
    

      
Widgets
      {isRealtimeUpdating && 
Opdaterer...
}
      

        {widgets.map(widget => (
          
{widget.name} - Status: {widget.status}
        ))}
      
    
  );
}

export default DashboardWidgets;

            

              
                Copy
              
            
          

            // useLocalStorage.js
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Fejl ved læsning fra localStorage:', error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = typeof value === 'function' ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error('Fejl ved skrivning til localStorage:', error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

// UserPreferencesContext.js
import React, { createContext, useContext } from 'react';
import useLocalStorage from './useLocalStorage';

const UserPreferencesContext = createContext();

export const UserPreferencesProvider = ({ children }) => {
  const [theme, setTheme] = useLocalStorage('app-theme', 'light');
  const [language, setLanguage] = useLocalStorage('app-language', 'en');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const changeLanguage = (lang) => {
    setLanguage(lang);
  };

  return (
    
      {children}
    
  );
};

// useUserPreferences.js (Custom hook til at forbruge kontekst)
import { useContext } from 'react';
import { UserPreferencesContext } from './UserPreferencesContext';

function useUserPreferences() {
  const context = useContext(UserPreferencesContext);
  if (context === undefined) {
    throw new Error('useUserPreferences skal bruges inden for en UserPreferencesProvider');
  }
  return context;
}

export default useUserPreferences;

            

              
                Copy
              
            
          

            
// App.js
import React from 'react';
import { UserPreferencesProvider } from './UserPreferencesContext';
import UserProfile from './UserProfile';
import SettingsPanel from './SettingsPanel';

function App() {
  return (
    
      
      
    
  );
}

export default App;

// UserProfile.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function UserProfile() {
  const { theme, language } = useUserPreferences();

  return (
    

      
Brugerprofil
      
Sprog: {language}
      
Aktuelt Tema: {theme}
    
  );
}

export default UserProfile;

// SettingsPanel.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function SettingsPanel() {
  const { theme, toggleTheme, language, changeLanguage } = useUserPreferences();

  return (
    

      
Indstillinger
      
        Skift til {theme === 'light' ? 'Mørkt' : 'Lyst'} Tema
      
      

        Sprog:
         changeLanguage(e.target.value)}>
          English
          Español
          Français
          {/* Tilføj flere sprog efter behov */}
        
      
    
  );
}

export default SettingsPanel;

            

              
                Copy
              
            
          

            // useCounter.js (En simpel hook til at logge)
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return { count, increment, decrement };
}

export default useCounter;

// withLogging.js (Higher-order hook)
import { useRef, useEffect } from 'react';

function withLogging(WrappedHook) {
  // Returner en ny hook, der omslutter den originale
  return (...args) => {
    const hookResult = WrappedHook(...args);
    const hookName = WrappedHook.name || 'AnonymousHook'; // Hent hook-navn til logging
    const previousResultRef = useRef();

    useEffect(() => {
      if (previousResultRef.current) {
        console.log(`%c[${hookName}] Ændring registreret:`, 'color: blue; font-weight: bold;', {
          previous: previousResultRef.current,
          current: hookResult
        });
      } else {
        console.log(`%c[${hookName}] Indledende rendering:`, 'color: green; font-weight: bold;', hookResult);
      }
      previousResultRef.current = hookResult;
    }, [hookResult, hookName]); // Kør effekt igen, hvis hookResult eller hookName ændres

    return hookResult;
  };
}

export default withLogging;

            

              
                Copy
              
            
          

            
import React from 'react';
import useCounter from './useCounter';
import withLogging from './withLogging';

// Opret en logget version af useCounter
const useLoggedCounter = withLogging(useCounter);

function CounterComponent() {
  // Brug den forbedrede hook
  const { count, increment, decrement } = useLoggedCounter(0);

  return (
    

      
Tæller
      
Antal: {count}
      Forøg
      Formindsk
    
  );
}

export default CounterComponent;

            

              
                Copy