[todolist]수정기능 구현중2

728x90

일단 누르면 상태에따라 버튼이 수정과 제출로 다르게 뜨게 여기까지 구현했다.

이제 input뜨는거 추가하고 그러면 될듯.

일단 누르면 상태에 따라 todolist랑 수정버튼이 뜨고 수정버튼을 누르면 input창과 제출버튼이 뜨게 구현했다.

문제는 하나만 움직이는게 아니고 다 움직인다는게 문제다.

해야할부분

1. id가 같은거만 input창으로 뜨게한다.

2.axios연결해서 input내용이 변경되게하게

일단 현재까지의 코드

todo

import { useState, useEffect } from "react";
import axios from "axios";
import styled from "styled-components";
import TodoList from "../Todo/TodoList";

const Body = styled.div`
  border: 10px solid black;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;
const Container = styled.div`
  border: 10px solid blue;
  /* color: blue; */
  width: 600px;
  height: 600px;
`;
const TitlePart = styled.div`
  border: 3px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  > p {
    font-size: 30px;
    font-weight: 500;
  }
`;
const InsertPart = styled.div`
  display: flex;
  flex-direction: row;
  padding-bottom: 10px;
`;
const BodyPart = styled.div`
  border: 3px solid green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 50px;
`;
// const ListStyle = styled.li`
//   list-style: none;
// `;

function Todo() {
  const [addInput, setAddInput] = useState("");
  const [todos, setTodos] = useState([]);
  // const [showEdit, setShowEdit] = useState(false);

  // console.log(todos);
  useEffect(() => {
    const access_token = localStorage.getItem("access_token");
    axios
      .get(`${process.env.REACT_APP_API_URL}/todos`, {
        headers: {
          Authorization: `Bearer ${access_token}`,
        },
      })
      .then(res => {
        console.log(res.data);
        setTodos(res.data);
      })
      .catch(err => console.error(err));
  }, []);

  const handleAdd = () => {
    const access_token = localStorage.getItem("access_token");
    axios
      .post(
        `${process.env.REACT_APP_API_URL}/todos`,
        {
          id: todos.length + 1,
          todo: addInput,
          isCompleted: false,
          userId: todos.length + 1,
        },
        {
          headers: {
            Authorization: `Bearer ${access_token}`,
            "Content-Type": "application/json",
          },
        }
      )
      .then(res => {
        // console.log(res);
        setTodos([...todos, res.data]);
        setAddInput(" ");
      })
      .catch(err => console.error(err));
  };

  return (
    <>
      <Body>
        <Container>
          <TitlePart>
            <p>Todo List</p>
            <InsertPart>
              <input
                type="text"
                data-testid="new-todo-input"
                onChange={e => setAddInput(e.target.value)}
              ></input>
              <button
                data-testid="new-todo-add-button"
                onClick={() => handleAdd()}
              >
                추가
              </button>
            </InsertPart>
          </TitlePart>
          <BodyPart>
            <TodoList todos={todos} setTodos={setTodos} />
          </BodyPart>
        </Container>
      </Body>
    </>
  );
}

export default Todo;

todolist

import axios from "axios";
import { useState } from "react";
// import EditShow from "./EditShow";

// import { useParams } from "react-router-dom";
function TodoList({ todos, setTodos }) {
  const [updateInput, setUpdateInput] = useState("");
  const [editMode, setEditMode] = useState(false);

  // let { id } = useParams();
  // console.log(todos);

  const handleDelete = id => {
    const access_token = localStorage.getItem("access_token");
    axios
      .delete(`${process.env.REACT_APP_API_URL}/todos/${id}`, {
        headers: {
          Authorization: `Bearer ${access_token}`,
        },
      })
      .then(res => {
        // console.log(res);
        setTodos(todos.filter(obj => obj.id !== todos.id));
        window.location.reload();
      })
      .catch(err => console.error(err));
  };

  const handleUpdate = id => {
    console.log(todos);
    const access_token = localStorage.getItem("access_token");

    axios
      .put(
        `${process.env.REACT_APP_API_URL}/todos/${id}`,
        {
          todo: updateInput,
          isCompleted: false,
        },
        {
          headers: {
            Authorization: `Bearer ${access_token}`,
            "Content-Type": "application/json",
          },
        }
      )
      .then(res => {
        console.log(res);
        //setUpdateInput 이게 값이 없어서 계속 에러가 난거다.
      })
      .catch(err => console.error(err));
  };
  const editHandle = () => {
    setEditMode(!editMode);
    // console.log(editMode);
  };

  return (
    <div>
      {todos.map((el, i) => {
        return (
          <li key={i}>
            <label>
              <input type="checkbox" />
              {/* <span>{el.todo}</span> */}
            </label>
            {/* //일단 이렇게말고 수정버튼을 누르면 바뀐창으로 뜨고 거기서 제출을 클릭하면 저거 함수가 실행되게 해야겠다. */}
            {/* <button
              data-testid="modify-button"
              onClick={() => handleUpdate(el.id)}
            >
              수정
            </button> */}
            {/* <button>수정</button> */}
            {editMode ? <input></input> : <span>{el.todo}</span>}
            {editMode ? (
              <button onClick={() => editHandle(el.id)}>제출</button>
            ) : (
              <button onClick={() => editHandle(el.id)}>수정</button>
            )}

            <button
              data-testid="delete-button"
              onClick={() => handleDelete(el.id)}
            >
              삭제
            </button>
          </li>
        );
      })}
      <input onChange={e => setUpdateInput(e.target.value)}></input>
    </div>
  );
}

export default TodoList;

728x90

저작자표시

'부트캠프교육중 > react' 카테고리의 다른 글

[코딩애플]4강 컴포넌트만들기, map사용 (0)	2023.06.22
[코딩애플] 1~3강 (0)	2023.06.22
[todolist] 수정기능 구현 중 막히는부분 (0)	2023.06.17
작업시 기본틀(계산기형태) (0)	2023.06.13
코드분할, lazy, suspense (0)	2023.03.25

뭉지일지

[todolist]수정기능 구현중2

'부트캠프교육중 > react' 카테고리의 다른 글

티스토리툴바

[todolist]수정기능 구현중2

'부트캠프교육중 > react' 카테고리의 다른 글

관련글

티스토리툴바