#Issue 14_Exit screen prompt

[wanhoyinjoshua]

Problem:
When we exit a screen after entering details without saving it, the system should ask "Do you want to exit, if you exit you will loose all the data entered" Yes or No?

Proposed solution:
changes to this file

To detect route change/back button and other links :

Add componentwillmount and componentwillunmount and listen to router.events provided by next js router. handleroutechange to handle routing.

` componentWillMount(){
    
    router.events.on('routeChangeStart',this.handleRouteChange)

   }`

`  componentWillUnmount() {
    this.props.router.events.off('routeChangeStart',this.handleRouteChange)
 
  }`

to make sure alert does not show up when upload is successful, created state variable
and set state when saving is successful and before router.push

` if (res.ok) {
          this.setState({
            isSaved: true,
            
          });
          router.push('/facilitator');`

` handleRouteChange = () => {
    
    if(this.state.isSaved==true){
      

    }
   
    else{
      if(window.confirm("Are you sure you want to leave this page? Unsaved Changed will be lost")){
      


      }
      else{
        throw 'Abort route change. Please ignore this error.'

      }

    }
  }`

To detect page reload:

`import { Beforeunload } from 'react-beforeunload';`
`<Beforeunload onBeforeunload={() => 'You’ll lose your data!'}>
<Component...>
<Beforeunload/>

`

To detect click on logo image and log out button:

changes in this file

wrapped the with Link so next can detect as route change
<Link href={getLogoHref()}> <a className="navbar-brand" > <img src="/styles/CarPal-Logo-emma-transparent.png" width="100" height="106" alt="HillsCarPal" id="icon" /> </a> </Link >

for log out
<button className="btn btn-success" id="logOutButton" onClick={()=>{if(window.confirm("Are you sure you want to logout?")){logout()}}} > Log Out </button>