79023ee190
Reviewed By: bhamodi Differential Revision: D33331422 fbshipit-source-id: 016e8dcc0c0c7f1fc353a348b54fda0d5e2ddc01
122 lines
2.8 KiB
TypeScript
122 lines
2.8 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {
|
|
createState,
|
|
Layout,
|
|
PluginClient,
|
|
usePlugin,
|
|
useValue,
|
|
} from 'flipper-plugin';
|
|
import {Button, Input, message, Typography} from 'antd';
|
|
import React from 'react';
|
|
|
|
const {Text} = Typography;
|
|
|
|
type DisplayMessageResponse = {
|
|
greeting: string;
|
|
};
|
|
|
|
/**
|
|
* Events that can be received FROM the client application
|
|
*/
|
|
type Events = {
|
|
triggerNotification: {
|
|
id: number;
|
|
};
|
|
displayMessage: {
|
|
msg: string;
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Methods that can be invoked ON the client application
|
|
*/
|
|
type Methods = {
|
|
displayMessage(payload: {message: string}): Promise<DisplayMessageResponse>;
|
|
};
|
|
|
|
export function plugin(client: PluginClient<Events, Methods>) {
|
|
const receivedMessage = createState('');
|
|
const prompt = createState(
|
|
'Type a message below to see it displayed on the mobile app',
|
|
);
|
|
const nextMessage = createState('');
|
|
|
|
/*
|
|
* Process incoming messages
|
|
*/
|
|
client.onMessage('triggerNotification', ({id}) => {
|
|
client.showNotification({
|
|
id: 'test-notification:' + id,
|
|
message: 'Example Notification',
|
|
severity: 'warning' as 'warning',
|
|
title: 'Notification: ' + id,
|
|
});
|
|
});
|
|
|
|
client.onMessage('displayMessage', ({msg}) => {
|
|
receivedMessage.set(msg);
|
|
});
|
|
|
|
/*
|
|
* Call a method of the mobile counterpart, to display a message.
|
|
*/
|
|
async function sendMessage() {
|
|
if (client.isConnected) {
|
|
try {
|
|
const response = await client.send('displayMessage', {
|
|
message: nextMessage.get() || 'Weeeee!',
|
|
});
|
|
prompt.set(response.greeting || 'Nice');
|
|
nextMessage.set('');
|
|
} catch (e) {
|
|
console.warn('Error returned from client', e);
|
|
message.error('Failed to get response from client ' + e);
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
sendMessage,
|
|
prompt,
|
|
nextMessage,
|
|
receivedMessage,
|
|
};
|
|
}
|
|
|
|
export function Component() {
|
|
const instance = usePlugin(plugin);
|
|
const prompt = useValue(instance.prompt);
|
|
const nextMessage = useValue(instance.nextMessage);
|
|
const receivedMessage = useValue(instance.receivedMessage);
|
|
|
|
return (
|
|
<Layout.Container pad center>
|
|
<Layout.Container pad gap width={400}>
|
|
<Text>{prompt}</Text>
|
|
<Input
|
|
placeholder="Message"
|
|
value={nextMessage}
|
|
onChange={(event) => {
|
|
instance.nextMessage.set(event.target.value);
|
|
}}
|
|
/>
|
|
<Button
|
|
onClick={() => {
|
|
instance.sendMessage();
|
|
}}>
|
|
Send
|
|
</Button>
|
|
{receivedMessage && <Text> {receivedMessage} </Text>}
|
|
</Layout.Container>
|
|
</Layout.Container>
|
|
);
|
|
}
|