we getting only certain list of values through api and mapping to Itags,
we need to get the next set of items by making an api call. we have used onGetMoreResults(), but this function is not getting triggered. is there a way to achieve this scenarios
<TagPicker
removeButtonAriaLabel='Remove'
selectionAriaLabel='Selected colors'
componentRef={picker}
onResolveSuggestions={filterSelectedTags}
onItemSelected={onItemSelected}
getTextFromItem={getTextFromItem}
pickerSuggestionsProps={pickerSuggestionsProps}
disabled={tagPicker}
inputProps={{
...inputProps,
id: 'picker2',
}}
onEmptyInputFocus={(tagList) => onEmptyInputFocus('', tagList, props.tags)}
onGetMoreResults={getMoreItems}
/>
const getMoreItems = (_filter: string, _selectedItems?: ITag[]): ITag[] => {
//make api call
}
Related
How do I control the rendering of video endpoint in a video conference? I would like to render it in my own way, change the video size and more. Also, I cannot understand, how the IDs are named for the video elements. Are they the same with the endpoint IDs?
To process the video elements yourself, you need to:
first subscribe to remote media added/removed events:
https://voximplant.com/docs/references/websdk/voximplant/endpointevents#remotemediaadded
https://voximplant.com/docs/references/websdk/voximplant/endpointevents#remotemediaremoved
then process the render event:
https://voximplant.com/docs/references/websdk/voximplant/mediarenderer#render
The video elements IDs are not the same as endpoint IDs. The elements IDs are the same name as video track ID. There is no internal way in Voximplant to get the element ID, but you still can get it. Here is a custom function that will allow you to get the IDs:
const getMediaElementIds = (call) => {
return call.getEndpoints().map((endpoint) => {
return endpoint.mediaRenderers.reduce(
(acc, mr) => {
const key = mr.kind === 'audio' ? 'audioElementId' : 'videoElementId';
const id = mr.stream.getTracks()[0]?.id;
return { ...acc, [key]: id };
},
{ endpointId: endpoint.id }
);
});
};
// returns { endpointId: string; videoElementId?: string; audioElementId?: string }[]
And by the way, there are some nuances for Vue.js rendering:
don't place the sdk objects (like client, endpoints, calls etc) into immutable stores like Vuex, Rx.js and so on.
render the MediaRenderer into a container with v-once, so Vue.js does not rerender this part
I'm super new about ngrx and I'm trying to develop an effect to dispatch multiple calls to my API to retrive a child list of objects.
Here my code.
loadMyChildren$ = createEffect (() => this.actions$.pipe(
ofType(SomeActions.loadMyChildren),
switchMap(({parentsObjArr}) => {
const obsList$: Observable<ChildModel>[] = parentsObjArr.result.map(parentsObj => this.childrenService.loadTimeSeries(parentsObj));
let childrenArr: ChildModel[] = [];
const source$ = zip(obsList$);
source$.subscribe((res) =>{
childrenArr = res;
}, err => { console.log(err); });
console.log('childrenArr', childrenArr)
return [
SomeActions.loadChildrenSuccess({childrenArr}),
SomeActionsTwo.loadParentsSuccess({parentsObjArr})
]
}),
catchError((err) => {
return of(SomeActions.loadMyChildrenFailed)
})
)
Unfortunately my effect seem doesn't wait for my API requests complete on "zip" (I tried also combineLatest and forkJoin) before dispatching the actions on the return array... "console.log" of my objects array is always empty and the store, consequently, does not keep any data.
What I'm wrong?
rxjs 6.6.0
angular 13.2.3
It's not good practise to manualy subscribe inside switchMap.
You are right, your code returns action before your API requests completes, you need to manipultate the stream without subscribing inside.
I would refactor your coude, so source$ is returned in switchMap, but its result is maped to desired ngrx actions with props that you wanted.
It would looked something like that:
switchMap(({parentsObjArr}) =>
zip(parentsObjArr.result.map(parentsObj => this.childrenService.loadTimeSeries(parentsObj)))
.pipe(
map(child => [
SomeActions.loadChildrenSuccess({child}),
SomeActionsTwo.loadParentsSuccess({parentsObjArr})
]
)
)
)
I am trying to use AsyncSelect from react-select library.
I have enabled cacheOptions option.
Using below mentioned steps I am seeing an issue with loadOptions
Search for a string test
List of options gets displayed
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires an API with search input tes
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires API with search input te.
I am not sure why loadOptions getting fired in this scenario if I am entering the same search string.
Here is the AsyncSelect
<AsyncSelect
classNamePrefix="select-item"
onChange={ onOptionSelect }
getOptionValue={ item => item.id }
placeholder="Search by Item"
formatOptionLabel={ company => <CompanyWithIcon Item={ Item } /> }
loadOptions={ loadOptions }
styles={ customStyles }
isSearchable
cacheOptions
isClearable
/>
Here is the loadOptions function
const loadOptions = inputValue => searchItem(inputValue);
Can anybody please help?
I think it is happening because you are not using a callback or a promise for loadOptions. The loadOptions should return a promise.
Reference doc -> https://react-select.com/props#async-props says:
loadOptions:
Function that returns a promise, which is the set of options to be used once the promise resolves.
It should be like below:
const loadOptions = (inputValue, callback) => {
setTimeout(() => {
callback(searchItem(inputValue));
}, 1000);
};
I used 'updateEntry' method of ActiveCartService for updating the entry of the Cart. After then 'updateEntry$' effect from the CartEntryEffects class was triggered that returned new action.
updateEntry$: Observable = this.actions$.pipe(
ofType(CartActions.CART_UPDATE_ENTRY),
map((action: CartActions.CartUpdateEntry) => action.payload),
concatMap(payload =>
this.cartEntryConnector
.update(payload.userId, payload.cartId, payload.entry, payload.qty)
// should be my logic with payload
.pipe(
map(() => {
return new CartActions.CartUpdateEntrySuccess({
userId: payload.userId,
cartId: payload.cartId,
});
}),
Which is the proper way to get this payload?
Or can I override this effect or add my logic to it?
It depends what you are trying to do with the payload.
If you want to process it before the details get updated into Commerce, then that is generally handled by connectors & adapters. See https://sap.github.io/spartacus-docs/connecting-to-other-systems/
If you want to reference the updated entry & display it, then you can get hold of an Observable via the ActiveCartService. See for example the AddToCart component (https://sap.github.io/spartacus/components/AddToCartComponent.html#source) which declares cartEntry$: Observable<OrderEntry> and then in ngOnInit() does this.cartEntry$ = this.activeCartService.getEntry(this.productCode)
I have a react-native list populated from firebase. I want to add a search bar on top of the app. Once I start typing, I want that list to only show results related to the search term. Its similar to this: https://www.freecodecamp.org/news/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699/
Only problem is the way my data is typed after its retrieved from firebase, its impossible to use the tutorial above to retrieve that data.
My html code is:
<Toolbar title="Hello World"/>
<Button
title="Add New"
type = "outline"
onPress={this.addItem.bind(this)}
/>
<ListView
dataSource={this.state.itemDataSource}
renderRow={this.renderRow}
/>
My Firebase retrieval code is as follows:
getItems(itemsRef) {
itemsRef.on('value', (snap) => {
let items = [];
snap.forEach((child) => {
items.push({
title: child.val().DESCRIPTION,
text: child.val().BASE,
_key: child.key
});
});
this.setState({
itemDataSource: this.state.itemDataSource.cloneWithRows(items)
});
});
}
I just don't know how to add a search bar that searches the retrieved list and displays only relevant stuff on the list as someone types a word in.
Pease help. I'm guessing the type of the data is what is causing the problem.
Results should look like this App. I built this on AppSheet:
https://www.appsheet.com/start/ab7f8d5d-1adf-4107-bdd8-f7022a1a81f8