Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState, useEffect } from 'react';
- import logo from './logo.svg';
- import './App.css';
- export class ContactsList extends React.Component {
- contactToContactItem = contact => {
- const avatarUrl = contact.picture.thumbnail;
- const { title, first, last } = contact.name;
- const name = `${title} ${first} ${last}`.trim();
- const phone = contact.phone;
- return <ContactItem key={name} avatarUrl={avatarUrl} name={name} phone={phone} />;
- };
- render() {
- return (
- <ul className="ui relaxed divided list selection">
- {this.props.contacts.map(this.contactToContactItem)}
- </ul>
- );
- }
- }
- export const ContactItem = ({ avatarUrl, name, phone }) => {
- return (
- <li className="item">
- <img src={avatarUrl} className="ui mini rounded image" alt="" />
- <div className="content">
- <h4 className="header">{name}</h4>
- <div className="description">{phone}</div>
- </div>
- </li>
- );
- };
- export class App2 extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- contacts: [],
- callbackRefresh: null,
- refreshCounter: 0,
- }
- }
- toggleGather = () => {
- if (this.state.callbackRefresh === null) {
- this.setState({ callbackRefresh: setInterval(this.gatherData, 2000) });
- }
- else {
- clearInterval(this.state.callbackRefresh);
- this.setState({ callbackRefresh: null });
- }
- }
- gatherData = () => {
- fetch("https://randomuser.me/api/?format=json&results=5")
- .then(res => res.json())
- .then(json => this.setState({
- contacts: json.results,
- refreshCounter: this.state.refreshCounter + 1
- }));
- }
- componentDidMount() {
- this.gatherData();
- }
- render() {
- return (
- <>
- <button onClick={this.toggleGather}>refresh</button>
- <p>Refresh counter: {this.state.refreshCounter}</p>
- <p>Refresh {this.state.callbackRefresh ? 'enabled' : 'disabled'}</p>
- <div>
- <main className="ui main text container">
- <ContactsList contacts={this.state.contacts} />
- </main>
- </div>
- </>
- );
- }
- }
- export default App2;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement