Laravel×ReactでつくるSPAスケジュールアプリ【⑥更新】

2022年1月29日
2023年5月8日
React
Laravel, React

React

LaravelとReactで作るSPAアプリ第6段です。
次にReactでスケジュールを更新しましょう。

Laravel×ReactでつくるSPAスケジュールアプリ【⑥更新】

まずはバックエンドから

前回までで、スケジュールの作成は完成しています。

今回はスケジュールの青い部分をクリックすると新規登録と同じポップアップが発生し、
内容の更新ができる機能を実装していきましょう。
まずはバックエンドからです。

ScheduleController.php

　　//更新画面への遷移
    public function edit(Request $request){
        $schedules = Schedule::find($request->id);
        return $schedules;
    }

    //データ更新アクション
    public function update(Request $request){
        $schedules = Schedule::find($request->id);
        $schedules->sch_date = $request->sch_date;
        $schedules->sch_time = $request->sch_time;
        $schedules->sch_category = $request->sch_category;
        $schedules->sch_contents = $request->sch_contents;
        $schedules->save();
        return $schedules;
    }

　　//更新画面への遷移

public function edit(Request $request){

$schedules = Schedule::find($request->id);

return $schedules;

}

//データ更新アクション

public function update(Request $request){

$schedules = Schedule::find($request->id);

$schedules->sch_date = $request->sch_date;

$schedules->sch_time = $request->sch_time;

$schedules->sch_category = $request->sch_category;

$schedules->sch_contents = $request->sch_contents;

$schedules->save();

return $schedules;

}

前回のスケジュール登録処理の下に追記しましょう。
登録ポップアップへの遷移、および登録処理そのものですね。

登録処理とほとんど変わらない内容になります。
ルート情報も更新しましょう。

api.php

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

　　Route::group(['middleware'=>'api'],function(){

Route::post('posts','App\Http\Controllers\Api\ScheduleController@scheduleindex');

Route::post('posts/create','App\Http\Controllers\Api\ScheduleController@create');

Route::post('edit','App\Http\Controllers\Api\ScheduleController@edit'); //追記

Route::post('update','App\Http\Controllers\Api\ScheduleController@update'); //追記

});

editが更新画面への遷移。updateが更新処理そのものとなっています。
バックエンドの処理は完了です。

次に更新用ポップアップを作成しましょう。
これも登録用のポップアップを使いまわして作成します。

更新用のポップアップを実装する

次はフロントエンドです。更新用のポップアップを作成します。
Example.jsファイルを以下のように編集します。

Example.js

//更新用ダイアログ開閉機能
    const[editopen,setEditOpen] = useState(false);

    const editHandleClickOpen = (e) =>{
        e.stopPropagation();
        setEditOpen(true);
        getEditData(e);
    };

    const editHandleClose = () =>{
        setEditOpen(false);
    };

//更新用ダイアログ開閉機能

const[editopen,setEditOpen] = useState(false);

const editHandleClickOpen = (e) =>{

e.stopPropagation();

setEditOpen(true);

getEditData(e);

};

const editHandleClose = () =>{

setEditOpen(false);

};

returnの前の登録処理の後ろにでも追記してください。
次にreturnの中身にクリック時にダイアログを開く処理を記載します。

Example.js

<div className="schedule-area">
{rows.map((schedule,k) => (
schedule.sch_date == year + '-' + zeroPadding(month) + '-' + zeroPadding(day) &&
<div className='schedule-title' key={k} onClick={editHandleClickOpen}>{schedule.sch_contents}</div> //onClickを追加
))}
</div>

{rows.map((schedule,k) => (

schedule.sch_date == year + '-' + zeroPadding(month) + '-' + zeroPadding(day) &&

<div className='schedule-title' key={k} onClick={editHandleClickOpen}>{schedule.sch_contents}</div> //onClickを追加

))}

</div>

onClickで動くので、最後に更新ダイアログを記載していきましょう。

Example.js

