useTableFilters

useTableFilters, Ops Table bileşeninde tablolar için filtreleme işlemlerini yönetmek ve güncellemek için kullanılan özel bir React hook'udur. Bu hook, Redux ile entegre çalışarak filtreleme durumlarını merkezi bir şekilde kontrol eder.

Ne İşe Yarar?

useTableFilters:

• Filtreleme ayarlarını (filters) kontrol eder.
• Kullanıcının tablo filtrelerini yönetmesine olanak tanır.
• Redux ile senkronize bir şekilde çalışarak bu ayarları uygulama genelinde tutarlı hale getirir.

İş Mantığı

1. Filtre Durumu Alma:
   • Redux Store'daki TableReducer üzerinden mevcut filtreleme durumu alınır.
2. Filtre Durumu Güncelleme:
   • setFilters fonksiyonu çağrılarak filtre ayarları güncellenir ve Redux Store'a kaydedilir.

Hook Tanımı

import { useAppDispatch, useAppSelector } from "@/redux/hooks";
import { ITableFilters } from "../types/ITableFilters";
import { setFilters as setValue } from "../redux/opsTableSlice";

export const useTableFilters = () => {
  const dispatch = useAppDispatch();
  const filters = useAppSelector((state) => state.TableReducer.filters);

  const setFilters = (filters: ITableFilters[], isSubmit?: boolean) => {
    dispatch(setValue(filters));
  };

  return {
    filters,
    setFilters,
  };
};

Dönüş Değerleri

Değer	Tipi	Açıklama
filters	ITableFilters[]	Mevcut filtre ayarlarını içerir.
setFilters	(filters: ITableFilters[], isSubmit?: boolean) => void	Filtre ayarlarını güncellemek için kullanılan fonksiyon.

Kullanım Örneği

Çağrı

import { useTableFilters } from "../hooks/useTableFilters";

export default function ExampleComponent() {
  const { filters, setFilters } = useTableFilters();

  const handleAddFilter = () => {
    const newFilter = { column: "name", operator: "Contains", value: "John" };
    setFilters([...filters, newFilter]);
  };

  return (
    <div>
      <p>Current Filters: {JSON.stringify(filters)}</p>
      <button onClick={handleAddFilter}>Add Filter</button>
    </div>
  );
}

Kullanım Alanları

useTableFilters, Ops Table ekosisteminde aşağıdaki alanlarda kullanılır:

• Filters Popover (FiltersPopover.tsx):

  • Kullanım Yeri: Kullanıcının tablo filtrelerini yönetebileceği arayüz.
  • Amaç: Kullanıcının seçtiği filtre ayarlarını dinamik bir şekilde güncellemek.

• Table Reducer (opsTableSlice.ts):

  • Kullanım Yeri: Redux Store'daki filtreleme durumunu yönetir ve diğer bileşenlerle senkronize eder.

Burada Yapılan Ana İşlemler

useTableFilters hook'u aşağıdaki işlemleri gerçekleştirir ve bu noktalarda özelleştirilebilir:

• Redux Entegrasyonu: Redux Store'daki filtreleme durumunu alır ve günceller.
• Kullanıcı Etkileşimi: Kullanıcının filtre ekleme, güncelleme veya kaldırma işlemlerini yönetir.
• Modüler Yapı: Filtreleme durumunu uygulamanın farklı bölümlerinde kolayca kullanılabilir hale getirir.