initializing flagsmith library inside a function not working - react-native

I am trying to use this in my reactjs application: https://docs.flagsmith.com/clients/javascript/
The way it is initalized is as follows:
flagsmith
.init({
environmentID: Config.FLAGSMITH_ENVIRONMENT_ID
})
.then(() => {
flagsmith.startListening(1000);
})
.catch((error) => {
console.log(error)
});
this one works well but I want to wrap it in a function and initalize it from one component only so I did:
function initFlagSmith(){
flagsmith
.init({
environmentID: Config.FLAGSMITH_ENVIRONMENT_ID
})
.then(() => {
flagsmith.startListening(1000);
})
.catch((error) => {
console.log(error)
});
}
but that doesn't work with error u.getItem undefined. Looking at flagsmith, i see u.getItem but also AsyncStorage has the method as well.
any help?
Here is a repo: https://github.com/iconicsammy/flagsmithissue

This was down to a typo, raised a PR here. https://github.com/iconicsammy/flagsmithissue/pull/1

Related

TypeError: this.$eventBus is not a function at Proxy.mounted

I am doing migration from vue2 to vue3 and because event emitter($on) moved from vue3, I am getting this error. To avoid this I installed tiny-emitter (https://www.npmjs.com/package/tiny-emitter) but error didnt change after I applied it. Here is the version of my application when it was in vue2:
mounted() {
this.$eventBus().$on('open-dropdown', () => {
this.isDropOpen = !this.isDropOpen;
});
}
And here is vue3 version:
import emitter from 'tiny-emitter/instance';
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args),
mounted() {
this.$eventBus().$emit('open-dropdown', () => {
this.isDropOpen = !this.isDropOpen;
});
},
}
even I added tiny-emitter, like I said I am getting the same error. So what do I do wrong?

Huawei Location Kit for React Native, addFusedLocationEventListener method doesn't trigger callback

Setup the huawei location kit for getting device position overtime when apps in use, followed the setup from https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides-V1/config-agc-0000001050197382-V1
we don't have real huawei device, we're using cloud debugging
Try implement to watch the gps location overtime with all these syntax
// ------ Parent ------
// this put on the parent useEffect
HMSLocation.LocationKit.Native.init()
.then(() => console.log('----------Success Initialize----------'))
.catch((err) => alert(err.message))
// ------ Child ------
const stopWatchingLocation = () => {
if (hasHms) {
HMSLocation.FusedLocation.Events.removeFusedLocationEventListener(
(res: LocationResult) => console.log('remove add listener', res),
)
}
}
const startWatchingLocation = async () => {
if (hasHms) {
HMSLocation.FusedLocation.Native.requestLocationUpdatesWithCallbackEx(
hwGeolocationOptions,
)
.then((res) => console.log('success request', res))
.catch((error) => console.log('failed request', error))
HMSLocation.FusedLocation.Events.addFusedLocationEventListener(
(res: LocationResult) => console.log('result', res.lastHWLocation)
)
}
}
// implementation of add & remove event listener
useEffect(() => {
startWatchingLocation() // inside here invoke addFusedLocationEventListener
return stopWatchingLocation // inside here invoke, cleanup function removeFusedLocationEventListener
}, [])
The code successfully invoke the init, requestLocationUpdatesWithCallbackEx, but console log from addFusedLocationEventListener never invoke
Already turn on hms core app permission for location, hasPermission also returned true
Tried the locationRequest options from problem with react native #hmscore/react-native-hms-location comments, still not working
How we can fix these??
I think it might be a usage issue. The function of addingFusedLocationEventListener is to add FusedLocationEvent Listener. This function is triggered only when FusedLocationEvent happen.
In your description, delete removeFusedLocationEventListener after addFusedLocationEventListener, the added listener is also deleted.
In addition, you are advised to use independent functions instead of directly defining them in input parameters.
handleLocationUpdate = (locationResult) => { console.log(locationResult); this.setState({ locationCallbackResult: locationResult }); }
requestLocationCallbackWithListener = () => {
HMSLocation.FusedLocation.Native.requestLocationUpdatesWithCallbackEx(locationRequest)
.then((res) => this.setState({ reqCode: res.requestCode }))
.catch((err) => alert(err.message));
HMSLocation.FusedLocation.Events.addFusedLocationEventListener(this.handleLocationUpdate);
this.setState({ autoUpdateEnabled: true });
};

AsyncStorage.removeItem is not removing the item

There are so many questions available and I have tried almost about 12 different ways but none are working. The most efficient one is:
async function removeItemValue(key) {
try {
await AsyncStorage.removeItem(key);
return true;
}
catch (exception) {
return false;
}
}
Then I'm calling it as:
useEffect(() => {
removeItemValue('#cartInfo');
}, []);
I've tried putting it outside of useEffect hook but still no effect. What am I doing wrong?
UPDATE:
Tried this as well but didn't work:
useEffect(() => {
removeItemValue('#cartInfo').then(() => { console.log('removed') })
}, []);
Also tried
useEffect(() => {
AsyncStorage.removeItem('#cartInfo', () => {
AsyncStorage.getItem('#cartInfo').then((res) => {
console.log("RES IS: " + res);
})
})
}, []);
Still no luck. I'm using v1.12.1 of #react-native-community/async-storage
As we discussed in chat, AsyncStorage.removeItem was actually working, and the issue is that setItem was being called too often, so that the value was replaced before being read later in getItem.

How Can I pass params with an API client to vue-head?

I am passing params from my API to vue-head but every time I do that it send me undefined in the head this is the code:
export default {
data: () => ({
errors: [],
programs: [],
}),
methods: {
getProgram() {
this.api.http.get(`videos/program/${this.programSlug}`)
.then(response => {
this.programs = response.data
})
.catch(error => {
this.errors = error
});
}
},
head: {
title: function() {
return {
inner: this.programs.name,
separator: '|',
complement: 'Canal 10'
};
}
}
}
any idea what I am doing wrong with my code??
First verify you are fetching the information correctly. Use console log and go to network tab and verify you are fetching the data correct, you might have to comment out vue-head. But what I think is that the problem might be due to vue-head rendering before the api call finishes then no data is being passed.
If you are using vue-router this can be easily solved with beforeRouteEnter() hook. But if not! apparently vue-head has an event that you can emit to update the component after render.
I haven't tried this but it should work. you can add the function below to your methods and call it after the promise is resolved i.e in the then closure.
methods: {
getProgram() {
this.api.http.get(`videos/program/${this.programSlug}`)
.then(response => {
this.programs = response.data
this.$emit('updateHead')
})
.catch(error => {
this.errors = error
});
}
}

Laravel Echo.join working only Echo.channel and Echo.private not working

I am using laravel 5.4 and pusher for event broadcasting. I create a private channel "chatroom".
Echo.join('chatroom') /// Work Well
.listen('MessagePosted', (e) => {
this.messages.push({
body: e.message.body
});
});
But this is not working with Channel and Private...
Echo.channel('chatroom') OR
Echo.private('chatroom') //// Not Working
Getting following error
You need to put this inside mounted() method. Because error answered that .here is not a function
mounted(){
Echo.private('chat')
.listen('ChatEvent', (e) => {
console.log(e);
});
//Make function for joining and leaving for any users
Echo.join('chat')
.here((users) => {
console.log(users)
})
.joining((user) => {
console.log(user.name)
})
.leaving((user) => {
console.log(user.name)
});
}
And if you make private chat , then in routes/channels.php , you've to define/register a channel named chat like this -
Broadcast::channel('chat', function($user){
return ['name' => $user->name]; //Return data as your need
});
Hope, it will help someone.