React Hook -mallit: Kustomoitujen hookien kehityksen hallinta globaaleissa sovelluksissa

            
import React, { useState, useCallback } from 'react';

/**
 * Kustomoitu hook numeerisen laskurin hallintaan.
 * @param {number} initialValue - Laskurin alkuarvo. Oletusarvo on 0.
 * @returns {{ count: number, increment: () => void, decrement: () => void, reset: () => void }}
 */
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // Ei riippuvuuksia, koska setCount on vakaa

  const decrement = useCallback(() => {
    setCount(prevCount => prevCount - 1);
  }, []); // Ei riippuvuuksia

  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]); // Riippuu initialValue:sta

  return {
    count,
    increment,
    decrement,
    reset
  };
}

export default useCounter;

            

              
                Copy
              
            
          

            
import React from 'react';
import useCounter from './useCounter'; // Olettaen, että useCounter.js on samassa hakemistossa

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <h3>Nykyinen lukema: {count}</h3>
      <button onClick={increment}>Lisää</button>
      <button onClick={decrement}>Vähennä</button>
      <button onClick={reset}>Nollaa</button>
    </div>
  );
}

export default CounterComponent;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect, useCallback } from 'react';

/**
 * Kustomoitu hook datan hakemiseen API:sta.
 * @param {string} url - URL-osoite, josta data haetaan.
 * @param {object} options - Fetch-asetukset (esim. headerit, metodi, body).
 * @returns {{ data: any, loading: boolean, error: Error | null, refetch: () => void }}
 */
function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        throw new Error(`HTTP-virhe! status: ${response.status}`);
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }, [url, JSON.stringify(options)]); // Muunnetaan options merkkijonoksi syvää vertailua varten

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

  return { data, loading, error, refetch: fetchData };
}

export default useFetch;

            

              
                Copy
              
            
          

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

