Elep

import React, { Component } from 'react';
import FeedLayout from './FeedLayout/FeedLayout';
import ReviewItem from './ReviewItem/ReviewItem';

const fetchFeed = (page) => {
    page = page || 1
    return fetch(`/api/reviews/feed?page=${page}`, {
            credentials: "same-origin", 
            headers: {
                "X-Requested-With": 'XMLHttpRequest'
            }
        }).then(response => response.json())
        .then(feed => feed)
        .catch(error => console.log(error))
}

export class App extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            feed: []
        }
    }

componentDidMount(){
        fetchFeed().then(feed => {
            // console.log({feed})
            this.setState({ feed })
        })
    }
    
    render() {
        return (
            <>
                <FeedLayout>
                    {this.state.feed.map((review, index) => <ReviewItem review={review} key={index} />)}
                </FeedLayout>
                
            </>
        )
    }
}

const styles = {
    header: {
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'center',
        padding: '10px 20px'
    },
    headerButton: {
        fontSize: '18px',
        padding: '5px 10px',
        border: '1px solid transparent',
        borderRadius: '30px',
        backgroundColor: '#ffc107',
        color: '#222',
        position: 'fixed',
        top: '10px',
        right: '20px'
    },
    buttonContainer: {
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        display: 'flex',
        justifyContent: 'center',
        borderTop: '1px solid #ccc',
        padding: '5px 0',
        backgroundColor: '#fff',
        boxSizing: 'border-box'
    },
    addButton: {
        border: '0',
        fontSize: '20px',
        fontWeight: 600,
        borderRadius: '3px',
        background: '#fff',
        height: '30px'
    }
}

export default App