SHARE
TWEET

Untitled

a guest Jan 25th, 2020 101 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.       <center>
  26.       <div style={{marginLeft:50 + "px"}}>
  27.         <h3>Input solid profile:</h3>
  28.         <p>
  29.           <label htmlFor="profile"></label>
  30.           <input id="profile" value={profile} onChange={e => this.setState({ profile: e.target.value })} />
  31.           <button onClick={() => this.viewProfile(profile)}>View</button>
  32.         </p>
  33.         {renderProfile &&
  34.          <div>
  35.             <p>
  36.               <Image className="profile-img" src={`[${profile}][foaf:img]`} />
  37.               <br />
  38.               <label htmlFor="name">Name: &nbsp;</label>
  39.               <span id="name">
  40.                 <Value src={`[${profile}][foaf:name]`} />
  41.               </span>
  42.               <br />
  43.               <label htmlFor="email">Email: &nbsp;</label>
  44.               <span id="email">
  45.                 <Email src={`[${profile}][foaf:mbox]`} />
  46.               </span>
  47.               <br />
  48.               <label htmlFor="role">Role: &nbsp;</label>
  49.               <span id="role">
  50.                 <Value src={`[${profile}][foaf:role]`} />
  51.               </span>
  52.               <br />
  53.               <label htmlFor="organization">Organization name: &nbsp;</label>
  54.               <span id="organization">
  55.                 <Value src={`[${profile}][foaf:organization]`} />
  56.               </span>
  57.               <br />
  58.              
  59.             </p>        
  60.             <div align="left">
  61.             <label htmlFor="friends">Friends: </label>
  62.             <List class="list-group " src={`[${profile}][foaf:knows]`}>{friend =>
  63.               <li style={{width:80  + '%'}} class="list-group-item bg-dark text-white" key={friend}>
  64.                 <Image className="profile-img" src={`[${friend}][foaf:img]`} />
  65.                 <br />
  66.                 <label>Name: &nbsp;</label>
  67.                 <button style={{color:'white'}} onClick={() => this.viewProfile(friend)}>
  68.                   <Value src={`[${friend}].name`}>{`${friend}`}</Value>
  69.                 </button>
  70.                 <br />
  71.                 <label>Email: &nbsp;</label>
  72.                 <Email style={{color:'white'}} src={`[${friend}][foaf:mbox]`} />
  73.                 <br />
  74.                 <label>Role: &nbsp;</label>
  75.                 <Value style={{color:'white'}} src={`[${friend}][foaf:role]`} />
  76.                 <br />
  77.                 <label>Organization name: &nbsp;</label>
  78.                 <Value style={{color:'white'}} src={`[${friend}][foaf:organization]`} />
  79.               </li>}
  80.             </List>
  81.             </div>
  82.           </div>
  83.         }
  84.       </div>
  85.       </center>
  86.       </div>
  87.     );
  88.   }
  89. }
  90.  
  91. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top