58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
import React, { useEffect } from 'react'
|
|
//import * as filestack from 'filestack-js';
|
|
import { Button } from 'reactstrap';
|
|
import { useTranslation } from 'react-i18next';
|
|
import JKModalDialog from '../common/JKModalDialog';
|
|
import JKProfileAvatar from './JKProfileAvatar';
|
|
import { useAuth } from '../../context/UserAuth';
|
|
import { getUserDetail } from '../../helpers/rest';
|
|
|
|
const JKProfileAvatarUpload = ({show, toggle}) => {
|
|
const { t } = useTranslation('profile');
|
|
const { currentUser } = useAuth();
|
|
|
|
useEffect(() => {
|
|
if(currentUser) {
|
|
console.log(currentUser.photo_url);
|
|
// getUserDetail(currentUser.id).then(response => {
|
|
// console.log('_userDetails', response);
|
|
// });
|
|
}
|
|
}, [currentUser]);
|
|
|
|
const openFilePicker = () => {
|
|
// const client = filestack.init(window.gon.fp_apikey);
|
|
// client.picker({
|
|
// accept: 'image/*',
|
|
// maxFiles: 1,
|
|
// onFileUploadFinished: (response) => {
|
|
// console.log(response);
|
|
// }
|
|
// }).open();
|
|
}
|
|
return (
|
|
<JKModalDialog
|
|
show={show}
|
|
onToggle={toggle}
|
|
title={t('photo_modal.title', { ns: 'profile' })}
|
|
showFooter={true}
|
|
>
|
|
<div className='d-flex flex-column'>
|
|
<div className='d-flex justify-content-center'>
|
|
<JKProfileAvatar src={currentUser.photo_url} size="5xl" />
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-center mt-2">
|
|
<Button color="primary" className="ml-2" onClick={openFilePicker}>
|
|
{t('photo_modal.upload', { ns: 'profile' })}
|
|
</Button>
|
|
<Button color="secondary" outline className="ml-2" onClick={() => {}}>
|
|
{t('photo_modal.delete', { ns: 'profile' })}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</JKModalDialog>
|
|
)
|
|
}
|
|
|
|
export default JKProfileAvatarUpload |