Add react-query lint rules (#1544)

Helps avoid foot guns / re-rendering issues / bad habits with react-query

Fixes the existing lint errors/warnings we had with react-query or makes notes on them

Author: technoplato

App.tsx

@@ -55,6 +55,7 @@ LogBox.ignoreLogs([
   'event="noNetwork', // ethers
   "[Reanimated] Reading from `value` during component render. Please ensure that you do not access the `value` property or use `get` method of a shared value while React is rendering a component.",
   "Attempted to import the module",
+  "Falling back to file-based resolution. Consider updating the call site or asking the package maintainer(s) to expose this API",
   "Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work. [Component Stack]",
   "sync worker error storage error: Pool needs to  reconnect before use",
   "[Converse.debug.dylib] sync worker error storage error: Pool needs to  reconnect before use",

eslint.config.mjs

@@ -4,141 +4,98 @@ import pluginReactHooks from "eslint-plugin-react-hooks";
 import pluginReactNative from "eslint-plugin-react-native";
 import tsESLint from "typescript-eslint";
 import customPlugin from "./custom-eslint-plugin/index.js";
+import pluginQuery from "@tanstack/eslint-plugin-query";
 
 // While eslint-plugin-react-native fix to handle eslint flat config (https://github.com/Intellicode/eslint-plugin-react-native/issues/333#issuecomment-2150582430)
 import { fixupPluginRules } from "@eslint/compat";
 
-/** @type {import('eslint').Linter.Config[]} */
-export default [
-  {
-    files: ["**/*.{ts,tsx}"],
-    ignores: [],
-    languageOptions: {
-      parser: tsESLint.parser,
-    },
-    plugins: {
-      react: pluginReact,
-      "typescript-eslint": tsESLint.plugin,
-      import: pluginImport,
-      "react-hooks": pluginReactHooks,
-      "react-native": fixupPluginRules(pluginReactNative),
-      "custom-plugin": customPlugin,
-    },
-    rules: {
-      ...tsESLint.configs["recommended"].rules,
-      ...pluginReact.configs["recommended"].rules,
-      ...pluginImport.configs["recommended"].rules,
-      ...pluginReactHooks.configs["recommended"].rules,
-      ...pluginReactNative.configs["all"].rules,
-
-      "import/no-unresolved": "off", // Disable since TypeScript already handles module resolution and import validation
-      "import/no-relative-parent-imports": "off", // Disable for now
-      "import/no-default-export": "warn",
-      "import/order": "off", // Since we use @design-system/, etc... there seems to be a lot of false positives
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  files: ["**/*.{ts,tsx}"],
+  ignores: [],
+  languageOptions: {
+    parser: tsESLint.parser,
+  },
+  plugins: {
+    "@tanstack/query": pluginQuery,
+    react: pluginReact,
+    "typescript-eslint": tsESLint.plugin,
+    import: pluginImport,
+    "react-hooks": pluginReactHooks,
+    "react-native": fixupPluginRules(pluginReactNative),
+    "custom-plugin": customPlugin,
+  },
+  rules: {
+    ...tsESLint.configs["recommended"].rules,
+    ...pluginReact.configs["recommended"].rules,
+    ...pluginImport.configs["recommended"].rules,
+    ...pluginReactHooks.configs["recommended"].rules,
+    ...pluginReactNative.configs["all"].rules,
+    ...pluginQuery.configs["recommended"].rules,
 
-      "no-restricted-imports": [
-        "error",
-        {
-          paths: [
-            {
-              name: "i18n-js",
-              message: "Use @i18n app module instead.",
-            },
-          ],
-        },
-      ],
-      "no-restricted-imports": [
-        "warn",
-        {
-          patterns: [
-            {
-              group: ["../../*", "../../../*"],
-              message:
-                "Please use module aliases (e.g., @design-system/) instead of relative paths when going up more than one directory",
-            },
-          ],
-        },
-      ],
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/no-rest-destructuring": "warn",
+    "@tanstack/query/stable-query-client": "error",
+    "@tanstack/query/no-unstable-deps": "warn",
 
-      "react-hooks/exhaustive-deps": "error",
-      "react-hooks/rules-of-hooks": "error",
+    "import/no-unresolved": "off",
+    "import/no-relative-parent-imports": "off",
+    "import/no-default-export": "warn",
+    "import/order": "off",
 
-      "react-native/no-raw-text": "off", // We have so many Text wrapper components... and eslint doesn't know that OnboardingTitleSubtitle.Title is a Text component
-      "react-native/no-color-literals": "warn", // We need to use the colors in theme!
-      "react-native/sort-styles": "off", // Not needed
-      "react-native/no-unused-styles": "off", // Because it's giving warning for styles we use in useStyles hook even though they are used
-      "react-native/no-inline-styles": "warn",
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "i18n-js",
+            message: "Use @i18n app module instead.",
+          },
+        ],
+      },
+    ],
 
-      "react/no-unescaped-entities": "off", // Not needed
-      "react/prop-types": "off", // Disable since we use TypeScript
-      "react/display-name": "off", // Not needed
-      "react/react-in-jsx-scope": "off", // Disable since we use React 18
-      "react/jsx-key": "error",
-      "react/jsx-no-bind": [
-        "off", // Until we finish the HUGEEEE refactor
-        {
-          ignoreRefs: true,
-          allowArrowFunctions: false,
-          allowFunctions: false,
-          allowBind: false,
-          ignoreDOMComponents: true,
-        },
-      ],
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
 
-      "typescript-eslint/no-unused-vars": [
-        "warn",
-        {
-          vars: "all",
-          args: "none",
-          ignoreRestSiblings: true,
-        },
-      ],
-      "typescript-eslint/no-explicit-any": "warn",
-      "typescript-eslint/explicit-function-return-type": "off",
-      "typescript-eslint/consistent-type-definitions": ["warn", "type"],
+    "react-native/no-raw-text": "off",
+    "react-native/no-color-literals": "warn",
+    "react-native/sort-styles": "off",
+    "react-native/no-unused-styles": "off",
+    "react-native/no-inline-styles": "warn",
 
-      "padding-line-between-statements": [
-        "off", // Off for now until we all agree on best practices
-        {
-          blankLine: "always",
-          prev: "multiline-const",
-          next: "multiline-expression",
-        },
-        {
-          blankLine: "always",
-          prev: "multiline-expression",
-          next: "multiline-const",
-        },
-        { blankLine: "always", prev: "multiline-block-like", next: "*" },
-        { blankLine: "always", prev: "*", next: "multiline-block-like" },
-      ],
+    "react/no-unescaped-entities": "off",
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-key": "error",
+    "react/jsx-no-bind": "off",
 
-      "prettier/prettier": "off", // We use prettier manually with linted-staged for example
+    "typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        vars: "all",
+        args: "none",
+        ignoreRestSiblings: true,
+      },
+    ],
+    "typescript-eslint/no-explicit-any": "warn",
+    "typescript-eslint/explicit-function-return-type": "off",
+    "typescript-eslint/consistent-type-definitions": ["warn", "type"],
 
-      "custom-plugin/padding-before-react-hooks": "warn",
+    "padding-line-between-statements": "off",
+    "prettier/prettier": "off",
+    "custom-plugin/padding-before-react-hooks": "warn",
+  },
+  settings: {
+    "import/resolver": {
+      typescript: true,
+      node: true,
     },
-    settings: {
-      "import/resolver": {
-        typescript: true,
-        node: true,
-      },
-      react: {
-        version: "detect",
-      },
+    react: {
+      version: "detect",
     },
   },
-  // Custom logics to enable single function per file for files in utils directory so we can more easily implement tests for them (maybe)
-  // {
-  //   name: "custom/utils-typescript",
-  //   files: ["utils/**/*.ts"],
-  //   languageOptions: {
-  //     parser: parserTypescript,
-  //   },
-  //   plugins: {
-  //     "custom-plugin": customPlugin,
-  //   },
-  //   rules: {
-  //     "custom-plugin/single-function-per-file": "off", // Off for now
-  //   },
-  // },
-];
+};
+
+export default config;

