@forge/ui-confluence

forge-ui-confluence

A package of helpers for interacting with Confluence

content-properties

Allows interacting with Confluence content properties.

Note permissions apply to interacting with content properties, for the page being accessed. So it is impacted by the user being used to interact with Confluence (is app or request user).

Example usage:

import Forge, { render, Fragment, Text, Button, useAction, useProductContext } from "@forge/ui";
import { contentProperties } from '@atlasian/forge-ui-confluence';

export type AppState = {
    count: number;
}

const KEY_PREFIX = 'counter';

const App = () => {
    const { contentId, localId } = useProductContext(); 
    const contentProps = contentProperties(contentId, api.asApp().requestConfluence);

    const key = `${KEY_PREFIX}-${localId}`;

    const initialAppState = async (): Promise<AppState> => {
        const countProp = await contentProps.read(key);
        const count: number = countProp && (countProp.value as number) || 0;
        return {
            count,
        };
    }

    const updateCount = async (oldState: AppState, action: string): Promise<AppState> => {
        switch (action) {
            case 'modify':
                await contentProps.modify(key, (prev) => ((prev as number || 0) + 1));
                return initialAppState();
            case 'replace':
                await contentProps.replace(key, oldState.count + 1);
                return initialAppState();
            case 'delete':
                await contentProps.delete(key);
                return initialAppState();
            case 'refresh':
                return initialAppState();
        }
        return oldState;
    }

    const [appState, doAction] = useAction<AppState, string>(updateCount, initialAppState);
    
    return (
        <Fragment>
            <Text>Current value {appState.count}</Text>
            <Button text="Add one (modify)" onClick={() => { doAction('modify'); }} />
            <Button text="Add one (replace)" onClick={() => { doAction('replace'); }} />
            <Button text="Reset data (delete)" onClick={() => { doAction('delete'); }} />
            <Button text="Refresh (read)" onClick={() => { doAction('refresh'); }} />
        </Fragment>
    );
};

export const run = render(<App />);