<Dialog onClose={handleClose} open={editopen}>
<DialogTitle>Subscribe</DialogTitle>
<DialogContent>
<DialogContentText>
スケジュール更新
</DialogContentText>
<TextField margin="dense" id="sch_date" name="sch_date" label="予定日" type="text" fullWidth variant="standard"/>
<InputLabel id="sch_time_label">時刻</InputLabel>
<Select labelId="sch_hour" id="sch_hour_select" name="sch_hour" label="Hour" variant="standard">
<MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
</Select>
<Select labelId="sch_min" id="sch_min_select" name="sch_min" label="Min" variant="standard">
<MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
</Select>
<InputLabel id="sch_category">カテゴリー</InputLabel>
<Select labelId="sch_category" id="sch_category_select" name="sch_category" label="Category" variant="standard">
<MenuItem value="勉強">勉強</MenuItem>
<MenuItem value="案件">案件</MenuItem>
<MenuItem value="テスト">テスト</MenuItem>
</Select>
<TextField margin="dense" id="sch_contents" name="sch_contents" label="内容" type="text" fullWidth variant="standard"/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button href="/dashboard">Subscribe</Button>
</DialogActions>
</Dialog>

<DialogTitle>Subscribe</DialogTitle>

スケジュール更新

</DialogContentText>

</Select>

</Select>

<InputLabel id="sch_category">カテゴリー</InputLabel>

</Select>

</DialogContent>

<Button onClick={handleClose}>Cancel</Button>

<Button href="/dashboard">Subscribe</Button>

</DialogActions>

</Dialog>

登録ダイアログの下に追記すると良いでしょう。
さて、ビルドをして更新フォームの確認をしましょう。

「スケジュール更新」という文字が確認できます。
データは連携していないので、取得はしていません。
次のステップで、データの取得や更新をしていきましょう。

更新用データを取得しよう！

データを取得してダイアログにデータを表示しましょう。
Example.jsの関数をまとめてある部分に、配列とデータ取得の関数を追加します。

