fc9ed65762
Summary:
Quick notes:
- This looks worse than it is. It adds mandatory parentheses to single argument lambdas. Lots of outrage on Twitter about it, personally I'm {emoji:1f937_200d_2642} about it.
- Space before function, e.g. `a = function ()` is now enforced. I like this because both were fine before.
- I added `eslint-config-prettier` to the config because otherwise a ton of rules conflict with eslint itself.
Close https://github.com/facebook/flipper/pull/915
Reviewed By: jknoxville
Differential Revision: D20594929
fbshipit-source-id: ca1c65376b90e009550dd6d1f4e0831d32cbff03
117 lines
2.7 KiB
TypeScript
117 lines
2.7 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its 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 {Button, Input, FlipperPlugin, FlexColumn, styled, Text} from 'flipper';
|
|
import React from 'react';
|
|
|
|
type DisplayMessageResponse = {
|
|
greeting: string;
|
|
};
|
|
|
|
type Message = {
|
|
id: number;
|
|
msg: string | null | undefined;
|
|
};
|
|
|
|
type State = {
|
|
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,
|
|
};
|
|
|
|
state = {
|
|
prompt: 'Type a message below to see it displayed on the mobile app',
|
|
message: '',
|
|
};
|
|
|
|
/*
|
|
* Reducer to process incoming "send" messages from the mobile counterpart.
|
|
*/
|
|
static persistedStateReducer(
|
|
persistedState: PersistedState,
|
|
method: string,
|
|
payload: Message,
|
|
) {
|
|
if (method === 'triggerNotification') {
|
|
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,
|
|
};
|
|
});
|
|
}
|
|
|
|
/*
|
|
* Call a method of the mobile counterpart, to display a message.
|
|
*/
|
|
sendMessage() {
|
|
this.client
|
|
.call('displayMessage', {message: this.state.message || 'Weeeee!'})
|
|
.then((_params: DisplayMessageResponse) => {
|
|
this.setState({
|
|
prompt: 'Nice',
|
|
});
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Container>
|
|
<Text>{this.state.prompt}</Text>
|
|
<Input
|
|
placeholder="Message"
|
|
onChange={(event) => {
|
|
this.setState({message: event.target.value});
|
|
}}
|
|
/>
|
|
<Button onClick={this.sendMessage.bind(this)}>Send</Button>
|
|
{this.props.persistedState.receivedMessage && (
|
|
<Text> {this.props.persistedState.receivedMessage} </Text>
|
|
)}
|
|
</Container>
|
|
);
|
|
}
|
|
}
|