function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`);

  if (loading) return <p>Ladataan käyttäjäprofiilia...</p>;
  if (error) return <p style={{ color: 'red' }}>Virhe: {error.message}</p>;
  if (!user) return <p>Käyttäjätietoja ei löytynyt.</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Sähköposti: {user.email}</p>
      <p>Sijainti: {user.location}</p>
      <!-- Lisää käyttäjätietoja -->
    </div>
  );
}

export default UserProfile;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

/**
 * Kustomoitu hook tilan säilyttämiseen localStoragessa.
 * @param {string} key - Avain localStorageen.
 * @param {any} initialValue - Alkuarvo, jos localStoragesta ei löydy dataa.
 * @returns {[any, (value: any) => void]}
 */
function useLocalStorage(key, initialValue) {
  // Tila arvon tallentamiseen
  // Välitetään alustustila funktiolla useStateen, jotta logiikka suoritetaan vain kerran
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = typeof window !== 'undefined' ? window.localStorage.getItem(key) : null;
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Virhe luettaessa localStorage-avainta "${key}":`, error);
      return initialValue;
    }
  });

  // useEffect päivittää localStoragen, kun tila muuttuu
  useEffect(() => {
    try {
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(storedValue));
      }
    } catch (error) {
      console.error(`Virhe kirjoitettaessa localStorage-avaimeen "${key}":`, error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

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

function ThemeSwitcher() {
  const [isDarkMode, setIsDarkMode] = useLocalStorage('theme-preference', false);

  const toggleTheme = () => {
    setIsDarkMode(prevMode => !prevMode);
    document.body.className = isDarkMode ? '' : 'dark-theme'; // Asetetaan CSS-luokka
  };

  return (
    <div>
      <p>Nykyinen teema: {isDarkMode ? '<strong>Tumma</strong>' : '<strong>Vaalea</strong>'}</p>
      <button onClick={toggleTheme}>
        Vaihda {isDarkMode ? 'vaaleaan' : 'tummaan'} teemaan
      </button>
    </div>
  );
}

export default ThemeSwitcher;

            

              
                Copy
              
            
          

            
import { useState, useCallback } from 'react';

/**
 * Kustomoitu hook boolean-tilan hallintaan.
 * @param {boolean} initialValue - Alkuperäinen boolean-arvo. Oletusarvo on false.
 * @returns {[boolean, () => void, (value: boolean) => void]}
 */
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = useCallback(() => {
    setValue(prev => !prev);
  }, []);

  return [value, toggle, setValue];
}

export default useToggle;

            

              
                Copy
              
            
          

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

function ModalComponent() {
  const [isOpen, toggleOpen] = useToggle(false);

  return (
    <div>
      <button onClick={toggleOpen}>Vaihda modaalin tilaa</button>
      {isOpen && (
        <div style={{
          border: '1px solid black', 
          padding: '20px', 
          margin: '10px', 
          backgroundColor: 'lightblue'
        }}>
          <h3>Tämä on modaali</h3>
          <p>Sisältö tulee tähän.</p>
          <button onClick={toggleOpen}>Sulje modaali</button>
        </div>
      )}
    </div>
  );
}

export default ModalComponent;

            

              
                Copy
              
            
          

            
import { useEffect, useRef } from 'react';

/**
 * Kustomoitu hook tapahtumankuuntelijoiden liittämiseen ja siivoamiseen.
 * @param {string} eventName - Tapahtuman nimi (esim. 'click', 'resize').
 * @param {function} handler - Tapahtumankäsittelijäfunktio.
 * @param {EventTarget} element - DOM-elementti, johon kuuntelija liitetään. Oletusarvo on window.
 * @param {object} options - Tapahtumankuuntelijan asetukset (esim. { capture: true }).
 */
function useEventListener(eventName, handler, element = window, options = {}) {
  // Luo ref, joka tallentaa käsittelijän
  const savedHandler = useRef();

  // Päivitä ref.current-arvo, jos käsittelijä muuttuu. Tämä mahdollistaa alla olevan efektin
  // käyttävän aina uusinta käsittelijää ilman, että tapahtumankuuntelijaa tarvitsee liittää uudelleen.
  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    // Varmista, että elementti tukee addEventListener-metodia
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    // Luo tapahtumankuuntelija, joka kutsuu savedHandler.current-arvoa
    const eventListener = event => savedHandler.current(event);

    // Lisää tapahtumankuuntelija
    element.addEventListener(eventName, eventListener, options);

    // Siivoa komponentin poistuessa tai riippuvuuksien muuttuessa
    return () => {
      element.removeEventListener(eventName, eventListener, options);
    };
  }, [eventName, element, options]); // Suorita uudelleen, jos eventName tai elementti muuttuu
}

export default useEventListener;

            

              
                Copy
              
            
          

            
import React, { useState } from 'react';
import useEventListener from './useEventListener';

function KeyPressDetector() {
  const [key, setKey] = useState('Ei mitään');

  const handleKeyPress = (event) => {
    setKey(event.key);
  };

  useEventListener('keydown', handleKeyPress);

  return (
    <div>
      <p>Paina mitä tahansa näppäintä nähdäksesi sen nimen:</p>
      <strong>Viimeksi painettu näppäin: {key}</strong>
    </div>
  );
}

export default KeyPressDetector;

            

              
                Copy
              
            
          

            
import { useState, useCallback } from 'react';

/**
 * Kustomoitu hook lomakkeen tilan hallintaan ja syötemuutosten käsittelyyn.
 * @param {object} initialValues - Olio, jossa on lomakkeen kenttien alkuarvot.
 * @param {object} validationRules - Olio, jossa on validointifunktiot kullekin kentälle.
 * @returns {{ values: object, errors: object, handleChange: (e: React.ChangeEvent) => void, handleSubmit: (callback: (values: object) => void) => (e: React.FormEvent) => void, resetForm: () => void }}
 */
