[簡単]React x LaravelのSPAで作るチュートリアル⑥(編集・削除機能)

SPAで作るタスク管理アプリのチュートリアル - 編集・削除機能

今回は第④弾でReactで一覧テーブル作成する部分をやっていくで

①環境構築(Docker/Laravel/React.js/Material-UI)
②React側でルーティング設定
③API取得してReactで一覧テーブル作成
④API取得してReactで一覧表示
⑤新規登録機能
⑥編集・削除機能

今回は編集機能と削除機能をやっていくで

編集機能

こんな感じで一覧の編集ボタンを押すと該当のするタスクの編集が行える画面に遷移できるようにするで

バックエンド側の実装

シンプルなCRUDだからバックエンドはそんなにややこしくないな。
ルーティングは下記のように記載

api.php

Route::group(['middleware' => 'api'], function(){
    Route::get('posts', 'App\Http\Controllers\Api\PostController@index');
    Route::post('post/create', 'App\Http\Controllers\Api\PostController@create');
    Route::post('edit', 'App\Http\Controllers\Api\PostController@edit'); //追記
    Route::post('update', 'App\Http\Controllers\Api\PostController@update'); //追記
});

コントローラー

PostController.php

　　// 編集画面に遷移するためのアクション
    public function edit(Request $request)
    {
        $post = Post::find($request->id);
        return $post;
    }
    
   //データを更新するためのアクション
    public function update(Request $request)
    {
        $post = Post::find($request->id);
        $post->name = $request->name;
        $post->content = $request->content;
        $post->save();
        $posts = Post::all();
        return $posts;

    }

バックエンドはここまで

編集画面用のコンポーネント作成

入力フォームを新規作成機能を作った際のコンポーネントを再利用する

/pages/PostEdit.jsを下記のように作成

PostEdit.js

import React, { useState, useEffect } from 'react';
import { Card } from '@material-ui/core';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import PostFrom from '../components/PostFrom';


const useStyles = makeStyles((theme) => createStyles({
    card: {
        margin: theme.spacing(5),
        padding: theme.spacing(3),
    },
}));

function PostEdit(props) {
    const classes = useStyles();

    const params = props.match.params;

    const [editData, setEditData] = useState({name:'', content:''});


    useEffect(() => {
        getEditData();
      }, [])

    function getEditData(){
        axios
            .post('/api/edit', {
                id: params.id
            })
            .then(res => {
                setEditData(res.data);
            })
            .catch(() => {
                console.log('通信に失敗しました');
            });
    }

    function updatePost(){
        if(editData == ''){
            return;
        }
        //入力値を投げる
        axios
            .post('/api/update', {
                id: params.id,
                name: editData.name,
                content: editData.content
            })
            .then((res) => {
                setEditData(res.data);
            })
            .catch(error => {
                console.log(error);
            });
    }

    function inputChange(e){
        const key = e.target.name;
        const value = e.target.value;
        editData[key] = value;
        let data = Object.assign({}, editData);
        setEditData(data);
    }

    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <h1>タスク編集</h1>
                        <Card className={classes.card}>
                            <PostFrom data={editData}  inputChange={inputChange} btnFunc={updatePost}　/>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default PostEdit;

ルーティングに記載

route.js

import PostEdit from './pages/PostEdit'; //追記

  function App() {
    return (
        <div>
            <Switch>
                <Route path='/example' exact component={Example} />
                <Route path='/' exact component={Home} />
                <Route path='/post/edit/:id' exact component={PostEdit} /> //追記

Homeの一覧画面で編集ボタンをクリックすると対象のidを使ってリクエスト投げるように設定

Home.js

        //rows.pushの中の編集ボタンに keyとhrefを追加の編集ボタン
        rows.push({
            name: post.name,
            content: post.content,
            editBtn: <Button color="secondary" variant="contained" key={post.id} href={`/post/edit/${post.id}`}>編集</Button>, //追加
            deleteBtn: <Button color="primary" variant="contained">完了</Button>,
        })

ビルドして
編集ボタンをクリックすると、対象のデータの編集画面に遷移できればOKや

そのままデータを変更できることも確認しておくで

確認出来たらコミットしておこう

# git add .
# git commit -m "投稿編集機能の実装"

削除機能

完了を押したらデータが削除されるようにするで

バックエンド

ルーティング

api.php

Route::group(['middleware' => 'api'], function(){
    Route::get('posts', 'App\Http\Controllers\Api\PostController@index');
    Route::post('post/create', 'App\Http\Controllers\Api\PostController@create');
    Route::post('edit', 'App\Http\Controllers\Api\PostController@edit');
    Route::post('update', 'App\Http\Controllers\Api\PostController@update');
    Route::post('delete', 'App\Http\Controllers\Api\PostController@delete');
}); //追記

コントローラー

PostController.php

    public function delete(Request $request)
    {
        $post =  Post::find($request->id);
        $post->delete();
        $posts = Post::all();
        return $posts;
    }

apiを叩くdeletePostの定義

Home.js

    // createPostの下に記載
    const deletePost = async (post) => {
        await axios
            .post('/api/delete', {
            id: post.id
        })
        .then((res) => {
            this.setState({
                posts: res.posts
            });
        })
        .catch(error => {
            console.log(error);
        });
    }

完了ボタンのOnClickを追記

Home.js

        rows.push({
            name: post.name,
            content: post.content,
            editBtn: <Button color="secondary" variant="contained" key={post.id} href={`/post/edit/${post.id}`}>編集</Button>,
            deleteBtn: <Button color="primary" variant="contained" href="/" onClick={() => deletePost(post)}>完了</Button>,//追記
        })

ビルド

$ make npm-dev

一覧表で完了ボタンを押し、対象のデータが削除されることを確認

コミットしておく

$ git add .
$ git commit -m "削除機能の実装"

完了