Skip to content

Commit c0b705d

Browse files
josydeleonjosydeleon
committed
linters set up for react-native-query-devtool
1 parent 6487433 commit c0b705d

26 files changed

Lines changed: 228 additions & 169 deletions

File tree

‎.eslintrc.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": [
7+
"eslint:recommended",
8+
"plugin:@typescript-eslint/recommended",
9+
"plugin:react/recommended"
10+
],
11+
"parser": "@typescript-eslint/parser",
12+
"parserOptions": {
13+
"ecmaVersion": "latest",
14+
"sourceType": "module"
15+
},
16+
"plugins": [
17+
"@typescript-eslint",
18+
"react"
19+
],
20+
"rules": {
21+
"@typescript-eslint/no-explicit-any": "off", // Allow any type
22+
"indent": "off",
23+
"linebreak-style": [
24+
"error",
25+
"unix"
26+
],
27+
"quotes": [
28+
"error",
29+
"single"
30+
],
31+
"semi": [
32+
"error",
33+
"always"
34+
]
35+
}
36+
}

‎.husky/pre-commit‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
yarn lint-staged

‎package.json‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"build-client": "cd ./packages/react-native-query-devtool && tsup",
1515
"publish-client": "cd ./packages/react-native-query-devtool && yarn publish --access public",
1616
"v3-example-ios": "cd ./example/react-query-v3 && expo start --ios",
17-
"v3-example-android": "cd ./example/react-query-v3 && expo start --android"
17+
"v3-example-android": "cd ./example/react-query-v3 && expo start --android",
18+
"run-linters": "prettier --write && eslint --fix",
19+
"prepare": "husky"
1820
},
1921
"workspaces": [
2022
"packages/*"
@@ -26,13 +28,26 @@
2628
"devtool"
2729
],
2830
"type": "module",
31+
"lint-staged": {
32+
"*.{js,jsx,ts,tsx}": [
33+
"prettier ./packages/react-native-query-devtool/src --write",
34+
"eslint ./packages/react-native-query-devtool/src --fix"
35+
]
36+
},
2937
"devDependencies": {
3038
"@types/node": "^20.11.8",
3139
"@types/react": "^18.2.48",
3240
"@types/react-native": "^0.72.8",
3341
"@types/react-query": "^1.2.9",
42+
"@typescript-eslint/eslint-plugin": "^7.2.0",
43+
"@typescript-eslint/parser": "^7.2.0",
3444
"babel-core": "^4.7.16",
3545
"babel-runtime": "^6.26.0",
46+
"eslint": "^8.56.0",
47+
"eslint-plugin-react": "^7.34.1",
48+
"husky": "^9.0.11",
49+
"lint-staged": "^15.2.2",
50+
"prettier": "^3.1.1",
3651
"react-native": "^0.72.9",
3752
"ts-node": "^10.9.2",
3853
"tsup": "^8.0.1",

‎packages/react-native-query-devtool/src/components/CloseButton/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
1+
import React from 'react';
22

3-
import { Pressable, StyleSheet, View } from "react-native";
3+
import { Pressable, StyleSheet, View } from 'react-native';
44

55
interface Props {
66
onPress: () => void;
@@ -18,15 +18,15 @@ const styles = StyleSheet.create({
1818
container: {
1919
width: 40,
2020
height: 20,
21-
alignContent: "center",
22-
justifyContent: "center",
21+
alignContent: 'center',
22+
justifyContent: 'center',
2323
},
2424
close: {
2525
width: 20,
26-
alignSelf: "flex-end",
26+
alignSelf: 'flex-end',
2727
borderWidth: 2,
2828
borderRadius: 3,
29-
borderColor: "white",
29+
borderColor: 'white',
3030
},
3131
});
3232

‎packages/react-native-query-devtool/src/components/CopyButton/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
1+
import React from 'react';
22

3-
import { Image, Pressable, StyleSheet } from "react-native";
3+
import { Image, Pressable, StyleSheet } from 'react-native';
44

55
interface Props {
66
onPress?: () => void;
@@ -10,7 +10,7 @@ const CopyButton: React.FC<Props> = ({ onPress }) => {
1010
return (
1111
<Pressable onPress={onPress}>
1212
<Image
13-
source={require("../../../assets/copy.png")}
13+
source={require('../../../assets/copy.png')}
1414
style={styles.container}
1515
/>
1616
</Pressable>

‎packages/react-native-query-devtool/src/components/DataExplorer/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from "react";
1+
import React from 'react';
22

3-
import { View } from "react-native";
3+
import { View } from 'react-native';
44

5-
import JSONTreeData from "../JSONTreeData";
6-
import { styles } from "./style";
5+
import JSONTreeData from '../JSONTreeData';
6+
import { styles } from './style';
77

88
interface Props {
99
selectedQueryData: any;

‎packages/react-native-query-devtool/src/components/Devtool/index.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import React from "react";
1+
import React from 'react';
22

3-
import { FlatList, ScrollView, Text, View } from "react-native";
3+
import { FlatList, ScrollView, Text, View } from 'react-native';
44

5-
import { ScrollView as ActionsheetScrollview } from "react-native-actions-sheet";
5+
import { ScrollView as ActionsheetScrollview } from 'react-native-actions-sheet';
66

7-
import { QueryDevtoolProps } from "../../types";
8-
import CloseButton from "../CloseButton";
9-
import DataExplorer from "../DataExplorer";
10-
import QueryRow from "../QueryRow";
11-
import Searchbar from "../Searchbar";
12-
import Toast from "../Toast";
13-
import useDevtoolData from "./useDevtoolData";
7+
import { QueryDevtoolProps } from '../../types';
8+
import CloseButton from '../CloseButton';
9+
import DataExplorer from '../DataExplorer';
10+
import QueryRow from '../QueryRow';
11+
import Searchbar from '../Searchbar';
12+
import Toast from '../Toast';
13+
import useDevtoolData from './useDevtoolData';
1414

15-
import { styles } from "./styles";
15+
import { styles } from './styles';
1616

1717
const Devtool: React.FC<QueryDevtoolProps> = (props) => {
1818
const {
@@ -58,7 +58,7 @@ const Devtool: React.FC<QueryDevtoolProps> = (props) => {
5858
placeholder={
5959
dataToLookup?.nodeTitle
6060
? `Search in '${dataToLookup?.nodeTitle}'`
61-
: "Search in 'data'"
61+
: 'Search in \'data\''
6262
}
6363
/>
6464
</View>

‎packages/react-native-query-devtool/src/components/Devtool/styles.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
1-
import { Dimensions, StyleSheet } from "react-native";
1+
import { Dimensions, StyleSheet } from 'react-native';
22

33
export const styles = StyleSheet.create({
44
actionScrollviewContainer: {
55
minHeight: 250,
66
maxHeight: 500,
77
},
88
searchbarContainer: {
9-
backgroundColor: "#0b1521",
9+
backgroundColor: '#0b1521',
1010
padding: 2,
1111
paddingBottom: 1,
1212
},
1313
headerContainer: {
14-
backgroundColor: "#132337",
14+
backgroundColor: '#132337',
1515
},
1616
headerTitleContainer: {
17-
flexDirection: "row",
18-
justifyContent: "space-between",
19-
alignItems: "center",
17+
flexDirection: 'row',
18+
justifyContent: 'space-between',
19+
alignItems: 'center',
2020
padding: 10,
2121
paddingBottom: 0,
2222
borderTopLeftRadius: 10,
2323
borderTopRightRadius: 10,
2424
},
2525
headerText: {
26-
color: "white",
26+
color: 'white',
2727
},
2828
queriesContainer: {
2929
padding: 10,
3030
},
3131
queriesFlatlist: {
32-
width: Dimensions.get("screen").width,
32+
width: Dimensions.get('screen').width,
3333
paddingHorizontal: 2,
3434
},
3535
flatlistEmptyMessage: {
36-
color: "white",
37-
textAlign: "center",
36+
color: 'white',
37+
textAlign: 'center',
3838
},
3939
expandedFlatlist: {
4040
height: 400,
@@ -45,7 +45,7 @@ export const styles = StyleSheet.create({
4545
},
4646
separator: {
4747
borderBottomWidth: 0.3,
48-
borderColor: "silver",
48+
borderColor: 'silver',
4949
marginVertical: 5,
5050
},
5151
dataExplorerContainer: {

‎packages/react-native-query-devtool/src/components/Devtool/useDevtoolData.ts‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
1+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
22

3-
import { FlatList, TextInput } from "react-native";
3+
import { FlatList, TextInput } from 'react-native';
44

55
import {
66
ListenerEventType,
77
QueryDevtoolData,
88
QueryDevtoolProps,
99
QueryKey,
10-
} from "../../types";
11-
import fuzzySearch from "../../utils/fuzzySearch";
10+
} from '../../types';
11+
import fuzzySearch from '../../utils/fuzzySearch';
1212
import {
1313
getQueryDevtoolData,
1414
handleQueryDevtoolData,
15-
} from "../../utils/queryListener";
15+
} from '../../utils/queryListener';
1616

17-
import useDebounce from "../../hooks/useDebounce";
17+
import useDebounce from '../../hooks/useDebounce';
1818

1919
const useDevtoolData = (props: QueryDevtoolProps) => {
20-
const { queryClient, version = "v5" } = props;
20+
const { queryClient, version = 'v5' } = props;
2121

2222
const isInitialized = useRef(false);
2323
const flalistRef = useRef<FlatList>(null);
@@ -27,8 +27,8 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
2727
const [queries, setQueries] = useState<QueryDevtoolData[]>([]);
2828
const [selectedQueryKey, setSelectedQueryKey] = useState<QueryKey>();
2929

30-
const [searchStringQueries, setSearchStringQueries] = useState("");
31-
const [searchStringData, setSearchStringData] = useState("");
30+
const [searchStringQueries, setSearchStringQueries] = useState('');
31+
const [searchStringData, setSearchStringData] = useState('');
3232
const [showToast, setShowToast] = useState(false);
3333

3434
// State to determine where to search (2nd Searchbar)
@@ -76,15 +76,15 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
7676

7777
setQueries((prevData) => {
7878
const queryKeyIndex = prevData.findIndex(
79-
(item) => item.queryKey === queryKey
79+
(item) => item.queryKey === queryKey,
8080
);
8181

8282
return handleQueryDevtoolData(
8383
version,
8484
listenerType,
8585
queryKeyIndex,
8686
query,
87-
[...prevData]
87+
[...prevData],
8888
);
8989
});
9090
});
@@ -98,9 +98,9 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
9898
() =>
9999
queries.find(
100100
(query) =>
101-
JSON.stringify(query?.queryKey) === JSON.stringify(selectedQueryKey)
101+
JSON.stringify(query?.queryKey) === JSON.stringify(selectedQueryKey),
102102
),
103-
[selectedQueryKey, queries]
103+
[selectedQueryKey, queries],
104104
);
105105

106106
const filteredQueries = useMemo(
@@ -109,14 +109,14 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
109109
query.queryKey
110110
?.toString()
111111
.toLowerCase()
112-
.includes(searchStringQueries.toLowerCase())
112+
.includes(searchStringQueries.toLowerCase()),
113113
),
114-
[queries, searchStringQueries]
114+
[queries, searchStringQueries],
115115
);
116116

117117
const handleSelectedRow = useCallback(
118118
(indexRow?: number) => {
119-
if (typeof indexRow !== "number") {
119+
if (typeof indexRow !== 'number') {
120120
setSelectedQueryKey(undefined);
121121
return;
122122
}
@@ -126,7 +126,7 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
126126
const queryKey = queriesSource[indexRow].queryKey;
127127

128128
setSelectedQueryKey((prev) => (prev !== queryKey ? queryKey : undefined));
129-
setSearchStringData("");
129+
setSearchStringData('');
130130
setDataToLookup(undefined);
131131

132132
timeoutRef.current = setTimeout(() => {
@@ -139,7 +139,7 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
139139
});
140140
}, 200);
141141
},
142-
[queries, filteredQueries, searchStringQueries]
142+
[queries, filteredQueries, searchStringQueries],
143143
);
144144

145145
const handleShowToast = () => {
@@ -161,15 +161,15 @@ const useDevtoolData = (props: QueryDevtoolProps) => {
161161
const handleChangeSearchQueryData = (searchTerm: string) => {
162162
setSearchStringData(searchTerm);
163163

164-
if (searchTerm.trim() === "" || searchTerm.trim().length <= 2) {
164+
if (searchTerm.trim() === '' || searchTerm.trim().length <= 2) {
165165
setFilteredData(undefined);
166166
} else {
167167
handleSearch(searchTerm);
168168
}
169169
};
170170

171171
const handleSelectedToCopy = (node: any) => {
172-
console.log("📋", JSON.stringify(node));
172+
console.log('📋', JSON.stringify(node));
173173
handleShowToast();
174174
};
175175

‎packages/react-native-query-devtool/src/components/FloatingButton/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from "react";
1+
import React from 'react';
22

3-
import { Image, TouchableOpacity } from "react-native";
3+
import { Image, TouchableOpacity } from 'react-native';
44

5-
import { styles } from "./styles";
5+
import { styles } from './styles';
66

77
interface Props {
88
onPress: () => void;
@@ -17,7 +17,7 @@ const FloatingButton: React.FC<Props> = ({ onPress }) => {
1717
>
1818
<Image
1919
style={styles.image}
20-
source={require("../../../assets/rqlogo.png")}
20+
source={require('../../../assets/rqlogo.png')}
2121
/>
2222
</TouchableOpacity>
2323
);

0 commit comments

Comments
 (0)