Showing Webhook URL to Users

Question

I generated a connector app with Yeoman Generator for Microsoft Teams using yo teams command.

When I use below code at src\client\msteamsConnector\MsteamsConnectorConfig.tsx I can see the webhook url at console.

import * as React from "react";
import { Provider, Flex, Header, Dropdown, ShorthandCollection, DropdownItemProps } from "@fluentui/react-northstar";
import { useState, useEffect, useRef } from "react";
import { useTeams } from "msteams-react-base-component";
import * as microsoftTeams from "@microsoft/teams-js";


/**
 * Implementation of the msteamsConnector Connector connect page
 */
export const MsteamsConnectorConfig = () => {

    microsoftTeams.initialize();

    microsoftTeams.settings.getSettings((setting: any) => {
        console.log(setting.webhookUrl);
    });

    return (
            <Flex fill={true}>
                <Flex.Item>
                    <div>

                    </div>
                </Flex.Item>
            </Flex>
    );
};

What I actually want to do is showing user's webhook url on connector configuration page. But when I try it with below code it doesn't work:

import * as React from "react";
import { Provider, Flex, Header, Dropdown, ShorthandCollection, DropdownItemProps } from "@fluentui/react-northstar";
import { useState, useEffect, useRef } from "react";
import { useTeams } from "msteams-react-base-component";
import * as microsoftTeams from "@microsoft/teams-js";


/**
 * Implementation of the msteamsConnector Connector connect page
 */
export const MsteamsConnectorConfig = () => {

    microsoftTeams.initialize();

    let var1;

    microsoftTeams.settings.getSettings((setting: any) => {
        console.log(setting.webhookUrl);
        var1 = setting.webhookUrl;
    });

    return (
            <Flex fill={true}>
                <Flex.Item>
                    <div>
                    {var1}
                    </div>
                </Flex.Item>
            </Flex>
    );
};

It is probably an easy question but I am not experienced on front-end technologies and couldn't find a way to fix this. How can I show users' webhook url to themselves?

Answer 1

Try the code below

import * as React from "react";
import { Provider, Flex, Header, Dropdown, ShorthandCollection, DropdownItemProps } from "@fluentui/react-northstar";
import { useState, useEffect, useRef } from "react";
import { useTeams } from "msteams-react-base-component";
import * as microsoftTeams from "@microsoft/teams-js";


/**
 * Implementation of the msteamsConnector Connector connect page
 */
export const MsteamsConnectorConfig = () => {

    microsoftTeams.initialize();

    const [webhookUrl, setWebhookURL] = React.useState("");

    microsoftTeams.settings.getSettings((setting: any) => {
        console.log(setting.webhookUrl);
        setWebhookURL(setting.webhookUrl);
    });

    return (
            <Flex fill={true}>
                <Flex.Item>
                    <div>
                    {webhookUrl}
                    </div>
                </Flex.Item>
            </Flex>
    );
};