disgord-Thanos/src/App.js

import React from "react";
import './App.css';

class Card extends React.Component{
  state = {
    data: {},
    details: {},
    expand: false
  }

  constructor(props) {
    super(props);
    this.state.data = props;
    this.state.details = {};
    this.state.expand = false;
    this.onClick = this.onClick.bind(this);
  }
  onClick(e) {
    fetch(
      `https://thanos.nightmare.haus/api/user?userID=${this.state.data.UserID}`
    )
      .then(res => res.json())
      .then(response => {
        this.setState({data: this.state.data, expand: !this.state.expand, details: response});
      })
      .catch(error => console.log(error));
  }
  render() {
    if (this.state.expand) {
      if (this.state.details != null) {
        return (
          <div onClick={this.onClick}>
            <UserDetail data={this.state.details} verification={this.state.data.Photo} />
          </div>
          
        )
      } else {
        var details = {};
        details.Nick = this.state.data.Username + " (Invalid)";
        details.user = {};
        details.user.id = this.state.data.UserID;
        details.joined_at = this.state.data.Closed;
        return (
          <div onClick={this.onClick}>
        <UserDetail data={details} verification={this.state.data.Photo} />
      </div>
        )
      }

    }
    return (
      <div className="card" onClick={this.onClick}>
      <h4><b>{this.state.data.Username}{this.state.details == null ? " (Invalid)" : ""}</b></h4>
        <div className="container">
          <p>{this.state.data.Closed}</p>
          <p>{this.state.data.UserID}</p>
          <p><a href={this.state.data.Photo}>Verification Photo</a></p>
        </div>
      </div>
    );
}
}

  function CardImg(data) {
    return (
      <div className="card-img">
      <h4><b>Pend: {data.Username}</b></h4>
      <img src={data.Photo !== undefined ? data.Photo : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
        <div className="container">
          <p>{data.UserID}</p>
        </div>
      </div>
    )
  }

function UserDetail(data, verification) {
  console.log(data);
  verification = data.verification
  data = data.data;
  return (
    <div className="card-img">
    <h4><b>{data.Nick !== null ? data.Nick : data.user.Username}</b></h4> 
    <img src={data.user.avatar !== undefined ? `https://cdn.discordapp.com/avatars/${data.user.id}/${data.user.avatar}.png?size=64` : ""} alt="Avatar" />
   
      <div className="container">
     
        <img src={verification !== undefined ? verification : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
        <p>{data.joined_at}</p>
        <p>{data.user.id}</p>
      </div>
    </div>
  );
}

class Pending extends React.Component {
    state = {
        pending: []
    }
    componentDidMount() {
        const apiUrl = 'https://thanos.nightmare.haus/api/pending';
        fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => this.setState({pending: Object.values(data)}));
    }
    render() {
        return (
           <div className="App">
               <ul>
                   {this.state.pending.map((data, i) => (
                        <li key={i}> <CardImg {...data} /></li>
                   ))}
               </ul>
               <br></br>
           </div>
        );
    }
}



class Verification extends React.Component {
    state = {
        verifications: []
    }
    componentDidMount() {
        const apiUrl = 'https://thanos.nightmare.haus/api/verifications';
        fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => this.setState({verifications: data}));
    }

    render() {
        return (
           <div className="App">
             <Pending />
               <ul>
                   {this.state.verifications.map((data, i) => (
                       <li key={i}> <Card {...data} /></li>
                   ))}
               </ul>
           </div>
        );
    }
}

export {
    Pending,
    Verification,
}

export default Verification;