React Person Box

---

Github: https://github.com/Furkan-Gulsen/ReactJS-Small-Projects

---

App.js

import React, { Component } from 'react';
import Users from "./components/Users";

import "./App.css"


class App extends Component{
  state = {
    persons: [
      {
        id: 1,
        name: "Furkan",
        surname: "Gulsen",
        job: "Software Engineer"
      },
      {
        id: 2,
        name: "Zeynep",
        surname: "Gulsen",
        job: "Data Scientist"
      },
      {
        id: 3,
        name: "Alex",
        surname: "Allen",
        job: "Industrial Engineer"
      }
    ]
  }
  deletePerson = (id) => {
    this.setState({
      persons : this.state.persons.filter( person => id !== person.id )
    })
  }
  render(){
    return(
      <div>
        <Users 
          deletePerson = {this.deletePerson} 
          persons = {this.state.persons} 
          />
      </div>
    )
  }
}



export default App;

---

Users.js

import React, { Component } from 'react'
import Navbar from "./Navbar";
import PropTypes from "prop-types";

class Users extends Component {
    render() {
        const {persons,deletePerson} = this.props;
        console.log(persons)
        return (
        <div>
            {
                persons.map( person => {
                    return(
                        <Navbar
                            key = {person.id}
                            id = {person.id}
                            name = {person.name}
                            surname = {person.surname}
                            job = {person.job}
                            deletePerson = {deletePerson}
                        />
                    )
                } )
            }
        </div>
        )
    }
}

Users.propTypes = {
    persons: PropTypes.array.isRequired,
    deletePerson: PropTypes.func.isRequired
}

export default Users;

---

Navbar.js

import React, { Component } from 'react'

class Navbar extends Component {
    static defaultProps = {
        name: "No information",
        surname: "No information",
        job: "No information"
    }
    constructor(props){
        super(props);
        this.state = {
            isVisible: false
        };
        this.onClickEvent = this.onClickEvent.bind(this);
        this.onDeletePerson = this.onDeletePerson.bind(this);
    }

    onClickEvent(){
        this.setState({
            isVisible: !this.state.isVisible
        })
    }

    onDeletePerson(){
        const {id,deletePerson} = this.props;
        deletePerson(id);
    }

    render() {
        const {id,name,surname,job} = this.props;
        const {isVisible} = this.state;
        return (
        <div>
            <div className="modals">
            <div className="modal-dialog">
                <div className="modal-content">
                <div className="modal-header bg-dark text-light">
                    <h5 className="modal-title" 
                        onClick={this.onClickEvent}
                        style={{
                            cursor:"pointer",
                            userSelect: "none"
                        }}>User Card {id}</h5>
                    <button type="button" 
                            className="close" 
                            data-dismiss="modal" 
                            aria-label="Close" 
                            style={{outline:"none"}}>
                    <span className="text-light" aria-hidden="true" onClick={this.onDeletePerson}>×</span>
                    </button>
                </div>
                {
                    isVisible ?
                        <div className="modal-body">
                            <p><b>NAME:</b> {name} </p>
                            <p><b>SURNAME:</b> {surname} </p>
                            <p><b>JOB:</b> {job} </p>
                        </div>
                    : null
                }

                </div>
            </div>
            </div>
        </div>
        )
    }
}

export default Navbar;