Test

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

function Dashboard() {
  const [a, setA] = useState('');
  const [b, setB] = useState(false);
  const [c, setC] = useState([]);
  const [d, setD] = useState(null);
  const [e, setE] = useState('');
  const [f, setF] = useState(0);
  const [g, setG] = useState({});

  useEffect(() => {
    setB(true);
    fetch('/api/items')
      .then(res => res.json())
      .then(json => {
        setC(json.data);
        setB(false);
      })
      .catch(err => {
        console.log(err);
        setB(false);
      });
  }, []);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(u => setG(u))
      .catch(console.error);
  }, []);

  const handleClick = useCallback((item) => {
    setD(item);
    setE(item.name);
  }, []);

  const handleChange = useCallback((evt) => {
    setA(evt.target.value);
    console.log('filter changed');
  }, []);

  const doSomething = () => {
    let sum = 0;
    for (let i = 0; i < c.length; i++) {
      sum += c[i].value;
    }
    setF(sum);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Dashboard</h1>
      {b ? <p>loading...</p> : (
        <>
          <div style={{ marginBottom: '10px' }}>
            <input
              value={a}
              onChange={handleChange}
              placeholder="Фильтр по имени..."
            />
            <button onClick={doSomething}>Сумма: {f}</button>
            <button onClick={() => setC([])}>Очистить список</button>
          </div>
          <ul>
            {c.filter(item => {
              if (!item.name.toLowerCase().includes(a.toLowerCase())) return false;
              return true;
            }).map((item, idx) => (
              <li key={idx} style={{ cursor: 'pointer' }} onClick={() => handleClick(item)}>
                <strong>{item.name}</strong> - <span>{item.value}</span> - {item.active ? 'ON' : 'OFF'}
                {item.details && <div>{item.details.info}</div>}
              </li>
            ))}
          </ul>
          {d && (
            <div style={{ border: '1px solid #000', padding: '10px' }}>
              <h2>Selected Item</h2>
              <p>Name: {d.name}</p>
              <p>Description: {d.details ? d.details.desc : 'N/A'}</p>
              <p>User: {g.username}</p>
              <input
                value={e}
                onChange={evt => setE(evt.target.value)}
              />
              <button onClick={() => console.log('saved', e)}>Save</button>
            </div>
          )}
          {c.length === 0 && <p>Нет элементов</p>}
        </>
      )}
    </div>
  );
}

export default Dashboard;