caparol6991

Untitled

Jan 25th, 2020
146
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import './App.css';
  3. import { Value, Image, List } from '@solid/react';
  4. import Email from './Email';
  5. import 'bootstrap/dist/css/bootstrap.min.css';
  6.  
  7. class App extends React.Component {
  8.  
  9. state = {
  10. profile: '',
  11. renderProfile: false
  12. };
  13.  
  14. viewProfile(profile) {
  15. this.setState({ profile: profile, renderProfile: true });
  16. }
  17.  
  18. render() {
  19. const { profile, renderProfile } = this.state;
  20. return (
  21. <div className="bg-dark text-white" style={{width:100 + '%',height:1500 + 'px'}}>
  22. <nav className="navbar navbar-dark bg-secondary">
  23. <span className="navbar-brand mb-0 h1">Profile viewer</span>
  24. </nav>
  25. <div style={{marginLeft:50 + "px"}}>
  26. <h3>Input solid profile:</h3>
  27. <p>
  28. <label htmlFor="profile">Profile:</label>
  29. <input id="profile" value={profile} onChange={e => this.setState({ profile: e.target.value })} />
  30. <button onClick={() => this.viewProfile(profile)}>View</button>
  31. </p>
  32. {renderProfile &&
  33. <div>
  34. <p>
  35. <Image className="profile-img" src={`[${profile}][foaf:img]`} />
  36. <br />
  37. <label htmlFor="name">Name: &nbsp;</label>
  38. <span id="name">
  39. <Value src={`[${profile}][foaf:name]`} />
  40. </span>
  41. <br />
  42. <label htmlFor="email">Email: &nbsp;</label>
  43. <span id="email">
  44. <Email src={`[${profile}][foaf:mbox]`} />
  45. </span>
  46. <br />
  47. <label htmlFor="friends">Friends: &nbsp;</label>
  48. </p>
  49. <List class="list-group " src={`[${profile}][foaf:knows]`}>{friend =>
  50. <li style={{width:80 + '%'}} class="list-group-item bg-dark text-white" key={friend}>
  51. <Image className="profile-img" src={`[${friend}][foaf:img]`} />
  52. <br />
  53. <label>Name: &nbsp;</label>
  54. <button style={{color:'white'}} onClick={() => this.viewProfile(friend)}>
  55. <Value src={`[${friend}].name`}>{`${friend}`}</Value>
  56. </button>
  57. <br />
  58. <label>Email: &nbsp;</label>
  59. <Email src={`[${friend}][foaf:mbox]`} />
  60. </li>}
  61. </List>
  62. </div>
  63. }
  64. </div>
  65. </div>
  66. );
  67. }
  68. }
  69.  
  70. export default App;
RAW Paste Data