0

I am looking to make some changes to code form a project that I have taken on. I had to disable the webpack plugin from setting the baseURL, and now when the page loads in index.jsx to get the constructor to call the getResources and make getResources explicitly set the process.env.baseURL. I have added the getResources to main.jsx but not being sure about the constructor in index.jsx. If anyone has any expertise on this and can help that would be great. I will provide code below:

main.jsx
 let baseURL = process.env.baseURL;

export function getResources() {
if (process.env.APP_SERVER_URL) {
    baseURL = process.env.APP_SERVER_URL;
} else {
        let urlPath = getHref() + '/api/v1/resources';
        return request.get(urlPath).then(function (response) {
        baseURL = response.data;
        });
    }
}

export default class IndexDisplay extends React.Component {

constructor() {
    super();
    this.state = { branchData: "",
        displayComponent:"root",
        templateData: []
    }
}

componentWillMount() {
    axios.get(baseURL + 'workflow')
        .then(function (response) {
            this.setState({
                "templateData": ParseWorkflows(response.data)
            },this.updateState)
        }.bind(this));
}

..............

index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, browserHistory, IndexRoute} from "react-router"
import WorkflowTemplateListDisplay 
from'./template_list_view/workflowTemplateListDisplay.jsx'
import WorkflowTemplateByAgencyDisplay from 
'./template_list_view/workflowTemplateByAgencyDisplay.jsx'
import WorkflowInstanceDisplay from 
'./workflowInstanceView/workflowInstanceDisplay.jsx'
import GraphicalViewDisplay from 
'./workflowGraphicalView/graphicalViewDisplay.jsx'
import WorkflowStepsTemplateDisplay 
from'./templateStepsView/workflowStepsTemplateDisplay.jsx';
import WorkflowSearchByWorkflowIdDisplay from 
'./searchByWorkflowID/workflowSearchByWorkflowIdDisplay.jsx'
import WorkflowTemplateMultiSearchDisplay from 
'./template_list_view/workflowTemplateMultiSearchDisplay.jsx'
import TemplatesHierarchyTableDisplay from 
'./template_list_view/components/TemplatesHierarchyTable.jsx'
import Main from './main.jsx'

ReactDOM.render((
<Router  history={browserHistory}>
    <Route path='/' component={Main}>
        <IndexRoute component={WorkflowTemplateListDisplay}/>
        <Route path='/workflowInstances' component={WorkflowInstanceDisplay}/>
        <Route path='/workflowStepsTemplate' component={WorkflowStepsTemplateDisplay}/>
        <Route path='/pictorialView' component={GraphicalViewDisplay}/>
        <Route path='/workflowTemplateByAgency' component={WorkflowTemplateByAgencyDisplay}/>
        <Route path='/searchByWorkflowID' component={WorkflowSearchByWorkflowIdDisplay}/>
        <Route path='/search' component={WorkflowTemplateMultiSearchDisplay}/>
        <Route path='/treeView' component={TemplatesHierarchyTableDisplay}/>
    </Route>
</Router>), document.getElementById('app'));
Paul B
  • 11
  • 1
  • 1
  • 3
  • Until the baseUrl gets fetched from the api, you can't do any request since your baseUrl is `null`. That's not a good idea. – Lasithe Jul 20 '18 at 10:24
  • This is a special case of this problem http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call . You need either to chain a *promise* of baseURL everywhere you use it or mount components where you use it only after you've got baseURL. – Estus Flask Jul 20 '18 at 11:03
  • A few things, stop using `jsx` extension, is not necessary, you can just use `js` extension for your component files. It is even recommended you do so by facebook/react engineers. Also, your constructor function is missing `props`, but you can just not worry about that if you use ES2016 to refactor initializing state like so: `state = { branchData: "", displayComponent:"root", templateData: [] };` – Daniel Dec 05 '18 at 02:57

0 Answers0