flipper-plugin-remote-config-viewer.ts

import React, { memo } from 'react';
import { Table, Input, Button } from 'antd';
import { ColumnProps } from "antd/lib/table";
import { PluginClient, usePlugin, createState, useValue, theme, Layout } from 'flipper-plugin';
import { identifier } from '@babel/types';
import {
  ManagedTable,
  Text,
  Heading,
  FlexColumn,
  colors,
  FlexRow,
  ManagedDataInspector,
  styled,
  Select,
} from 'flipper';

type Row = { key: string; firebase: string; };


export function plugin(client: PluginClient) {

  const items = createState<Record<string, Row>>({}, { persist: 'items' });

  const itemFilter = createState<string | null>(null, { persist: 'itemFilter' });

  function setItemFilter(value: string) {
    itemFilter.set(value);
  }

  client.onMessage('items', (newItems) => {
    console.log("newItems", newItems);
    items.update((draft) => {
      newItems.forEach(element => {
        draft[element.key] = element;
      });

    });
  });

  return {
    items,
    itemFilter,
    setItemFilter,
  }; // API exposed from this plugin
}

export function Component() {
  const instance = usePlugin(plugin);
  const items = useValue(instance.items);
  const itemFilter = useValue(instance.itemFilter);

  let filteredItems;
  if (itemFilter == null || itemFilter == "") {
    filteredItems = Object.entries(items).map(([id, row]) => (row));
  } else {
    filteredItems = Object.entries(items)
      .filter(([id, row]) => id.includes(itemFilter))
      .map(([id, row]) => (row));
  }
  const data = filteredItems;

  console.log("data", data);

  const COLUMNS: ColumnProps<Row>[] = [
    { dataIndex: 'key', title: 'key', width: 300, },
    {
      dataIndex: 'firebase', title: 'firebase',
      render: (text, record) => (
        <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          {text}
        </div>
      ),
    }
  ];

  return (
    <>
      <Layout.ScrollContainer>
        <Table
          columns={COLUMNS}
          dataSource={data}
          pagination={false}
        />
      </Layout.ScrollContainer>
      <input type="text" onChange={(e) => instance.setItemFilter(e.target.value)} placeholder="Type to filter"/>
    </>
  );
}