[react calendar] カレンダーを使って予約機能を作ろう＿2

病院のウェブサイトで予約をするためには、必ず診療科目を選択しなければならない。そこで、今回のプロジェクトでは6つの診療科目を作成し、それぞれに担当医を1人だけ登録して機能を実装してみた。まず、担当医テーブルに診療科目の番号をFKとして結びつけ、担当医と診療科目を同時に呼び出せるように設定した。

診療科目情報（DB)
CREATE TABLE medical_dept(
	DEPT_NUM INT PRIMARY KEY AUTO_INCREMENT
	,DEPT_NAME VARCHAR(30) NOT NULL
);

医者情報
CREATE TABLE MEDICAL_DOCTOR(
  DOC_NUM VARCHAR(20) PRIMARY KEY 
  ,DOC_NAME VARCHAR(20) NOT NULL
  ,DEPT_NUM INT  REFERENCES MEDICAL_DEPT(DEPT_NUM) ON DELETE CASCADE
  ,FOREIGN KEY (DOC_NUM) REFERENCES MEDICAL_MEMBER(MEM_NUM)        
);

診療科目/ 担当医 axiosを使ってデーターをもらう

SpringでMVCをすべて入力した後、Reactでaxiosを使ってデーターをもらった。
mapper情報とReactコードは以下の通り。
serviceとcontrollerは特別なコードはなかったので省略します...

 <!-- 医者情報と診療科目セレクト -->
    <select id="doctor" resultMap="doctorMapper.doctor">
        SELECT DOC_NUM, DOC_NAME, D.DEPT_NUM , DEPT_NAME
        FROM  medical_doctor D, medical_dept T
        WHERE D.DEPT_NUM = T.DEPT_NUM
        ORDER BY DOC_NUM
    </select>

    const [docInfo, setDocInfo] = useState([])

    useEffect(()=>{
      axios.get('/schedule/getDocInfo')
      .then((res)=>{
        setDocInfo(res.data)
      })
      .catch((error)=>{
        console.log(error)
      })
    },[])

同時に2個以上のデーターをJAVAに渡す

予約をするためには、まず診療科目を選択するように設定したが、ユーザーが診療科目を選択しても画面上には表示されず、診療科目名だけでなく、医師の情報や診療科番号も一緒にデータベースに保存できるように設計する必要があった。

一度に3つのデータを渡すことは私にとしては難題だった。結局、解決策は、まずその値をすべて文字列として返し、その文字列を再度オブジェクトに変換して変数に保存する必要があった。

まず、予約に関するデータを受け取るuseStateは次の通り

 //予約内容を保存するstate変数
  const [appo, setAppo] = useState({
    docNum :'',
    memNum: loginInfo ? loginInfo.memNum : "", //ログインしたメンバーの情報
    deptNum :1 , //診療科目は昇順にした
    schDate: moment(value).format("YYYY-MM-DD"), 
    schTime : '',
    detail:'',
    deptName:'',
    to_email : ''  //これは予約メールを送るために（ここでは紹介していない）
  })

ユーザーが診療科目を選択すると、上記のappo変数からdeptNum（診療科番号）、deptName（診療科目）、docNum（医師番号）の値を同時に受け取ることができるようにコードを作成した。

（参考）診療科目はボタンで表示された。

<div  className='doc-icon-div'>
              {
                docInfo.map((doc,i)=>{
                  return(
                    <div key={i}>
                      <img src={(`http://localhost:8080/images/${i}.png`)}/>
                      <button 
                        type='button' 
                        onClick={(e)=>{
                        changeDocInfo(e)}}  
                        name='docInfo' 
                      	className='button' 
                     	value={JSON.stringify({
                        deptNum :doc.medicalDept.deptNum, 
                      	docNum : doc.docNum, 
                     	deptName : doc.medicalDept.deptName 
                     	 })} >
                        {doc.medicalDept.deptName} 
                        </button>
                    </div>
                  )
                })
                }
   </div>

韓国語ではあるが、診療科目選択ページ

まず、ボタンの value 値を JSON を通じて文字列に変換する。そして、以下のコードのように診療科目をクリックすると、該当する文字列をオブジェクトとして返し、state 変数に値を保存すればよい！

  function changeDocInfo(e){
    const selectedValue = e.target.value; //文字列として受け取る
    const { deptNum, docNum , deptName } = JSON.parse (selectedValue); //JSONのパース（オブジェクトに再変換する）
    setAppo({
      ...appo,
      deptNum : deptNum,
      docNum : docNum,
      deptName: deptName
    })
  }

このようにオブジェクトとして受け取った値を appo 変数に保存すれば、3つの値を同時に取得することができました。

次は、予約された時間のボタンを無効化し、予約情報を受け取って保存することまで、投稿しよう