Reactで簡単なTODOアプリを実装

初めてReactでアプリを実装しました。自分用のメモとして残しておきます。

デザインはチャクラUIを使用：https://chakra-ui.com/

完成イメージ
1. 実装
おわりに

完成イメージ

機能イメージ

追加ボタン押下でテキストボックスに入力された値が進行中欄に追加されること
完了ボタン押下で進行中欄から完了欄に移行すること
編集ボタン押下で再編集ができること
戻すボタン押下で完了欄から進行中欄に遷移すること
削除ボタン押下でTODOが削除されること

実装

import { useState } from 'react'
import { Button, ChakraProvider, Flex, Input, Text, Box, Square, VStack } from '@chakra-ui/react';
export const TodoApp = () => {
  const [todo, setTodo] = useState("");
  const [doingTodo, setDoingTodo] = useState<string[]>([]);
  const [completeTodo, setCompleteTodo] = useState<string[]>([]);
  const [isEditing, setIsEditing] = useState(false);

  const onChange = (event: any) => { setTodo(event.target.value) }
  const todoAdd = () => {
    if (todo === "") return;
    const newTodo = [...doingTodo, todo]
    setDoingTodo(newTodo);
    setTodo("");
    setIsEditing(false);
  }

  const compTodo = (index: any) => {
    if (isEditing) return;
    const incompleteTodo = [...doingTodo]
    incompleteTodo.splice(index, 1)
    const newCompleteTodo = [...completeTodo, doingTodo[index]]
    setDoingTodo(incompleteTodo);
    setCompleteTodo(newCompleteTodo);
  }
  const editTodo = (index: number) => {
    if (isEditing) return;
    const editTodo = [...doingTodo]
    editTodo.splice(index, 1)
    setTodo(doingTodo[index])
    setDoingTodo(editTodo)
    setIsEditing(true);
  }

  const backTodo = (index: any) => {
    if (isEditing) return;
    const backTodo = [...completeTodo]
    backTodo.splice(index, 1)
    const newBackTodo = [...doingTodo, completeTodo[index]]
    setDoingTodo(newBackTodo);
    setCompleteTodo(backTodo)
  }

  const deleteTodo = (index: any) => {
    if (isEditing) return;
    const deleteTodo = [...completeTodo]
    deleteTodo.splice(index, 1)
    setCompleteTodo(deleteTodo)
  }
  return (
    <ChakraProvider>
      <Flex color='white'>
        <Square size='10%'>
        </Square>
        <Square size='80%'>
          <div>
            <Box w='100%' p={4} color='black' maxW='sm' borderWidth='1px' mt={3}>
              <Flex align="center" justifyContent="space-between">
                <Input placeholder='Todoを追加' value={todo} onChange={onChange} />
                <Button colorScheme="teal" ml={1} onClick={todoAdd}>追加</Button>
              </Flex>
            </Box>
          </div>
        </Square>
        <Square size='10%'>
        </Square>
      </Flex>
      <Flex gap={4} p={4}>
        {/* 進行中 */}
        <Box flex="1" bg="gray.100" p={4} borderRadius="md">
          <Text fontSize="lg" fontWeight="bold" color="blue.500">進行中</Text>
          <VStack spacing={2}>
            <ul>
              {doingTodo.map((todo, index) => {
                return (
                  <li key={todo}>
                    {todo}
                    <Button size="sm" colorScheme="blue" mb={2} ml={2} onClick={() => { compTodo(index) }}>完了</Button>
                    <Button size="sm" colorScheme="blue" mb={2} ml={2}
                      onClick={() => { editTodo(index) }}>編集</Button>
                  </li>
                );
              }
              )}
            </ul>
          </VStack>
        </Box>

        {/* 完了 */}
        <Box flex="1" bg="gray.100" p={4} borderRadius="md">
          <Text fontSize="lg" fontWeight="bold" color="red.500">完了 </Text>
          <VStack spacing={2}>
            <ul>
              {completeTodo.map((todo, index) => {
                return (
                  <li key={todo}>
                    {todo}
                    <Button size="sm" colorScheme="red" mb={2} ml={2} onClick={() => backTodo(index)}>戻す</Button>
                    <Button size="sm" colorScheme="red" mb={2} ml={2}
                      onClick={() => deleteTodo(index)}>削除</Button>
                  </li>
                );
              }
              )}
            </ul>
          </VStack>
        </Box>
      </Flex>
    </ChakraProvider >
  )
}

export default TodoApp

おわりに

とりあえず作った感がまんさいですが、形としてできたので良かったと思います。チャクラUIの使い方がよくわからなくまだまだ使いこなすには時間がかかりそうです。少しずつ改良していければと思います。