#6.13 Categories #6.14 Immutability part One #6.15 Immutability part Two

! 사용자들이 버튼을 이용해서 todo의 카테고리를 바꿀 수 있게 하기 & 카테고리에 따른 알맞은 버튼만 보이게 하기 !

import { IToDo } from "../atoms";

function ToDo({ text, category }: IToDo) {
    const onClick = (newCategory: IToDo['category']) => {

    }
    return <li >
        <span>{text}</span>
        {category !== "TO_DO" && <button onClick={() => { onClick("TO_DO") }}>To Do</button>}
        {category !== "DONE" && <button onClick={() => { onClick("DONE") }}>Done</button>}
        {category !== "DOING" && <button onClick={() => { onClick("DOING") }}>Doing</button>}
    </li>
}
export default ToDo;

// or this also possible way

function ToDo({ text, category, id }: IToDo) {
    const setToDos = useSetRecoilState(toDoState);
    const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        const { currentTarget: { name } } = event;
        setToDos(oldToDos => {
            const targetIndex = oldToDos.findIndex(toDo => toDo.id === id)
            const newToDo = { text, id, category: name as any };
            return [...oldToDos.slice(0, targetIndex), newToDo, ...oldToDos.slice(targetIndex + 1)]
        });

    }
    return <li >
        <span>{text}</span>
        {category !== "TO_DO" && <button name="TO_DO" onClick={onClick}>To Do</button>}
        {category !== "DONE" && <button name="DONE" onClick={onClick}>Done</button>}
        {category !== "DOING" && <button name="DOING" onClick={onClick}>Doing</button>}
    </li>
}
export default ToDo;

IToDo['category']

클릭된 버튼 수정하기
1. find todo based on id (find the index)
2. 그 인덱스 이전의 모든 원소, 이후의 모든 원소를 가져온다.
3. 그 둘을 연결하면서 그 사이에 새로운 원소를 추가한다.
ex.) array.slice(1, target), array.slice(target+1) (slice시 끝부분을 정하지 않으면 끝까지 slice해줌)