atom.ts

import { atom } from 'jotai'
import type { PrimitiveAtom } from 'jotai'

type Todo = {
  title: string
  completed: boolean
}

// 現在指定されているfilterを管理するatom(赤枠)
export const filterAtom = atom('all')

// todoリストの各todoを管理するatom
export const todosAtom = atom<PrimitiveAtom<Todo>[]>([])

// filter後のtodoを管理するatom
export const filteredAtom = atom<PrimitiveAtom<Todo>[]>((get) => {
  // 現在のfilterを読み込む
  const filter = get(filterAtom)
  // 現在のtodosを読み込む
  const todos = get(todosAtom)

  // filterがallの場合は全てのtodosを返す
  if (filter === 'all') return todos
  // filterがcompletedの時は todosの各atomがcompletedなものを返す
  if (filter === 'completed') return todos.filter((atom) => get(atom).completed)
  // todosの各atomがIncompletedなものを返す
  return todos.filter((atom) => !get(atom).completed)
})

Filter.tsx

import { useAtom } from 'jotai'
import { Radio } from 'antd'

import { filterAtom } from '../atoms'

const Filter = () => {
　// filterAtomをfilterに代入
  const [filter, setFilter] = useAtom(filterAtom)
  return (
  // 各ラジオボタンが押されるたびにsetFilterで値をFilterにセットする
    <Radio.Group onChange={(e) => setFilter(e.target.value as string)} value={filter}>
      <Radio value="all">All</Radio>
      <Radio value="completed">Completed</Radio>
      <Radio value="incompleted">Incompleted</Radio>
    </Radio.Group>
  )
}

export default Filter

TodoItem.tsx

import { useAtom } from 'jotai'
import { CloseOutlined } from '@ant-design/icons'

// todoが持つ状態の型を定義
type Todo = {
  title: string
  completed: boolean
}

// todoを消去する関数の型を宣言
type RemoveFn = (item: PrimitiveAtom<Todo>) => void

// TodoItemは状態とatom自身を消去する型を持つ
type TodoItemProps = {
  atom: PrimitiveAtom<Todo>
  remove: RemoveFn
}

const TodoItem = ({ atom, remove }: TodoItemProps) => {
　// 引数で与えられたatomをitemに格納
  const [item, setItem] = useAtom(atom)
  // 元のtodoからcompletedの値だけを逆にする
  const toggleCompleted = () => setItem((todo) => ({ ...todo, completed: !todo.completed }))
  return (
    <>
      // チェックボックスの描画
      <input type="checkbox" checked={item.completed} onChange={toggleCompleted} />

      // completedの値によって取り消し線を描画
      <span style={{ textDecoration: item.completed ? 'line-through' : '' }}>{item.title}</span>

      // 消去ボタン。UIにはAnt Designを使用
      <CloseOutlined onClick={() => remove(atom)} />
    </>
  )
}

export default TodoItem

Filtered.tsx

import { useAtom } from 'jotai'
import { a, useTransition } from 'react-spring'

import { filteredAtom } from '../atoms'
import FilteredType from '../types/filtered'

import TodoItem from './TodoItem'

const Filtered = (props: FilteredType) => {
  // 現在のfilterを考慮して表示するべきtodosを格納
  const [todos] = useAtom(filteredAtom)
  // react-springの機能。動きを持たせてくれる。
  const transitions = useTransition(todos, {
    keys: (todo) => todo.toString(),
    from: { opacity: 0, height: 0 },
    enter: { opacity: 1, height: 40 },
    leave: { opacity: 0, height: 0 },
  })
  return transitions((style, atom) => (
    <a.div className="item" style={style}>
      <TodoItem atom={atom} {...props} />
    </a.div>
  ))
}

export default Filtered

TodoList.tsx

import { atom, useAtom } from 'jotai'
import { FormEvent } from 'react'

import { todosAtom } from '../atoms'
import RemoveFn from '../types/removeFn'
import Todo from '../types/todo'

import Filter from './Filter'
import Filtered from './Filtered'

const TodoList = () => {
  //todosAtomに値をセットする関数のみ宣言する
  const [, setTodos] = useAtom(todosAtom)

  // 引数で受け取ったtodo以外のtodoをtodosにセットする
  const remove: RemoveFn = (todo) => setTodos((prev) => prev.filter((item) => item !== todo))

  const add = (e: FormEvent<HTMLFormElement>) => {
    // submitイベントが現在のURLに対してフォームを送信することをキャンセルする
    e.preventDefault()

    // 入力を受け取る
    const title = e.currentTarget.inputTitle.value as string

    // 入力欄を空にする
    e.currentTarget.inputTitle.value = ''

    // 配列todosAtomに受け取った入力と状態(Incompleted)を格納する
    setTodos((prev) => [...prev, atom<Todo>({ title, completed: false })])
  }
  return (
    <form onSubmit={add}>
      <Filter />
      <input name="inputTitle" placeholder="Type ..." />
      <Filtered remove={remove} />
    </form>
  )
}

export default TodoList

App.tsx

import { Provider } from 'jotai'

import './App.css'
import TodoList from './components/TodoList'

const App = () => (
  <Provider>
    <h1>Jōtai Todo Application</h1>
    <TodoList />
  </Provider>
)

export default App