[Solved] React :: async route, request promise post multiple

Hi I’ working on a React Single View App, which required to register the device on load. I’m using promise post in async route on root. But I can see in the console that post is calling multiple times.

Here is my route.js

import SplashPage from '../pages/splash.jsx';
import HomePage from '../pages/home.jsx';

import configApp from '../js/config_app';

function generateUniqueString() {
    var ts = String(new Date().getTime()),
        i = 0,
        out = '';
    for (i = 0; i < ts.length; i += 2) {
        out += Number(ts.substr(i, 2)).toString(36);
    }
    return ('prefix' + out);
}

function create_UUID() {
    var dt = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (dt + Math.random() * 16) % 16 | 0;
        dt = Math.floor(dt / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}

let deviceUId = create_UUID();
let deviceMac = generateUniqueString();

var routes = [{
        path: '/',
        async: function(routeTo, routeFrom, resolve, reject) {
            // Router instance
            var router = this;
            // App instance
            var app = router.app;
            // Show Preloader
            app.preloader.show();
            // User ID from request
            // var userId = routeTo.params.userId;

            /**
             * check device registry
             * if not register device on system
             */
            let userDevice = JSON.parse(localStorage.getItem("userDevice"));
            if (!userDevice) {
                let deviceData = {
                    app_id: configApp.appId,
                    room_id: 0,
                    guest_id: 0,
                    hotel_id: configApp.hotelId,
                    device_name: "New Device",
                    device_uid: deviceUId,
                    device_type: "mobile",
                    device_os: app.device.os,
                    device_mac: deviceMac,
                };
                // Simulate Ajax Request
                app.request.promise.post(configApp.Protocol + configApp.RestURI + '/device/', deviceData).then(function(res) {
                    var parseJson = JSON.parse(res.data);
                    var data = parseJson.data;
                    console.log('Load was performed :: ', data);
                    //update localStorage
                    localStorage.setItem('userDevice', JSON.stringify(data));
                }).catch(function(err) {
                    console.log(err.xhr);
                    console.log(err.status);
                    console.log(err.message);
                    app.preloader.hide();
                });
            }
            // Hide Preloader
            app.preloader.hide();

            resolve({
                component: SplashPage,
            });
        },
    },
    {
        path: '/form/',
        component: FormPage,
    },
    {
        path: '/dynamic-route/blog/:blogId/post/:postId/',
        component: DynamicRoutePage,
    },
    {
        path: '/request-and-load/user/:userId/',
        async: function(routeTo, routeFrom, resolve, reject) {
            // Router instance
            var router = this;
            // App instance
            var app = router.app;
            // Show Preloader
            app.preloader.show();
            // User ID from request
            var userId = routeTo.params.userId;
            // Simulate Ajax Request
            setTimeout(function() {
                // We got user data from request
                var user = {
                    firstName: 'Vladimir',
                    lastName: 'Kharlampidi',
                    about: 'Hello, i am creator of Framework7! Hope you like it!',
                    links: [{
                            title: 'Framework7 Website',
                            url: 'http://framework7.io',
                        },
                        {
                            title: 'Framework7 Forum',
                            url: 'http://forum.framework7.io',
                        },
                    ]
                };
                // Hide Preloader
                app.preloader.hide();
                // Resolve route to load page
                resolve({
                    component: RequestAndLoad,
                }, {
                    context: {
                        user: user,
                    }
                });
            }, 1000);
        },
    },
    {
        path: '(.*)',
        component: NotFoundPage,
    },
];

export default routes;

Any different approach?

Unable to solve. On Network tab also I can see that ajax post calls multiple times.

Screen Shot 2020-11-10 at 8.16.15 PM

It will be called each time route is requested/loaded

Is it because I’m using index route?

If I’m using a get promise, I can see that only call at once and not multiple. How is that possible?

What is the best practice to register the device on first time?

@nolimits4web

I’m using different approach now. Everything works as expected. Now I need to load homePage component if index route has context call skipLogin.

Here is my index routes

{
        path: '/',
        async(routeTo, routeFrom, resolve, reject) {
            // Router instance
            var router = this;
            // App instance
            var app = router.app;
            // Show Preloader
            app.preloader.show();
            // User ID from request
            // var userId = routeTo.params.userId;
            /**
             * if context has skipLogin
             * load visitor home page
             */
            let skipLogin = false;
            if (routeTo.context) {
                skipLogin = routeTo.context.skipLogin;
            }
            console.log('skipLogin :: ', skipLogin);
            if (skipLogin) {
                // Simulate Ajax Request
                //page_home_screen API
                app.request.promise.get(configApp.Protocol + configApp.RestURI + '/page_home_screen/', { hotel_id: configApp.hotelId, app_id: configApp.appId, user_auth: 0 }).then(function(res) {
                    var parseJson = JSON.parse(res.data);
                    var data = parseJson.data;
                    console.log('Load was performed :: ', data);
                    // Hide Preloader
                    app.preloader.hide();
                    resolve({
                        component: HomePage,
                    }, {
                        props: {
                            pageTitle: 'ONE App',
                            pageContent: data,
                        },
                    });
                }).catch(function(err) {
                    console.log(err.xhr);
                    console.log(err.status);
                    console.log(err.message);
                    app.preloader.hide();
                });
            } else {
                /**
                 * check user login 
                 * if not login redirect to splash screen
                 */
                let userIsLoggedIn = localStorage.getItem('userIsLoggedIn');
                if (userIsLoggedIn) {
                    // Simulate Ajax Request
                    //page_home_screen API
                    app.request.promise.get(configApp.Protocol + configApp.RestURI + '/page_home_screen/', { hotel_id: configApp.hotelId, app_id: configApp.appId, user_auth: 1 }).then(function(res) {
                        var parseJson = JSON.parse(res.data);
                        var data = parseJson.data;
                        console.log('Load was performed :: ', data);
                        // Hide Preloader
                        app.preloader.hide();
                        resolve({
                            component: HomePage,
                        }, {
                            props: {
                                pageTitle: 'ONE App',
                                pageContent: data,
                            },
                        });
                    }).catch(function(err) {
                        console.log(err.xhr);
                        console.log(err.status);
                        console.log(err.message);
                        app.preloader.hide();
                    });
                } else {
                    /**
                     * check device
                     * if not register the device and load splash page
                     */
                    let userDevice = localStorage.getItem('userDevice');
                    if (!userDevice) {
                        let deviceData = {
                            app_id: configApp.appId,
                            room_id: 0,
                            guest_id: 0,
                            hotel_id: configApp.hotelId,
                            device_name: "New Device",
                            device_uid: deviceUId,
                            device_type: "mobile",
                            device_os: app.device.os,
                            device_mac: deviceMac,
                        };
                        // Simulate Ajax Post
                        //device API
                        app.request.promise.post(configApp.Protocol + configApp.RestURI + '/device/', deviceData).then(function(res) {
                            var parseJson = JSON.parse(res.data);
                            var data = parseJson.data;
                            console.log('Load was performed :: ', data);
                            localStorage.setItem('userDevice', JSON.stringify(data));
                            // Simulate Ajax Request
                            //app_template API
                            app.request.promise.get(configApp.Protocol + configApp.RestURI + '/app_template/', { hotel_id: configApp.hotelId, app_id: configApp.appId, device_id: data.device_id, guest_id: data.guest_id, room_id: data.room_id }).then(function(res) {
                                var parseJson = JSON.parse(res.data);
                                var data = parseJson.data;
                                console.log('Load was performed :: ', data);
                                // Hide Preloader
                                app.preloader.hide();
                                resolve({
                                    component: SplashPage,
                                }, {
                                    props: {
                                        pageTitle: 'Welcome',
                                        pageContent: data,
                                    },
                                });
                            }).catch(function(err) {
                                console.log(err.xhr);
                                console.log(err.status);
                                console.log(err.message);
                                app.preloader.hide();
                            });
                        }).catch(function(err) {
                            console.log(err.xhr);
                            console.log(err.status);
                            console.log(err.message);
                            app.preloader.hide();
                        });
                    } else {
                        // Simulate Ajax Request
                        //app_template API
                        app.request.promise.get(configApp.Protocol + configApp.RestURI + '/app_template/', { hotel_id: configApp.hotelId, app_id: configApp.appId, device_id: userDevice.device_id, guest_id: userDevice.guest_id, room_id: userDevice.room_id }).then(function(res) {
                            var parseJson = JSON.parse(res.data);
                            var data = parseJson.data;
                            console.log('Load was performed :: ', data);
                            // Hide Preloader
                            app.preloader.hide();
                            resolve({
                                component: SplashPage,
                            }, {
                                props: {
                                    pageTitle: 'Welcome',
                                    pageContent: data,
                                },
                            });
                        }).catch(function(err) {
                            console.log(err.xhr);
                            console.log(err.status);
                            console.log(err.message);
                            app.preloader.hide();
                        });
                    }
                }
            }
        },
    }

Here is the SplashPage.jsx and the link to visitor (skipLogin)

import React from 'react';
import { Page, Navbar, Block, List, ListItem, Row, Col, BlockTitle, Link } from 'framework7-react';

function getImageLink(icon, iconX) {
    var iconExt = icon.substr(icon.length - 4);
    var iconNew = '';
    if (iconX == '2x') {
        iconNew = icon.replace(iconExt, '@2x' + iconExt);
    }
    if (iconX == '3x') {
        iconNew = icon.replace(iconExt, '@3x' + iconExt);
    }
    return iconNew;
}

export default class extends React.Component {
    constructor(props) {
        super(props);
        console.log('Splash :: ', props);
        var data = props.pageContent;
        this.state = {
            pageTitle: props.pageTitle,
            imageConfiguration: data.image_configuration
        };
    }
    render() {
        const { pageTitle, imageConfiguration } = this.state;
        var screenBg = getImageLink(imageConfiguration.login_screen_bg, '2x');
        var mainLogo = getImageLink(imageConfiguration.main_logo, '2x');
        var guestLogin = getImageLink(imageConfiguration.guest_login_icon, '2x');
        var visitorLogin = getImageLink(imageConfiguration.visitor_login_icon, '2x');
        return (
            <Page name="home" style={
                {
                    backgroundImage: 'url(' + screenBg + ')',
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                }
            }>
                <Block>
                    <Row>
                        <Col className="text-align-center">
                            <BlockTitle medium>{pageTitle}</BlockTitle>
                        </Col>
                    </Row>
                    <Row>
                        <Col width="20"></Col>
                        <Col width="60">
                            <img className="width-100" src={mainLogo} />
                        </Col>
                        <Col width="20"></Col>
                    </Row>
                </Block>
                <Block className="splashNav">
                    <Row>
                        <Col>
                            <Link
                                noLinkClass
                                href="#"
                                loginScreenOpen="#my-login-screen">
                                <img
                                    src={guestLogin}
                                    className="width-100 elevation-1"
                                    style={
                                        {
                                            borderRadius: '5px',
                                        }
                                    }
                                ></img>
                            </Link>
                        </Col>
                        <Col>
                            <Link
                                noLinkClass
                                href="#"
                                onClick={() => this.$f7router.navigate('/', {
                                    force: true,
                                    context: { skipLogin: true },
                                })}>
                                <img
                                    src={visitorLogin}
                                    className="width-100 elevation-1"
                                    style={
                                        {
                                            borderRadius: '5px',
                                        }
                                    }
                                ></img>
                            </Link>
                        </Col>
                    </Row>
                </Block >
            </Page >
        );
    }
}

I’m checking skipLogin and trying to load the HomePage but dom not changing and it is show the splash screen still.

Please help! Thanks you!

No worries!

Was able to fix it by adding reloadCurrent to onClick

onClick={() => this.$f7router.navigate('/', {
    reloadCurrent: true,
    context: { skipLogin: true },
})}

Thanks