Ggthjy

I have been working on a react app for a while now , When I try to trigger page refresh or click on back button on the browser only one component gets reloaded and not the rest. I have 3 components sidebar,header and main component. Currently just the main component gets reloaded and not the sidebar and header components.I tried local storage and componentwillupdate concept didn't seem to fix it. I tried the plain js solution of detecting the refresh and the autoclick event but didn't get it resolved.

import React, { PropTypes, Component } from 'react';

import ReactDOM from 'react-dom';

import './blank.css';

import DisplayDetails from './DisplayDetails';

import {

  Panel,

  Button,

  PageHeader,

  ControlLabel,

  FormControl,

  Pagination,

  FormGroup

} from 'react-bootstrap';

import JwPagination from 'jw-react-pagination';

import history from '../../src/core/history';

var globalrespobj;



/*function fkey(e){

  console.log('e in function for refresh',e);

  e = e || window.event;

 if( wasPressed ) return; 



  if (e.keyCode == 116) {

       alert("f5 pressed");

      wasPressed = true;

  }else {

      alert("Window closed");

  }

}*/



function myFunction(details) {

  var x = document.getElementById("customer-lookup");

  var y = document.getElementById("customerdetails");

  if (details === true) {

    x.style.display = "none";

    y.style.display = "block";



  } else {

    y.style.display = "none";

    x.style.display = "block";

  }

}



function newFunction(isActive){

  var x = document.getElementById("DIV-1");

  var y = document.getElementById("DIV-2");

  if(isActive){







    x.style.display = "block";

    y.style.display = "none";

    //history.push('/PAGE1');



  } else {

    x.style.display = "none";

    y.style.display = "block";

  }



}







const customStyles = {

  ul: {

    backgroundColor: 'red'

  },

  li: {

    border: '1px solid green'

  },

  a: {

    color: 'blue'

  }

};

const title = 'DIV-1';

const spacing = {

  marginRight: "20px",

  marginbottom: "20px"

}

const buttonalignment = {

  marginLeft: "81px",

  marginbottom: "20px"

}



class displayBlank extends Component {

  constructor(props) {

    super(props);

    this.state = {

      customerData: [],

      pageOfItems: [],

      respData: [],

      custaddData: [],

      custEmailsData: [],

      custPhonesData: [],

      // showResults:false,

      sort: {

        column: null,

        direction: 'desc',

      }

    };

    this.handleSubmit = this.handleSubmit.bind(this);

    this.onChangePage = this.onChangePage.bind(this);

    this.handleClick = this.handleClick.bind(this);

    this.afterUpdate = this.afterUpdate.bind(this);

    if (document.getElementById("sidebardiv")) {

      document.getElementById("sidebardiv").style.visibility = "visible";

    }

    if (document.getElementById("navdiv")) {

      document.getElementById("navdiv").style.visibility = "visible";

    }



     var login = sessionStorage.getItem('login');

     if (!login){

     history.push('/'); 

     }



     /*if (window.performance) {

      if (performance.navigation.type == 1) {

        //alert( "This page is reloaded" );

        //history.push('/grid');

        //history.push('/blank');

        history.push('/blank');

      } 

    }*/

  };

  componentDidMount() {

    myFunction(false);

  }



  fkey(e){

    console.log('e in function for refresh',e);

    e = e || window.event;

   if( wasPressed ) return; 



    if (e.keyCode == 116) {

         alert("f5 pressed");

        wasPressed = true;

    }else {

        alert("Window closed");

    }

  }



 /* window.onbeforeunload = function() {

    return "Dude, are you sure you want to refresh? Think of the kittens!";

}*/



 /*componentWillUpdate(){



  console.log('globalrespobj in componentWillUpdate',globalrespobj);

  if(globalrespobj === undefined){

    history.push('/grid');

    history.push('/blank');

  }



 }*/





  /*shouldComponentUpdate(){

    myFunction(false);

  }*/



  afterUpdate(){

    console.log('In afterupdate');

    //myFunction(false);

    //componentDidMount();

    newFunction(true);

  }

  onChangePage(pageOfItems) {

    // update local state with new page of items

    this.setState({ pageOfItems });

  }

