Components
The following components are available in the UIKit React:
Component name | Description |
---|---|
WeavyProvider | Wrapper component needed for all other components. This should always be the top most component in the Weavy component hierarchy |
MessengerProvider | Wrapper component when you don't use the Messenger component below and instead creating the UI from individual Weavy UI components. Only needed if you want to use a combination of the ConversationList and Conversation components. |
Messenger | A convenient component consisting of both ConversationList and Conversation sub components. This component renders the UI with a left sidebar with all the conversations and the current selected conversation to the right. |
ConversationList | A list of all the available conversastions for the user |
Conversation | The actual conversation with messages and a input form for sending new messages. This component is used to render private Chats and chat rooms |
ConversationBadge | A component showing the number of unread converastions as a badge |
Chat | This is a variant of the Conversation component that you should use to render a contextual Chat. This component expects an uid of the chat app to render |
Posts | A posts app displaying a feed of posts and comments. This is a contextual component. The component expects an uid of the posts app to render |
Files | A files app displaying a uploaded files and linked cloud files. This is a contextual component. The component expects an uid of the files app to render |
Provider components
The <WeavyProvider>
and <MessengerProvider>
components are wrapper components that takes care of common and Messenger functionality respectively. When using the <Messenger>
component,
this component already wraps the <MessengerProvider>
so no need to add that separately.
import { WeavyProvider, MessengerProvider } from "@weavy/uikit-react";
When you use the individual <ConversationList>
, <Conversation>
components, you must wrap these in both the <WeavyProvider>
and <MessengerProvider>
components.
<WeavyProvider client={weavyClient}>
<Messenger />
</WeavyProvider>
Example: When using the Messenger component.
<WeavyProvider client={weavyClient}>
<MessengerProvider>
<ConversastionList />
<Conversastion />
</MessengerProvider>
</WeavyProvider>
Example: When using the individual components.
<WeavyProvider client={weavyClient}>
<Chat uid="my_chat" />
</WeavyProvider>
Example: When using the individual Chat component. No need for MessengerProvider here
<WeavyProvider client={weavyClient}>
<Posts uid="my_feed" />
</WeavyProvider>
Example: When using the Posts component.
Contextual and non-contextual components
The difference between these two similar components are:
- The
<Conversation>
component is non-contextual and is used to render aPrivate Chat
or aChat Room
. A Private Chat is a one-to-one chat and a Chat Room is multi user chat where users are invited. - The
<Chat>
component is used to render a contextual chat. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the Contextual chat can post and read messages. - The
<Posts>
component is contextual. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the post component can create posts and comments. - The
<Files>
component is contextual. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the files component can upload files and post comments.
Contextual components needs to be created and the user needs to be a member of the app before it can be loaded using our frontend libraries. You can use the Web API to init the app on your server side before loading the contextual app from your frontend.
Example: Execute a single request that creates the app (if it does not already exist) with the given uid
identifier. Then the user with the given identifier will be added as a member in that app (if the user is not already a member).
$ curl -H 'Authorization: Bearer {token}' {WEAVY_ENVIRONMENT_URL}/api/apps/init -d '{app: {"uid": "product-chat", "name": "Product Chat", "type": "chat"}, user: {"uid": "johnd"}}'
The request above creates a new Chat app with the unique id 'product-chat'. The user with the user id 'johnd' is added as a member if not already a member.
After the request is sent you can load and display the app using your frontend. For example the Chat
component:
<WeavyProvider client={weavyClient}>
<Chat uid="product-chat" />
</WeavyProvider>
Example: Contextual Chat component.
Layout
The Weavy components will resize and adapt automatically to a flex layout in the container where they are placed.
The <Messenger>
and <Chat>
have predefined overflow scroll styles. If you use other UI components to provide a custom messenger you will need to provide overflow scrolling to the container you are placing the component in by adding overflow-y: scroll
in your CSS.
WeavyClient
When adding a new <WeavyProvider>
component, you must specify a new instance of the WeavyClient
class. The WeavyClient
is responsible for handling the connection to the Weavy environment.
const getToken = useCallback(async (refresh: boolean) => {
// return a generated token from your backend api
let response = await fetch(`/token?&refresh=${refresh}`);
let json = await response.json();
return json.access_token
}, []);
...
const weavyClient = new WeavyClient({
url: "https://example.weavy.io",
tokenFactory: getToken
});
...
<WeavyProvider client={weavyClient}>
...
</WeavyProvider>
THe constructor expects a WeavyClientOptions
with an url
to the Weavy environment, and a tokenFactory
function returning a token for the user. The user token is used in all communication with the Weavy environment and the Weavy Api.
Files app properties
The files app has properties to set the view and sorting of the file list.
- view =
"list" | "grid"
- order =
{ by: "name" | "size" | "modified_at", descending: boolean }
- trashed =
boolean
Example code
This example shows you how you to init and display a Posts component in your React application.
React client code
Example of how to display a Posts component in your React application.
import React, { useState } from 'react';
import { Posts } from '@weavy/uikit-react';
import { useEffect } from 'react';
const MyPostsView = () => {
const [loading, setLoading] = useState(true);;
const [completed, setCompleted] = useState(false);
const contextualId = "my-posts";
useEffect(() => {
async function setupContextualApp() {
var response = await fetch(`/contextual/${contextualId}?type=posts`);
if (response.ok) {
setCompleted(true);
}
setLoading(false);
}
setupContextualApp();
}, [])
if (loading) return <div>Loading contextual posts app...</div>
return (
<>
{completed &&
<div style=>
<div style=>
<Posts uid={contextualId} />
</div>
</div>
}
</>
)
}
export default PostsView;
Node server code
Example of how to initialize a contextual app from you Node server code.
...
app.get('/contextual/:id', async (req, res) => {
// setup contextual app
let response = await fetch(`${config.get("weavy_environment")}/api/apps/init`, {
method: 'POST',
headers: {
'content-type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({ app: { uid: req.params.id, name: req.params.id, type: req.query.type }, user: { uid: req.session.user } })
});
res.end("OK");
});
...