TERUSIの技術勉強まとめ(コーディング編)

削除部分の作成

作成日: 2023-10-21T11:37:46.923Z

はじめに

前回は編集の部分を実装しました。今回でラスト、削除の部分を作成します。
実装量は少ないので頑張りましょう！

実装

1 リンクファイルの編集

deleteTodo:"http://localhost:8080/todo/deleteTodo/",

2 APIを叩くコードを作成

今回はuseridとitemidを使います。
あとは今までのコードとほとんど変わらず実装できます。

//todo削除
export const deleteTodo=async(userid:string,itemid:string)=>{
    const res=await fetch(`${linkName.deleteTodo}${userid}/${itemid}`,{
        method:"DELETE",
    });
    const resData=await res.json();
    return resData.data as todoType[];
}

3 deleteButtonの編集

上記名前のフォルダの編集をしていきます。

import { IconButton } from "@mui/material";
import DeleteIcon from '@mui/icons-material/Delete';
import { Dispatch, SetStateAction } from "react";
import { todoType } from "@/shared/type";
import { deleteTodo } from "@/api/todo";
interface props{
    isEdit:boolean;
    userid:string|null;
    itemid:string;
    setIsComplete:Dispatch<SetStateAction<todoType[]>>;
    setIsImcomplete:Dispatch<SetStateAction<todoType[]>>;
}
const DeleteButton = ({
    isEdit,
    userid,
    itemid,
    setIsComplete,
    setIsImcomplete,
}:props) => {
    const handleClick=async()=>{
        const data:todoType[]=await deleteTodo(userid as string,itemid);
        setIsComplete(data.filter(item=>item.checked===1));
        setIsImcomplete(data.filter(item=>item.checked===0));
    }
    return (
        <div>
            <IconButton 
                aria-label="delete"
                disabled={isEdit}
                onClick={()=>handleClick()}
            >
                <DeleteIcon />
            </IconButton>
        </div>
    );
}

export default DeleteButton;

今までの総復習のようなもんですね。
引数でitemidとuseridを渡しています。
そしてタスクが完了か未完了かを分けています。

4 todoItemの編集

もうお分かりだと思います。
propsが増えたので渡すものを宣言してあげなければなりません。
コードは一部を記載します。

<DeleteButton
     isEdit={isEdit}
     userid={userid}
     itemid={todo.id}
     setIsComplete={setIsComplete} 
     setIsImcomplete={setIsImcomplete
 />

5 signoutButtonを作成する

一応サインアウトボタンも作ります。
今回はホームへの遷移だけですが、本来であればDBの仕様を使ってログインしてるかしてないかの状態を保存し〜とか
やるんでしょうけど今回は全く考えていなかったので遷移だけにします。

import ja from "@/shared/ja";
import linkName from "@/shared/linkName";
import { Button } from "@mui/material";
import Link from "next/link";
import styles from "./style.css";

const SignOutButton = () => {
    return (
        <div className={styles.containar}>
            <Link href={linkName.home}>
                <Button variant="text">
                    {ja.todo.signout}
                </Button>
            </Link>
        </div>
    );
}

export default SignOutButton;

marginTopだけつけようと思います。stylesheetを書いてください。

import { style } from "@vanilla-extract/css";

const styles={
    containar:style({
        marginTop:"10px",
    })
}

export default styles;

6 page.tsxにコンポーネントを追加

'use client'
import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation";
import Title from "../components/title";
import Greeting from "./greeting";
import styles from "./style.css";
import NotLogin from "./notLogin";
import TodoInputForm from "./todoInputForm";
import TodoList from "./todoList";
import { SetStateAction, useState } from "react";
import { todoToggleType, todoType } from "@/shared/type";
import { isCmptoggleItems } from "@/shared/data";
import IsCompleteToggle from "./isCompleteToggle";
import SignOutButton from "./signoutButton";
const Todo = () => {
    const searchParams:ReadonlyURLSearchParams=useSearchParams();
    const name:string|null=searchParams.get('name');
    const id:string|null=searchParams.get('id');
    const [todo,setTodo]=useState<todoType[]>([]);
    const [imcompleteData,setImcompleteData]=useState<todoType[]>([]);
    const [completeData,setCompleteData]=useState<todoType[]>([]);
    const [toggleItem,setToggleItem]=useState<string>(isCmptoggleItems[0].value);
    return (
        <main className={styles.containar}>
            {id&&name?(
                <>
                    <Title/>
                    <Greeting
                        name={name}
                    />
                    <TodoInputForm
                        id={id}
                        setTodos={setTodo}
                        setCompleteData={setCompleteData}
                        setImcompleteData={setImcompleteData}
                    />
                    <IsCompleteToggle 
                        toggle={toggleItem} 
                        setToggle={setToggleItem}
                    />
                    <TodoList
                        id={id}
                        todos={todo}
                        setTodo={setTodo}
                        completeData={completeData}
                        imcompleteData={imcompleteData}
                        setCompleteData={setCompleteData}
                        setImcompleteData={setImcompleteData}
                        toggle={toggleItem}
                    />
                    <SignOutButton/>
                </>
            ):(
                <NotLogin/>
            )}
        </main>
    );
}

export default Todo;

こんな感じで一連の流れの処理ができたと思います。

まとめ

今回はバックエンドからフロントエンドでtodoを作っていきました。
長い時間をかけてこの記事を書きましたがなかなか難しいなと思いました。
さらに、実装していくうちにこうすると良いかもと思ったのでリファクタをしていこうと思います。
それではまた！！！！