{"size": 1909, "ext": "js", "max_stars_repo_path": "client/user/FollowGrid.js", "max_stars_repo_name": "lopes-leandro/learn-stack-mern-socialmedia", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/user/FollowGrid.js", "max_issues_repo_name": "lopes-leandro/learn-stack-mern-socialmedia", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/user/FollowGrid.js", "max_forks_repo_name": "lopes-leandro/learn-stack-mern-socialmedia", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.3559322034, "max_line_length": 89, "alphanum_fraction": 0.478784704}
import React from "react";
import { GridList, GridListTile, Avatar, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

const useStyles = makeStyles(theme => ({
    root: theme.mixins.gutters({
        paddingTop: theme.spacing(2),
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        overflow: 'hidden',
        background: theme.palette.background.paper,
    }),
    gridList: {
        width: 500,
        height: 220,
    },
    titleText: {
        textAlign: 'center',
        marginTop: 10
    },
    bigAvatar: {
        width: 60,
        height: 60,
        margin: 'auto'
    }
}));

export default function FollowGrid(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <GridList cellHeight={160} className={classes.gridList} cols={4}>
                {
                    props.people.map((person, index) => {
                        const photoUrl = person._id
                            ? `/api/v1/users/photo/${person._id}?${new Date().getTime()}`
                            : `/api/v1/users/defaultPhoto`;
                        return <GridListTile style={{'height':120}} key={index}>
                            <Link to={"/user/" + person._id}>
                                <Avatar src={photoUrl} 
                                    className={classes.bigAvatar}/>
                                <Typography className={classes.titleText}>
                                    {person.name}
                                </Typography>
                            </Link>
                        </GridListTile>
                    })
                }
            </GridList>
        </div>
    )
}
FollowGrid.propsType = {
    people: PropTypes.array.isRequired
}