---
# System prepended metadata

title: Notifications Feature Design

---

# Notifications Feature Design
```plantuml
@startuml
skinparam componentStyle rectangle
allowmixing
interface Message {
  -string code
  -string|Error data
  -string? source
}
class NotificationService {
  -Subject<Message> onMessage
  +void send(message)
}
component SomeAdapter
component NotificationsReactComponent


SomeAdapter --> NotificationService : use 'send' 'Message'
NotificationService -. Message : 'transfers' 'Message'
NotificationsReactComponent --> NotificationService : use 'onMessage' to watch 'Message'
@enduml
```
## use cases
```typescript=
// ./component/Notifications.tsx
export function Notifications(props:{filters:strings[]}) {
    const notificationService = useInject(NotificationService);
    const [events, setEvents] = useState([]);
    notificationService.onEvent(event=>{
        setEvents(...);
    });
    return <>
        {events.map(event=>{
          return <div key={event.id}>{event.message}</div>
        })}
    </>
}
```
```typescript=
// ./pages/MyPage.tsx
export function MyPage {
    const notificationService = useInject(ANotificationService);
    
    function doAction(fn:()=>Promise<void>|void): void {
        new Promise((resove)=>resolve(fn())).then(()=>{
             notificationService.send({
                 code: DOMAIN_CODE_SMTH_OK
                 data:'I\'m finished here'
                 source: "${22} sdfsdf ${1}"
             })
        }, err => {
             notificationService.send({
                 code:DOMAIN_CODE_SMTH_ERR
                 data: err
             })
        })
    }
    
    return <>
        <button onClick={()=>{
            
            doAction(()=>bussines.doSomething())
            // or by more low-level
            
            try {
                bussines.doSomething()
                notificationService.send({level:'info', message:'I\'m finished here'})
            }
            catch (e) {
                notificationService.send({level:'error', message:'bad things happened'})
            }
            
            
        }}>Save</button>
    </>
}
```
## Notification service
```typescript=
// ./notificatoinService.ts 

export interface IEvent = {
    code: string;
    data: string|Error;
    source?: string;
};

export interface INotificationService {
   readonly onEvent: Subject<IEvent>;
   readonly stream: IObservable<IEvent>;
   send(event: IEvent): void;
}

export class NotificationService implemnets INotificationService {
   public onEvent: Subject<IEvent>;
   public send(event: IEvent): void {
       // ...
   }
}

export const NotificationService = Symbol('NotificationServiceToken')

```