  handleSubmit(event) {

    event.preventDefault();

    //myFunction();

    const form = event.target;

    const data = new FormData(form);

    const arrayValue = [];

    var i = 0;

    console.log('Data from Form:', data);

    for (let name of data.keys()) {

      const input = form.elements[name];

      const parserName = input.dataset.parse;

      const parsedValue = data.get(name);

      console.log('name', name);

      console.log('parsedValue', parsedValue);

      if (typeof (parsedValue) == 'undefined' || parsedValue == null) {

        console.log('Not Defined or Not Null')

        arrayValue[i] = "";

        data.set(name, arrayValue[i]);

      }

      else {

        data.set(name, parsedValue);

        arrayValue[i] = parsedValue;

      }

      i = i + 1;

    }

    var response_data = "";

    var response_jsonObj;

    var txt = "";

    var req = {

      "CustomerLookupRequest":

      [

         {

           "col_1": arrayValue[0],

           "col_2": arrayValue[1],

           "col_3": arrayValue[2],

           "col_4": arrayValue[3],

           "col_5": arrayValue[4],

           "col_6": arrayValue[5],

           "col_7": "",

           "col_8": "",

           "col_9": arrayValue[6],

           "col_10": "",

           "col_11": arrayValue[7],

           "col_12": arrayValue[8],

           "col_13": arrayValue[9]

         }

       ]

      };





    console.log('req string :', JSON.stringify(req));

    fetch('api_url', {

      headers: {

        'Accept': '*/*',

        'Content-Type': 'application/json',

      },

      method: 'POST',

      body: JSON.stringify(req)

    }

    ).then(response => {

      if (response.status !== 200) {

        console.log('Problem in fetching');

        return;

      }

      response.text().then(data => {

        console.log('Data in Console', data);

        console.log('Data in Console length', data.length);

        if(data.length==2){

          swal({

            title: "Customer Not Found!",

            icon : "error",

            confirmButtonText: 'OK'

          }).then((okay) => {

            if (okay) {



            history.push('/grid');

            history.push('/blank');

            }

          });

        }

        response_data = data;

        console.log('Response Data', response_data);

        console.log('Response Data length', response_data.length);

        response_jsonObj = JSON.parse(response_data);

        globalrespobj = response_jsonObj;

        console.log('Response JSON Object', response_jsonObj);

        this.setState({ customerData: response_jsonObj });

        //console.log('customer Data in handle submit',customerData);

      });

    }).catch(error => this.setState({ error }));

  }



  handleClick(col_1, col_2) {



    myFunction(true);

    var ID = col_1;

    var Name = col_2;

    var newresponse_jsonObj, response_data;

    var req = {

      "GetRequest": [{

        "name": col_1,

        "src": "",

        "id": col_2,

        "aid": "",

        "pid": "",

        "eid": ""

      }]

    };



    // console.log('handle Click req :',req);

    fetch('API_URL', {

      headers: {

        'Accept': '*/*',

        'Content-Type': 'application/json',

      },

      method: 'POST',

      body: JSON.stringify(req)

    }

    ).then(response => {

      if (response.status !== 200) {

        console.log('Problem in fetching');

        return;

      }

      response.text().then(data => {

        response_data = data;

        //console.log('Response Data in Handle Click for Get-Customer',response_data);

        newresponse_jsonObj = JSON.parse(response_data);

        console.log('Response JSON Object for Get-Customer', newresponse_jsonObj);

        //this.setState({respData:newresponse_jsonObj});

        this.setState({ respData: newresponse_jsonObj.RESP_1 });

        this.setState({ custaddData: newresponse_jsonObj.RESP_2 });

        this.setState({ custEmailsData: newresponse_jsonObj.RESP_3 });

        this.setState({ custPhonesData: newresponse_jsonObj.RESP_4 });

        //this.setState({ pageOfItems:newresponse_jsonObj});

        this.getCustomer();

        //console.log('Response-Data',respData);



      });

    }).catch(error => this.setState({ error }));















  }



















