2021-10-01 17:45:39 +09:00
|
|
|
|
import React, { useEffect, useState } from 'react';
|
2021-10-08 13:07:58 +09:00
|
|
|
|
import Notification from '../../component/notification';
|
|
|
|
|
import ModalAlert from '../../component/modal_alert';
|
2021-10-03 02:08:39 +09:00
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import { useHistory } from 'react-router-dom'
|
2021-10-01 17:45:39 +09:00
|
|
|
|
|
|
|
|
|
const Profile = () => {
|
2021-10-08 13:07:58 +09:00
|
|
|
|
const [father, setFather] = useState(null);
|
2021-10-03 02:08:39 +09:00
|
|
|
|
const history = useHistory();
|
2021-10-08 13:07:58 +09:00
|
|
|
|
const fatherId = document.getElementById('father_id').value;
|
|
|
|
|
const [image, setImage] = useState(null);
|
|
|
|
|
const [showAlert, setShowAlert] = useState(false);
|
|
|
|
|
const [messageAlert, setMessageAlert] = useState(null);
|
|
|
|
|
const [textColor, setTextColor] = useState(null);
|
|
|
|
|
|
2021-10-03 02:08:39 +09:00
|
|
|
|
useEffect(() => {
|
2021-10-08 13:07:58 +09:00
|
|
|
|
axios.get(`/api/fathers/detail/${fatherId}`).then((response) => {
|
2021-10-03 02:08:39 +09:00
|
|
|
|
if(response.data.status_code==200){
|
2021-10-08 13:07:58 +09:00
|
|
|
|
//console.log(response.data.params[0]);
|
|
|
|
|
setFather(response.data.params[0]);
|
|
|
|
|
setImage(response.data.params[0]?.image);
|
2021-10-03 02:08:39 +09:00
|
|
|
|
} else if(response.data.status_code==400){
|
|
|
|
|
//TODO
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
2021-10-08 13:07:58 +09:00
|
|
|
|
if (!father) return null;
|
|
|
|
|
|
|
|
|
|
const handleImageChange = (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
let reader = new FileReader();
|
|
|
|
|
let _file = e.target.files[0];
|
|
|
|
|
reader.readAsDataURL(_file);
|
|
|
|
|
reader.onloadend = () => {
|
|
|
|
|
setImage(reader.result);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
//upload image
|
|
|
|
|
try {
|
|
|
|
|
const formdata = new FormData();
|
|
|
|
|
formdata.append('father_id', fatherId);
|
|
|
|
|
formdata.append('image', _file);
|
|
|
|
|
axios.put("/api/fathers/updateImage", formdata)
|
|
|
|
|
.then(response => {
|
|
|
|
|
if(response.data.status_code == 200){
|
|
|
|
|
setMessageAlert(response.data.success_messages);
|
|
|
|
|
setTextColor("black");
|
|
|
|
|
} else {
|
|
|
|
|
setMessageAlert(response.data.success_messages);
|
|
|
|
|
}
|
|
|
|
|
setShowAlert(true);
|
|
|
|
|
});
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log('error', error);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
async function handleCloseAlert() {
|
|
|
|
|
setShowAlert(false);
|
|
|
|
|
};
|
2021-10-03 02:08:39 +09:00
|
|
|
|
|
2021-10-01 17:45:39 +09:00
|
|
|
|
return (
|
2021-10-03 02:08:39 +09:00
|
|
|
|
<div className="l-content">
|
|
|
|
|
<div className="l-content-w560">
|
|
|
|
|
<div className="l-content__ttl">
|
|
|
|
|
<div className="l-content__ttl__left">
|
|
|
|
|
<h2>プロフィール</h2>
|
|
|
|
|
</div>
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<Notification />
|
2021-10-03 02:08:39 +09:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="l-content-wrap">
|
|
|
|
|
<div className="profile-container">
|
|
|
|
|
<div className="profile-wrap">
|
|
|
|
|
<div className="profile-content">
|
|
|
|
|
<div className="profile-thumb">
|
|
|
|
|
{/* <label> */}
|
2021-10-08 13:07:58 +09:00
|
|
|
|
{/* <input id="profile-file" type="file" className="profile-thumb-img" onChange={(e) => handleImageChange(e)} /> */}
|
|
|
|
|
<img src={ image } id="profile-file-preview" className="profile-thumb__image" alt="" />
|
2021-10-03 02:08:39 +09:00
|
|
|
|
{/* </label> */}
|
|
|
|
|
<div className="profile-camera">
|
|
|
|
|
<label className="btn-default btn-camera btn-shadow">
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<input id="profile-file" type="file" className="profile-thumb-img" accept=".png, .jpg, .jpeg" onChange={(e) => handleImageChange(e)} />
|
2021-10-03 02:08:39 +09:00
|
|
|
|
<i className="icon icon-camera"></i>
|
|
|
|
|
</label>
|
2021-10-01 17:45:39 +09:00
|
|
|
|
</div>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
</div>
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<p className="profile-name">{ father.last_name } { father.first_name }</p>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
<div className="profile-info">
|
|
|
|
|
<div className="profile-info__item">
|
|
|
|
|
<p className="profile-info__icon">
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<img src="/assets/img/icon/mail.svg" alt="メール" />
|
2021-10-03 02:08:39 +09:00
|
|
|
|
</p>
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<p className="txt">{ father.email }</p>
|
2021-10-01 17:45:39 +09:00
|
|
|
|
</div>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
<div className="profile-info__item">
|
|
|
|
|
<p className="profile-info__icon">
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<img src="/assets/img/icon/phone.svg" alt="電話" />
|
2021-10-03 02:08:39 +09:00
|
|
|
|
</p>
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<p className="txt">{ father.tel }</p>
|
2021-10-01 17:45:39 +09:00
|
|
|
|
</div>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
<div className="profile-info__item">
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<p className="profile-info__icon">
|
|
|
|
|
<img src="/assets/img/icon/building.svg" alt="会社名"/>
|
|
|
|
|
</p>
|
|
|
|
|
<p className="txt">{ father.company }</p>
|
2021-10-01 17:45:39 +09:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
<div className="p-profile-btn">
|
|
|
|
|
<a
|
|
|
|
|
onClick={e => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
history.push({
|
|
|
|
|
pathname: '/p-account/profile/edit/1',
|
|
|
|
|
state: {}
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
data-v-ade1d018=""
|
|
|
|
|
className="btn-default btn-yellow btn-profile btn-r8 btn-h52">
|
|
|
|
|
<span>プロフィールを変更する</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="p-profile-btn">
|
|
|
|
|
<a
|
|
|
|
|
onClick={e => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
history.push({
|
|
|
|
|
pathname: '/p-account/profile/edit/password/1',
|
|
|
|
|
state: {}
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
data-v-ade1d018=""
|
|
|
|
|
className="btn-default btn-yellow btn-password btn-r8 btn-h52">
|
|
|
|
|
<span>パスワードを変更する</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="p-profile-txtLink">
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<a href="/login/p-account">
|
|
|
|
|
<button type="button" className="a-icon txt-link">ログアウト</button>
|
|
|
|
|
</a>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="p-profile-txtLink">
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<button
|
|
|
|
|
onClick={e => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
history.push({
|
|
|
|
|
pathname: '/p-account/profile/withdrawal',
|
|
|
|
|
state: {}
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
type="button" className="a-icon txt-link">退会する</button>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
</div>
|
|
|
|
|
|
2021-10-01 17:45:39 +09:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-10-08 13:07:58 +09:00
|
|
|
|
<ModalAlert
|
|
|
|
|
show={showAlert}
|
|
|
|
|
message={messageAlert}
|
|
|
|
|
textColor={textColor}
|
|
|
|
|
handleClose={handleCloseAlert}
|
|
|
|
|
/>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
</div>
|
2021-10-01 17:45:39 +09:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-03 02:08:39 +09:00
|
|
|
|
export default Profile;
|