I would like to use the retry property of the observer to try 3 times before it gives up and throws an error. However when I run the following code I get 'retry is not a function'. Any ideas what is going on ?
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
this._log.debug('SecureHttpService#get: ' + url);
let resultObservable = Observable.create((observer) => {
this._log.debug('resultObservable');
this.tryReActivateToken().then(
(result) => {
this._log.debug('resultObservable#then#result: ' + result);
if (result === true) {
let headers = new Headers();
headers.append('Authorization', 'Bearer ' + this.access_token);
headers.append('X-Requested-With', 'XMLHttpRequest');
// headers.append('Accept', 'json');
this._log.debug(this.access_token);
let superGetObs = super.get(url, { headers: headers, withCredentials: true }).retry(3);
superGetObs.subscribe(
(next) => { observer.onNext(next); },
(error) => { observer.onError(error); },
() => { observer.onCompleted(); }
);
} else {
observer.onError(new Error('Could not log you in automatically'));
}
}, (error) => { this._log.debug('resultObservable#then#error: ' + error); observer.onError(error); });
});
return resultObservable;
}
The full error stack: http://pastebin.com/ScrzsNh0
Make sure you import the retry-operator with import "rxjs/add/operator/retry";
Related
I had already written custom API fetch hooks before, but now I have complex API call functions with different features and couldn't wrap my head around how to create a single custom hook and use all of them.
Each of them got different states, methods, wrappers etc some with a single promise some with promise.all()
1st call:
const handleGetReportsList = async () => {
setIsLoading(true);
try {
const response = await axios(reportURL, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
});
setReportsList(response.data);
} catch (err) {
if (axios.isAxiosError(err)) {
console.log(err.response);
notify(
{
width: "auto",
message: `Rapor verileri listelenemiyor.
${err.response?.data.message}
Hata kodu: ${err.response?.status}`,
position: {}
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
setIsLoading(false);
};
2nd call:
const handleGetReportData = async (e: ClickEvent) => {
const validationResult = e.validationGroup.validate();
if (validationResult.isValid) {
setIsLoading(true);
setIsDataGridVisible(false);
try {
const response = await axios(reportURL, {
method: "POST",
data: JSON.stringify(reportParams),
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
});
setReportData(response.data);
setIsDataGridVisible(true);
} catch (err) {
setIsLoading(false);
if (axios.isAxiosError(err)) {
notify(
{
width: "auto",
message: `Rapor verileri listelenemiyor.
Lütfen tekrar deneyin.
Hata kodu: ${err.response?.status}`
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
}
};
3rd call:
const handleGetFilterData = async () => {
setIsLoading(true);
setIsFilterButtonVisible(false);
try {
const response = await axios(filterURL, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
});
// eslint-disable-next-line #typescript-eslint/no-explicit-any
dispatchFilterData(response.data);
setIsFilterButtonVisible(true);
} catch (err) {
if (axios.isAxiosError(err)) {
notify(
{
width: "auto",
message: `Rapor verileri listelenemiyor.
Lütfen tekrar deneyin.
Hata kodu: ${err.response?.data.message}`
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
setIsLoading(false);
};
4th call:
const getDashboardData = async () => {
const apiSettings: AxiosRequestConfig<IApiSettings> = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
};
setIsLoading(true);
try {
const response = await Promise.all([
axios(`${dashboardURL}TOPLAM/${period}/`, apiSettings),
axios(`${dashboardURL}ADET/${period}/`, apiSettings)
]);
const responseData = response.map(item => {
return item.data;
});
setDashboardData(responseData);
} catch (err) {
if (axios.isAxiosError(err)) {
console.log(err.response);
notify(
{
width: "auto",
message: `Özet verileri listelenemiyor.
${err.response?.data.message}
Hata kodu: ${err.response?.status}`,
position: {
offset: "0 -100"
}
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
setIsLoading(false);
};
As the calls are pretty similar I want to create and use hooks.
Cheers
How to define a function 'server.remove' (removing local files) identical to 'server.revert'.
'server.revert' send 'DELETE' request to '/api' with filename in request body.
I do not quite understand how the function should be organized, try something like that, but it does not work:
mounted() {
this.server = {
url: '/api',
remove: (source, load, error, revert) => {
revert(source);
error('oh my goodness');
load();
},
headers: {
Authorization: 'Bearer ' + this.token,
},
};
},
See here for the function signature, so something like this:
this.server = {
remove: (source, load, error) => {
const request = new XMLHttpRequest();
request.open('DELETE', 'url-to-api/' + source);
request.onload = function () {
if (request.status >= 200 && request.status < 300) {
load(request.responseText);
} else {
error('oh no');
}
};
request.send();
},
}
I am looking to download an image stored on a server into my React Native app.
I had a function that looked like this:
public function image(Request $request, $id)
{
$company = Company::find($id);
$filePath = storage_path() . '/app/' . $company->image;
return response()->file($filePath);
}
And it returned nothing I could read within the app when I tried the following function:
setCompany = async () => {
let company = await AsyncStorage.getItem('currentCompany');
company = JSON.parse(company);
if (company.image !== null) {
let image = await getCompanyPicture({company_id: company.id});
console.log('Here: ', image);
// This is blank, react native returns a warning about data not being of a readable type
}
this.setState({company});
};
I am able to get the image in base_64 using this method:
public function image(Request $request, $id)
{
$company = Company::find($id);
$file_path = storage_path('/app/' . $company->image);
if (file_exists($file_path)) {
$fileData = file_get_contents($file_path);
$fileEncode = base64_encode($fileData);
return response()->json(['status' => 'success', 'data' => ['file' => $fileEncode, 'file_path' => $file_path]]);
}
return response()->json(['status' => 'failure', 'data' => ['file' => null, 'file_path' => $file_path]]);
}
Here is my Axios method too just in case:
export const sendRequest = async (url, data, token, method) => {
let headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Method': 'POST, GET, DELETE, PUT',
};
if (typeof token !== 'undefined' && token !== 'undefined' && token.length) {
headers.Authorization = 'Bearer ' + token;
}
if (method === 'get' && data) {
url +=
'?' +
Object.keys(data)
.map((value) => {
return value + '=' + data[value];
})
.join('&');
data = null;
}
return await axios({
headers: headers,
method: method ? method : 'post',
url: url,
data: data,
})
.then((response) => {
return response;
})
.then((json) => {
return json.data;
})
.catch((error) => {
console.error(error);
if (
error.message !== 'Network Error' &&
error.response.status !== 500 &&
error.response.status !== 413
) {
return error.response.data;
} else if (error.message === 'Network Error') {
return {
status: 'error',
message: 'Unable to connect to server',
};
} else if (error.response.status === 500) {
return {
status: 'error',
message: 'Internal Server Error',
};
} else if (error.response.status === 413) {
return {
status: 'error',
message: 'The file(s) size is too large',
};
} else {
return {
status: 'error',
message: error.message,
};
}
});
};
If anyone could comment on the performance impact of using base_64 instead of the straight file download that would also be helpful
But ultimately I would like a solution for handling the Laravel response()->file() if possible (which I'll use if base_64 is less efficient)
I'm not sure about RN code syntax, but I've ready code with jQuery+poorJS, which looks like this:
$.ajax({
url: "load-image-url", // URL FOR GET REQUEST
cache:false,
xhr: function() { // ACTUALLY THIS PART CAN BE USED AND CUSTOMIZED BY YOU
let xhr = new XMLHttpRequest();
xhr.responseType= 'blob'
return xhr;
},
success: function(data) {
let url = window.URL || window.webkitURL;
$('#image').attr('src', url.createObjectURL(data));
},
error: function(err) {
// console.log(err);
}
}).fail(function() {
$('#ss_product_image').attr('src', "default-image-url.jpg");
});
In my example I've used GET request (but you can try to modify it and test if you want, honestly IDK about that).
This is the back-end part:
public function image(Request $request, $id)
{
// HERE YOU NEED TO GET YOUR IMAGE (using $id or/and $request params) CONTENT FROM SOMEWHERE YOU WANT
$content = <CONTENT>;
return response()->make($content, 200, [
'Content-Type' => (new \finfo(FILEINFO_MIME))->buffer($content),
'Content-length' => strlen($content),
]);
}
I was able to solve this issue by using rn-blob-fetch.
The files are downloaded into a temp cache which can then be accessed for previewing and saving.
this is my function now:
downloadFiles = async (isReply) => {
let {enquiry, reply} = this.state;
this.setState({isLoading: true});
const token = await AsyncStorage.getItem('userToken');
let filePaths = [];
let fileCount = 0;
let files = enquiry.files;
if (isReply) {
files = reply.files;
}
const dirToSave =
Platform.OS == 'ios'
? RNFetchBlob.fs.dirs.DocumentDir
: RNFetchBlob.fs.dirs.DownloadDir;
new Promise((resolve, reject) => {
for (var i = 0; i < files.length; i++) {
var id = files[i].file_id;
var name = files[i].file.file_name;
var ext = extension(name);
const configOptions = Platform.select({
ios: {
appendExt: ext,
fileCache: true,
title: name,
path: `${dirToSave}/${name}`,
},
android: {
useDownloadManager: true,
notification: true,
mediaScannable: true,
fileCache: true,
title: name,
path: `${dirToSave}/${name}`,
},
});
var mime = content(ext);
let headers = {
'Content-Type': mime,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Method': 'POST, GET, DELETE, PUT',
Authorization: 'Bearer ' + token,
};
RNFetchBlob.config(configOptions)
.fetch('GET', BASE_API + '/enquiries/files/download/' + id, headers)
.then(async (response) => {
RNFetchBlob.fs.writeFile(
configOptions.path,
response.data,
'base64',
);
filePaths.push({
title: configOptions.title,
path: configOptions.path,
ext: extension(configOptions.title),
mime,
});
fileCount++;
if (fileCount >= files.length) {
resolve('Download Successful!');
}
})
.catch((error) => {
console.log('File Download Error: ', error.message);
reject('Download Failed');
});
}
})
.then((data) => {
this.setState({isLoading: false, filePaths});
})
.catch((error) => {
console.log('Download Promise Error: ', error);
this.setState({isLoading: false});
});
};
previewDocument = (id) => {
let {filePaths} = this.state;
if (Platform.OS == 'ios') {
RNFetchBlob.ios.openDocument(filePaths[id].path);
} else if (Platform.OS == 'android') {
RNFetchBlob.android.actionViewIntent(
filePaths[id].path,
filePaths[id].mime,
);
}
};
The notification is showing fine, but when I click on it, or any of the actions, nothing happens. I see no logging, no error messages, but the notification does close (although it closes even when I comment out the event.notification.close()).
I've tried using the Chrome debugger, and I can set a break point in the code that shows the notification, but all breakpoints within the notificationclick handler fail to pause execution.
I've spent days trying to get this to work and I'm at my wits' end.
const auth = firebase.auth();
const functions = firebase.functions();
const done = functions.httpsCallable("done");
const snooze = functions.httpsCallable("snooze");
self.addEventListener("notificationclick", event => {
console.log("notificationclick", event);
const uid = auth.currentUser.uid;
const { id, url } = event.notification.data;
event.notification.close();
event.waitUntil(() => {
switch (event.action) {
case "done":
console.log("Done");
return done({ uid, id });
case "snooze1":
console.log("Snooze 1 Hour");
return snooze({ uid, id, hours: 1 });
case "snooze24":
console.log("Snooze 1 Day");
return snooze({ uid, id, hours: 24 });
default:
console.log("Open App");
return clients
.matchAll({
includeUncontrolled: true,
type: "window"
})
.then(clientList => {
for (let i = 0; i < clientList.length; i++) {
let client = clientList[i];
if (url[0] === "#") {
if (client.url.endsWith(url) && "focus" in client) {
return client.focus();
}
} else {
if (
client.url.replace(/#.*$/, "") === url &&
"focus" in client
) {
return client.focus();
}
}
}
if (clients.openWindow) {
return clients.openWindow(location.origin + url);
}
});
}
});
});
firebase
.messaging()
.setBackgroundMessageHandler(({ data: { title, options } }) => {
options = JSON.parse(options);
options.actions = [
{ action: "done", title: "Done" },
{ action: "snooze1", title: "Snooze 1 Hour" },
{ action: "snooze24", title: "Snooze 1 Day" }
];
return self.registration.showNotification(title, options);
});
Hi Could you try below code and see if this is getting called-
self.addEventListener('notificationclick', function (event) {
event.notification.close();
var redirectUrl = null;
var tag = event.notification.tag;
if (event.action) {
redirectUrl = event.action
}
if (redirectUrl) {
event.waitUntil(async function () {
var allClients = await clients.matchAll({
includeUncontrolled: !0
});
var chatClient;
for (const client of allClients) {
if (redirectUrl != '/' && client.url.indexOf(redirectUrl) >= 0) {
client.focus();
chatClient = client;
break
}
}
if (chatClient == null || chatClient == 'undefined') {
chatClient = clients.openWindow(redirectUrl);
return chatClient
}
}().then(result => {
if (tag) {
//PostAction(tag, "click")
}
}))
}
});
Edited-
Attaching both js files. it is working at my end.
firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
var config = {
apiKey: "your api key",
authDomain: "you firebase domain",
databaseURL: "your firbase db url",
projectId: "your project id",
storageBucket: "",
messagingSenderId: "sender id"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload.data);
var notificationTitle = payload.data.Title;
var notificationOptions = {
body: payload.data.Body,
icon: payload.data.Icon,
image: payload.data.Image,
action: payload.data.ClickAction
};
console.log("strated sending msg" + notificationOptions);
return self.registration.showNotification(notificationTitle,notificationOptions);
});
self.addEventListener('notificationclick', function (event) {
console.log('On notification click: ', event.notification);
event.notification.close();
var redirectUrl = null;
if (event.notification.data) {
if (event.notification.data.FCM_MSG) {
redirectUrl = event.notification.data.FCM_MSG.data ? event.notification.data.FCM_MSG.data.click_action : null
} else {
redirectUrl = event.notification.data ? event.notification.data.click_action : null
}
}
console.log("redirect url is : " + redirectUrl);
if (redirectUrl) {
event.waitUntil(async function () {
var allClients = await clients.matchAll({
includeUncontrolled: true
});
var chatClient;
for (var i = 0; i < allClients.length; i++) {
var client = allClients[i];
if (client['url'].indexOf(redirectUrl) >= 0) {
client.focus();
chatClient = client;
break;
}
}
if (chatClient == null || chatClient == 'undefined') {
chatClient = clients.openWindow(redirectUrl);
return chatClient;
}
}());
}
});
self.addEventListener("notificationclose", function (event) {
event.notification.close();
console.log('user has clicked notification close');
});
application.js file :
/// <reference path="scripts/jquery-3.3.1.js" />
try {
var config = {
apiKey: "your api key",
authDomain: "you firebase domain",
databaseURL: "your firbase db url",
projectId: "your project id",
storageBucket: "",
messagingSenderId: "sender id"
};
firebase.initializeApp(config);
if ('serviceWorker' in navigator && 'PushManager' in window) {
console.log('Service Worker and Push is supported');
navigator.serviceWorker
.register('/firebase-messaging-sw.js')
.then((swReg) => {
firebase.messaging().useServiceWorker(swReg);
askForPermissioToReceiveNotifications();
})
.catch(function (error) {
console.error('Service Worker Error', error);
window.alert("Service Worker Error" + error);
})
} else {
console.warn('Push messaging is not supported');
window.alert("Push messaging is not supported " + (navigator.serviceWorker));
}
const askForPermissioToReceiveNotifications = async () => {
try {
const messaging = firebase.messaging();
console.log(messaging);
await messaging.requestPermission();
const token = await messaging.getToken();
if (token !== null || token !== 'undefined') {
await sendDeviceTokenToServerSide(token);
}
console.log('Got token : ' + token);
messaging.onMessage(function (payload) {
console.log('onMessage: ', payload);
setTimeout(() => {
navigator.serviceWorker.ready.then(function (registration) {
var notificationTitle = payload.notification.title;
var notificationOptions = {
body: payload.notification.body,
data: payload.data,
icon: payload.notification.icon,
image: payload.data.Image,
requireInteraction: payload.notification.requireInteraction,
tag: payload.notification.tag,
click_action: payload.data.click_action,
requireInteraction: true
};
registration.showNotification(notificationTitle, notificationOptions);
},50)
});
});
}
catch (e) { console.log('error in getting token: ' + e); window.alert("error in getting token: " + e); }
}
function sendDeviceTokenToServerSide(token) {
$.ajax({
type: 'POST',
url: '/Home/StoreToken',
timeout: 5000000,
data: { token: token },
success: function (success) {
console.log("device token is sent to server");
},
error: function (error) {
console.log("device error sending token to server : " + error);
window.alert("device error sending token to server : " + error);
}
});
}
} catch (e) {
window.alert("error: " + e);
}
function GetFcmUserToken(messaging) {
messaging.onTokenRefresh(function () {
messaging.getToken()
.then(function (refreshedToken) {
console.log('Token refreshed.');
return refreshedToken;
})
.catch(function (err) {
console.log('Unable to retrieve refreshed token ', err);
showToken('Unable to retrieve refreshed token ', err);
});
});
}
self.addEventListener('notificationclick', function (event) {
const clickedNotification = event.notification;
// Do something as the result of the notification click
const promiseChain = clients.openWindow(clickedNotification.data.Url);
event.waitUntil(promiseChain);
});
This code inside service worker js worked fine for me on chrome Desktop and Android.
I have the following function in my WIX website, which is making a request to an external API:
export function current_pull(page, per_page, filter_mode, view_id) {
const url_request = URL + page + '&per_page=' + per_page + '&filtermode=' + filter_mode + '&view_id=' + view_id;
return fetch(url_request, {
method: 'get',
headers: {
'X-AUTH-TOKEN': API_KEY,
'X-SUBDOMAIN': SUBDOMAIN
},
}).then(function(response) {
if (response.status >= 200 && response.status < 300) {
console.log("current answered");
var items = response.json();
console.log(items);
} else {
console.log("there was an error" + response.statusText);
}
})
.catch( (err) => {
console.log(err);
});
}
The console.log(items); outputs:
Promise {
_c: [],
_a: undefined,
_s: 0,
_d: false,
_v: undefined,
_h: 0,
_n: false }
How do I get the actual API response
response.json() is also a Promise so in this case you need to change your code as follows:
response.json().then(items => console.log(items))
You may check further documentation here: Body.json()