Skip to content

Commit 7c0a87e

Browse files
paullbnPaulmohit23x
authored
feat: add search input to filter data (#31)
* feat: add search input to filter data * Empty-Commit * minor changes --------- Co-authored-by: Paul <paul.labonne@hinfact.com> Co-authored-by: mohit <mohit.lodha@razorpay.com>
1 parent d67600b commit 7c0a87e

9 files changed

Lines changed: 4998 additions & 11398 deletions

File tree

‎packages/flipper-plugin-react-native-apollo-devtools/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
"pack": "flipper-pkg pack"
2929
},
3030
"peerDependencies": {
31-
"@emotion/styled": "latest",
32-
"antd": "latest",
33-
"flipper-plugin": "^0.131.1",
34-
"react": "latest",
35-
"react-dom": "latest"
31+
"@emotion/styled": "*",
32+
"antd": "*",
33+
"flipper-plugin": "*",
34+
"react": "*",
35+
"react-dom": "*"
3636
},
3737
"devDependencies": {
3838
"@apollo/client": "^3.3.13",
@@ -51,7 +51,7 @@
5151
"jest-mock-console": "latest",
5252
"react": "latest",
5353
"react-dom": "latest",
54-
"typescript": "^4.5.5"
54+
"typescript": "^5.2.2"
5555
},
5656
"jest": {
5757
"testEnvironment": "jsdom",

‎packages/flipper-plugin-react-native-apollo-devtools/src/Details.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React, { Fragment } from "react";
2-
import {
3-
Layout,
4-
DataInspector,
5-
DetailSidebar,
6-
} from "flipper-plugin";
2+
import { Layout, DataInspector, DetailSidebar } from "flipper-plugin";
73
import { Button, Typography, Tooltip } from "antd";
84
import { CopyOutlined } from "@ant-design/icons";
95
import { BlockType } from "./typings";
106

11-
export function Details({ selectedItem, onCopy }: { selectedItem: BlockType, onCopy: (...args: any) => void }) {
7+
export function Details({
8+
selectedItem,
9+
onCopy,
10+
}: {
11+
selectedItem: BlockType;
12+
onCopy: (...args: any) => void;
13+
}) {
1214
return (
1315
<DetailSidebar width={350}>
1416
<Layout.Container gap pad>
@@ -40,9 +42,7 @@ export function Details({ selectedItem, onCopy }: { selectedItem: BlockType, onC
4042
<Tooltip title="copy">
4143
<Button
4244
onClick={() =>
43-
onCopy(
44-
`${JSON.stringify(block?.blockValue)}`,
45-
)
45+
onCopy(`${JSON.stringify(block?.blockValue)}`)
4646
}
4747
style={{ marginLeft: 10 }}
4848
size="small"
@@ -62,5 +62,5 @@ export function Details({ selectedItem, onCopy }: { selectedItem: BlockType, onC
6262
})}
6363
</Layout.Container>
6464
</DetailSidebar>
65-
)
66-
}
65+
);
66+
}

‎packages/flipper-plugin-react-native-apollo-devtools/src/Header.tsx‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,47 @@
1-
import React from "react";
2-
import { Typography, Button, Row, Col } from "antd";
3-
import { RocketOutlined, GithubOutlined } from '@ant-design/icons';
1+
import {
2+
GithubOutlined,
3+
RocketOutlined,
4+
SearchOutlined,
5+
} from "@ant-design/icons";
6+
import { Button, Col, Input, Row, Typography } from "antd";
47
import { getFlipperLib } from "flipper-plugin";
8+
import React from "react";
59

6-
export const Header = () => (
7-
<Row align="middle">
8-
<Col span={18}>
9-
<Typography.Title level={3}>
10-
<RocketOutlined />
11-
&nbsp;React Native Apollo Devtool
12-
</Typography.Title>
13-
</Col>
14-
<Col span={6} >
15-
<Button icon={<GithubOutlined />} onClick={() => {
16-
getFlipperLib().openLink('https://github.com/razorpay/react-native-apollo-devtools')
17-
}} type="link">Github</Button></Col>
18-
</Row>
19-
)
10+
export const Header = ({
11+
onFilter,
12+
filter,
13+
}: {
14+
onFilter: (value: string) => void;
15+
filter: string;
16+
}) => (
17+
<Row align="middle">
18+
<Col span={12}>
19+
<Typography.Title level={3}>
20+
<RocketOutlined />
21+
&nbsp;React Native Apollo Devtool
22+
</Typography.Title>
23+
</Col>
24+
<Col span={8}>
25+
<Input
26+
placeholder="Cache key, id, query, ..."
27+
allowClear
28+
value={filter}
29+
prefix={<SearchOutlined />}
30+
onChange={(e) => onFilter(e.currentTarget.value || "")}
31+
/>
32+
</Col>
33+
<Col span={4}>
34+
<Button
35+
icon={<GithubOutlined />}
36+
onClick={() => {
37+
getFlipperLib().openLink(
38+
"https://github.com/razorpay/react-native-apollo-devtools"
39+
);
40+
}}
41+
type="link"
42+
>
43+
Github
44+
</Button>
45+
</Col>
46+
</Row>
47+
);

‎packages/flipper-plugin-react-native-apollo-devtools/src/List.tsx‎

Lines changed: 110 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,125 @@
1-
import React, { Dispatch, memo, SetStateAction } from "react";
2-
import { Layout } from "flipper-plugin";
31
import { Button, Tabs } from "antd";
4-
import { BlockType, Data, } from './typings'
2+
import { Layout } from "flipper-plugin";
3+
import React, { Dispatch, SetStateAction, memo } from "react";
4+
import { BlockType, Data } from "./typings";
55

66
export const TabsEnum = {
7-
query: { key: "query", value: "Query", plural: "Queries" },
8-
mutation: { key: "mutation", value: "Mutation", plural: "Mutations" },
9-
cache: { key: "cache", value: "Cache", plural: "Caches" },
7+
query: { key: "query", value: "Query", plural: "Queries" },
8+
mutation: { key: "mutation", value: "Mutation", plural: "Mutations" },
9+
cache: { key: "cache", value: "Cache", plural: "Caches" },
1010
};
1111

1212
const TabItem = memo(
13-
({
14-
active,
15-
onPress,
16-
data,
17-
}: {
18-
active: boolean;
19-
onPress: Dispatch<SetStateAction<any>>;
20-
data: any;
21-
}) => {
22-
return (
23-
<Button
24-
onClick={() => onPress(data)}
25-
type={active ? "primary" : "text"}
26-
block
27-
style={{ textAlign: "left", margin: "5px 0" }}
28-
>
29-
{data?.name || "-"}
30-
</Button>
31-
);
32-
},
13+
({
14+
active,
15+
onPress,
16+
data,
17+
}: {
18+
active: boolean;
19+
onPress: Dispatch<SetStateAction<any>>;
20+
data: any;
21+
}) => {
22+
return (
23+
<Button
24+
onClick={() => onPress(data)}
25+
type={active ? "primary" : "text"}
26+
block
27+
style={{ textAlign: "left", margin: 0 }}
28+
>
29+
{data?.name || "-"}
30+
</Button>
31+
);
32+
}
3333
);
3434

3535
const { TabPane } = Tabs;
3636

37-
export function List({ data, activeTab, selectedItem, onItemSelect, onTabChange }: {
38-
data: Data,
39-
activeTab: string,
40-
selectedItem: BlockType,
41-
onItemSelect: (block: BlockType) => void,
42-
onTabChange: (nextTab: string)=> void
37+
const sortData = (a: BlockType, b: BlockType) =>
38+
a.name && b.name && a.name < b.name ? -1 : 1;
39+
40+
export function List({
41+
data,
42+
activeTab,
43+
selectedItem,
44+
filter,
45+
onItemSelect,
46+
onTabChange,
47+
}: {
48+
data: Data;
49+
activeTab: string;
50+
selectedItem: BlockType;
51+
filter: string;
52+
onItemSelect: (block: BlockType) => void;
53+
onTabChange: (nextTab: string) => void;
4354
}) {
44-
return (
45-
<Layout.ScrollContainer>
46-
<Tabs defaultActiveKey="1" onChange={onTabChange}>
47-
{/* CACHE */}
48-
<TabPane tab={TabsEnum.cache.value} key={TabsEnum.cache.key}>
49-
{data?.cache?.map((d,i) => {
50-
const active =
51-
activeTab === TabsEnum.cache.key &&
52-
selectedItem?.name === d?.name;
55+
const filterData = (d: BlockType) =>
56+
filter === "" ||
57+
d.id?.includes(filter) ||
58+
d.name?.toLocaleLowerCase()?.includes(filter);
5359

54-
return (
55-
<TabItem
56-
key={`cache${d?.id}${i}`}
57-
active={active}
58-
onPress={onItemSelect}
59-
data={d}
60-
/>
61-
);
62-
})}
63-
</TabPane>
64-
{/* QUERY */}
65-
<TabPane tab={TabsEnum.query.value} key={TabsEnum.query.key}>
66-
{data?.queries?.map((d) => {
67-
const active =
68-
activeTab === TabsEnum.query.key &&
69-
selectedItem?.id === d?.id;
60+
return (
61+
<Layout.ScrollContainer>
62+
<Tabs defaultActiveKey="1" onChange={onTabChange}>
63+
{/* CACHE */}
64+
<TabPane tab={TabsEnum.cache.value} key={TabsEnum.cache.key}>
65+
{data?.cache
66+
?.filter(filterData)
67+
.sort(sortData)
68+
.map((d, i) => {
69+
const active =
70+
activeTab === TabsEnum.cache.key &&
71+
selectedItem?.name === d?.name;
7072

73+
return (
74+
<TabItem
75+
key={`cache${d?.id}${i}`}
76+
active={active}
77+
onPress={onItemSelect}
78+
data={d}
79+
/>
80+
);
81+
})}
82+
</TabPane>
83+
{/* QUERY */}
84+
<TabPane tab={TabsEnum.query.value} key={TabsEnum.query.key}>
85+
{data?.queries
86+
?.filter(filterData)
87+
.sort(sortData)
88+
.map((d) => {
89+
const active =
90+
activeTab === TabsEnum.query.key && selectedItem?.id === d?.id;
7191

72-
return (
73-
<TabItem
74-
key={`query${d?.id}`}
75-
active={active}
76-
onPress={onItemSelect}
77-
data={d}
78-
/>
79-
);
80-
})}
81-
</TabPane>
82-
{/* MUTATION */}
83-
<TabPane tab={TabsEnum.mutation.value} key={TabsEnum.mutation.key}>
84-
{data?.mutations?.map((d) => {
85-
const active =
86-
activeTab === TabsEnum.mutation.key &&
87-
selectedItem?.id === d?.id;
92+
return (
93+
<TabItem
94+
key={`query${d?.id}`}
95+
active={active}
96+
onPress={onItemSelect}
97+
data={d}
98+
/>
99+
);
100+
})}
101+
</TabPane>
102+
{/* MUTATION */}
103+
<TabPane tab={TabsEnum.mutation.value} key={TabsEnum.mutation.key}>
104+
{data?.mutations
105+
?.filter(filterData)
106+
.sort(sortData)
107+
.map((d) => {
108+
const active =
109+
activeTab === TabsEnum.mutation.key &&
110+
selectedItem?.id === d?.id;
88111

89-
return (
90-
<TabItem
91-
key={`mutation${d?.id}`}
92-
active={active}
93-
onPress={onItemSelect}
94-
data={d}
95-
/>
96-
);
97-
})}
98-
</TabPane>
99-
</Tabs>
100-
</Layout.ScrollContainer>
101-
)
102-
}
112+
return (
113+
<TabItem
114+
key={`mutation${d?.id}`}
115+
active={active}
116+
onPress={onItemSelect}
117+
data={d}
118+
/>
119+
);
120+
})}
121+
</TabPane>
122+
</Tabs>
123+
</Layout.ScrollContainer>
124+
);
125+
}

0 commit comments

Comments
 (0)