//更新用のデータ配列
    const [editData,setEditData] = useState({id:'',sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

    //バックエンドからデータ一覧を取得
    function getEditData(e){
        axios
            .post('/api/edit', {
                id: e.currentTarget.id
            })
            .then(res => {
                setEditData({
                    id:res.data.id,
                    sch_category:res.data.sch_category,
                    sch_contents:res.data.sch_contents,
                    sch_date:res.data.sch_date,
                    sch_hour:res.data.sch_time.substr(0,2),
                    sch_min:res.data.sch_time.substr(3,2)
                });
            })
            .catch(() => {
                console.log('通信に失敗しました');
            });
    }

//更新用のデータ配列

const [editData,setEditData] = useState({id:'',sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

//バックエンドからデータ一覧を取得

function getEditData(e){

axios

.post('/api/edit', {

id: e.currentTarget.id

})

.then(res => {

setEditData({

id:res.data.id,

sch_category:res.data.sch_category,

sch_contents:res.data.sch_contents,

sch_date:res.data.sch_date,

sch_hour:res.data.sch_time.substr(0,2),

sch_min:res.data.sch_time.substr(3,2)

});

})

.catch(() => {

console.log('通信に失敗しました');

});

}

editDataに取得したデータを格納しています。
このデータを、ダイアログ内部で取得するようにします。

<DialogContent>
<DialogContentText>
スケジュール更新
</DialogContentText>
<TextField margin="dense" id="sch_date" name="sch_date" label="予定日" type="text" fullWidth variant="standard" value={editData.sch_date}/>
<InputLabel id="sch_time_label">時刻</InputLabel>
<Select labelId="sch_hour" id="sch_hour_select" name="sch_hour" label="Hour" variant="standard" value={editData.sch_hour}>
<MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
</Select>
<Select labelId="sch_min" id="sch_min_select" name="sch_min" label="Min" variant="standard" value={editData.sch_min}>
<MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
</Select>
<InputLabel id="sch_category">カテゴリー</InputLabel>
<Select labelId="sch_category" id="sch_category_select" name="sch_category" label="Category" variant="standard" value={editData.sch_category}>
<MenuItem value="勉強">勉強</MenuItem>
<MenuItem value="案件">案件</MenuItem>
<MenuItem value="テスト">テスト</MenuItem>
</Select>
<TextField margin="dense" id="sch_contents" name="sch_contents" label="内容" type="text" fullWidth variant="standard" value={editData.sch_contents}/>
</DialogContent>

スケジュール更新

</DialogContentText>

</Select>

</Select>

<InputLabel id="sch_category">カテゴリー</InputLabel>

</Select>

</DialogContent>

各種入力インプットに「value={editData.項目名}」を追加しています。
入っている内容をデータから適用させてあげるだけで、表示がされます。
試しにビルドして、前の記事で登録したスケジュールをクリックしてみましょう。

データが取得できましたね。
これであとはダイアログの中身を変更して、更新をするだけです。

データを更新しよう！

最後に更新作業をしておしまいです。
Example.jsに更新処理を追記します。

//入力値を一時保存
const editChange = (e) =>{
const key = e.target.name;
const value = e.target.value;
editData[key] = value;
let datas = Object.assign({},editData);
setEditData(datas);
}

//ダイアログデータを登録
const updateSchedule = async(e) => {
//リンク移動の無効化
e.preventDefault()
//入力値を投げる
await axios
.post('/api/update',{
id:editData.id,
sch_category:editData.sch_category,
sch_contents:editData.sch_contents,
sch_date:editData.sch_date,
sch_time:editData.sch_hour + ':' + editData.sch_min
})
.then((res)=>{
//戻り値をtodosにセット
setEditData(res.data);
})
.catch(error=>{
console.log(error);
})
}

--省略--
<DialogContent>
<DialogContentText>
スケジュール更新
</DialogContentText>
<TextField margin="dense" id="sch_date" name="sch_date" label="予定日" type="text" fullWidth variant="standard" value={editData.sch_date} onChange={editChange}/> //onChangeを追加
<InputLabel id="sch_time_label">時刻</InputLabel>
<Select labelId="sch_hour" id="sch_hour_select" name="sch_hour" label="Hour" variant="standard" value={editData.sch_hour} onChange={editChange}> //onChangeを追加
<MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
</Select>
<Select labelId="sch_min" id="sch_min_select" name="sch_min" label="Min" variant="standard" value={editData.sch_min} onChange={editChange}> //onChangeを追加
<MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
</Select>
<InputLabel id="sch_category">カテゴリー</InputLabel>
<Select labelId="sch_category" id="sch_category_select" name="sch_category" label="Category" variant="standard" value={editData.sch_category} onChange={editChange}> //onChangeを追加
<MenuItem value="勉強">勉強</MenuItem>
<MenuItem value="案件">案件</MenuItem>
<MenuItem value="テスト">テスト</MenuItem>
</Select>
<TextField margin="dense" id="sch_contents" name="sch_contents" label="内容" type="text" fullWidth variant="standard" value={editData.sch_contents} onChange={editChange}/> //onChangeを追加
</DialogContent>
<DialogActions>
<Button onClick={editHandleClose}>Cancel</Button>
<Button href="/dashboard" onClick={updateSchedule}>Subscribe</Button>　//onClickを追加
</DialogActions>

//入力値を一時保存

const editChange = (e) =>{

const key = e.target.name;

const value = e.target.value;

editData[key] = value;

let datas = Object.assign({},editData);

setEditData(datas);

}

//ダイアログデータを登録

const updateSchedule = async(e) => {

//リンク移動の無効化

e.preventDefault()

//入力値を投げる

await axios

.post('/api/update',{

id:editData.id,

sch_category:editData.sch_category,

sch_contents:editData.sch_contents,

sch_date:editData.sch_date,

sch_time:editData.sch_hour + ':' + editData.sch_min

})

.then((res)=>{

//戻り値をtodosにセット

setEditData(res.data);

})

.catch(error=>{

console.log(error);

})

}

--省略--

スケジュール更新

</DialogContentText>

<TextField margin="dense" id="sch_date" name="sch_date" label="予定日" type="text" fullWidth variant="standard" value={editData.sch_date} onChange={editChange}/> //onChangeを追加

<Select labelId="sch_hour" id="sch_hour_select" name="sch_hour" label="Hour" variant="standard" value={editData.sch_hour} onChange={editChange}> //onChangeを追加

</Select>

<Select labelId="sch_min" id="sch_min_select" name="sch_min" label="Min" variant="standard" value={editData.sch_min} onChange={editChange}> //onChangeを追加

</Select>

<InputLabel id="sch_category">カテゴリー</InputLabel>

<Select labelId="sch_category" id="sch_category_select" name="sch_category" label="Category" variant="standard" value={editData.sch_category} onChange={editChange}> //onChangeを追加

</Select>

<TextField margin="dense" id="sch_contents" name="sch_contents" label="内容" type="text" fullWidth variant="standard" value={editData.sch_contents} onChange={editChange}/> //onChangeを追加

</DialogContent>

<Button onClick={editHandleClose}>Cancel</Button>

<Button href="/dashboard" onClick={updateSchedule}>Subscribe</Button>　//onClickを追加

</DialogActions>

登録処理とほぼ同じですね。入力値を保存し、そのデータでデータベースを更新します。
入力値を反映させるために、onChangeを追加します。

最後に更新ダイアログの登録ボタンにonClickを指定して完成です。
試しに登録したデータを更新してみましょう。

実際にいろいろ入力してみて、上記の画像のように最終的に「画面からの更新テスト」にできればOKです。
ここまで実装で来たら、SourceTreeでコミットしておきましょう。

さて、今回はここまでです。次はスケジュールの削除機能を実装していきましょう。
今回もここまでのExample.jsのソースを下の折り畳みの中に記載しておきますね。

クリックでExample.jsの全ソース表示

import React,{Fragment,useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

function Example(){
    const [year,setYear] = useState(new Date().getFullYear())
    const [month,setMonth] = useState(new Date().getMonth()+1)
    const last = new Date(year,month,0).getDate()
    const prevlast = new Date(year,month-1,0).getDate()
    const calendar = createCalendear(year,month)

    const onClick = n => () => {
        const nextMonth = month + n
        if (12 < nextMonth) {
          setMonth(1)
          setYear(year + 1)
        } else if (nextMonth < 1) {
          setMonth(12)
          setYear(year - 1)
        } else {
          setMonth(nextMonth)
        }
    }

    //スケジュールのデータ
    const [schedules,setSche] = useState([])

    //画面読み込み時に、1度だけ起動
    useEffect(()=>{
        getPostData();
    },[])

    //バックエンドからデータ一覧を取得
    const getPostData = () =>{
        axios
        .post('/api/posts')
        .then(response=>{
            setSche(response.data); //バックエンドからのデータをセット
            console.log(response.data);
        }).catch(()=>{
            console.log('通信に失敗しました');
        });
    }

    //データ格納の空配列を作成
    let rows = [];

    //スケジュールデータをrowに格納する
    schedules.map((post)=>
        rows.push({
            sch_id:post.id,
            sch_category:post.sch_category,
            sch_contents:post.sch_contents,
            sch_date:post.sch_date,
            sch_time:post.sch_time
        })
    );

    //登録用ポップアップ開閉処理
    const[open,setOpen] = useState(false);

    const handleClickOpen = (e) =>{
        setOpen(true);
    };

    const handleClose = () =>{
        setOpen(false);
    };

    //新規登録用データ配列
    const [formData,setFormData] = useState({sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

    //入力値を一時保存
    const inputChange = (e) =>{
        const key = e.target.name;
        const value = e.target.value;
        formData[key] = value;
        let datas = Object.assign({},formData);
        setFormData(datas);
    }
    //登録処理
    const createSchedule = async() => {
        //入力値を投げる
        await axios
            .post('/api/posts/create',{
                sch_category:formData.sch_category,
                sch_contents:formData.sch_contents,
                sch_date:formData.sch_date,
                sch_time:formData.sch_hour + ':' + formData.sch_min
            })
            .then((res)=>{
                //戻り値をtodosにセット
                const tempPosts = post;
                tempPosts.push(res.data);
                setPosts(tempPosts)
                setFormData('');
            })
            .catch(error=>{
                console.log(error);
            })
    }

    //更新用ダイアログ開閉機能
    const[editopen,setEditOpen] = useState(false);

    const editHandleClickOpen = (e) =>{
        e.stopPropagation();
        setEditOpen(true);
        getEditData(e);
    };

    const editHandleClose = () =>{
        setEditOpen(false);
    };

    //更新用のデータ配列
    const [editData,setEditData] = useState({id:'',sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

    //バックエンドからデータ一覧を取得
    function getEditData(e){
        axios
            .post('/api/edit', {
                id: e.currentTarget.id
            })
            .then(res => {
                setEditData({
                    id:res.data.id,
                    sch_category:res.data.sch_category,
                    sch_contents:res.data.sch_contents,
                    sch_date:res.data.sch_date,
                    sch_hour:res.data.sch_time.substr(0,2),
                    sch_min:res.data.sch_time.substr(3,2)
                });
            })
            .catch(() => {
                console.log('更新の通信に失敗しました');
            });
    }

    //入力値を一時保存
    const editChange = (e) =>{
        const key = e.target.name;
        const value = e.target.value;
        editData[key] = value;
        let datas = Object.assign({},editData);
        setEditData(datas);
    }

    //ダイアログデータを登録
    const updateSchedule = async() => {
        //入力値を投げる
        await axios
            .post('/api/update',{
                id:editData.id,
                sch_category:editData.sch_category,
                sch_contents:editData.sch_contents,
                sch_date:editData.sch_date,
                sch_time:editData.sch_hour + ':' + editData.sch_min
            })
            .then((res)=>{
                //戻り値をtodosにセット
                setEditData(res.data);
            })
            .catch(error=>{
                console.log(error);
            })
    }

    
    console.log(editData);

    return (
        <Fragment>
            <div className="calender-header">
                <h1>{`${year}年${month}月`}</h1>
                <div className="calender-nav">
                    <button onClick={onClick(-1)}>{'<先月'}</button>
                    <button onClick={onClick(1)}>{'翌月>'}</button>
                </div>
            </div>
            <table className="calender-table">
                <thead>
                    <tr>
                        <th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th>
                    </tr>
                </thead>
                <tbody>
                    {calendar.map((week,i) => (
                        <tr key={week.join('')}>
                            {week.map((day,j) => (
                                <td key={`${i}${j}`} id={day} onClick={handleClickOpen}>
                                    <div>
                                        <div>
                                            {day > last ? day - last : day <= 0 ? prevlast + day : day}
                                        </div>
                                        <div className="schedule-area">
                                            {rows.map((schedule,k) => (
                                                schedule.sch_date == year + '-' + zeroPadding(month) + '-' + zeroPadding(day) &&
                                                    <div className='schedule-title' key={k} onClick={editHandleClickOpen} id={schedule.sch_id}>{schedule.sch_contents}</div>
                                                
                                            ))}
                                        </div>
                                    </div>
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
            <Dialog onClose={handleClose} open={open}>
                <DialogTitle>Subscribe</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        スケジュール登録
                    </DialogContentText>
                    <TextField margin="dense" id="sch_date" name="sch_date" label="予定日" type="text" fullWidth variant="standard" onChange={inputChange}/>
                    <InputLabel id="sch_time_label">時刻</InputLabel>
                    <Select labelId="sch_hour" id="sch_hour_select" name="sch_hour" label="Hour" variant="standard" defaultValue="00" onChange={inputChange}>
                        <MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
                    </Select>
                    <Select labelId="sch_min" id="sch_min_select" name="sch_min" label="Min" variant="standard" defaultValue="00" onChange={inputChange}>
                        <MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
                    </Select>
                    <InputLabel id="sch_category_label">カテゴリー</InputLabel>
                    <Select labelId="sch_category" id="sch_category_select" name="sch_category" label="Category" variant="standard" defaultValue="勉強" onChange={inputChange}>
                        <MenuItem value="勉強">勉強</MenuItem>
                        <MenuItem value="案件">案件</MenuItem>
                        <MenuItem value="テスト">テスト</MenuItem>
                    </Select>
                    <TextField margin="dense" id="sch_contents" name="sch_contents" label="内容" type="text" fullWidth variant="standard" onChange={inputChange}/>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>Cancel</Button>
                    <Button href="/dashboard" onClick={createSchedule}>Subscribe</Button>
                </DialogActions>
            </Dialog>
            <Dialog onClose={handleClose} open={editopen}>
            <DialogTitle>Subscribe</DialogTitle>
            <DialogContent>
                <DialogContentText>
                スケジュール更新
                </DialogContentText>
                <TextField margin="dense" id="sch_date" name="sch_date" label="予定日" type="text" fullWidth variant="standard" value={editData.sch_date} onChange={editChange}/>
                <InputLabel id="sch_time_label">時刻</InputLabel>
                <Select labelId="sch_hour" id="sch_hour_select" name="sch_hour" label="Hour" variant="standard"  value={editData.sch_hour} onChange={editChange}>
                    <MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
                </Select>
                <Select labelId="sch_min" id="sch_min_select" name="sch_min" label="Min" variant="standard"  value={editData.sch_min} onChange={editChange}>
                    <MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
                </Select>
                <InputLabel id="sch_category">カテゴリー</InputLabel>
                <Select labelId="sch_category" id="sch_category_select" name="sch_category" label="Category" variant="standard"  value={editData.sch_category} onChange={editChange}>
                    <MenuItem value="勉強">勉強</MenuItem>
                    <MenuItem value="案件">案件</MenuItem>
                    <MenuItem value="テスト">テスト</MenuItem>
                </Select>
                <TextField margin="dense" id="sch_contents" name="sch_contents" label="内容" type="text" fullWidth variant="standard"  value={editData.sch_contents} onChange={editChange}/>
            </DialogContent>
            <DialogActions>
                <Button onClick={editHandleClose}>Cancel</Button>
                <Button href="/dashboard" onClick={updateSchedule}>Subscribe</Button>
            </DialogActions>
        </Dialog>
        </Fragment>
    );
}

function createCalendear(year,month){
    const first = new Date(year,month - 1,1).getDay()

    return [0,1,2,3,4,5].map((weekIndex) => {
        return [0,1,2,3,4,5,6].map((dayIndex) => {
            const day = dayIndex + 1 + weekIndex * 7
            return day - first 
        })
    })
}

function zeroPadding(num){
    return ('0' + num).slice(-2);
}

export default Example;

if (document.getElementById('app')) {
    ReactDOM.render(<Example />, document.getElementById('app'));
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

import React,{Fragment,useState,useEffect} from 'react';

import ReactDOM from 'react-dom';

import axios from 'axios';

import Dialog from '@mui/material/Dialog';

import DialogActions from '@mui/material/DialogActions';

import DialogContent from '@mui/material/DialogContent';

import DialogContentText from '@mui/material/DialogContentText';

import DialogTitle from '@mui/material/DialogTitle';

import TextField from '@mui/material/TextField';

import Button from '@mui/material/Button';

import InputLabel from '@mui/material/InputLabel';

import MenuItem from '@mui/material/MenuItem';

import Select from '@mui/material/Select';

function Example(){

const [year,setYear] = useState(new Date().getFullYear())

const [month,setMonth] = useState(new Date().getMonth()+1)

const last = new Date(year,month,0).getDate()

const prevlast = new Date(year,month-1,0).getDate()

const calendar = createCalendear(year,month)

const onClick = n => () => {

const nextMonth = month + n

if (12 < nextMonth) {

setMonth(1)

setYear(year + 1)

} else if (nextMonth < 1) {

setMonth(12)

setYear(year - 1)

} else {

setMonth(nextMonth)

}

//スケジュールのデータ

const [schedules,setSche] = useState([])

//画面読み込み時に、1度だけ起動

useEffect(()=>{

getPostData();

},[])

//バックエンドからデータ一覧を取得

const getPostData = () =>{

axios

.post('/api/posts')

.then(response=>{

setSche(response.data); //バックエンドからのデータをセット

console.log(response.data);

}).catch(()=>{

console.log('通信に失敗しました');

});

}

//データ格納の空配列を作成

let rows = [];

//スケジュールデータをrowに格納する

schedules.map((post)=>

rows.push({

sch_id:post.id,

sch_category:post.sch_category,

sch_contents:post.sch_contents,

sch_date:post.sch_date,

sch_time:post.sch_time

})

);

//登録用ポップアップ開閉処理

const[open,setOpen] = useState(false);

const handleClickOpen = (e) =>{

setOpen(true);

};

const handleClose = () =>{

setOpen(false);

};

//新規登録用データ配列

const [formData,setFormData] = useState({sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

//入力値を一時保存

const inputChange = (e) =>{

const key = e.target.name;

const value = e.target.value;

formData[key] = value;

let datas = Object.assign({},formData);

setFormData(datas);

}

//登録処理

const createSchedule = async() => {

//入力値を投げる

await axios

.post('/api/posts/create',{

sch_category:formData.sch_category,

sch_contents:formData.sch_contents,

sch_date:formData.sch_date,

sch_time:formData.sch_hour + ':' + formData.sch_min

})

.then((res)=>{

//戻り値をtodosにセット

const tempPosts = post;

tempPosts.push(res.data);

setPosts(tempPosts)

setFormData('');

})

.catch(error=>{

console.log(error);

})

}

//更新用ダイアログ開閉機能

const[editopen,setEditOpen] = useState(false);

const editHandleClickOpen = (e) =>{

e.stopPropagation();

setEditOpen(true);

getEditData(e);

};

const editHandleClose = () =>{

setEditOpen(false);

};

//更新用のデータ配列

const [editData,setEditData] = useState({id:'',sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

//バックエンドからデータ一覧を取得

function getEditData(e){

axios

.post('/api/edit', {

id: e.currentTarget.id

})

.then(res => {

setEditData({

id:res.data.id,

sch_category:res.data.sch_category,

sch_contents:res.data.sch_contents,

sch_date:res.data.sch_date,

sch_hour:res.data.sch_time.substr(0,2),

sch_min:res.data.sch_time.substr(3,2)

});

})

.catch(() => {

console.log('更新の通信に失敗しました');

});

}

//入力値を一時保存

const editChange = (e) =>{

const key = e.target.name;

const value = e.target.value;

editData[key] = value;

let datas = Object.assign({},editData);

setEditData(datas);

}

//ダイアログデータを登録

const updateSchedule = async() => {

//入力値を投げる

await axios

.post('/api/update',{

id:editData.id,

sch_category:editData.sch_category,

sch_contents:editData.sch_contents,

sch_date:editData.sch_date,

sch_time:editData.sch_hour + ':' + editData.sch_min

})

.then((res)=>{

//戻り値をtodosにセット

setEditData(res.data);

})

.catch(error=>{

console.log(error);

})

}

console.log(editData);

return (

<h1>{`${year}年${month}月`}</h1>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

{calendar.map((week,i) => (

{week.map((day,j) => (

<div>

{day > last ? day - last : day <= 0 ? prevlast + day : day}

</div>

{rows.map((schedule,k) => (

schedule.sch_date == year + '-' + zeroPadding(month) + '-' + zeroPadding(day) &&

<div className='schedule-title' key={k} onClick={editHandleClickOpen} id={schedule.sch_id}>{schedule.sch_contents}</div>

))}

</div>

</td>

))}

</tr>

))}

</tbody>

</table>

<DialogTitle>Subscribe</DialogTitle>

スケジュール登録

</DialogContentText>

</Select>

</Select>

<InputLabel id="sch_category_label">カテゴリー</InputLabel>

</Select>

</DialogContent>

<Button onClick={handleClose}>Cancel</Button>

<Button href="/dashboard" onClick={createSchedule}>Subscribe</Button>

</DialogActions>

</Dialog>

<DialogTitle>Subscribe</DialogTitle>

スケジュール更新

</DialogContentText>

</Select>

</Select>

<InputLabel id="sch_category">カテゴリー</InputLabel>

</Select>

</DialogContent>

<Button onClick={editHandleClose}>Cancel</Button>

<Button href="/dashboard" onClick={updateSchedule}>Subscribe</Button>

</DialogActions>

</Dialog>

</Fragment>

);

}

function createCalendear(year,month){

const first = new Date(year,month - 1,1).getDay()

return [0,1,2,3,4,5].map((weekIndex) => {

return [0,1,2,3,4,5,6].map((dayIndex) => {

const day = dayIndex + 1 + weekIndex * 7

return day - first

})

}

function zeroPadding(num){

return ('0' + num).slice(-2);

}

export default Example;

if (document.getElementById('app')) {

ReactDOM.render(<Example />, document.getElementById('app'));

}

Laravel×Reactでつくるスケジュールアプリ
環境構築	Git、Reactの導入
カレンダー表示	スケジュール表示
スケジュール登録	スケジュール更新
スケジュール削除	関数化Ⅰ
関数化Ⅱ