function useForm(initialValues, validationRules = {}) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = useCallback((event) => {
    event.persist(); // Säilytetään tapahtuma asynkronista käyttöä varten (tarvittaessa)
    const { name, value, type, checked } = event.target;

    setValues((prevValues) => ({
      ...prevValues,
      [name]: type === 'checkbox' ? checked : value,
    }));

    // Tyhjennetään kentän virhe heti kun sitä muutetaan
    if (errors[name]) {
      setErrors((prevErrors) => {
        const newErrors = { ...prevErrors };
        delete newErrors[name];
        return newErrors;
      });
    }
  }, [errors]);

  const validate = useCallback(() => {
    const newErrors = {};
    for (const fieldName in validationRules) {
      if (validationRules.hasOwnProperty(fieldName)) {
        const rule = validationRules[fieldName];
        const value = values[fieldName];
        if (rule && !rule(value)) {
          newErrors[fieldName] = `Virheellinen ${fieldName}`;
          // Oikeassa sovelluksessa antaisit tarkempia virheilmoituksia säännön perusteella
        }
      }
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [values, validationRules]);

  const handleSubmit = useCallback((callback) => (event) => {
    event.preventDefault();
    const isValid = validate();
    if (isValid) {
      callback(values);
    }
  }, [values, validate]);

  const resetForm = useCallback(() => {
    setValues(initialValues);
    setErrors({});
  }, [initialValues]);

  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    resetForm,
  };
}

export default useForm;

            

              
                Copy
              
            
          

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

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function LoginForm() {
  const { values, errors, handleChange, handleSubmit } = useForm(
    { email: '', password: '' },
    {
      email: (value) => emailRegex.test(value) && value.length > 0,
      password: (value) => value.length >= 6,
    }
  );

  const submitLogin = (formData) => {
    alert(`Lähetetään: Sähköposti: ${formData.email}, Salasana: ${formData.password}`);
    // Oikeassa sovelluksessa data lähetettäisiin API:lle
  };

  return (
    <form onSubmit={handleSubmit(submitLogin)}>
      <h2>Kirjaudu sisään</h2>
      <div>
        <label htmlFor="email">Sähköposti:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>Sähköposti on virheellinen</p>}
      </div>
      <div>
        <label htmlFor="password">Salasana:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && <p style={{ color: 'red' }}>Salasanan on oltava vähintään 6 merkkiä pitkä</p>}
      </div>
      <button type="submit">Kirjaudu sisään</button>
    </form>
  );
}

export default LoginForm;

            

              
                Copy
              
            
          

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

const AuthContext = createContext(null);

// Kustomoitu hook autentikointilogiikalle
export function useAuth() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // Simuloidaan asynkronista kirjautumisfunktiota
  const login = useCallback(async (username, password) => {
    setIsLoading(true);
    return new Promise(resolve => {
      setTimeout(() => {
        if (username === 'test' && password === 'password') {
          const userData = { id: '123', name: 'Globaali Käyttäjä' };
          setUser(userData);
          localStorage.setItem('user', JSON.stringify(userData));
          resolve(true);
        } else {
          resolve(false);
        }
        setIsLoading(false);
      }, 1000);
    });
  }, []);

  // Simuloidaan asynkronista uloskirjautumisfunktiota
  const logout = useCallback(() => {
    setUser(null);
    localStorage.removeItem('user');
  }, []);

  // Ladataan käyttäjä localStoragesta komponentin asennuksen yhteydessä
  useEffect(() => {
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      try {
        setUser(JSON.parse(storedUser));
      } catch (e) {
        console.error('Käyttäjän jäsentäminen localStoragesta epäonnistui', e);
        localStorage.removeItem('user');
      }
    }
    setIsLoading(false);
  }, []);

  return { user, isLoading, login, logout };
}

// AuthProvider-komponentti, joka käärii sovelluksesi tai osia siitä
export function AuthProvider({ children }) {
  const auth = useAuth(); // Tässä käytetään kustomoitua hookiamme

  return (
    <AuthContext.Provider value={auth}>
      {children}
    </AuthContext.Provider>
  );
}

// Kustomoitu hook AuthContextin kuluttamiseen
export function useAuthContext() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuthContext-hookia tulee käyttää AuthProviderin sisällä');
  }
  return context;
}

            

              
                Copy
              
            
          

            
// App.js (tai juurikomponentti)
import React, { useState } from 'react';
import { AuthProvider, useAuthContext } from './AuthContext';

