Нижче — робочий стенд на прикладі типової адмін-таблиці замовлень: та сама розмітка, той самий стан, тільки додано 4 правки, які найчастіше просять замовники. Перемикайте режим і тисніть кнопки — все працює по-справжньому, це не скріншот.
| № | Клієнт | Статус | Сума | Дата | Дії |
|---|
Кожна правка описана окремо: з чого почали, до чого прийшли, і яку реальну скаргу користувача це закриває. Це той самий рівень деталізації, який ви отримаєте в звіті по вашому проєкту.
Чому так: це найчастіший запит на доопрацювання адмінок — таблиця росте, а спосіб у ній орієнтуватися лишається той самий, що був на 10 рядках.
Чому так: без візуальної підказки користувач за 2-3 секунди тиші вирішує, що інтерфейс завис, і оновлює сторінку — губить свій же фільтр.
Чому так: це класична причина скарг «сайт не працює» — насправді не працював один запит, а падала вся сторінка через відсутній catch.
function OrdersTable() { const [orders, setOrders] = useState([]); - useEffect(() => { fetchOrders().then(setOrders); }, []); return <Table rows={orders} />; } // збій fetchOrders() ніде не ловиться — // падає весь дочірній рендер таблиці
function OrdersTable() { const [orders, setOrders] = useState([]); const [state, setState] = useState('loading'); + useEffect(() => { + setState('loading'); + fetchOrders() + .then(rows => { setOrders(rows); setState('ready'); }) + .catch(() => setState('error')); + }, []); + if (state === 'error') return <ErrorBanner onRetry={reload} />; return <Table rows={orders} loading={state==='loading'} />; }
Чому так: 35-45% трафіку типової адмінки — мобільний або планшет, а частина команди клієнта фізично працює клавіатурою; ігнорувати це — губити частину користувачів мовчки.
<OrderActions/>, який приймає замовлення і рендериться в усіх трьох місцях — зміна логіки тепер робиться один раз.Чому так: копіпаст розмітки — головна причина, чому «поправили в одному місці, а в іншому лишився старий баг»; це не косметика, а менше майбутніх багів на тому самому інтерфейсі.
// row-actions.jsx (рядок таблиці) - <button onClick={openOrder}>Відкрити</button> - <button onClick={markPaid}>Оплачено</button> // mobile-card.jsx — та сама розмітка вручну скопійована - <button onClick={openOrder}>Відкрити</button> - <button onClick={markPaid}>Оплачено</button> // quick-view-modal.jsx — і тут теж третя копія - <button onClick={openOrder}>Відкрити</button> - <button onClick={markPaid}>Оплачено</button>
// components/OrderActions.jsx — одне джерело правди +function OrderActions({ order, onOpen, onMarkPaid }) { + return (<> + <button onClick={() => onOpen(order)}>Відкрити</button> + <button onClick={() => onMarkPaid(order)}>Оплачено</button> + </>); +} // row-actions.jsx / mobile-card.jsx / quick-view-modal.jsx — // усі три тепер просто рендерять: +<OrderActions order={order} onOpen={openOrder} onMarkPaid={markPaid} />