Convert plugin to Sandy

Reviewed By: passy

Differential Revision: D28964502

fbshipit-source-id: 76322dc7aec09497f6ba7e4dfb1af8f0318837ca

desktop/plugins/public/example/index.tsx

@@ -7,112 +7,115 @@
  * @format
  */
 
-import {Button, Input, FlipperPlugin, FlexColumn, styled, Text} from 'flipper';
+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;
 };
 
-type Message = {
+/**
-  id: number;
+ * Events that can be received FROM the client application
-  msg: string | null | undefined;
+ */
-};
+type Events = {
-
+  triggerNotification: {
-type State = {
+    id: number;
-  prompt: string;
-  message: string;
-};
-
-type PersistedState = {
-  currentNotificationIds: Array<number>;
-  receivedMessage: string | null;
-};
-
-const Container = styled(FlexColumn)({
-  alignItems: 'center',
-  justifyContent: 'space-around',
-  padding: 20,
-});
-
-export default class Example extends FlipperPlugin<State, any, PersistedState> {
-  static defaultPersistedState = {
-    currentNotificationIds: [],
-    receivedMessage: null,
   };
-
+  displayMessage: {
-  state = {
+    msg: string;
-    prompt: 'Type a message below to see it displayed on the mobile app',
-    message: '',
   };
+};
+
+/**
+ * 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('');
 
   /*
-   * Reducer to process incoming "send" messages from the mobile counterpart.
+   * Process incoming messages
    */
-  static persistedStateReducer(
+  client.onMessage('triggerNotification', ({id}) => {
-    persistedState: PersistedState,
+    client.showNotification({
-    method: string,
+      id: 'test-notification:' + id,
-    payload: Message,
+      message: 'Example Notification',
-  ) {
+      severity: 'warning' as 'warning',
-    if (method === 'triggerNotification') {
+      title: 'Notification: ' + id,
-      return Object.assign({}, persistedState, {
-        currentNotificationIds: persistedState.currentNotificationIds.concat([
-          payload.id,
-        ]),
-      });
-    }
-    if (method === 'displayMessage') {
-      return Object.assign({}, persistedState, {
-        receivedMessage: payload.msg,
-      });
-    }
-    return persistedState;
-  }
-
-  /*
-   * Callback to provide the currently active notifications.
-   */
-  static getActiveNotifications(persistedState: PersistedState) {
-    return persistedState.currentNotificationIds.map((x: number) => {
-      return {
-        id: 'test-notification:' + x,
-        message: 'Example Notification',
-        severity: 'warning' as 'warning',
-        title: 'Notification: ' + x,
-      };
     });
-  }
+  });
+
+  client.onMessage('displayMessage', ({msg}) => {
+    receivedMessage.set(msg);
+  });
 
   /*
    * Call a method of the mobile counterpart, to display a message.
    */
-  sendMessage() {
+  async function sendMessage() {
-    if (this.client.isConnected) {
+    if (client.isConnected) {
-      this.client
+      try {
-        .call('displayMessage', {message: this.state.message || 'Weeeee!'})
+        const response = await client.send('displayMessage', {
-        .then((_params: DisplayMessageResponse) => {
+          message: nextMessage.get() || 'Weeeee!',
-          this.setState({
-            prompt: 'Nice',
-          });
         });
+        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);
+      }
     }
   }
 
-  render() {
+  return {
-    return (
+    sendMessage,
-      <Container>
+    prompt,
-        <Text>{this.state.prompt}</Text>
+    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) => {
-            this.setState({message: event.target.value});
+            instance.nextMessage.set(event.target.value);
           }}
         />
-        <Button onClick={this.sendMessage.bind(this)}>Send</Button>
+        <Button
-        {this.props.persistedState.receivedMessage && (
+          onClick={() => {
-          <Text> {this.props.persistedState.receivedMessage} </Text>
+            instance.sendMessage();
-        )}
+          }}>
-      </Container>
+          Send
-    );
+        </Button>
-  }
+        {receivedMessage && <Text> {receivedMessage} </Text>}
+      </Layout.Container>
+    </Layout.Container>
+  );
 }

desktop/plugins/public/example/package.json

@@ -22,7 +22,8 @@
     "prepack": "flipper-pkg lint && flipper-pkg bundle --production"
   },
   "peerDependencies": {
-    "flipper": "*",
+    "antd": "*",
+    "flipper-plugin": "*",
     "flipper-pkg": "*"
   }
 }