{"size": 1578, "ext": "js", "max_stars_repo_path": "src/components/ArticleDash.js", "max_stars_repo_name": "BW-TT-2-Pintereach/front_end", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/ArticleDash.js", "max_issues_repo_name": "BW-TT-2-Pintereach/front_end", "max_issues_repo_issues_event_min_datetime": "2020-11-18T14:59:51.000Z", "max_issues_repo_issues_event_max_datetime": "2020-11-19T00:53:00.000Z", "max_forks_repo_path": "src/components/ArticleDash.js", "max_forks_repo_name": "BW-TT-2-Pintereach/front_end", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 27.2068965517, "max_line_length": 201, "alphanum_fraction": 0.5785804816}
import { useState, useEffect, useContext } from 'react';
import styled from 'styled-components';


import { SavedArticleContext } from '../context/SavedArticleContext';
import { axiosDev } from '../utils/axiosDev'; 
import ArticleCard from './ArticleCard';


const ArticleDash = () => {

    const [articles, setArticles] = useState([]);


    const { addToReadingList } = useContext(SavedArticleContext);

    useEffect(() => {
        axiosDev().get('/articles')
            .then(res => {
                setArticles(res.data.data);
            })
            .catch(err => console.log(err));
    }, [])


    //Need Loading Page - Make a default one and resuse 

    //Going to manage rating through context as I have allredy set it up - more efficent route would have been to use the API for evertyhign, would only need component state for remaining functionality

    return (
        <>
            <h2>Articles !</h2>
            <StyledArticleWrapper>
                {articles.map(article => (
                    <CardWrapper> 
                        <ArticleCard article={article} />
                        <button onClick={() => addToReadingList(article)}> Add To Reading List </button>
                    </CardWrapper >
                    ))
                }
            </StyledArticleWrapper>
        </>
    )
};

const StyledArticleWrapper = styled.div`
    display: flex; 
    justify-content: space-around; 
    flex-flow: row wrap;

`;

const CardWrapper = styled.div`
    display: flex; 
    flex-flow: column nowrap;
`;

export default ArticleDash; 