How do I set up services and controllers to communicate effectively? - javascript

I am creating a search and filter application for rooms. The user is able to search for a room name (e.g. Conference Room 101) and also able to add filters to narrow down their search (e.g. capacity = 6). I am trying to figure out a good solution of how to setup my services and controllers and have come up with the following solution:
The filterService gets updated by the filterCtrl through the UI and broadcasts('run:search'). This then triggers the searchResultsCtrl to ask searchResultsService for updated searchResults. The same process happens when the user types into the search field (searchFieldCtrl is updated, then updates searchFieldService).
Once searchResultsService receives the request, it gets all the rooms from roomService, applies the filters using applyFilters inside filterService, then gets the searchField and filters out the remaining rooms.
Is this a good solution using broadcasts or is there a better solution that I am missing?
Edit: I've added a workflow diagram for the filters. The same workflow happens for searchField but updates searchFieldCtrl and searchFieldService.

Related

Reactive approach + Subject service in angular

iam trying to use reactive approach in my angular app, but i am not quiet sure, that i am using it correctly. So i have a few questions to clarify it.
In my app i have global status service(its subject service), which holds some basic state of the app - month and workload id selected by user(user can switch it in navbar).
On market page i display offers, which user can apply for. To get data i need, iam using observables from market service with async pipe - no manual subscription.
Here is part of market service:
export class MarketService {
//subject with updates
private prefChangesSubj=new Subject<MarketOffer>();
//observable which loads data from API, everytime user changes status.
get loadedEvents(){
return this.statusService.appStatus.pipe(
switchMap(status=>this.getOffers(status.selectedMonth)),
shareReplay({refCount:true}));
}
//observable consumed by component - loaded Events + changes made by user
get events(){
return this.loadedEvents.pipe(
switchMap(initEvents=>this.prefChangesSubj.asObservable().pipe(
startWith(initEvents),
scan((events:{offers:MarketOffer[],dayPrefs:MarketOffer[],month:Date},update:MarketOffer)=>{
....
return events;
}
}
getOffers(date:Date){
return this.httpClient.get(....);
}
And now my questions:
Is it Ok, to have these combined observables(loadedEvents, events) in service? Or they should be combined in component?
How to handle errors when iam using async pipe? For example in loadedEvents getter, iam using switchmap to call getOffers, which gets data from API. How to handle error if http call fails? I can use catchError, but than component wouldnt be notified about error. But i must catch this potential error cause otherwise it will break the whole observable and new data wont be loaded later. How to solve this problem?
Is the approach to create combined observable from loadedEvents and changes subject correct? Or how it should be done using reactive approach?
I have searched for articles on this topic, but most of them doesnt cover problems like error handling. So i would be grateful even for links to some good articles or example apps, so i can read more about this.
thx and sorry for long post :)

Looping with Firestore querying [Web/Javascript]

How would I go about setting up a loop to query through my Firestore database structure? I don't believe I'm allowed to post pictures or links yet, so I'll try to give some path examples here. Note that there is a lot more to it than these examples.
Rating->Arrow->Arrow-Rating->(user ID)->(data fields)show_name, user_id, rating
Rating->Arrow->Arrow-Rating->(different user ID)->(data fields)show_name, user_id, rating
......
Rating->Flash->Flash-Rating->(user ID)->((data fields)show_name, user_id, rating<br />
......
To give a quick rundown of what this is all about, I'm trying to develop a mock site (with functionality) for a project, where I can display user created information (user info is created from a concurrently developed Android application) such as ratings.
Basically what I'm trying to do is get and display the average rating for each show, by getting each 'rating' field from each user in the respective "Rating" paths... i.e., getting a user rating from each show (Show-Rating->User ID/(data fields)), going to the next user from the same show, and then going to the next show and doing the same.
I'm just not entirely sure how to start going about this.
I suggest you use a cloud function that listens for changes in the ratings node. Use OnUpdate listener
Store every movie rating in its own node, and only query that node for the rating
This will reduce a lot of computation on the client side and will also be more efficient
Use this guide that describes a distributed counter

React Native - OneSignal Push Notifications concept setup with conditioning

I have created a school app which shows the students about the class if it is going to take place or not (Like substitute plan).
In the app, students have two options in the settings, first to select the class (I send the selected class as a tag in OneSignal) and then to select the courses they have in that class (The courses are stored in app local storage in an array).
Now I use these settings that the student has set (the class and the courses) to pass it as a parameter in my API to get the filtered results, and it is also working good.
The problem is just now how should I notify the students when there is a new result or an update?
I did notifications setup only for classes and it is working, first I compare the results and if there is any new result in the new and previous state, the students selected that class will be notified.
But now I also want to apply the course's condition, that if the student has selected any courses then my server side (server side is in PHP) should first check for an update of the selected class and then only send the students the notification which has selected that course, and if the student has selected many courses and there are more than one update for the selected courses only one notification should be sent.
Many Thanks in Advance! I hope I was able to explain it.
as far as i understand u want to select a subset of students dynamically. can we register all students for notif and then call the onesignal api on a subset on the fly?

Angular - initiate a response when data loads/changes

Relative Angular newbie here, and I am wrestling with what would seem like something most applications need:
Watching a model/data and doing something when that model is hydrated and/or has a state change.
Use case would be, when a user logs in (user model gets initiated) a complimentary directive/controller sees the state change, and then requests out to the backend to get a list of this users corresponding data elements (ie Notifications, emails, friends, etc)
Ive parsed through StackOverflow and such, and it always appears that a shared service is the way to go, however I never find a definitive answer about how the directives are to watch the state change. Some suggest a broadcast/watch while others say that is a bad pattern.
Our app currently does employ a shared UserService, which contains model representation of a User (data and simple methods is fullName())
This service also has a subscription hook that directives can subscribe to
onLogin: (fn) ->
$rootScope.$on userService::login, fn
and the use is:
UserService.onLoad(myFunction)
When the UserService loads the User, it then broadcasts userService::login and all the listeners are run. Hence everyone that shares the UserService can subscribe and respond to a User logging in.
This all works. But I was thinking there must be a built in Angular way that the directives can just know about the state change and then do myFunction (ie make additional data calls)
Thoughts and feeling would be extremely appreciated!

Changing a Meteor collection subscription for all clients

I am developing a webapp in which I'd need one client, associated with the admin, to trigger an event (e.g., a new value selected in a dropdown list) which in turns will tell all the other connected clients to change the subscription, possibly using a parameter, i.e., the new selected value.
Something along the lines of
Template.bid.events
"change .roles": (e, tpl) ->
e.preventDefault()
role = tpl.$("select[name='role']").val()
Meteor.subscribe role
Of course this works for the current client only.
One way I thought would be keeping a separate collection that points a the current collection to be used, so the clients can programmatically act on that. It feels cumbersome, thou.
Is there a Meteor-way to achieve this?
Thanks
In meteor, whenever you have a problem that sounds like: "I need to synchronize data across clients", you should use a collection. I realize it seems like overkill just to send one piece of data, but I assure you it's currently the path of least resistance.
There are ways you can expose pseudo-collections which don't actually write to mongo, but for your use case that really sounds like overkill - new Mongo.Collection is the way to go.
You can use streams to setup a simple line of communication between connected clients and the server. It doesn't store data in MongoDB. Just let all connected clients listen to a stream and switch subscriptions when a new message comes in with the subscription name. Make sure only your client associated to your admin can push messages to the stream.
Available package: https://atmospherejs.com/lepozepo/streams
Examples: http://arunoda.github.io/meteor-streams/

Categories

Resources