| | 1 | 1 | | import { useState, useEffect, useMemo, useCallback } from 'react'; |
| | 1 | 2 | | import { useMaintenance } from './MaintenanceContext.js'; |
| | 1 | 3 | | |
| | 1 | 4 | | // Custom Hook: useMachineStats |
| | 1 | 5 | | // Demonstrates Point 4 (useMemo) and Point 5 (Custom Hooks) |
| | 1 | 6 | | export function useMachineStats() { |
| | 16 | 7 | | const { machines } = useMaintenance(); |
| | 16 | 8 | | |
| | 16 | 9 | | // useMemo: Only recalculate stats if the machines array changes |
| | 16 | 10 | | const stats = useMemo(() => { |
| | 8 | 11 | | const machineList = machines || []; |
| | 8 | 12 | | const total = machineList.length; |
| | 8 | 13 | | const operational = machineList.filter(m => m.status === 'operational').length; |
| | 8 | 14 | | const warning = machineList.filter(m => m.status === 'warning').length; |
| | 8 | 15 | | const maintenance = machineList.filter(m => m.status === 'maintenance').length; |
| | 8 | 16 | | |
| | 8 | 17 | | return { |
| | 8 | 18 | | total, |
| | 8 | 19 | | operational, |
| | 8 | 20 | | warning, |
| | 8 | 21 | | maintenance, |
| | 8 | 22 | | healthScore: total > 0 ? Math.round((operational / total) * 100) : 0 |
| | 8 | 23 | | }; |
| | 16 | 24 | | }, [machines]); |
| | 16 | 25 | | |
| | 16 | 26 | | return stats; |
| | 16 | 27 | | } |
| | 1 | 28 | | |
| | 1 | 29 | | // Custom Hook: useSystemClock |
| | 1 | 30 | | // Demonstrates Point 1 (useState), Point 2 (useEffect) and Point 5 (Custom Hooks) |
| | 1 | 31 | | export function useSystemClock() { |
| | 0 | 32 | | const [time, setTime] = useState(new Date()); |
| | 0 | 33 | | |
| | 0 | 34 | | useEffect(() => { |
| | 0 | 35 | | const timer = setInterval(() => { |
| | 0 | 36 | | setTime(new Date()); |
| | 0 | 37 | | }, 1000); |
| | 0 | 38 | | |
| | 0 | 39 | | // Point 2: Cleanup function |
| | 0 | 40 | | return () => clearInterval(timer); |
| | 0 | 41 | | }, []); |
| | 0 | 42 | | |
| | 0 | 43 | | return time.toLocaleTimeString(); |
| | 0 | 44 | | } |
| | 1 | 45 | | |
| | 1 | 46 | | // Custom Hook: useLiveSearch |
| | 1 | 47 | | // Demonstrates Point 4 (useCallback) |
| | 1 | 48 | | export function useLiveSearch(items, searchKey) { |
| | 26 | 49 | | const [query, setQuery] = useState(''); |
| | 26 | 50 | | |
| | 26 | 51 | | const filteredItems = useMemo(() => { |
| | 17 | 52 | | if (!query) return items; |
| | 2 | 53 | | return items.filter(item => |
| | 4 | 54 | | item[searchKey].toLowerCase().includes(query.toLowerCase()) |
| | 2 | 55 | | ); |
| | 26 | 56 | | }, [items, query, searchKey]); |
| | 26 | 57 | | |
| | 26 | 58 | | return { query, setQuery, filteredItems }; |
| | 26 | 59 | | } |