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?