Untitled

import React, { useState } from 'react';

type InputDefault = {
    defaultValue: any;
    onChange: (value: string) => void;
};

export const SearchInput = ({ defaultValue, onChange }: InputDefault) => {
    
    const [searchQuery, setSearchQuery] = useState(defaultValue || ''); 

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setSearchQuery(value);
        onChange(value);
    };

    return (
        <div>
            <label htmlFor="inputId">searchIcon</label>
            <input
                className='input'
                type="text"
                placeholder="Cerca"
                value={searchQuery}
                onChange={handleInputChange}
            />
        </div>
    );
};



"use client"
import React, { useEffect, useState } from 'react'
import Pagination from '@/app/components/Pagination';
import Table from '@/app/components/Table'
import Title from '@/app/components/Title';
import { useSupplier } from '@/app/hooks/useSupplierAPI';
import { SearchInput } from '@/app/components/SearchInput/SearchInput';



type Props = {
    columns: string[];
};
type CollegementoArticoli = {
    id: number;
    supplierID: string;
    supplierName: string;
    undefArticles: string;
    assignedArticles: number;
};


type ColumnDefinitionType<T> = {
    key: keyof T;
    label: string;
    header: string;
    width?: number;
};

const Articoli = (props: Props) => {

    const [currentPage, setCurrentPage] = useState(1);
    const [searchTerm, setSearchTerm] = useState('');
    const [filteredData, setFilteredData] = useState<CollegementoArticoli[]>([]); // filteredData state'i eklendi
    const { data } = useSupplier();

    useEffect(() => {
        if (data) {
            // Filter data only if it exists
            const filtered = filterData(data, searchTerm);
            setFilteredData(filtered);
        }
    }, [data, searchTerm]);

    const filterData = (data: CollegementoArticoli[], searchTerm: string) => {
        return data.filter(item =>
            item.supplierID.toLowerCase().includes(searchTerm.toLowerCase())
        );
    };
    console.log(filterData, "filteredData");



    const handleSearch = (searchValue: string) => {
        setSearchTerm(searchValue);
        setCurrentPage(1);
    };


    const { columns } = props;
    const defaultColumns: Array<ColumnDefinitionType<CollegementoArticoli>> = [
        { key: 'supplierID', label: 'Fornitori', header: 'Fornitori' },
        { key: 'supplierName', label: 'Analizzare', header: 'Analizzare' },
        { key: 'undefArticles', label: 'Assegnati', header: 'Assegnati' },
        { key: 'assignedArticles', label: 'Fatturato Value', header: 'Fatturato Value' }
    ];

    console.log(data, "dataaaa");
    console.log(searchTerm, "searchTerm");



    return (
        <div>
            <Title Title={'Collegamento Articoli'} />
            <SearchInput defaultValue={''} onChange={handleSearch} />
            <Table
                data={filteredData}
                pageNumber={currentPage}
                pageSize={5}
                columns={columns && columns.length > 0 ? columns : defaultColumns}
            />
            <Pagination pageSize={5} currentPage={currentPage} items={data.length} onPageChange={function (page: number): void {
                setCurrentPage(page)
            }} />
        </div>
    )
}

export default Articoli