Fixes for a few oddities and the Traefik issues

src/app/(authenticated)/binner/components/Bins/Bins.tsx

@@ -18,29 +18,29 @@ export function Bins() {
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                setBin(Bin.LOSS);
+                !!item && setBin(Bin.LOSS);
                 break;
             case 'ArrowLeft':
                 event.preventDefault();
-                setBin(Bin.PROCESS);
+                !!item && setBin(Bin.PROCESS);
                 break;
             case 'ArrowRight':
                 event.preventDefault();
-                setBin(Bin.SHOULDER_TAP);
+                !!item && setBin(Bin.SHOULDER_TAP);
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                setBin(Bin.DONATE);
+                !!item && setBin(Bin.DONATE);
                 break;
         }
-    }, [bin, item, setBin, setItem]);
+    }, [item, setBin]);
 
     useEffect(() => {
         window.addEventListener('keydown', handleKeydown);
         return () => {
             window.removeEventListener('keydown', handleKeydown);
         };
-    }, []);
+    }, [handleKeydown]);
     
     return (
         <div className={styles.bins}>

src/app/(authenticated)/binner/components/ProductInfo/ProductInfo.tsx

@@ -15,7 +15,6 @@ export function ProductInfo() {
     const { item, setItem } = useContext(BinnerContext);
     const { processors } = useContext(SupplyChainContext);
     const [inputItem, setInputItem] = useState<Partial<ParsedBarcode> | null>(null);
-    const dateRef = useRef<HTMLInputElement>(null);
     const weightRef = useRef<HTMLInputElement>(null);
     const getProcessorByBarcodeId = useGetProcessorByBarcodeId();
 
@@ -24,16 +23,32 @@ export function ProductInfo() {
     const [isEntryMode, setIsEntryMode] = useState(!isCompleteItem(item));
 
     useEffect(() => {
+        console.log('item', { item, complete: isCompleteItem(item) });
         setIsEntryMode(!isCompleteItem(item));
     }, [item])
 
     useEffect(() => {
         if (isCompleteItem(inputItem)) {
+            console.log('inputItem', { inputItem, barcode: `${inputItem?.product}${inputItem?.date}${inputItem?.processor}${inputItem?.weight}` });
             setItem(barcodeToProduct(`${inputItem?.product}${inputItem?.date}${inputItem?.processor}${inputItem?.weight}`));
             setInputItem(null);
         }
-        setIsEntryMode(!isCompleteItem(inputItem));
-    }, [inputItem])
+    }, [inputItem]);
+
+    const getDateString = (date: Date) => {
+        const yyyy = date.getFullYear();
+        let mm: number | string = date.getMonth() + 1;
+        let dd: number | string = date.getDate();
+
+        if (dd < 10) {
+            dd = '0' + dd;
+        } 
+        
+        if (mm < 10) {
+            mm = '0' + mm;
+        }
+        return `${yyyy}-${mm}-${dd}`;
+    }
 
     return (
         <div className={styles.productInfo}>
@@ -58,13 +73,13 @@ export function ProductInfo() {
                 <div className={styles.card}>
                     <label htmlFor="date">Packaged Date</label>
                     <input
-                        id="date" value={!!item ? ordinalToDate(item.date).toDateString() : ''}
+                        id="date" 
+                        type="date"
+                        value={!!item ? getDateString(ordinalToDate(item.date)) : undefined}
                         contentEditable={isEntryMode}
-                        ref={dateRef}
-                        onChange={(e) => {
-                            dateRef.current.value = e.currentTarget.value; 
-                            setInputItem({ ...inputItem || {}, date: dateToOrdinal(new Date(e.currentTarget.value)) }) 
-                        }} 
+                        onChange={isEntryMode ? (e) => {
+                            setInputItem({ ...inputItem || {}, date: `${dateToOrdinal(new Date(e.currentTarget.valueAsNumber))}` }) 
+                        } : undefined} 
                     />
                 </div>
                 <div className={styles.card}>
@@ -86,26 +101,36 @@ export function ProductInfo() {
                 </div>
                 <div className={styles.card}>
                     <label htmlFor="weight">Weight</label>
-                    <div className={styles.inputWithButton}>
-                        <input
-                            id="weight" 
-                            value={!!item ? `${item.weight} lbs.` : ''} 
-                            contentEditable={false}
-                            tabIndex={-1} 
-                            ref={weightRef}
-                        />
-                        {isEntryMode && (
-                            <button 
-                                onClick={(e) => {
-                                    const weight = faker.number.int({ min: 1000, max: 1999 });
-                                    weightRef.current.value = `${weight / 100} lbs`; setInputItem({ ...inputItem || {}, weight }) 
-                                }} 
-                                tabIndex={0}
-                            >
-                                Weight from Scale
-                            </button>
+                        {isEntryMode ? (
+                            <div className={styles.inputWithButton}>
+                                <input
+                                    id="weight"
+                                    contentEditable={false}
+                                    tabIndex={-1}
+                                    ref={weightRef}
+                                />
+                                <button 
+                                    onClick={(e) => {
+                                        const weight = faker.number.int({ min: 1000, max: 1999 });
+                                        if (weightRef.current) {
+                                            weightRef.current.value = `${weight / 100} lbs`; 
+                                        }
+                                        setInputItem({ ...inputItem || {}, weight }) 
+                                    }} 
+                                    tabIndex={0}
+                                >
+                                    Weight from Scale
+                                </button>
+                            </div>
+                        ) : (
+                            <input
+                                id="weight" 
+                                value={!!item ? `${item?.weight} lbs.` : ''} 
+                                contentEditable={false}
+                                tabIndex={-1}
+                                readOnly
+                            />
                         )}
-                    </div>
                 </div>
             </div>
         </div>

src/app/(authenticated)/binner/page.tsx

@@ -22,17 +22,21 @@ export default function Page() {
                 break;
             case 'Escape':
                 event.preventDefault();
-                setBin(null);
+                if (bin !== null) {
+                    setBin(null);
+                } else {
+                    setItem(null);
+                }
                 break;
         }
-    }, [bin, item, setBin, setItem]);
+    }, [bin, setBin, setItem]);
 
     useEffect(() => {
         window.addEventListener('keydown', handleKeydown);
         return () => {
             window.removeEventListener('keydown', handleKeydown);
         };
-    }, []);
+    }, [handleKeydown]);
 
     return (
         <main className={styles.page}>

src/app/lib/barcode.ts

@@ -2,7 +2,6 @@ import { faker } from '@faker-js/faker';
 
 import { Product } from "./product.enum";
 import { dateToOrdinal } from './ordinalDate';
-import { ValueOf } from 'next/dist/shared/lib/constants';
 
 export type Barcode = string;