news

/*eslint-disable no-unused-vars*/
import React, { Component } from "react";
import "./App.css";
// Material UI Usage
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import TextField from "@material-ui/core/TextField";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Collapse from "@material-ui/core/Collapse";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import Icon from "@material-ui/core/Icon";
import DeleteIcon from "@material-ui/icons/Delete";
import ShareIcon from "@material-ui/icons/Share";
import LinkIcon from "@material-ui/icons/Link";
import IconButton from "@material-ui/core/IconButton";
import red from "@material-ui/core/colors/red";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import Divider from "@material-ui/core/Divider";

const styles = {
  card: {
    maxWidth: 300
  },
  media: {
    maxHeight: 150,
    paddingTop: "56.25%" // 16:9
  }
};

const API = {
  BaseURL: "https://newsapi.org/v2/top-headlines?",
  Country: "country=us&",
  APIKey: "apiKey=9cfe982cec6d46aba451c8d7aece560b"
};

const newsURL = `${API["BaseURL"]}${API["Country"]}${API["APIKey"]}`;

const isSearched = searchTerm => newsEntry => {
  return newsEntry.title.toLowerCase().includes(searchTerm.toLowerCase());
};

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      news: null,
      searchTerm: ""
    };
    this.onDismiss = this.onDismiss.bind(this);
  }

  setSearchNews(news) {
    this.setState({ news });
  }

  searchHandle = event => {
    this.setState({
      searchTerm: event.target.value
    });
  };

  handleExpandClick = () => {
    this.setState({ expanded: !this.state.expanded });
  };

  componentDidMount() {
    const { searchTerm } = this.state;

    fetch(newsURL)
      .then(response => response.json())
      .then(result => this.setSearchNews(result.articles))
      .catch(error => error);
  }
  onDismiss = (index, e) => {
    const news1 = Object.assign([], this.state.news);
    news1.splice(index, 1);
    this.setState({ news: news1 });
  };

  render() {
    const { news, searchTerm } = this.state;
    if (!news) {
      return null;
    }

    return (
      <React.Fragment>
        <CssBaseline />
        <div className="page">
          <div className="interactions">
            <TopBar onChange={this.searchHandle} />
          </div>

          {searchTerm ? (
            <List news={news} pattern={searchTerm} />
          ) : (
            <List news={news} pattern="" />
          )}
        </div>
      </React.Fragment>
    );
  }
}