features/conversation-list/use-conversation-list-conversations.tsx

@@ -12,7 +12,11 @@ import { useEffect, useMemo } from "react";
 export const useConversationListConversations = () => {
   const currentAccount = useCurrentAccount();
 
-  const { data: conversations, ...rest } = useQuery(
+  const {
+    data: conversations,
+    isLoading,
+    refetch,
+  } = useQuery(
     getConversationsQueryOptions({
       account: currentAccount!,
     })
@@ -32,13 +36,13 @@ export const useConversationListConversations = () => {
 
   // For now, let's make sure we always are up to date with the conversations
   useScreenFocusEffectOnce(() => {
-    rest.refetch().catch(captureError);
+    refetch().catch(captureError);
   });
 
   // For now, let's make sure we always are up to date with the conversations
   useAppStateHandlers({
     onForeground: () => {
-      rest.refetch().catch(captureError);
+      refetch().catch(captureError);
     },
   });
 
@@ -49,6 +53,16 @@ export const useConversationListConversations = () => {
         topic: conversation.topic,
       })
     ),
+    // note/todo(lustig): investigate combine to remove need for filteredConvresations (which utilizes conversationsDataQueries)
+    // which is referentially unstable
+    // combine: (queries) => {
+    //   queries.forEach((query) => {
+    //     console.log("query", query);
+    //     if (query) {
+    //       isConversationAllowed(query.data);
+    //     }
+    //   });
+    // },
   });
 
   const filteredAndSortedConversations = useMemo(() => {
@@ -71,7 +85,16 @@ export const useConversationListConversations = () => {
       const timestampB = b.lastMessage?.sentNs ?? 0;
       return timestampB - timestampA;
     });
+    /*
+     * note(lustig): potential fix using existing libraries could be exploring `combine` above
+     * es lint from @tanstack/query/no-unstable-deps
+     *
+     * lint error: The result of useQueries is not referentially stable, so don't pass it
+     * directly into the dependencies array of useMemo. Instead, destructure
+     * the return value of useQueries and pass the destructured values into
+     * the dependency array of useMemo.eslint@tanstack/query/no-unstable-deps
+     */
   }, [conversations, conversationsMetadataQueries]);
 
