データを更新するAPIを作る

今回は更新用のAPIを作成します。APIの使用としては以下です

メソッド PUT
エンドポイント /api/update/{id}
リクエストのボティ {"name":更新後の文字列}

やりたいこと

・一覧のname列をクリックすることで更新用のダイアログを表示する
・ダイアログ上で文字列を修正して「更新ボタン」を押下するとデータを更新すうr

修正内容

画面を整備する

上記を参考にmuiのダイアログを利用します。以下のname列をクリックするとダイアログを表示するように修正しました

押下後

文字列の押下とダイアログの表示

TDタグで一覧を作りnameの列だけ個別に作成します

list.tsx

import { Button } from "@mui/material";
import { checktst, update } from ".";
import FormDialog from "./dialog";

export const ListItemValue = props => {
  const {id, name, create_at} = props;
  return (
    <tr>
      <td>{id}</td>
      <td><FormDialog id={id} name={name}/></td>
      <td>{create_at}</td>
      <td><Button variant="contained" color="error" onClick={() => checktst({id})}>delete</Button></td>
    </tr>
  )
}

ダイアログ側

既存の文字列と更新用のPKキーをpropsで渡しています。nameを文字列で表示しながらクリックするとダイアログを表示する制御となります。更新するボタンを押下すると既存の文字列を修正している／いないにかかわらず更新のリクエストを送ります。

dialog.tsx

import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
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 axios from 'axios';

export const FormDialog = props => {
  const {id, name} = props;
  const [open, setOpen] = React.useState(false);

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

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

  const callUpdateApi = () => {
    const updatename = document.getElementById("dialogName").value;
    console.log("updatename " + updatename);
    axios.put("/api/update/" + {id}.id ,{
      name: updatename
    }).then((res) => {
      console.log(res);
    });
    setOpen(false);
  };

  return (
    <div>
      <p onClick={handleClickOpen}>{name}</p>
      <Dialog open={open} onClose={handleClose}>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            id="dialogName"
            type="text"
            fullWidth
            defaultValue={name}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>キャンセル</Button>
          <Button onClick={callUpdateApi}>更新する</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
export default FormDialog;

サーバ側でリクエストを受けてデータを更新する

更新のサーバ側はDELETEとほぼ同じなので割愛します

参照／一覧参照／登録／削除／更新の順番で画面とサーバーサイドを一通り動かしました。ReactとNext.jsの思想の一部が理解できましたが、自分の知識だと業務に入るのはまだまだ無理だと感じています。テストしづらい構造、色々な箇所で同じような処理を書いている、Reactの機能で統一できておらずJavaScriptのDOMも要所で使っている、、、など。

今度は簡易WEBサービスを作ってCI/CDや安定稼働部分に関してより実践的で業務に近い形を試していきたい。