Elep

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

const Places = (props) => {
    const [places, setPlaces] = useState([]);
    const [loading, setLoading] = useState(false);

useEffect(() => {
        setLoading(true)
        fetch('/api/user/places', {credentials: 'same-origin', headers: {'X-Requested-With': 'XMLHttpRequest'}})
        .then(response => response.json())
        .then(result => {
            setPlaces(result);
            setLoading(false);
        })
    }, [])
    return (
        <div className="friend-list">
			<div className="list-ul" style={{ color: '#222', maxWidth: '500px', position: 'relative'}}>
				{loading ? 
                    <>
                        <Skeleton /><Skeleton />
                    </> : 
                    places.map(
                        (place, i) => 
                            <Place place={place} key={i+1} />
                    )
                }
                {loading ? <></> : places.length < 10 ? <h4><a href="/places/assessment" style={{color: "#c32026"}}>Add new place</a></h4> : <></>}
			</div>
            {/* <div className="float-bottom-right" style={{ padding: '5px', borderRadius: '50%', backgroundColor: '#eee', color: '#1e1d23'}}><a style={{ fontSize: '35px' }} href="/places/assessment" target="_blank"><IoIosAddCircle /></a></div> */}
		</div>
    )
}

export default Places