diff --git a/to-do-list/src/features/toDo/toDo.js b/to-do-list/src/features/toDo/toDo.js index afe4715c1da3bb36f640f9316a05f3019ba19d0c..c5fe28384cd67de7cc8fbf2e4a4fbcaea53ecbb9 100644 --- a/to-do-list/src/features/toDo/toDo.js +++ b/to-do-list/src/features/toDo/toDo.js @@ -1,19 +1,59 @@ -// import { useSelector, useDispatch } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; // import PropTypes from 'prop-types'; -// import classNames from 'classnames'; -// import styles from './toDo.module.css'; +import classNames from 'classnames'; +import styles from './toDo.module.css'; import { + selectDraft, + selectItems, + setDraft, + addItem, + setDone, } from './toDoSlice.js'; function Item(props) { - return null; + const dispatch = useDispatch(); + + const classes = classNames({ + [styles.done]: props.done, + }); + + const onClick = () => dispatch(setDone({ + index: props.index, + done: !props.done, + })); + + return ( + <div className={styles.item}> + <span className={classes}>#{props.index} {props.text}</span> + <button onClick={onClick}>Done</button> + </div> + ); } -Item.propTypes = { -}; +// Item.propTypes = { +// }; export function List() { - return null; + const draft = useSelector(selectDraft); + const items = useSelector(selectItems); + const dispatch = useDispatch(); + + const onChange = (event) => dispatch(setDraft({ + draft: event.target.value, + })); + const onClick = () => dispatch(addItem()); + + return ( + <> + {items.map((item, index) => + <Item key={index} index={index} text={item.text} done={item.done} />, + )} + <div className={styles.draft}> + <input type={'text'} className={styles.wide} value={draft} onChange={onChange} /> + <button onClick={onClick}>+</button> + </div> + </> + ); } diff --git a/to-do-list/src/features/toDo/toDoSlice.js b/to-do-list/src/features/toDo/toDoSlice.js index ee3e11d6dca232545291ff59a8cf46ee7d56b024..1e2aa8374f30b64df34abebe1585127c77456ff8 100644 --- a/to-do-list/src/features/toDo/toDoSlice.js +++ b/to-do-list/src/features/toDo/toDoSlice.js @@ -3,11 +3,44 @@ import { createSlice } from '@reduxjs/toolkit'; const toDoSlice = createSlice({ name: 'toDo', initialState: { + draft: '', + items: [], }, reducers: { + setDraft: (toDo, action) => { + const { + draft, + } = action.payload; + toDo.draft = draft; + }, + addItem: (toDo) => { + toDo.items.push({ + text: toDo.draft, + done: false, + }); + toDo.draft = ''; + }, + setDone: (toDo, action) => { + const { + index, + done, + } = action.payload; + toDo.items[index].done = done; + }, }, }); export default toDoSlice; -// export const { -// } = toDoSlice.actions; +export const { + setDraft, + addItem, + setDone, +} = toDoSlice.actions; + +export function selectDraft(state) { + return state.toDo.draft; +} + +export function selectItems(state) { + return state.toDo.items; +}