{user.id}
158 |{user.name}
159 | 166 | 173 |{modalText}
; 80 | }; 81 | 82 | const App = () => { 83 | const [userState, dispatch] = useReducer(reducer, initialState); 84 | 85 | const [userName, setUserName] = useState(''); 86 | const [updateUserId, setUpdateUserId] = useState(0); 87 | 88 | useEffect(() => { 89 | if (userState.isModalOpen) { 90 | // Set a timeout to hide the modal after 2 seconds 91 | const timeoutId = setTimeout(() => { 92 | dispatch({ type: 'HIDE_MODAL' }); 93 | dispatch({ type: 'CLEAR_MODAL_TEXT' }); 94 | }, 1000); 95 | 96 | return () => { 97 | clearTimeout(timeoutId); // Cleanup the timeout 98 | }; 99 | } 100 | }, [userState.isModalOpen]); 101 | 102 | const handleSubmit = (event: FormEvent) => { 103 | event.preventDefault(); 104 | if (updateUserId === 0) { 105 | const newUser = { 106 | id: Number(new Date().getTime()), 107 | name: userName, 108 | }; 109 | dispatch({ type: 'ADD_USER', user: newUser }); 110 | } else { 111 | dispatch({ 112 | type: 'UPDATE_USER', 113 | id: updateUserId, 114 | newName: userName, 115 | }); 116 | } 117 | 118 | setUserName(''); 119 | setUpdateUserId(0); 120 | }; 121 | 122 | const handleEditUser = (user: User) => { 123 | setUpdateUserId(user.id); 124 | setUserName(user.name); 125 | }; 126 | 127 | const handleDeleteUser = (id: number) => { 128 | dispatch({ type: 'DELETE_USER', id: id }); 129 | }; 130 | 131 | return ( 132 |{user.name}
159 | 166 | 173 |{modalText}
; 15 | }; 16 | 17 | const AppWithoutReducer = () => { 18 | const [users, setUsers] = useState{user.name}
74 | 81 |