Elep

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

const customStyles = {
	content : {
	  top                   : '50%',
	  left                  : '50%',
	  right                 : 'auto',
	  bottom                : 'auto',
	  marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)',
      border: 'none',
      padding: '0'
	}
};

Modal.setAppElement('#root')

const Reviews = (props) => {
    const [reviews, setReviews] = useState([]);
    const [loading, setLoading] = useState(false);
    const [modalIsOpen, setIsOpen] = useState(false);
    const [review, setReview] = useState({})

function openModal(rev) {
        setIsOpen(true);
        setReview(rev)
	}

setIsOpen(false)
        })

// console.log('delete', place, review)
    }

useEffect(() => {
        setLoading(true)
        fetch('/api/user/reviews', {credentials: 'same-origin', headers: {'X-Requested-With': 'XMLHttpRequest'}})
        .then(response => response.json())
        .then(result => {
            setReviews(result);
            setLoading(false);
        })
    }, [])
    return (
        <div className="reviewsContainer">
            <Modal
                isOpen={modalIsOpen}
                onRequestClose={closeModal}
                style={customStyles}
                contentLabel="Actions"
                >

<ul className="list-group">
                    {/* <li className="list-group-item">
                        <button href="#">Edit</button>
                    </li> */}
                    <li className="list-group-item">
                        <button onClick={handleDelete} style={{ background: 'transparent', border: 'none', color: 'var(--red)'}}>Delete</button>
                    </li>
                    <li className="list-group-item">
                        <a href={`/places/${review.place_slug}`}>Go to place</a>
                    </li>
                </ul>
            </Modal>
            <div className="friend-list">
                <div className="list-ul" style={{ color: '#222', maxWidth: '500px', position: 'relative'}}>
                    {loading 
                        ? 
                            <>
                                <Skeleton /><Skeleton />
                            </> 
                        : reviews.length 
                            ? 
                                reviews.map((review, i) => <Review openModal={openModal} index={i} review={review} key={i+1} />) 
                            : 
                                <div style={{ textAlign: 'center'}}>
                                    no reviews yet.{' '}
                                    <a href="/review" style={{ fontFamily: 'Gilroy Bold', textDecoration: 'underline', color: 'var(--red)' }}>Write one now</a>
                                </div>
                    }
                </div>
                <div className="new-review"><a style={{ fontSize: '35px' }} href="/review"><IoIosAddCircle /></a></div>
            </div>
        </div>
    )
}

export default Reviews