SHARE
TWEET

11:13

alexhtang Mar 25th, 2019 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const contentNode = document.getElementById('contents');
  2.  
  3. class BodyStats extends React.Component {
  4.     render() {
  5.         const borderedStyle = {border: "1px solid black", padding: 6};
  6.         return (
  7.           <div class = "row">
  8.           </div>
  9.         )
  10.       }
  11. }
  12.  
  13. // class BodyRow extends React.Component {
  14. //     render() {
  15. //       const borderedStyle = {border: "1px solid black", padding: 4};
  16. //       return (
  17. //         <tr>
  18. //             <td style={borderedStyle}>{this.props.body_height}</td>
  19. //             <td style={borderedStyle}>{this.props.body_weight}</td>
  20. //             <td style={borderedStyle}>{this.props.body_age}</td>
  21. //             <td style={borderedStyle}>{this.props.body_gender}</td>
  22. //         </tr>
  23. //       )
  24. //     }
  25. //   }
  26.  
  27. class Description extends React.Component {
  28.   render() {
  29.     return (
  30.       <div style={{textAlign: "center"}}>This is a placeholder for a description of the webapp.</div>
  31.     )
  32.   }
  33. }
  34.  
  35. class AddLogIn extends React.Component {
  36.   constructor() {
  37.     super();
  38.     this.handleSubmit = this.handleSubmit.bind(this);
  39.   }
  40.    
  41.       handleSubmit(e) {
  42.         e.preventDefault();
  43.         var form = document.forms.updateLogIn;
  44.         this.props.update();
  45.         this.props.createIssue({
  46.           username: form.username.value,
  47.           password: form.password.value,
  48.         });
  49.         // clear the form for the next input
  50.         form.username.value = ""; form.password.value = "";
  51.       }
  52.    
  53.       render() {
  54.         return (
  55.          
  56.           <div style={{textAlign: "center"}}>
  57.             <form name="updateLogin" onSubmit={this.handleSubmit}>
  58.               <input type="text" name="username" placeholder="Username" />
  59.               <input type="text" name="password" placeholder="Password" />
  60.               <button>Log In</button>
  61.             </form>
  62.           </div>
  63.         )
  64.       }
  65. }
  66.  
  67. class LoggedIn extends React.Component {
  68.   constructor() {
  69.     super();
  70.     this.handleClick = this.handleClick.bind(this);
  71.   }
  72.  
  73.   handleClick(){
  74.     this.props.update();
  75.   }
  76.  
  77.   render(){
  78.     return(
  79.       <div style={{textAlign: "center"}}>
  80.         <h1>You are logged in!</h1>
  81.         <input type="button" value="Log Out" onClick={this.handleClick}></input>
  82.       </div>
  83.     )
  84.   }
  85. }
  86.  
  87. class TitleTest extends React.Component {
  88.     render() {
  89.         const textStyle = {textAlign: "center"};
  90.         return(
  91.             <h1 style={{padding: 40, textAlign: "center"}}>Welcome to WYW (Watch Your Weight)</h1>
  92.         )
  93.     }
  94. }
  95.  
  96. class ButtonTable extends React.Component {
  97.     render() {
  98.         const borderedStyle = {padding: 6};
  99.         return (
  100.           <div style={{textAlign: "center"}}>
  101.                 <button>Meals</button>
  102.                 {' '}
  103.                 <button>Nutrition Tracker</button>
  104.                 {' '}
  105.                 <button>My Account</button>
  106.                 {' '}
  107.                 <button>History</button>
  108.           </div>
  109.         )
  110.       }
  111. }
  112.  
  113. class HomePage extends React.Component {
  114.   constructor(props) {
  115.     super(props);
  116.     this.state = {
  117.       // logindetails: logindetails,
  118.       isLoggedIn: false
  119.     };
  120.  
  121.     this.update = this.update.bind(this);
  122.   }
  123.  
  124.   update() {
  125.     this.setState({isLoggedIn: !this.state.isLoggedIn});
  126.   }
  127.  
  128.   render() {
  129.     var logIn;
  130.     if(this.state.isLoggedIn){
  131.       logIn = <LoggedIn />;
  132.     }
  133.     else{
  134.       logIn = <AddLogIn />;
  135.     }
  136.     return (
  137.       <div>
  138.         <TitleTest />
  139.         <hr />
  140.         {logIn}
  141.         <hr />
  142.         <Description />
  143.         <hr/>
  144.         <ButtonTable />
  145.       </div>
  146.     );
  147.   }
  148. }
  149.  
  150. ReactDOM.render(<HomePage />, contentNode);  // Render the component inside the content Node
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