Advertisement
Guest User

Untitled

a guest
Apr 11th, 2020
147
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4.  
  5.  
  6. export class ContactsList extends React.Component {
  7.     contactToContactItem = contact => {
  8.         const avatarUrl = contact.picture.thumbnail;
  9.         const { title, first, last } = contact.name;
  10.         const name = `${title} ${first} ${last}`.trim();
  11.         const phone = contact.phone;
  12.         return <ContactItem key={name} avatarUrl={avatarUrl} name={name} phone={phone} />;
  13.     };
  14.  
  15.     render() {
  16.         return (
  17.             <ul className="ui relaxed divided list selection">
  18.                 {this.props.contacts.map(this.contactToContactItem)}
  19.             </ul>
  20.         );
  21.     }
  22. }
  23.  
  24. export const ContactItem = ({ avatarUrl, name, phone }) => {
  25.     return (
  26.         <li className="item">
  27.             <img src={avatarUrl} className="ui mini rounded image" alt="" />
  28.             <div className="content">
  29.                 <h4 className="header">{name}</h4>
  30.                 <div className="description">{phone}</div>
  31.             </div>
  32.         </li>
  33.     );
  34. };
  35.  
  36. export class App2 extends React.Component {
  37.     constructor(props) {
  38.         super(props);
  39.  
  40.         this.state = {
  41.             contacts: [],
  42.             callbackRefresh: null,
  43.             refreshCounter: 0,
  44.         }
  45.     }
  46.     toggleGather = () => {
  47.         if (this.state.callbackRefresh === null) {
  48.             this.setState({ callbackRefresh: setInterval(this.gatherData, 2000) });
  49.         }
  50.         else {
  51.             clearInterval(this.state.callbackRefresh);
  52.             this.setState({ callbackRefresh: null });
  53.         }
  54.     }
  55.  
  56.     gatherData = () => {
  57.         fetch("https://randomuser.me/api/?format=json&results=5")
  58.             .then(res => res.json())
  59.             .then(json => this.setState({
  60.                 contacts: json.results,
  61.                 refreshCounter: this.state.refreshCounter + 1
  62.             }));
  63.     }
  64.  
  65.     componentDidMount() {
  66.         this.gatherData();
  67.     }
  68.  
  69.     render() {
  70.         return (
  71.             <>
  72.                 <button onClick={this.toggleGather}>refresh</button>
  73.                 <p>Refresh counter: {this.state.refreshCounter}</p>
  74.                 <p>Refresh {this.state.callbackRefresh ? 'enabled' : 'disabled'}</p>
  75.                 <div>
  76.                     <main className="ui main text container">
  77.                         <ContactsList contacts={this.state.contacts} />
  78.                     </main>
  79.                 </div>
  80.             </>
  81.         );
  82.     }
  83. }
  84.  
  85. export default App2;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement