hooks flow

Nepavyksta padalinti logiką į hookus, nes logikai reikia tų pačių duomenų. Sprendimas, duomenys gali pereiti iš vieno hook į kitą hook , kol nepateks į komponentą. Kiekvienas atsako už savo darbo dalį su duomenimis.

Buvo:

  graph TD;
      APP-->logicA;
      APP-->logicB;
      APP-->logicC;

Tapo:

  graph TD;
      APP-->hookA;
      APP-->hookB;
      APP-->hookC;
      hookA-->logicA;
      hookB-->logicB;
      hookC-->logicC;

Kiekvienas hook atlieka savo fnc

Pavyzdys

Kiekvienas hookas su savo paskirtimi ir tiesiogiai vienas nuo kito nepriklauso

• useTracks - darbas su trackais
• useTracksFilter atsako už filravima

const App = () => {
  const { trackCreate, trackDelete, trackUpdate, tracks } = useTracks();
  const { filtered Tracks, filters, setFilters, visibleDays} = useTracksFilter({
    tracks,
  });

  const { uniqueTasks } = useTasks({
    tracks: filteredTracks,
  });

  const { getDayTotal, getDayTracks, getTaskTotal, getTotal} = useTableComputing({
    tracks: filteredTracks
  });

  const {
    cellclick,
    close,
    createClick,
    isOpenModal,
    selectedCell,
    selectedTrack,
    trackClick
} = useTrackModal();


const { formData, handleInputChange, handleSubmit ) = useTrackForm({
...filters,
selectedCell,
selectedTrack,

Hook pvz

Priima inf, grąžina memorizuota duomenį

import { useMemo } from "react";
import { Track } from "./use-tracks";

export function useTasks({ tracks } { tracks: Track[] }) {
  const uniqueTasks = useMemo (
    () => Array.from(new Set(tracks.map((track) => track.task))),
    [tracks]
);

return {
  uniqueTasks,
};

Nepriema paramsu bet grazina metodus ir parametrus

import { useState } from "react";
import { Track) from "./use-tracks";

export function useTrackModal() {
  const [isCreate, setIsCreate] = useState(false);
  const [selectedCell, setSelectedCell] = useState<{
    day: number;
    task: string;
  } | null>(null);
  const [selectedTrack, setSelectedTrack] = useState<Track | null>(null);

  const cellClick (day: number, task: string) => {
    setSelectedCell({ day, task });
    setSelectedTrack (null); // Clear the selected track when a cell is clicked setIsCreate(true);
    setIsCreate(true);
  };

  const trackClick (track: Track) => {
    setSelectedCell(null); // Clear the selected cell when a track is clicked
    setSelectedTrack(track);
    setIsCreate(true);
  };
  ...  

  const createClick() => {
    setSelectedCell(null);
    setSelectedTrack(null);
    setIsCreate(true);
  };

  const isOpenModal = isCreate || selectedCell !== null || selectedTrack !== null;

  const close = () => {
    setSelectedCell(null);
    setSelectedTrack(null);
  };

return {
  isOpen: isCreate,
  selectedCell,
  selectedTrack,
  cellClick,
  trackClick,
  close,
  isOpenModal,
  createClick
}

Priema metodus ir parametrus

import styles from "./tracks-filters.module.css";
export function TracksFilters({
  selectedMonth,
  selectedYear,
  hideWeekends,
  setSelectedMonth,
  setSelectedYear,
  setHideWeekends,
}:{
  selectedMonth: number;
  selectedYear: number;
  hideweekends: boolean;
  setSelectedMonth: (month: number) => void;
  setSelectedYear: (year: number) => void;
  setHideWeekends: (hideWeekends: boolean) => void;
  actions: React. ReactNode
}) {
const months = [
"January",
"February",
"March"
"April",
"May",
...