import React, { Component,Fragment } from 'react' import { Redirect } from 'react-router-dom' import * as Forms from '../Forms' import '../pages.css' import icon from './icon.png' import axios from 'axios' import borrow from './borrow-book.png' class Student extends Component { constructor(props) { super(props) this.state = { user_id:'', user_name:'', s_form: '', logout: false, currbook:'no book borrowed' } this.clickHandler=this.clickHandler.bind(this); } componentWillMount(){ this.setState({user_id:this.props.match.params.uid,user_name:this.props.match.params.uname}) axios.get('http://localhost:5000/borrower/'+this.props.match.params.uid) .then(responsee => { if(responsee.data===null){ console.log('undefined') } else {this.setState({currbook:responsee.data.book_id})} }) } clickHandler(){ return( <div style={{position:"absolute",top:"30%",left:"3.5%"}}> <p style={{fontFamily:"sans-serif",color:"#0ff517",fontSize:"20px",marginLeft:"100px"}}><b>SELECT FORM</b></p> <div style={{marginLeft:"20px"}}><button className="fbutton" style={{backgroundColor:"red"}} onClick={(e) => {this.setState({s_form: 'borrow'})}}>Borrow book</button></div> <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'bsearch'})}}>Search book</button></div> </div> ) } renderform(s_form){ if(!s_form) { return(<h2 align="center">Form renders here!</h2>) } else if(s_form==='borrow') { const Fm = Forms[s_form]; return <Fm uid={this.state.user_id} uname={this.state.user_name}/> } const Fm = Forms[s_form]; return <Fm /> } book(){ if(this.state.s_form!='borrow'){ return <h3>Current book borrowed: {this.state.currbook}</h3> } else return <img src={borrow} style={{width:"200px",height:"200px"}}></img> } render() { if(this.state.logout) return <Redirect to='/slogin'/> else return ( <Fragment> <div style={{width:"fill",height:"53px",backgroundColor:" #333"}}> <img src={icon} width="53px" height="53px"/> <div style={{position:"absolute",left:"55px",top:"0px",color:"#f2f2f2",fontSize:"30px"}}><b>BMS</b></div> <div class="topnav"> <a onClick={(e) =>{this.setState({logout:true})}} style={{position:"absolute",right:"3px",top:"0px",color:'white'}}><b>Logout</b></a> </div> </div> <div> <div> <h1 style={{color:"#fff",fontFamily:"serif",marginLeft:"1%"}}><b>Hello {this.state.user_name}</b></h1> <h1 style={{color:"red",fontFamily:"serif",marginLeft:"40%",position:"absolute",top:"10%"}}><b>FUNCTIONALITIES</b></h1> </div> <section> {this.clickHandler()} <div style={{position:"absolute",right:"5%",top:"30%",width:"600px",backgroundColor:"#fed000",color:"#242424",borderRadius:"30px",fontFamily:"serif"}}> {} {this.renderform(this.state.s_form)} </div> </section> <div style={{color:'white',position:'absolute',marginLeft:'2.5%',top:'65%'}}> {this.book()} </div> </div> </Fragment> ) } } export default Student;