focus-notifications-updated
v1.0.9
Published
Notification Center extension for focus
Downloads
1
Readme
Focus notifications
This repository stands for the Notification center of FOCUS. It needs an API in order to be functionnal.
First see it in action
Be indulgent the notification center has not been designed by a graphist and a style work will be performed for the next release. The goal of the first release was to have a functional component with an almost stable API for both back-end API and component API.
Icon with counter
The notification receiver
Notifications Panel
Display the date
On hover the action is displayed
Notification model
uuid
the notification's identifiertitle
the notification's title (text)content
the notification's content (raw text)creationDate
the notification's creation datetype
the notification's type, it's up to you but it can be an external application or your own application module.sender
who send the notification (not displayed for now)targetUrl
where will the notification root the usen on a click on iticon
icon of the notification displayed
API
The notification center will need an API to be able to work.
- GET
notifications/
will try to load all the notifications from the server - DELETE
notifications/{uuid}
whereuuid
is the identifier of the notification to concider READ - DELETE
notifications
where theids
to delete are given as body part of the request.
How to start using it
The notification center is really easy to plug in you own application.
- install it:
npm i -S focus-notifications-updated
- use it using on of the two two options:
- browser:
- use the file from
node_modules/focus-notifications-updated/dist/focus-notifications-updated.js
FocusNotifications
will be available in thewindow
- use the file from
- webpack or browserify and then you can use:
- a simple
import NotificationCenter from 'focus-notifications-updated'
- or a
const NotificationCenter = require('focus-notifications-updated')
- a simple
- then use it with
<NotificationCenter />
(it will import all the notification center and display the icon)
- browser:
In a Focus App the easiest way to use it is to inject it into the heater using the following boilerplate code.
import React from 'react';
import dispatcher from 'focus-core-updated/dispatcher';
import NotificationCenter from 'focus-notifications-updated';
export default () => {
dispatcher.handleViewAction({
data: {
barContentRightComponent: {
component: (props) => {
return <NotificationCenter config={{rootURL:'http://localhost:9999/x/notification'}} onSingleClick={url => console.log('navigate', url)} />
}
}
},
type: 'update'
});
}
How does it work under the hood ?
Components structure
+-- ConnectedNotificationCenter
| +-- NotificationCenter
| | //The stateless notification center component
| | +-- NotificationCenterIcon
| | // The icon with a counter to display in your application bar
| | +-- NotificationCenterReceiver
| | // The receiver is in charge of displaying the new notifications when the panel is cloed and display them for a small amout of time (`dismissTimerDuration`)
| | | +-- NotificationReceived
| | | // The notification received is displayed by the notification receiver for (`dismissTimerDuration`)
| | +-- NotificationCenterPanel
| | | // The panel which is displayed when the use clicks on the notification center icon
| | | // It is composed of sevral groups of notifications each with a title and a list (by default grouped by time period)
| | +-- NotificationAdd
| | | // A simple add component in order to add notification in the panel (not displayed by defaults)
| | +-- NotificationGroup
| | | // A group of notification is composed of a list and a title
| | | +-- NotificationGroupTitle
| | | // The title of the group
| | | +-- NotificationList
| | | // The list of notifications in the group²
| | | +-- Notification
| | | // The uniq notification (see model for more information)(icon | title + content | date or read action on hover)
+--
State
The NOTIFICATION CENTER state can be representing as follows. It mixes ui state and data state. All the components are stateless and connected direcled to part of the store.
{
isFetching, // Is the notification center fetching data
isOpen, // Is the panel open
notificationReceiver: { // State of the receiver
hasFetchedOnce // Has the notifications benn fetched once
notificationsReceived // An object containing all the notifications.
// Marked with `displayed: true` when displayed.
},
notificationList, // An array containing all the raw notifications
visibilityFilter, // Which filter is activated (by default date)
}
Customization
The NotificationCenter
can be customized with the following props:
apiRootURL
notificationURL
the notification part of the URL, by default it is${apiRootURL}/notifications
pollingTimer
the duration between two refreshdismissTimerDuration
the duration between the display and the dismiss of the notification received without the notification center being open.useCredentials
totrue
to use credentials and send cookies over AJAX requests
You also have to provide the prop onSingleClick
to the notification center which is the function called when you click on a notification. You then have to decide what you do with it knowing that you will have the url.
Launch the example
In order to launch the example you just have to clone this repository and perform an npm install
then npm run start
and the example shoud be available on localhost:3000
with hot reload. If you need an API please read the next section.
Launch a fake server to try it without implementing your own API.
In order to launch the mocked API you just have to clone this repository and perform an npm install
then npm run api
and your API shoud be available on localhost:9999
.
Thanks for using the module, don't hesitate to report any bug or open an issue if you have a question.