Reactions - Connected reactions view
The ConnectedReactionsView component renders all existing reactions for given post/comment/etc.. as well as the ConnectedReactionPicker to add more reactions.
Usage
Import the component in your React app as follows:
import { ReactionStore, ConnectedReactionsView, State, MemoryReactionsStore, ReactionServiceClient } from '@atlaskit/reactions';
import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
// Config object for the emoji resource
const config: EmojiResourceConfig = {
singleEmojiApi: {
getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId',
securityProvider: () => ({
headers: {
'User-Context': '{{token}}',
Authorization: 'Bearer {{token}}',
},
})
},
optimisticImageApi: {
getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId/path',
securityProvider: () => ({
headers: {
'User-Context': '{{token}}',
Authorization: 'Bearer {{token}}',
},
})
},
providers: [
{
url: 'https://emoji-example/emoji/standard',
},
{
url: 'https://emoji-example/emoji/site-id/site',
securityProvider: () => ({
headers: {
Authorization: 'Bearer {{token}}',
},
}),
},
]
};
const apiConfig = {
baseUrl: 'http://www.example.org',
// optional, generate token from asap, check \`pf-emoji-service\` for more info
authHeader: 'Bearer token',
};
// Create a client object fetching the reactions data from the specified url
const client = new ReactionServiceClient(apiConfig.baseUrl, apiConfig.authHeader);
// Define the initial state object
const intialState: State = {
reactions: {},
flash: {}
};
// Define the store object that will handle all the reactions data (get/set/remove) and the API calls to the server
const store = new MemoryReactionsStore(client, intialState, {
subproduct: 'atlaskit',
});
// Define an emoji resource object instance (EmojiResource implements the EmojiProvider interface) that will be passed as prop to the ConnectedReactionsView component
const emojiResource = new EmojiResource(config); //See warning below
/**
* fetch from all the providers in the config object and cache the results (see EmojiResource for more info).
* Note: this is a one time fetch, so if you want to fetch from the same providers again, you need to create a new EmojiResource instance. Furhermore, you'll need to handle for a failed fetch and retry requests if your app logic requires this.
*/
emojiResource.fetchEmojiProvider();
// Retrieve your ari and containerAri values from the server
const ari = 'ari:cloud:owner:demo-cloud-id:item/1';
const containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
const emojiProvider = new EmojiResource(config);
// Render the component in your React app
ReactDOM.render(
<ConnectedReactionsView
store={store}
containerAri={containerAri}
ari={demoAri}
emojiProvider={Promise.resolve(emojiResource)}
/>
container,
};There should be only one instance of EmojiResource in your application
Make sure EmojiResource is initialised only once to avoid performance issues using useMemo.
Connected Reactions View
"ConnectedReactionsView" with a built in memory store and different emoji populated and several are selected.
"ConnectedReactionsView" with miniMode for add reaction button
"allowAllEmojis" prop - Show the "more emoji" selector icon for choosing emoji icons beyond the default list of emojis (defaults to DEFAULT_REACTION_EMOJI_IDS)
"ConnectedReactionsView" with allowAllEmojis prop set to true (Select custom emojis from the picker instead of just a pre-defined list)
"ConnectedReactionsView" with allowAllEmojis flag set is not provided or false
"pickerQuickReactionEmojiIds" prop - emojis shown for user to select from the picker popup when the reaction add button is clicked
"ConnectedReactionsView" with non-empty pickerQuickReactionEmojiIds array populated a single item
"ConnectedReactionsView" with empty pickerQuickReactionEmojiIds array (shows the full picker selector)
"quickReactionEmojis" prop - emojis that will be shown in the the primary view even if the reaction count is zero and no emojis were created on the post/reply yet
"ConnectedReactionsView" with quickReactionEmojis array without any emoji (undefined or empty array) added to the container|ari item
"ConnectedReactionsView" with quickReactionEmojis array with some quick emoji icons selections to choose
"ConnectedReactionsView" with large emoji picker, emojiPickerSize could be small, medium or large (default to medium).
"allowUserDialog" prop - enables a link within the reaction tooltip to show a full user list associated with all reactions
Connected reactions with reactions dialog enabled
"allowUserDialog" prop with callbacks - enables a link within the reaction tooltip to show a full user list associated with all reactions with event callbacks shown
Connected reactions with reactions dialog enabled and callbacks shown as alert dialogs
"ConnectedReactionsView" with a built in memory store and particle emojis enabled.
ConnectedReactionsView type
containerAri string required
Wrapper id for reactions list
ari string required
Individual id for a reaction
store union required
Reference to the store. @remarks This was initially implemented with a sync and Async versions and will be replaced with just a sync Store in a future release (Please use only the sync version)
One of getReactions required function containerId, aris => undefinedtoggleReaction required function containerAri, ari, emojiId, onSuccess => undefinedaddReaction required function containerAri, ari, emojiId, onSuccess => undefinedgetDetailedReaction required function containerAri, ari, emojiId, onSuccess => undefinedgetState required => reactions object required [key: string] required One of status required ReactionStatus.notLoaded, status required ReactionStatus.loading, status required ReactionStatus.readyreactions arrayType required Arrayari string required containerAri string required emojiId string required count number required reacted boolean required users arrayType Arrayid string required displayName string required profilePicture path string required accountId string optimisticallyUpdated boolean , status required ReactionStatus.errormessage string required flash object required [key: string] object required [emojiId: string] boolean required particleEffectByEmoji object required [key: string] object required [emojiId: string] boolean required onChange required callback => undefinedremoveOnChangeListener required callback => undefinedsetCreateAnalyticsEvent createAnalyticsEvent => undefined, PromisegetReactions required function containerId, aris => undefinedtoggleReaction required function containerAri, ari, emojiId, onSuccess => undefinedaddReaction required function containerAri, ari, emojiId, onSuccess => undefinedgetDetailedReaction required function containerAri, ari, emojiId, onSuccess => undefinedgetState required => reactions object required [key: string] required One of status required ReactionStatus.notLoaded, status required ReactionStatus.loading, status required ReactionStatus.readyreactions arrayType required Arrayari string required containerAri string required emojiId string required count number required reacted boolean required users arrayType Arrayid string required displayName string required profilePicture path string required accountId string optimisticallyUpdated boolean , status required ReactionStatus.errormessage string required flash object required [key: string] object required [emojiId: string] boolean required particleEffectByEmoji object required [key: string] object required [emojiId: string] boolean required onChange required callback => undefinedremoveOnChangeListener required callback => undefinedsetCreateAnalyticsEvent createAnalyticsEvent => undefinedparticleEffectByEmojiEnabled boolean
Optional boolean to control if particle animation on reactions appear
onReactionSuccess function
Callback function when a reaction is successfully added
function action, ari, emojiId, count => undefined