# 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') ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up