Auto-Refresh

Auto-refreshing wall means that the request to the loklak server for the feeds must be sent after every few seconds and adding up new feeds in the media wall as soon as the response is received for a single session. For a nice implementation, it is also necessary to check if the new feeds are being received from the server and consequently, close the connection as soon as no feeds are received as to maintain session singularity. In this blog post, I am explaining how I implemented the auto-refreshing mode for media wall using tools like ngrx/store and ngrx/effects. Flow Chart The flowchart below explains the workflow of how the actions, effects and service are linked to create a cycle of events for auto-refreshing mode. It also shows up how the response is handled as a dependency for the next request. Since effects play a major role for this behaviour, we can say it as the “Game of Effects”. Working Effect wallSearchAction$: Assuming the Query for media wall has changed and ACTION: WALL_SEARCH has been dispatched, we will start from this point of time. Looking into the flowchart, we can see as soon the action WALL_SEARCH is dispatched, a effect needs to be created to detect the action dispatched.This effect customizes the query and sets up various configurations for search service and calls the service. Depending on whether the response is received or not, it either dispatches WallSearchCompleteSuccessAction or WallSearchCompleteFailAction respectively. Moreover, this effect is responsible for changing the route/location of the application. @Effect() wallSearchAction$: Observable<Action> = this.actions$ .ofType(wallAction.ActionTypes.WALL_SEARCH) .debounceTime(400) .map((action: wallAction.WallSearchAction) => action.payload) .switchMap(query => { const nextSearch$ = this.actions$.ofType(wallAction.ActionTypes.WALL_SEARCH).skip(1); const searchServiceConfig: SearchServiceConfig = new SearchServiceConfig();if (query.filter.image) { searchServiceConfig.addFilters(['image']); } else { searchServiceConfig.removeFilters(['image']); } if (query.filter.video) { searchServiceConfig.addFilters(['video']); } else { searchServiceConfig.removeFilters(['video']); }return this.apiSearchService.fetchQuery(query.queryString, searchServiceConfig) .takeUntil(nextSearch$) .map(response => { const URIquery = encodeURIComponent(query.queryString); this.location.go(`/wall?query=${URIquery}`); return new apiAction.WallSearchCompleteSuccessAction(response); }) .catch(() => of(new apiAction.WallSearchCompleteFailAction(''))); Property lastResponseLength: Looking into the flow chart, we can see that after WallSearchCompleteSuccessAction is dispatched, we need to check for the number of feeds in the response. If the number of feeds in the response is more than 0, we can continue to make a new request to the server. On the other hand, if no feeds are received, we need to close the connection and stop requesting for more feeds. This check is implemented using lastResponseLength state property of the reducer which maintains the length of the entities for the last response received. case apiAction.ActionTypes.WALL_SEARCH_COMPLETE_SUCCESS: { const apiResponse = action.payload;return Object.assign({}, state, { entities: apiResponse.statuses, lastResponseLength: apiResponse.statuses.length }); }   Effect nextWallSearchAction$: Now, we have all the information regarding if we should dispatch WALL_NEXT_PAGE_ACTION depending on the last response received. We need to implement an effect that detects WALL_SEARCH_COMPLETE_SUCCESS  keeping in mind that the next request should be made 10 seconds after the previous response is received. For this behaviour, we need to use debounceTime() which emits a value only after certain specified time period has passed. Here, debounce is set to 10000ms which is equal…