123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- import { connect } from 'react-redux'
- import { message, Image, Button } from 'antd'
- import {
- actionUploadFile,
- actionSetAvatar,
- actionUserUpsert,
- actionUserUpdate,
- } from '../actions'
- import React, { useState, useEffect } from 'react'
- import { Basic, ConstructorModal } from '../helpers'
- import { Input } from './Input'
- const EditAvatar = ({
- info,
- onSaveAvatar,
- setIsModalVisibleEdit,
- onFileDrop,
- fileStatus,
- myId,
- }) => {
- const [state, setState] = useState(info)
- console.log('state my ', state)
- useEffect(() => {
- fileStatus?.status == 'FULFILLED' &&
- setState({
- ...state,
- // ...state?.avatar?._id,
- ...fileStatus?.payload,
- })
- }, [fileStatus])
- // onSaveAvatar(state?._id, myId)&&
- const saveAvatar = () => {
- if (fileStatus)
- onSaveAvatar(state?._id, myId) &&
- message.success(`Avatar success changed!`) &&
- setIsModalVisibleEdit(false)
- }
- return (
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'column',
- }}
- >
- <Basic onLoad={onFileDrop} />
- {fileStatus?.payload?.url && (
- <Image
- style={{
- marginBottom: '30px',
- width: '200px',
- objectFit: 'cover',
- height: '150px',
- }}
- src={'/' + fileStatus?.payload?.url}
- />
- )}
- <br />
- <Button
- style={{ width: '200px' }}
- disabled={fileStatus ? false : true}
- onClick={saveAvatar}
- size="large"
- type="primary"
- >
- Save avatar
- </Button>
- </div>
- )
- }
- export const CEditAvatar = connect(
- (state) => ({
- myId: state?.auth.payload.sub?.id,
- fileStatus: state.promise?.uploadFile,
- info: state?.myData?.aboutMe?.avatar,
- }),
- {
- onSaveAvatar: actionSetAvatar,
- onFileDrop: actionUploadFile,
- },
- )(EditAvatar)
|