Elep

import React, { useState, useEffect, useRef } from 'react';
import Alert from '../UI/Alert';
import Container from '../UI/Container';
import Skeleton from '../UI/Skeleton';

const ProfileInfo = (props) => {
    const [formValues, setFormValues] = useState({})
    const [updating, setUpdating] = useState(false)
    const [enabled, setEnabled] = useState(false)
    const [loading, setLoading] = useState(false);
    const [alert, setAlert] = useState('')
    const formRef = useRef();

useEffect(() => {
        setLoading(true)
        fetch('/api/user', {credentials: 'same-origin', headers: {'X-Requested-With': 'XMLHttpRequest'}})
        .then(response => response.json())
        .then(user => {
            // console.log({user})
            // setInfo(user)
            console.log(user)
            setFormValues({name: user.name, location: user.location || '', bio: user.bio || ''})
            setLoading(false);
        })
    }, [])

function handleChange(e){
        setFormValues({...formValues, [e.target.name]: e.target.type === 'file' ? e.target.files[0] : e.target.value})
        setEnabled(true)
    }

function handleSubmit(e) {
        e.preventDefault();

let form = new FormData(e.target);
        
        console.log(Object.fromEntries(form))
        setUpdating(true)
        fetch('/user/profile', {credentials: 'same-origin', method: 'POST', body: form, headers: {'X-Requested-With': 'XMLHttpRequest'}})
        .then(response => response.text())
        .then(result => {
            // TODO handle profile update
            formRef.current.reset();
            setUpdating(false)
            setEnabled(false)
            setAlert('Profile updated successfully')
            setTimeout(() => {
                setAlert('')
            }, 2000)
        })
    }

return (
        <div>
            <Container>
                {alert ? <Alert>{alert}</Alert> : ''}
            </Container>
            {loading ? <Skeleton /> : <form onSubmit={handleSubmit} ref={formRef}>
                <div className="form-group">
                    <label htmlFor="dname">Name</label>
                    <input disabled={updating ? true : false} type="text" id="dname" name="name" className="form-control" onChange={handleChange} defaultValue={props.user.name || formValues.name || ""}/>
                </div>
                <div className="form-group">
                    <label htmlFor="location">Location</label>
                    <input disabled={updating ? true : false} type="text" id="location" name="location" className="form-control" onChange={handleChange} placeholder="Surulere, Lagos" defaultValue={formValues.location || props.user.location || ""}/>
                </div>
                <div className="form-group">
                    <label htmlFor="bio">Bio</label>
                    <textarea disabled={updating ? true : false} type="text" id="bio" name="bio" className="form-control" onChange={handleChange} placeholder="Tell us something about you" style={{ height: 'inherit'}} rows="3" defaultValue={formValues.bio || props.user.bio || ""}/>
                </div>
                <div className="form-group">
                    <div style={{display: 'flex', alignItems: 'center'}}>
                        {props.user.avatar ? <img src={props.user.avatar} style={{ width: '100px', borderRadius: '50%'}} alt="User Display"/> : ''}
                        <label htmlFor="dp">Change Display Picture</label>
                    </div>
                    <div className="file-upload" style={{ position: 'relative', margin: '20px 0 10px', display: 'flex', alignItems: 'center' }}>
                        <input 
                            style={{ zIndex: '100', position: 'absolute', top: 0, bottom: 0, left: 0, opacity: 0, cursor: 'pointer' }} 
                            disabled={updating ? true : false} 
                            type="file" id="dp" name="avatar" onChange={handleChange} className="form-control"/>
                        <span className="button" style={{ padding: '10px'}}>{formValues.avatar ? 'File Selected' : 'Select File'}</span><span style={{ paddingLeft: '10px'}}>{formValues.avatar ? formValues.avatar.name.substr(0, 15) : ''}</span>
                    </div>
                </div>
                <button disabled={updating || !enabled ? true : false} className="button button-primary">Save</button>
            </form>}
        </div>
    )
}

export default ProfileInfo

const style = {
    alert: {
        padding: '6px 12px',
        backgroundColor: '#04aa6b',
        borderRadius: '4px',
        position: 'fixed',
        top: '10px',
        right: '10px',
        color: '#fff',
        fontSize: '14px',
        display: 'none'
    }
}