function Dashboard() {
  const { user, isLoading, logout } = useAuthContext();

  if (isLoading) return <p>Ladataan autentikoinnin tilaa...</p>;
  if (!user) return <p>Ole hyvä ja kirjaudu sisään.</p>;

  return (
    <div>
      <h2>Tervetuloa, {user.name}!</h2>
      <button onClick={logout}>Kirjaudu ulos</button>
    </div>
  );
}

function LoginFormForContext() {
  const { login } = useAuthContext();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    const success = await login(username, password);
    if (!success) {
      alert('Kirjautuminen epäonnistui!');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="text" placeholder="Käyttäjätunnus" value={username} onChange={e => setUsername(e.target.value)} />
      <input type="password" placeholder="Salasana" value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit">Kirjaudu sisään</button>
    </form>
  );
}

function App() {
  return (
    <AuthProvider>
      <h1>Autentikointiesimerkki kustomoidulla hookilla & Contextilla</h1>
      <LoginFormForContext />
      <Dashboard />
    </AuthProvider>
  );
}

export default App;

            

              
                Copy
              
            
          

            
// Esimerkki AbortControllerin käytöstä useFetch-hookissa (yksinkertaistettu selkeyden vuoksi)
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    setLoading(true);
    setError(null);

    fetch(url, { signal })
      .then(response => {
        if (!response.ok) throw new Error(response.statusText);
        return response.json();
      })
      .then(setData)
      .catch(err => {
        if (err.name === 'AbortError') {
          console.log('Haku keskeytettiin');
        } else {
          setError(err);
        }
      })
      .finally(() => setLoading(false));

    return () => {
      // Keskeytä hakupyyntö, jos komponentti irrotetaan tai riippuvuudet muuttuvat
      abortController.abort();
    };
  }, [url]);

  return { data, error, loading };
}

export default useFetchAbortable;

            

              
                Copy
              
            
          

            
// Esimerkkitesti useCounterille (käsitteellinen)
import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

describe('useCounter', () => {
  it('pitäisi kasvattaa lukemaa', () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });

  it('pitäisi nollata lukema alkuarvoon', () => {
    const { result } = renderHook(() => useCounter(5));

    act(() => {
      result.current.increment();
    });
    expect(result.current.count).toBe(6);

    act(() => {
      result.current.reset();
    });
    expect(result.current.count).toBe(5);
  });

  // Lisää testejä vähennykselle, alkuarvolle jne.
});

            

              
                Copy
              
            
          

            
// Käsitteellinen useLocalizedDate-hook
import { useState, useEffect } from 'react';

function useLocalizedDate(dateString, locale = 'fi-FI', options = {}) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const date = new Date(dateString);
      setFormattedDate(date.toLocaleDateString(locale, options));
    } catch (e) {
      console.error('Virheellinen päivämäärämerkkijono annettu useLocalizedDate-hookille:', dateString, e);
      setFormattedDate('Virheellinen päivämäärä');
    }
  }, [dateString, locale, JSON.stringify(options)]);

  return formattedDate;
}

// Käyttö:
// const myDate = useLocalizedDate('2023-10-26T10:00:00Z', 'de-DE', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
// // myDate olisi 'Donnerstag, 26. Oktober 2023'

            

              
                Copy
              
            
          

            
import { useState, useEffect } from 'react';

/**
 * Kustomoitu hook arvon debouncaukseen.
 * @param {any} value - Debouncattava arvo.
 * @param {number} delay - Viive millisekunteina.
 * @returns {any} Debouncattu arvo.
 */
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

            

              
                Copy
              
            
          

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

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500); // 500ms viive

  // Efekti hakutulosten hakemiseen debouncedSearchTerm-arvon perusteella
  useEffect(() => {
    if (debouncedSearchTerm) {
      console.log(`Haetaan tuloksia termille: ${debouncedSearchTerm}`);
      // Tee API-kutsu tässä
    } else {
      console.log('Hakutermi tyhjennetty.');
    }
  }, [debouncedSearchTerm]);

  return (
    <div>
      <input
        type="text"
        placeholder="Hae..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <p>Etsitään: <strong>{debouncedSearchTerm || '...'}</strong></p>
    </div>
  );
}

export default SearchInput;

            

              
                Copy