How to run a function continuously in RN - react-native

I am trying to create a sound metering app with React Native, but it seems that if I start the metering, which I have as a infinite loop until the user stops it, it hangs the app.
Basically the user taps a button, invokes startMonitor(), then the runMonitor starts and checkSound() does a check for the current decibel level.
The relevant code section here
startMonitor() {
KeepAwake.activate();
this.setState({ monitorStatus: true
}, this.runMonitor );
}
runMonitor() {
while(this.state.monitorStatus) {
if(this.state.beginWait) {
this.wait(5000);
}
if(!this.state.isTransmitting) {
this.checkSound();
}
}
}
Any ideas on how to run a function continuously/infinite until the user cancels it?

You can use setInterval:
startMonitor() {
this.runMonitorIV = setInterval(runMonitor, 1000);
}
runMonitor() {
while(this.state.monitorStatus) {
if(this.state.beginWait) {
this.wait(5000);
}
if(!this.state.isTransmitting) {
this.checkSound();
}
}
}
//called on user event
stopMonitor() {
clearInterval(this.runMonitorIV);
}
(Not sure about your context or scope, but that's the basic idea)
There's also the TimerMixin that clears those timers triggers when a component unmounts.

Related

Why won't my checkbox UI update on the first click, but will update on every click after that?

I have a Jetpack Compose for Desktop UI application that shows a popup with a list of enums, each of which has a checkbox to toggle them:
Sorry for the long code, this is as small a MCVE as I could make of it.
enum class MyEnum {
A, B, C
}
data class MyFilter(val enums: Collection<MyEnum>)
fun main() = application {
Window(onCloseRequest = ::exitApplication) {
App()
}
}
#OptIn(ExperimentalMaterialApi::class)
#Composable
fun App() {
var filter by remember { mutableStateOf(MyFilter(emptyList())) }
MaterialTheme {
var show by remember { mutableStateOf(false) }
if (show) {
val selected = remember { filter.enums.toMutableStateList() }
AlertDialog({ show = false }, text = {
Column {
MyEnum.values().forEach { e ->
Row {
val isSelected by remember { derivedStateOf { e in selected } }
Checkbox(isSelected, { if (isSelected) selected.remove(e) else selected.add(e) })
Text(e.name)
}
}
}
}, buttons = {
Button({
filter = MyFilter(selected.toList())
show = false
}) { Text("OK") }
})
}
Button({ show = true }) { Text("Open") }
}
}
The problem here is, the very first time after opening the dialog, a click on a checkbox will properly update the underlying selected list, but it won't update the UI. So the checkbox doesn't appear to change state. Every click after that will properly update the UI, including the changed state for the previous click.
This happens reliably, every single time the dialog is opened, but only on the first checkbox click.
Why does this happen, and how can I fix it?

How to prevent Vue Snotify confirm from showing multiple instances

I'm pretty new to Vue and Snotify, so please forgive the newb question. I've scanned the docs, and nothing jumps out at me.
Here's the deal: I have a Vue component that deletes files, using a Snotify confirm box. Like this:
destroy() {
this.$snotify.confirm('', 'Delete File?', {
buttons: [
{
text: 'Yes',
action: (toast) => {
axios.delete([API endpoint])
.then(response => {
// destroy the vue listeners, etc
this.$destroy();
// remove the element from the DOM
this.$el.parentNode.removeChild(this.$el);
});
this.$snotify.remove(toast.id);
}
},
{
text: 'No',
action: (toast) => {
this.$snotify.remove(toast.id)
}
}
]
})
}
The problem is that if you click the "Delete" button a second time, another "Delete File?" confirmation appears above the first. Expected behavior is that the second click make the confirmation go away.
Any help you can offer would be greatly appreciated.
this.$snotify.confirm() returns the toast info, which includes an ID that could be passed to this.$snotify.remove() for removal:
export default {
methods: {
destroy() {
if (this._toast) {
this.$snotify.remove(this._toast.id, true /* immediate */)
}
this._toast = this.$snotify.confirm('', 'Delete File?', {/*...*/})
}
}
}
demo

GraphQL [Apollo-Android]: two `.watcher().enqueueAndWatch` creating infinite refresh loop

I'm requesting a list of 'posts' from my server using enqueueAndWatch and it is causing an infinite refresh loop.
The two queries are below:
query GetOrganizationPosts {
user {
organization {
posts {
...post
}
}
}
}
query GetUserPosts {
user {
posts {
...post
}
}
}
fragment post on Post {
id
title
messsage
}
The view model is initialized and the infinite loop occurs when I call refreshPosts() from the posts fragment:
init {
viewModelScope.launch {
networkClient.apolloClient.
query(GetOrganizationPostsQuery())
.watcher().enqueueAndWatch(callback)
networkClient.apolloClient
.query(GetUserPostsQuery())
.watcher().enqueueAndWatch(callback2)
}
}
fun refreshPosts() {
networkClient.apolloClient
.query(GetOrganizationPostsQuery())
.enqueue(null)
networkClient.apolloClient
.query(GetUserPostsQuery())
.enqueue(null)
}
Thanks in advance!
Workaround as described in Apollo-Android pull request: https://github.com/apollographql/apollo-android/issues/2226
Add .responseFetcher(ApolloResponseFetchers.CACHE_ONLY) to any enqueueAndWatch calls. This makes sure watchers don't perform network requests when the cache is updated.

Vue: Emitter isn't working in child when using button click

My emit call is not getting called on my button click. I tried to run a debugger and step through it and it gets triggered but looks like it steps right through and skips it. I'm not sure what the issue is or why it's skipping.
Parent
<step-review #emitgetappdata="getAppData"></step-review>
getAppData: function(data=null) {
debugger
}
Step Review
<button #click="this.clickedButton()">Test</button>
clickedButton: function() {
console.log("reached here");
let data = {
text: "Foo",
}
this.$emit('emitgetappdata', data);
}
You can't use this on view
<button #click="clickedButton()">Test</button>
clickedButton() {
console.log("reached here");
let data = {
text: "Foo",
}
this.$emit('emitgetappdata', data);
}
and your component code to this a bit more clean.
<step-review #emitgetappdata="getAppData"></step-review>
getAppData(data=null) {
debugger
}
Edited after reading some docs :
https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods

Asynchrounous call issue in Angular 5

I am working with Angular5 , I have a big issue (please see the below code)
In simple words it is a asynchronous execution issue, how to reduce this
let confirmData = {
dlgHeader: 'Add',
msgTxt: 'Are you sure to Add Language!!',
eventName: 'locationmanagement_languages_assign'
};
this.confirmService.confirmData = confirmData;
(1) this.confirmationService.setShowConfirm(true);
(2) this.confirmAnchor.createConfirmation(ConfirmationComponent);
this.confirmService.getReturnValue()
.subscribe(
suc => {
if (suc.eventName == 'locationmanagement_languages_assign') {
this.assignLanguage(suc);
}
});
in above (1) line of code is responsible to create confirmation.(i have created custom confirmation component)
inside custom confirmation user can click CONFIRM/CANCEL buttons.
I want to stop (2) line code execution until user click CONFIRM/CANCEL buttons in custom confirmation component.
Now i am using as below in language.component.ts ,, but i am calling the getReturnValue() in ngOnInit().
I dont want to use ngOnInit() to get action from custom confirmation component either it is CONFIRM/CANCEL action
ngOnInit() {
this.getReturnValueEvent();
}
assignLanguageEvent() {
debugger;
this.requestedData = [];
for (let data of this.selectedAssignLanguages) {
this.requestedData.push({
id: data.value.id,
set_value: data.value.setValue
});
}
console.log('Requested Data::', this.requestedData);
let confirmData = {
dlgHeader: 'Add',
msgTxt: 'Are you sure to Add Language!!',
eventName: 'locationmanagement_languages_assign'
};
this.confirmService.confirmData = confirmData;
this.confirmationService.setShowConfirm(true);
this.confirmAnchor.createConfirmation(ConfirmationComponent);
}
getReturnValueEvent() {
this.subscription1 = this.confirmService.getReturnValue()
.subscribe(
suc => {
if (suc.eventName == 'locationmanagement_languages_assign') {
this.assignLanguage(suc);
}
}
);
}