You will need:
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
We need to create a bridge between Weavy and Superblocks.
REST APIWeavyAPIWY_BACKEND_URL as Base URLAuthentication, select Bearer Token.Token and click CreateWY_API_*****************WY_BACKEND_URLwith the URL to your Weavy backend.WY_API_***************** with an API key for your Weavy backend.You can find this information in your Weavy account.
You haven't selected an API key. If you do - code snippets, scripts and files you download will automatically be updated with API key and backend URL.
We need to connect the app with the Rest API we created to get an access token from Weavy for the signed-in Superblocks user, this is going to be used later for our custom component.
For this, we need to Add Backend API
Add Backend API and selectJavaScript Function and name the step GetUser
return Global.user;WeavyAPI
UpsertWeavyUserPUT and paste /api/users/{{GetUser.output.id}} in the URL fieldJSON Body copy and paste below;{
"email" : "{{ GetUser.output.email }}",
"name" : "{{ GetUser.output.name }}"
}WeavyAPI
GetWeavyAccessTokenPOST and paste /api/users/{{GetUser.output.id}}/tokens in the URL fieldJavaScript Function and name the step Return
return {
access_token: GetWeavyAccessToken.output.access_token,
url: "WY_BACKEND_URL"
};Replace the WY_BACKEND_URLwith the URL to your Weavy backend.
You can find this information in your Weavy account.
GetWeavyTokenRun the API. If successful, you should get a response containing the current user's access token and URL to the Weavy backend in JSON format on the Return step.
Create a new local directory for your Superblocks resources & navigate into that directory.
Next is to initialize Superblocks, and for that we need the URL for your Superblocks app.
superblocks init APP_URL -m latest-editsAPP_URL with the URL for your Superblocks app.apps/[MY_APPLICATION_DIRECTORY]With the app directory set up, let’s create the component.
superblocks components createFor display name set Weavy Feeds and machine-readable name set weavy_feeds
Weavy has a dedicated UIKit for React, which includes regular React components and additional React hooks for easy configuration and usage.
npm install @weavy/uikit-reactOpen the config.ts file in the components/weavy folder. Replace properties and events (should be empty) with the code snippet below.
properties: [
{
path: "weavy_url",
dataType: "string",
propertiesPanelDisplay: {
label: "WeavyUrl",
controlType: "js-expr",
defaultValue: "GetWeavyToken.response.url",
},
isExternallyReadable: true,
isExternallySettable: true,
},
{
path: "token",
dataType: "string",
propertiesPanelDisplay: {
label: "Token",
controlType: "js-expr",
defaultValue: "GetWeavyToken.response.access_token",
},
isExternallyReadable: true,
isExternallySettable: true,
},
{
path: "uid",
dataType: "string",
propertiesPanelDisplay: {
label: "ContextId",
controlType: "text",
},
isExternallyReadable: true,
isExternallySettable: true,
},
],
events: [
{
label: "On Token Expired",
path: "onTokenExpired",
},
],Open the component.tsx file in the components/weavy folder. Replace all code with the snippet below.
import { useState } from "react";
import {
useSuperblocksContext,
useSuperblocksIsLoading,
} from "@superblocksteam/custom-components";
import { type Props, type EventTriggers } from "./types";
import { useWeavy, WyPosts } from "@weavy/uikit-react";
export default function Component({ weavy_url, token, uid }: Props) {
const weavyStyle = {
display: "flex",
height: "100%",
width: "100%",
};
const weavy = useWeavy({});
const isLoading = useSuperblocksIsLoading();
const {
events: { onTokenExpired },
} = useSuperblocksContext<Props, EventTriggers>();
if (weavy && weavy_url && token) {
weavy.url = weavy_url;
weavy.tokenFactory = async (refresh: boolean) => {
if (refresh) {
console.log("onTokenExpired: " + token);
onTokenExpired();
}
return token;
};
}
return (
<>
{isLoading ? (
<div>Loading...</div>
) : uid && token ? (
<WyPosts style={weavyStyle} uid={uid} />
) : (
<div>Set the UID</div>
)}
</>
);
}
superblocks components watchNow it's time to add the component to your app;
Add Components and search for Weavy Feeds, drag it into the appContextId to feeds-{{ Table1.selectedRowIndex }} (this assumes the table has the name Table1 we added in step 3) Now, we want to configure an event in case the access token expires;
On Token ExpiredRun APIs and select GetWeavyTokenonSuccess and select Set component property.token as the property.{{ GetWeavyToken.response.access_token }}We now have a complete Superblocks app running using Weavy Feeds. Click around in the table and see the Feed get updated enabling contextual collaboration.
Now, imagine that in your app!
To access live chat with our developer success team you need a Weavy account.