const Logo = () => {
  return (
    <img
      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPRSURBVHhe7ZbtSxRRFIeFqP+uiMj+hP6E8gVfCKJod3M1lcxd37USytQP9aE+5lJf8iUwUYNKNypNlK3Wkqb5xVnow5nm3num2LmcBx4Q53Dn3ofZ3WlQlPqhKVMIfJSO9+/BzXxDAwrRgEI0oBANKEQDCtGAQjSgEJwpSSkVDwZ8A2d68+kgERMLiLl60ATMcTFcxFqUisdmU/WgCZjjYriItSgVj82m6kETMMfFcBFrUSoem03VgyZgjovhItaiVDymm0oTGlCIBhSiAYVoQCEaUIgGFIIz2ciFq4nrlIoHA74RF8XGxAJizsUouFkTTcAcF8NFrEWpeEw3lSY0oBANKEQDCsGZbOTC1cR1SsWDAd+Ii2JjYgEx52IU3KyJJmCOi+Ei1qJUPKabShMaUIgGFKIBheBMNnLhauI6peLBgG/ERbExsYCYczEKbtZEEzDHxXARa1EqHtNNpQkNKEQDCtGAQnAmG7lwNXGdUvFgwDfiotiYWEDMuRgFN2uiCZjjYriItSgVj+mm0oQGFKIBhWhAITiTjVy4mrhOqXgw4BtxUWxMLCDmXIyCmzXRBMxxMVzEWpSKx3RTaUIDCtGAQjSgEJzJRi5cTVynVDwY8I24KDYmFhBzLkbBzZpoAua4GC5iLUrFY7qpNKEBhWhAIRpQCM5kIxeuJq5TKh4M+EZcFBsTC4g5F6PgZk00AXNcDBexFqXiMd1UmtCAQjSgEA0oBGeykQtXE9cpFQ8GfCMuio2JBcSci1FwsyaagDkuhotYi1LxmG4qTfzXgK25oWr18Dvd2g/auoaDjfJnNoiNWKMlW6xSKp6O7tHyx909urUfXB24HSxtbLFRbFxc3wra86PblIqns2fswfPlV3RrP5iYfRw8Wlhko9j48OmLoC0/MkOpeC5kiuf6JuYO6N5esLi6GfRPzbNRbLw+PLPfnLl1llLxdHRMnwgf0/ebb8t0+/Tz4+gouHLzTlB6ucmGMXFheR3fpeXzAwPHKVU0zZnBM5f7pypfv1VpC+lnZe11+F14N1jf3mUD/c21dzvBpd6JSlO2cIoSxRN+1nt6xx9UvngUcfZJKbgxPhusbe2woTgRLzd0r9LaNZynNGY0Tk8fCx/ZPJ5EXz7OP0Pnwoh4EksrG2ywPy0tb4RP3mSlNT/ShR6Uxo7mbOF0e36k3Dcxu/9saTX4sLMXpP09ER9nfCf2Tc7//mXF6wne8SD+xv9yw/f38Z13MTN4klK4gx+WpmuFxs7u0ZnO7rHtllzxEG/kvtmcLR62he95eFXBeXFuSqAodUtDwy+fFBw0dgL4vQAAAABJRU5ErkJggg=="
      alt="Nooze"
    />
  );
};



const TopBar = ({ onChange }) => {
  return (
    <div className="searchFieldContainer" style={{ flexGrow: 1 }}>
      <Grid container>
        <Grid item xs style={{ padding: 24 }}>
          <TextField
            id="search"
            label="Search available news headlines.."
            type="search"
            className="searchField"
            margin="normal"
            onChange={onChange}
            fullWidth
          />
        </Grid>
      </Grid>
    </div>
  );
};




const NewsCard = ({ details, onClickHandling, onDismiss,index }) => {
  return (
    <Card style={{ maxWidth: 400, minWidth: 400 }}>
      <CardHeader
        avatar={
          <Avatar aria-label="Recipe" className="avatar">
            {details.source.name[0]}
          </Avatar>
        }
        title={details.source.name}
        subheader={details.publishedAt}
      />
      <CardMedia
        style={{
          height: 0,
          paddingTop: "56.25%" // 16:9
        }}
        image={details.urlToImage}
        title={details.title}
      />
      <CardContent>
        <Typography gutterBottom variant="headline" component="h4">
          {details.title}
        </Typography>
        <Typography component="p" style={{ maxlines: 4 }}>
          {details.description}
        </Typography>
      </CardContent>
      <CardActions disableActionSpacing>
        <IconButton aria-label="Add to favorites">
          <FavoriteIcon />
        </IconButton>
        <IconButton aria-label="Share" href={details.url} target="_blank">
          <ShareIcon />
        </IconButton>
        <IconButton aria-label="Delete" onClick={() => this.onDismiss()}>
          <DeleteIcon />
        </IconButton>
      </CardActions>
    </Card>
  );
};
 

const NewsEntry = ({ details }) => {
  return <NewsCard details={details} />;
};

const List = ({ news, pattern }) => {
  return (
    <div className="">
      <Grid container justify="center">
        {news.filter(isSearched(pattern)).map((newsEntry,index) => (
          <div key={index}>
            <Grid item xs style={{ padding: 12 }}>
              <NewsCard details={newsEntry} />
            </Grid>
          </div>
        ))}
      </Grid>
    </div>
  );
};

export default App;

<IconButton aria-label="Delete" onClick={() => onDismiss()}>