import React, { Component } from "react";
import { NavLink } from "react-router-dom";

class Community extends Component {

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        if (response.status === 200) {
          return response.json();
        } else {
          throw new Error("Something went wrong ..." + response.statusText);
        }
      })
      .then(data => this.setState({ isLoading: true, data: data }))
      .catch(error => this.setState({ isLoading: true, error }));
    console.log("DidMount");
  }

  render() {
    const { loading, data, error, handleLogout } = this.props;
    if (error) {
      return (
        <div className="wrapper">
          <ul>
            <li>
              <NavLink to="/profile">Profile</NavLink>
            </li>
            <li>
              <NavLink to="/community">Community</NavLink>
            </li>
            <li>
              <NavLink to="/dashboard">Dashboard</NavLink>
            </li>
            <li>
              <NavLink to="/search">Search</NavLink>
            </li>
            <li>
              <NavLink to="/signin" onClick={handleLogout}>
                Log Out
              </NavLink>
            </li>
          </ul>
          <h1>Community</h1>
          <div>Sorry,something wrong - {error.message}</div>
        </div>
      );
    }
    if (!loading) {
      return (
        <div className="wrapper">
          <ul>
            <li>
              <NavLink to="/profile">Profile</NavLink>
            </li>
            <li>
              <NavLink to="/community">Community</NavLink>
            </li>
            <li>
              <NavLink to="/dashboard">Dashboard</NavLink>
            </li>
            <li>
              <NavLink to="/search">Search</NavLink>
            </li>
            <li>
              <NavLink to="/signin" onClick={handleLogout}>
                Log Out
              </NavLink>
            </li>
          </ul>
          <h1>Community</h1>
          <div>Loading...</div>
        </div>
      );
    }
    return (
      <div className="wrapper">
        <ul>
          <li>
            <NavLink to="/profile">Profile</NavLink>
          </li>
          <li>
            <NavLink to="/community">Community</NavLink>
          </li>
          <li>
            <NavLink to="/dashboard">Dashboard</NavLink>
          </li>
          <li>
            <NavLink to="/search">Search</NavLink>
          </li>
          <li>
            <NavLink to="/signin" onClick={handleLogout}>
              Log Out
            </NavLink>
          </li>
        </ul>
        <h1>Community</h1>
        <ul>
          {data.map(data => (
            <li key={data.id}>
              <div>
                <span>Name: {data.name} </span>
                <span>Email: {data.email} </span>
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}