Merge pull request #72 from rootstrap/chore/eslint_rules

Chore/eslint rules

.eslintrc.js

@@ -5,20 +5,27 @@ module.exports = {
   extends: [
     'expo', 
     'plugin:tailwindcss/recommended', 
-    'prettier'
+    'prettier',
+    'eslint:recommended'
   ],
+  env: {
+    'jest/globals': true,
+    'node': true
+  },
   plugins: [
     'unicorn', 
     '@typescript-eslint',
     'unused-imports',
     'tailwindcss',
     'simple-import-sort',
-    'sonarjs'
+    'sonarjs',
+    'jest'
   ],
   parserOptions: {
     project: './tsconfig.json',
   },
   rules: {
+    'import/no-duplicates': 'error',
     '@typescript-eslint/no-explicit-any': 'error',
     'unicorn/filename-case': [
       'error',
@@ -73,6 +80,7 @@ module.exports = {
     ],
     'object-shorthand': 'error',
     'arrow-body-style': ["error", "as-needed"],
+    'no-console': ['error', {allow: ['error']}],
     'guard-for-in': 'error'
   },
   overrides: [

env.js

@@ -220,7 +220,6 @@ if (shouldValidateEnv) {
     }
 
     console.error(...messages);
-
     throw new Error(
       'Invalid environment variables, Check terminal for more details '
     );

package.json

@@ -73,8 +73,8 @@
     "expo-splash-screen": "0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
-    "i18next": "^23.14.0",
     "expo-updates": "~0.25.24",
+    "i18next": "^23.14.0",
     "lodash.memoize": "^4.1.2",
     "moti": "^0.29.0",
     "nativewind": "4.0.36",
@@ -120,6 +120,7 @@
     "eslint-config-expo": "^7.1.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-i18n-json": "^4.0.0",
+    "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-sonarjs": "^1.0.4",

src/api/common/api-provider.tsx

@@ -1,8 +1,9 @@
 import { useReactQueryDevTools } from '@dev-plugins/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { type ReactNode } from 'react';
 export const queryClient = new QueryClient();
 
-export function APIProvider({ children }: { children: React.ReactNode }) {
+export function APIProvider({ children }: Readonly<{ children: ReactNode }>) {
   useReactQueryDevTools(queryClient);
   return (
     // Provide the client to your App

src/api/common/utils.tsx

@@ -51,7 +51,7 @@ type GenericObject = { [key: string]: unknown };
 export const toCamelCase = (obj: GenericObject): GenericObject => {
   const newObj: GenericObject = {};
   for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
+    if (Object.hasOwn(obj,key)) {
       if (key.includes('_')) {
         const newKey = key.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
         newObj[newKey] = obj[key];
@@ -66,7 +66,7 @@ export const toCamelCase = (obj: GenericObject): GenericObject => {
 export const toSnakeCase = (obj: GenericObject): GenericObject => {
   const newObj: GenericObject = {};
   for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
+    if (Object.hasOwn(obj,key)) {
       let newKey = key.match(/([A-Z])/g)
         ? key
             .match(/([A-Z])/g)!

src/app/_layout.tsx

@@ -4,6 +4,7 @@ import '../../global.css';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { ThemeProvider } from '@react-navigation/native';
 import { SplashScreen, Stack } from 'expo-router';
+import React from 'react';
 import { StyleSheet } from 'react-native';
 import FlashMessage from 'react-native-flash-message';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';

src/app/feed/add-post.tsx

@@ -21,7 +21,6 @@ export default function AddPost() {
   const { mutate: addPost, isPending } = useAddPost();
 
   const onSubmit = (data: FormType) => {
-    console.log(data);
     addPost(
       { ...data, userId: 1 },
       {

src/app/login.tsx

@@ -10,6 +10,7 @@ export default function Login() {
   const signIn = useAuth.use.signIn();
 
   const onSubmit: LoginFormProps['onSubmit'] = (data) => {
+    // eslint-disable-next-line no-console
     console.log(data);
     signIn({ access: 'access-token', refresh: 'refresh-token' });
     router.push('/');

src/app/onboarding.tsx

@@ -4,7 +4,7 @@ import { Cover } from '@/components/cover';
 import { useIsFirstTime } from '@/core/hooks';
 import { Button, FocusAwareStatusBar, SafeAreaView, Text, View } from '@/ui';
 export default function Onboarding() {
-  const [_, setIsFirstTime] = useIsFirstTime();
+  const [, setIsFirstTime] = useIsFirstTime();
   const router = useRouter();
   return (
     <View className="flex h-full items-center  justify-center">

src/components/inputs.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 
 import type { OptionType } from '@/ui';
-import { Input, Select, View } from '@/ui';
-import { Checkbox, Radio, Switch } from '@/ui';
+import { Checkbox, Input, Radio, Select, Switch, View } from '@/ui';
 
 import { Title } from './title';
 

src/components/settings/item.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { TxKeyPath } from '@/core';
 import { Pressable, Text, View } from '@/ui';
 import { ArrowRight } from '@/ui/icons';

src/components/settings/items-container.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { TxKeyPath } from '@/core';
 import { Text, View } from '@/ui';
 

src/core/auth/index.tsx

@@ -1,8 +1,7 @@
 import { create } from 'zustand';
 
 import { createSelectors } from '../utils';
-import type { TokenType } from './utils';
-import { getToken, removeToken, setToken } from './utils';
+import { getToken, removeToken, setToken, type TokenType } from './utils';
 
 interface AuthState {
   token: TokenType | null;
@@ -31,7 +30,7 @@ const _useAuth = create<AuthState>((set, get) => ({
       } else {
         get().signOut();
       }
-    } catch (e) {
+    } catch (_) {
       // catch error here
       // Maybe sign_out user!
     }

src/core/hooks/use-selected-theme.tsx

@@ -14,7 +14,7 @@ export type ColorSchemeType = 'light' | 'dark' | 'system';
  *
  */
 export const useSelectedTheme = () => {
-  const { colorScheme: _color, setColorScheme } = useColorScheme();
+  const { setColorScheme } = useColorScheme();
   const [theme, _setTheme] = useMMKVString(SELECTED_THEME, storage);
 
   const setSelectedTheme = useCallback(
@@ -32,7 +32,6 @@ export const useSelectedTheme = () => {
 export const loadSelectedTheme = () => {
   const theme = storage.getString(SELECTED_THEME);
   if (theme !== undefined) {
-    console.log('theme', theme);
     colorScheme.set(theme as ColorSchemeType);
   }
 };

src/core/test-utils.tsx

@@ -5,6 +5,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import type { RenderOptions } from '@testing-library/react-native';
 import { render } from '@testing-library/react-native';
 import type { ReactElement } from 'react';
+import React from 'react';
 const createAppWrapper = () => ({ children }: { children: React.ReactNode }) => (
     <BottomSheetModalProvider>
       <NavigationContainer>{children}</NavigationContainer>

src/ui/focus-aware-status-bar.tsx

@@ -1,5 +1,6 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
+import React from 'react';
 import { StatusBar } from 'react-native';
 
 type Props = React.ComponentProps<typeof StatusBar>;

src/ui/select.tsx

@@ -18,8 +18,7 @@ import colors from '@/ui/colors';
 import { CaretDown } from '@/ui/icons';
 
 import type { InputControllerType } from './input';
-import { useModal } from './modal';
-import { Modal } from './modal';
+import { Modal, useModal } from './modal';
 import { Text } from './text';
 
 const selectTv = tv({

src/ui/utils.tsx

@@ -10,7 +10,6 @@ export const HEIGHT = height;
 
 // for onError react queries and mutations
 export const showError = (error: AxiosError) => {
-  console.log(JSON.stringify(error?.response?.data));
   const description = extractError(error?.response?.data).trimEnd();
 
   showMessage({