{"size": 1529, "ext": "js", "max_stars_repo_path": "resources/js/subscription/Subscribers.js", "max_stars_repo_name": "tektektea/computer-zirna", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "resources/js/subscription/Subscribers.js", "max_issues_repo_name": "tektektea/computer-zirna", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "resources/js/subscription/Subscribers.js", "max_forks_repo_name": "tektektea/computer-zirna", "max_forks_repo_forks_event_min_datetime": "2021-07-08T10:24:43.000Z", "max_forks_repo_forks_event_max_datetime": "2021-07-08T10:24:43.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 35.5581395349, "max_line_length": 107, "alphanum_fraction": 0.5029431001}
import React from "react";
import {List, ListItem, ListItemSecondaryAction, ListItemText, OutlinedInput} from "@material-ui/core";
import {MESSAGE} from "../utils/Action";
import Icon from "@material-ui/core/Icon";
import {Pagination} from "@material-ui/lab";


const Subscribers=({fetchData,data,onItemClick})=>{

    const handlePagination = (event, page) => {
        fetchData(page)
    };
    const handleSearch=e=>{
        if (e.key === 'Enter') {
            fetchData(1,e.target.value)
        }
        console.log(e.key)
    }

    return(
        <List>
            <OutlinedInput margin={"dense"}
                           placeholder={"search"}
                           fullWidth={true}
                           onKeyPress={handleSearch}
                           endAdornment={<Icon>search</Icon>}/>
            {data?.data && data?.data.map(item=>
                <ListItem key={item?.id} onClick={event => onItemClick(item)} button={true} divider={true}>
                <ListItemText primary={item?.name}
                              secondary={'Contact: '+item?.phone_no}/>
                              <ListItemSecondaryAction>
                                  <Icon>
                                      right_arrow
                                  </Icon>
                              </ListItemSecondaryAction>
            </ListItem>)}
            <Pagination count={Math.ceil(data?.total / data?.per_page)} onChange={(handlePagination)}/>
        </List>
    )
}

export default Subscribers;