  render() {



    var { custID } = this.state;

    //myFunction(false);

    return (

      <div id="DIV-1">

        <div id="Sample Text">

          <div className="row">

            <div className="col-lg-12">

              <PageHeader>Sample Text </PageHeader>

            </div>

          </div>

          <form onSubmit={this.handleSubmit}>

            <table>

              <tr>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column1</ControlLabel>

                    <FormControl componentClass="select" id="Column1" name="Column1" placeholder="select">

                      <option value="Column2">Column2</option>

                      <option value="Column3">Column3</option>

                      <option value="Column4">Column4</option>

                    </FormControl>

                  </FormGroup>

                </td>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 2</ControlLabel>

                    <FormControl

                      id="Column2" name="Column2"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 3</ControlLabel>

                    <FormControl

                      style={spacing}

                      id="Column3" name="Column3"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

              </tr>

              <tr>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 4</ControlLabel>

                    <FormControl

                      id="Column 4" name="Column 4"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 5</ControlLabel>

                    <FormControl

                      id="Column 5" name="Column 5"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 6</ControlLabel>

                    <FormControl

                      id="Column 6" name="Column 6"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

              </tr>

              <tr>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 7</ControlLabel>

                    <FormControl

                      id="Column 7" name="Column 7"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 8</ControlLabel>

                    <FormControl

                      id="Column 8" name="Column 8"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 9</ControlLabel>

                    <FormControl

                      id="Column 9" name="Column 9"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

              </tr>

              <tr>

                <td>

                  <FormGroup style={spacing}>

                    <ControlLabel>Column 10</ControlLabel>

                    <FormControl

                      id="Column 10" name="Column 10"

                      type="text"

                      placeholder="Enter Text"

                    />

                  </FormGroup>

                </td>

                <td></td>

                <td>

                  <FormGroup style={buttonalignment}>

                    <Button bsStyle="primary" type="submit">Search </Button>

                    {'  '}

                    <Button bsStyle="primary" type="reset">Clear </Button>

                  </FormGroup>

                </td>

              </tr>

            </table>



            <div className="row ng-scope">

              <div className="col-lg-15">

                <Panel header={<span> Search Results</span>} >

                  <div id="dataTables-example_filter" className="dataTables_filter">

                    <label htmlFor={'search'}>Search:

                       <input

                        type="text"

                        className="form-control input-sm"

                        placeholder=""

                        aria-controls="dataTables-example"

                        id="search"

                      />

                    </label>

                  </div><br></br>

                  <div id="Search-Table" className="table-responsive">

                    <table className="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info">

                      <thead>

                        <tr role="row">

                          <th> Column 1</th>

                          <th >Column 2 </th>

                          <th>Column 3</th>

                          <th>Column 4</th>

                          <th>Column 5</th>

                          <th>Column 6</th>

                          <th>Column 7</th>

                          <th>Column 8</th>

                          <th>Column 9</th>

                          <th>Column 10</th>

                          <th>Column 11</th>

                        </tr>

                      </thead>

                      <tbody>

                        {this.state.pageOfItems.map((item, i) => {

                          return (

                            <tr key={i} onClick={() => this.handleClick(item.Column_1, item.Column_2)}>



                              <td >{item.Column_1}</td>

                              <td> {item.Column_2}</td>

                              <td> {item.Column_3}</td>

                              <td> {item.Column_4}</td>

                              <td> {item.Column_5}</td>

                              <td> {item.Column_6}</td>

                              <td> {item.Column_7}</td>

                              <td> {item.Column_8}</td>

                              <td> {item.Column_9}</td>

                              <td> {item.Column_10}</td>

                              <td> {item.Column_11}</td>

                            </tr>

                          );

                        })}

                      </tbody>

                    </table>

                    <div className="col-sm-6 pullRight " >

                      <JwPagination items={this.state.customerData} onChangePage={this.onChangePage} />

                    </div>

                  </div>

                </Panel>

              </div>

            </div>



          </form>



        </div>

        <div id="DIV-2">

          <DisplayDetails respData={this.state.respData} custEmailsData={this.state.custEmailsData} custaddData={this.state.custaddData} custPhonesData={this.state.custPhonesData} afterUpdate={this.afterUpdate} />

        </div>

      </div>

    );

  }





}

export default displayBlank;