-  return { data: filteredAndSortedConversations, ...rest };
+  return { data: filteredAndSortedConversations, isLoading, refetch };
 };

features/conversation/conversation-message/use-conversation-message.tsx

@@ -19,12 +19,12 @@ export function useConversationMessageById({
 
   const cachedMessage = messages?.byId[messageId];
 
-  // Only fetch the message if it's not already in the conversation messages
   const { data: message, isLoading: isLoadingMessage } = useQuery({
     ...getConversationMessageQueryOptions({
       account: currentAccount,
       messageId,
     }),
+    // Only fetch the message if it's not already in the conversation messages
     enabled: !cachedMessage && !!messageId && !!currentAccount,
   });
 

features/conversation/conversation-preview/conversation-preview.tsx

@@ -10,13 +10,13 @@ import { ConversationMessageReactions } from "@/features/conversation/conversati
 import { ConversationMessageTimestamp } from "@/features/conversation/conversation-message/conversation-message-timestamp";
 import { MessageContextStoreProvider } from "@/features/conversation/conversation-message/conversation-message.store-context";
 import { conversationListDefaultProps } from "@/features/conversation/conversation-messages-list";
-import { useConversationPreviewMessages } from "@/features/conversation/conversation-preview/conversation-preview-messages.query";
 import { ConversationStoreProvider } from "@/features/conversation/conversation.store-context";
 import { useConversationQuery } from "@/queries/useConversationQuery";
 import { $globalStyles } from "@/theme/styles";
 import type { ConversationTopic } from "@xmtp/react-native-sdk";
 import React from "react";
 import { FlatList } from "react-native";
+import { useConversationPreviewMessages } from "./conversation-preview-messages.query";
 
 type ConversationPreviewProps = {
   topic: ConversationTopic;
@@ -26,7 +26,7 @@ export const ConversationPreview = ({ topic }: ConversationPreviewProps) => {
   const currentAccount = useCurrentAccount()!;
 
   const { data: messages, isLoading: isLoadingMessages } =
-    useConversationPreviewMessages(currentAccount, topic!);
+    useConversationPreviewMessages(currentAccount, topic);
 
   const { data: conversation, isLoading: isLoadingConversation } =
     useConversationQuery({

features/conversation/conversation-screen-header/conversation-screen-group-header-title.tsx

@@ -35,7 +35,7 @@ export const GroupConversationTitle = memo(
 
     const { data: members } = useGroupMembersQuery({
       account: currentAccount,
-      topic: topic!,
+      topic,
     });
 
     const { data: memberData } = useGroupMembersAvatarData({ topic });

features/profiles/profile.nav.tsx

@@ -0,0 +1,16 @@
+import { NativeStack } from "@/screens/Navigation/Navigation";
+import { ProfileScreen } from "./profile.screen";
+import { ConversationTopic } from "@xmtp/react-native-sdk";
+
+export type ProfileNavParams = {
+  address: string;
+  fromGroupTopic?: ConversationTopic;
+};
+
+export const ProfileScreenConfig = {
+  path: "/profile",
+};
+
+export function ProfileNav() {
+  return <NativeStack.Screen name="Profile" component={ProfileScreen} />;
+}

screens/Profile.tsx renamed to features/profiles/profile.screen.tsx

@@ -1,13 +1,5 @@
 import React, { useCallback, useState } from "react";
-import {
-  View,
-  ViewStyle,
-  Alert,
-  Share,
-  Platform,
-  Linking,
-  TextStyle,
-} from "react-native";
+import { View, ViewStyle, Alert, Share } from "react-native";
 import { Screen } from "@/components/Screen/ScreenComp/Screen";
 import { ContactCard } from "@/features/profiles/components/contact-card";
 import { SettingsList } from "@/design-system/settings-list/settings-list";
@@ -42,7 +34,7 @@ import { iconRegistry } from "@/design-system/Icon/Icon";
 import { useNotificationsPermission } from "@/features/notifications/hooks/use-notifications-permission";
 import { SocialNames } from "@/features/profiles/components/social-names";
 
-export default function ProfileScreen() {
+export function ProfileScreen() {
   const [editMode, setEditMode] = useState(false);
   const { theme, themed } = useAppTheme();
   const router = useRouter();
@@ -52,11 +44,8 @@ export default function ProfileScreen() {
   const isMyProfile = peerAddress.toLowerCase() === userAddress?.toLowerCase();
   const setPeersStatus = useSettingsStore((s) => s.setPeersStatus);
   const { data: socials } = useProfileSocials(peerAddress);
-  const {
-    notificationsPermissionStatus,
-    requestPermission,
-    setNotificationsSettings,
-  } = useNotificationsPermission();
+  const { notificationsPermissionStatus, requestPermission } =
+    useNotificationsPermission();
 
   const userName = usePreferredUsername(peerAddress);
   const displayName = usePreferredName(peerAddress);