Elep

import React, {useState, useEffect} from 'react';
import { IoIosAddCircle } from 'react-icons/io';

function getUser(){
    return fetch('/api/user', {
        credentials: "same-origin", 
        headers: {
            "X-Requested-With": 'XMLHttpRequest'
        }
    }).then(response => response.json())
}

const FeedLayout = (props) => {
    const [user, setUser] = useState(null);

useEffect(() => {
        getUser().then(loggedInUser => {
            setUser(loggedInUser)
        })
    }, [])
    
    return (
        <div className="wrapper" style={{ paddingBottom: '30px', boxSizing: 'border-box'}}>
            <div className="reviewing">
                <div className="review-container">
                    <div className="review-feed">
                        <div className="review-list">
                            {props.children}
                        </div>
                    </div>
                    
                </div>
                <div className="user-details">
                    <div className="profile-details">
                        
                        {user ? 
                            <div className="user-info">
                                <div className="profile-pic">
                                    <img src={user.avatar} alt="User profile" />
                                </div>
                                <div className="profile-content">
                                    <h5 className="user-name">{user.name}</h5>
                                </div>
                                
                            </div> 
                        : <div className="user-info">
                            <div className="profile-pic">
                                <img src="/images/profile.png" alt="User profile" />
                            </div>
                        </div>}
                        <div>
                            <a href="/review" style={styles.headerButton}>Write a review</a> 
                        </div>
                        
                        
                        
                    </div>
                    
                </div>
                <div className="new-review" style={{ backgroundColor: 'transparent'}}><a style={{ fontSize: '35px' }} href="/review"><IoIosAddCircle /></a></div>
            </div>
		</div>
    )
}

const styles = {
    headerButton: {
        fontSize: '18px',
        padding: '5px 10px',
        border: '1px solid transparent',
        borderRadius: '30px',
        backgroundColor: '#ffc107',
        color: '#222',
        marginTop: '10px',
        marginBottom: '10px'
    }
}

export default FeedLayout