import React, { useRef, useEffect, useState, useContext } from 'react';
import { useNavigate, Link, useParams } from 'react-router-dom';
import IconButton from "@material-ui/core/IconButton";
import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
import { HeaderContext } from '../../context';
import Alert from '../../component/alert';
import PageLoader from '../../component/page_loader';
import ModalConfirm from '../../component/modal_confirm';
const Transition = React.forwardRef(function Transition(props, ref) {
return ;
});
const AdminParentDetail = () => {
const { isAuthenticate } = useContext(HeaderContext);
const navigator = useNavigate();
const params = useParams();
const [image, setImage] = useState('');
const [loaded, setLoaded] = useState(false);
const [submit, setSubmit] = useState(false);
const [submit_image, setSubmitImage] = useState(false);
const [parent, setParent] = useState(null);
const [_400error, set400Error] = useState('');
const [_422errors, set422Errors] = useState({image: ''});
const [_success, setSuccess] = useState('');
const [show_confirm_modal, setShowConfirmModal] = useState(false);
const isMountedRef = useRef(true);
useEffect(() => {
isMountedRef.current = false;
if(isAuthenticate()){
setLoaded(false);
axios.get(`/api/admin/fathers/detail/${params?.father_id}`)
.then(response => {
if(isMountedRef.current) return;
setLoaded(true);
if(response.data.status_code==200){
setParent(response.data.params);
setImage(response.data.params.image);
}
else{
set400Error("失敗しました。");
}
})
}
return () => {
isMountedRef.current = true
}
},[]);
const handleImageChange = (e) => {
e.preventDefault();
if(isAuthenticate()){
let reader = new FileReader();
let _file = e.target.files[0];
reader.readAsDataURL(_file);
reader.onloadend = () => {
set422Errors({image: ''});
setSubmitImage(true);
axios.put(`/api/admin/fathers/updateImage/${params?.father_id}`, {image: reader.result})
.then(response => {
if(isMountedRef.current) return;
setSubmitImage(false);
switch(response.data.status_code){
case 200: {
setImage(reader.result);
setSuccess(response.data.success_messages);
break;
}
case 400: set400Error(response.data.error_messages); break;
case 422: window.scrollTo(0, 0); set422Errors(response.data.error_messages); break;
}
});
};
}
};
function handleAcceptDelete() {
if(isAuthenticate()){
setSubmit(true);
axios.delete(`/api/admin/fathers/delete/${params?.father_id}`)
.then(response => {
if(isMountedRef.current) return;
setShowConfirmModal(false);
setSubmit(false);
if(response.data.status_code == 200){
navigator('/admin/parent', { state: '削除に成功しました!' });
} else {
set400Error("削除に失敗しました。");
}
});
}
};
return (
{
(!loaded || submit_image) &&
}
{
loaded && parent &&
handleImageChange(e)}/>
{
_422errors.image &&
{_422errors.image}
}
{parent.company}
{`${parent.limit}人`}
{parent.profile ? parent.profile: '未入力'}
プロフィールを変更する
パスワードを変更する
}
setShowConfirmModal(false)}
handleAccept={handleAcceptDelete}
loading={submit}
/>
{ _400error && set400Error('')}> {_400error} }
{ _success && setSuccess('')}> {_success} }
)
}
export default AdminParentDetail;