-1

I am new to UI coding and started using react-admin for putting some simple pages. Everything went well and we are able to host pages correctly. But we have noticed random issues where the background image is filling up the entire screen or sometimes the whole page gets reduced to the hamburger menu. I have disabled the registerServiceWorker to stop having my pages in cache. Not sure if this is causing the weird UI behavior.

Zheyuan Li
  • 71,365
  • 17
  • 180
  • 248
Raj
  • 1

2 Answers2

0

I don't know why you get those issues, the description is way too generic and it seems you don't have any idea what the problem can be, probably due to being new to the area. Either way the kind of problem you appear to have is probably related to CSS which is a way give style to your page. But React Admin doesn't use CSS directly, you can use it that way, but for more dynamic way to style the page the Material-ui library uses a thing called JSS to apply the styles.

There are many libraries that are being used together in order to produce React Admin, you should have an understanding of the most important ones in order to do something fancy. My advice to you since you are new, and you pretend to use React Admin, first use what React Admin offers and when you feel comfortable using that components and have a general grasp how the framework works, after that start implementing your own components that don't have a direct relation to React Admin but use some of the same libraries of React Admin.

Also check if you are creating a React Admin app using the <Admin> component or are embedding React Admin in another app since the second is more probable to produce bugs.

Mário Ferreiro
  • 317
  • 3
  • 12
  • Hi Mario. Thanks for the reply. I have built my app based on the example provided and am using the component and just added some basic resources under that. There is no major complexities in it as well. I only enabled the theme provided in the example which is using this color by default. Is there a known issue with theme? – Raj Jul 20 '18 at 19:48
  • I don't think so, but you can find present and past bugs, and feature request [here](https://github.com/marmelab/react-admin). What I advice is check if you browser implements the requires Javascript features, if is compatible with ES6 at least. Check NPM dependencies and see if you are using the required versions for libraries, I find out that hard to be but we never know. And for last you can always try to start a new app from scratch and see if that doesn't cause you problems, and check step by step if your app works. – Mário Ferreiro Jul 22 '18 at 23:35
0

After some debugging, I think i figured out the cause of this issue. I had a custom button to duplicate a row (basically post a create and route to edit page on the new id). For some reason, the rendering of that button seems to have caused this issue inconsistently. The actual button works fine but causes this inconsistent behavior. Below is the code for that button. Is there any issue with the below?: 

export default class DuplicateButton extends Component {

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = ({ redirect: false });
    var redirectPath = '';

}

handleClick = (props) => {
    var
        {
            push, record, resourceName
        } = this.props;
    let tempRecord = record;
    var result = '';
    console.log(this.props);
    var p = restDataProvider(CREATE, this.props.resource + "/" + tempRecord.id, { data: tempRecord }).then(resp => {
        result = resp.data;
        let routePath = '/' + this.props.resource + '/' + result.id;
        console.log(routePath);
        this.redirectPath = routePath;
        this.setState({ redirect: true });
        return result;
    });

}

render() {
    if (this.state.redirect) {
        console.log('Redirect to Edit page');
        return <Redirect push to={this.redirectPath} />;
    }

    return <Button variant="flat" color="primary" label="Duplicate Entry" onClick={this.handleClick}><DuplicateIcon /></Button>;
}
}
Raj
  • 1