Merge pull request #484 from jdegand/notification-readme

docs: notification readme rework

docs/src/content/docs/challenges/ngrx/7-power-effect.md

@@ -10,23 +10,32 @@ sidebar:
 
 ## Information
 
-NgRx Effect is a very powerful library developed by the NgRx team. Effects subscribe to a HOT Observable and listen to any event dispatched from any place inside the application.
+This application exhibits local and global state confusion. Right now, a notification service is used to update the component lists of students and teachers. You need to add schools to this service, but you _cannot_. The school component uses its _own_ local state inside a `ComponentStore`. Thus, you are unable to dispatch an action in the notification service that the school component can respond to (remember, component stores do not have `actions`). So, how can we get around these issues?
 
-But what we often forget is that Effects can subscribe to ANY observable. Which means we can wrap a hot observable inside an effect and had logic in it.
+Injection tokens and NgRx effects can greatly help.
 
-In this exercice, we will find a way to create a very powerful, scalable and maintanable push messages listener. Currently, the code is located inside a single file with a if else condition to send the push data to the right location. This code is not very scalable since we need to add more and more else, and so not very maintainable since the piece of code will become bigger and bigger.
+`NgRx Effects` is a very powerful library developed by the NgRx team. Effects subscribe to a HOT Observable and listen for all events dispatched inside an application. `NgRx Effects` can subscribe to _any_ observable, which means we can wrap a hot observable inside an effect and add logic to it. You don't have to worry about the local or global state. Although you should be mindful of bad practices, when you refactor this application, you should make a determination of what should be a part of the local state and what should be a part of the global state.
 
-Also, we load the whole file at startup even if we haven't loaded some part of the application (lazy loading); and so we don't need to listen or update that part of the store. We need to decouple that logic.
+In this exercise, we will need to find a way to create a very powerful, scalable, and maintainable push message listener.
 
 ### Step 1
 
-create an injection token to hide the push service implementation.
+Create an injection token to `inject` the push service inside each component. Injection tokens are very powerful. If you are unfamiliar with them, you may want to complete the [Injection token challenge](https://angular-challenges.vercel.app/challenges/angular/39-injection-token) first. This [article](https://netbasal.com/the-hidden-power-of-injectiontoken-factory-functions-in-angular-d42d5575859b) is also a great resource.
+
+_Eliminate_ the notification service. It is not extensible. Testing (not required for this challenge) the notification service would also be overly complicated. You would need to test each branching scenario. Injection tokens can easily be mocked.
+
+Since the notification service is global, all component lists update whether or not, a user is on that route. We need to decouple that logic. The notification messages should display only on their respective routes.
 
 ### Step 2
 
-create one ngrx effect, or component store effect for each push type, and implement your logic.
+Create one ngrx effect, or component store effect for each push type, and implement your logic.
 
 ### Step 3
 
-load your effect only when necessary.
+Show an [Angular Material snackbar](https://material.angular.io/components/snack-bar/overview) notification when an add event happens. Make each notification distinct.
-the application contain a root route, a lazy loaded route and a component with a local state (implemented with Component store).
+
+### Step 4
+
+Load your effect only when necessary.
+
+The application contains a root route, a lazy loaded route, and a component with a local state (implemented with `ComponentStore`).