51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useContext, useEffect } from 'react';
|
|
|
|
import { barcodeToProduct, generateRandomBarcode } from '../../lib/barcode';
|
|
import { ProductInfo } from './components/ProductInfo/ProductInfo';
|
|
import { Bins } from './components/Bins/Bins';
|
|
import { DefectPanel } from './components/DefectPanel/DefectPanel';
|
|
import { BinnerContext } from './context/BinnerContext';
|
|
|
|
import styles from './page.module.scss';
|
|
|
|
export default function Page() {
|
|
const { bin, item, setBin, setItem } = useContext(BinnerContext);
|
|
|
|
const handleKeydown = useCallback((event: KeyboardEvent) => {
|
|
switch (event.key) {
|
|
case ' ':
|
|
event.preventDefault();
|
|
console.log('Simulating barcode read');
|
|
const barcode = generateRandomBarcode();
|
|
setItem(barcodeToProduct(barcode));
|
|
break;
|
|
case 'Escape':
|
|
event.preventDefault();
|
|
console.log('Clearing bin selection');
|
|
setBin(null);
|
|
break;
|
|
}
|
|
}, [bin, item, setBin, setItem]);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('keydown', handleKeydown);
|
|
return () => {
|
|
window.removeEventListener('keydown', handleKeydown);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<main className={styles.page}>
|
|
<div className={styles.banner}>Use the spacebar to simulate a barcode read</div>
|
|
<ProductInfo />
|
|
<div className={styles.interactionPanel}>
|
|
{bin !== null
|
|
? <DefectPanel />
|
|
: <Bins />
|
|
}
|
|
</div>
|
|
</main>
|
|
);
|
|
} |