From e3285c4f154d47a1370a02ee1c15270ab21e223b Mon Sep 17 00:00:00 2001 From: Chaiwat Ekkaewnumchai Date: Mon, 2 Sep 2019 11:16:30 -0700 Subject: [PATCH] Convert Flipper plugin "Example" to TypeScript Summary: _typescript_ Reviewed By: passy Differential Revision: D17047622 fbshipit-source-id: ff25bf4355bb42a0754b2b3304a6b5bdc3806909 --- src/plugins/example/{index.js => index.tsx} | 51 +++++++++++---------- src/plugins/example/package.json | 2 +- 2 files changed, 27 insertions(+), 26 deletions(-) rename src/plugins/example/{index.js => index.tsx} (75%) diff --git a/src/plugins/example/index.js b/src/plugins/example/index.tsx similarity index 75% rename from src/plugins/example/index.js rename to src/plugins/example/index.tsx index 18171c3a0..722ef1b5a 100644 --- a/src/plugins/example/index.js +++ b/src/plugins/example/index.tsx @@ -3,23 +3,28 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * @format - * @flow */ import {Button, Input, FlipperPlugin, FlexColumn, styled, Text} from 'flipper'; -import type {Notification} from '../../plugin.tsx'; +import React from 'react'; + type DisplayMessageResponse = { - greeting: string, + greeting: string; +}; + +type Message = { + id: number; + msg: string | null | undefined; }; type State = { - prompt: string, - message: string, + prompt: string; + message: string; }; type PersistedState = { - currentNotificationIds: Array, - receivedMessage: ?string, + currentNotificationIds: Array; + receivedMessage: string | null; }; const Container = styled(FlexColumn)({ @@ -28,7 +33,7 @@ const Container = styled(FlexColumn)({ padding: 20, }); -export default class extends FlipperPlugin<*, State, PersistedState> { +export default class Example extends FlipperPlugin { static defaultPersistedState = { currentNotificationIds: [], receivedMessage: null, @@ -42,43 +47,39 @@ export default class extends FlipperPlugin<*, State, PersistedState> { /* * Reducer to process incoming "send" messages from the mobile counterpart. */ - static persistedStateReducer = ( + static persistedStateReducer( persistedState: PersistedState, method: string, - payload: Object, - ): PersistedState => { + payload: Message, + ) { if (method === 'triggerNotification') { - return { - ...persistedState, + return Object.assign({}, persistedState, { currentNotificationIds: persistedState.currentNotificationIds.concat([ payload.id, ]), - }; + }); } if (method === 'displayMessage') { - return { - ...persistedState, + return Object.assign({}, persistedState, { receivedMessage: payload.msg, - }; + }); } - return persistedState || {}; - }; + return persistedState; + } /* * Callback to provide the currently active notifications. */ - static getActiveNotifications = ( - persistedState: PersistedState, - ): Array => { + static getActiveNotifications(persistedState: PersistedState) { return persistedState.currentNotificationIds.map((x: number) => { return { id: 'test-notification:' + x, message: 'Example Notification', - severity: 'warning', + severity: 'warning' as 'warning', title: 'Notification: ' + x, }; }); - }; + } /* * Call a method of the mobile counterpart, to display a message. @@ -86,7 +87,7 @@ export default class extends FlipperPlugin<*, State, PersistedState> { sendMessage() { this.client .call('displayMessage', {message: this.state.message || 'Weeeee!'}) - .then((params: DisplayMessageResponse) => { + .then((_params: DisplayMessageResponse) => { this.setState({ prompt: 'Nice', }); diff --git a/src/plugins/example/package.json b/src/plugins/example/package.json index be19ba961..c5cac6610 100644 --- a/src/plugins/example/package.json +++ b/src/plugins/example/package.json @@ -1,7 +1,7 @@ { "name": "Example", "version": "1.0.0", - "main": "index.js", + "main": "index.tsx", "license": "MIT", "title": "Example Plugin", "icon": "apps",