kikikan/backend/resources/js/component/modal_setting_notify.jsx

import React, { useEffect, useState } from 'react';
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 Slide from '@mui/material/Slide';
import { useHistory, Link } from 'react-router-dom';


const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});


export default function ModalSettingNotify({show, handleClose, meetingId}){

  const [unapproval, setUnapproval ] = useState([]);
  const [approval, setApproval ] = useState([]);
  const [isApproval, setIsApproval ] = useState(false);

  useEffect(() => {
    axios.get('/api/fathers/meeting/approvals/listChildrenOfApprovel', {params: { meeting_id: meetingId }})
    .then((response) => {
      if(response.data.status_code==200){
        console.log(response.data.params);
        setApproval(response.data.params);
      } 
    });
  }, []);

  useEffect(() => {
    axios.get('/api/fathers/meeting/approvals/listChildrenOfUnapprovel', {params: { meeting_id: meetingId }})
    .then((response) => {
      if(response.data.status_code==200){
        console.log(response.data.params);
        setUnapproval(response.data.params);
      }
    });
  }, []);
  

	return (
    <Dialog
    open={show}
    TransitionComponent={Transition}
    keepMounted
    aria-describedby="alert-dialog-slide-description"
    onClose={handleClose}
    id="SettingNotifyModal"
    >
        <DialogTitle className="px-0 pt-3">
            <div className="modal-tab-area ft-16">
              <div onClick={e => {setIsApproval(false); }} className={`modal-tab-label ${isApproval ? "" : "is-active"}`}><span>未承知</span></div>
              <div onClick={e => {setIsApproval(true); }}  className={`modal-tab-label ${!isApproval ? "" : "is-active"}`}><span>承知済み</span></div>
           </div>
        </DialogTitle>
        <DialogContent>
            <div className={ `modal-content border-0 ${!isApproval ? "is-active" : ""}` } id="item01">
              { 
                unapproval.length > 0 ?
                unapproval.map((item, ki) =>
                  <div className="modal-content-item" key={ki}>
                    <div className="user-wrap">
                      <a href={`/p-account/child/detail/${item.child_id.id}`} >
                        <div className="user-avatar">
                          <img alt="name" className="avatar-img" src={item.child_id.image} />
                        </div>
                        <p className="user-name">{item.child_id.first_name}　{item.child_id.last_name}</p>
                      </a>
                    </div>
                    <div className="p-notification-btn">
                      <a onClick={e => settingNotify(item.id)} className="btn-default btn-yellow btn-notification btn-r3 btn-h30 btn-w100p btn-fz14">
                        <span>通知</span>
                      </a>
                    </div>
                  </div>
                )
                : <p className="text-center py-2 ft-xs-15">データはありません。</p>
              }
            </div>    
            <div className={ `modal-content border-0 ${isApproval ? "is-active" : ""}` } id="item02">
              { 
                approval.length > 0 ?
                approval?.map((item, kj) => 
                  <div className="modal-content-item" key={kj}>
                    <div className="user-wrap">
                      <Link to={`/p-account/child/detail/${item.child_id.id}`} >
                        <div className="user-avatar">
                          <img alt="name" className="avatar-img" src={item.child_id.image} />
                        </div>
                        <p className="user-name">{item.child_id.first_name}　{item.child_id.last_name}</p>
                      </Link>
                    </div>
                  </div>
                )
                : <p className="text-center py-2 ft-xs-15">データはありません。</p>
              }
            </div>
        </DialogContent>
    </Dialog>
	)
}