Merge pull request #46 from rootstrap/fix/sonar_issues

Fix/sonar issues

Author: fernandatoledo

.eslintrc.js

@@ -19,6 +19,13 @@ module.exports = {
         ignore: ['/android', '/ios'],
       },
     ],
+    curly: [2, 'all'],
+    'prefer-const': [
+      'error',
+      {
+        destructuring: 'any',
+      },
+    ],
   },
   overrides: [
     // Configuration for TypeScript files
@@ -39,6 +46,8 @@ module.exports = {
         project: './tsconfig.json',
       },
       rules: {
+        'react/react-in-jsx-scope': 'off',
+        'react/jsx-uses-react': 'off',
         'prettier/prettier': [
           'error',
           {
@@ -72,6 +81,19 @@ module.exports = {
             caughtErrorsIgnorePattern: '^_',
           },
         ],
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: 'react',
+                importNames: ['default'],
+                message: 'No need to import React',
+              },
+            ],
+          },
+        ],
+        curly: [2, 'all'],
       },
     },
     // Configuration for  translations files (i18next)
@@ -106,6 +128,7 @@ module.exports = {
             endOfLine: 'auto',
           },
         ],
+        curly: [2, 'all'],
       },
     },
     {

.vscode/project.code-snippets

@@ -25,7 +25,7 @@
   "Component": {
     "prefix": "comp",
     "body": [
-      "import * as React from 'react';",
+      "import React from 'react';",
       "",
       "import { Text, View } from '@/ui';",
       "",

docs/src/content/docs/ui-and-theme/Forms.mdx

@@ -36,7 +36,7 @@ Let's say you want to create a form that allows the user to log in to the applic
 The right way to validate a form is to create a schema validation. You can use any library you want but we recommend using zod as you can easily infer the types from the schema. Here is how you can create a schema validation for the login form:
 
 ```tsx
-import * as z from 'zod';
+import z from 'zod';
 
 const schema = z.object({
   email: z.string().email(),
@@ -53,9 +53,8 @@ Here is how you can create your login screen:
 
 ```tsx
 import { zodResolver } from '@hookform/resolvers/zod';
-import React from 'react';
 import { useForm } from 'react-hook-form';
-import * as z from 'zod';
+import z from 'zod';
 
 import { useAuth } from '@/core';
 import { Button, ControlledInput, View } from '@/ui';

docs/src/content/docs/ui-and-theme/components.mdx

@@ -56,7 +56,7 @@ We also provide an `EmptyList` component that you can use to display a message w
 **Use Case**
 
 ```tsx
-import * as React from 'react';
+import React from 'react';
 import { List, EmptyList, Text } from '@/ui';
 
 const MyComponent = () => {
@@ -85,7 +85,7 @@ The `cssInterop` function from `nativewind` is used to apply styling and, in thi
 **Use Case**
 
 ```tsx
-import * as React from 'react';
+import React from 'react';
 import { Image } from '@/ui';
 
 const MyComponent = () => {
@@ -119,7 +119,7 @@ You can also use the `t` snippet to create a simple Text with a default `classNa
 **Use Case**
 
 ```tsx
-import * as React from 'react';
+import React from 'react';
 import { Text, View } from 'react-native';
 
 const MyComponent = () => {
@@ -183,7 +183,7 @@ Read more about Handling Forms [here](../forms/).
 **Use Case**
 
 ```tsx
-import * as React from 'react';
+import React from 'react';
 import { Input, View } from '@/ui';
 
 const MyComponent = () => {
@@ -214,7 +214,7 @@ Based on your needs, you can use the `Modal` if you don't have a fixed height fo
 **Use Case**
 
 ```tsx
-import * as React from 'react';
+import React from 'react';
 import { Modal, useModal, View, Button, Text } from '@/ui';
 
 const MyComponent = () => {
@@ -256,7 +256,7 @@ Feel free to update the component implementation to fit your need and as you kee
 **Use Case**
 
 ```tsx
-import * as React from 'react';
+import React from 'react';
 
 import type { Option } from '@/ui';
 import { SelectInput, View } from '@/ui';

src/api/common/api-provider.tsx

@@ -1,7 +1,5 @@
 import { useReactQueryDevTools } from '@dev-plugins/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import * as React from 'react';
-
 export const queryClient = new QueryClient();
 
 export function APIProvider({ children }: { children: React.ReactNode }) {

src/api/common/utils.spec.tsx

@@ -1,4 +1,4 @@
-import { toCamelCase, toSnakeCase } from './utils';
+import { getUrlParameters, toCamelCase, toSnakeCase } from './utils';
 
 describe('utils', () => {
   describe('toCamelCase', () => {
@@ -57,3 +57,32 @@ describe('utils', () => {
     });
   });
 });
+
+describe('getUrlParameters', () => {
+  it('should return null for a null URL', () => {
+    const result = getUrlParameters(null);
+    expect(result).toBeNull();
+  });
+
+  it('should return an empty object for a URL with no parameters', () => {
+    const result = getUrlParameters('https://example.com');
+    expect(result).toEqual({});
+  });
+
+  it('should return an object with a single key-value pair for a URL with one parameter', () => {
+    const result = getUrlParameters('https://example.com?name=John');
+    expect(result).toEqual({ name: 'John' });
+  });
+
+  it('should return an object with multiple key-value pairs for a URL with multiple parameters', () => {
+    const result = getUrlParameters('https://example.com?name=John&age=30');
+    expect(result).toEqual({ name: 'John', age: '30' });
+  });
+
+  it('should handle special characters in the URL parameters', () => {
+    const result = getUrlParameters(
+      'https://example.com?name=John%20Doe&city=New%20York'
+    );
+    expect(result).toEqual({ name: 'John Doe', city: 'New York' });
+  });
+});

src/api/common/utils.tsx

@@ -28,15 +28,11 @@ export function getUrlParameters(
   if (url === null) {
     return null;
   }
-  let regex = /[?&]([^=#]+)=([^&#]*)/g,
-    params = {},
-    match;
-  while ((match = regex.exec(url))) {
-    if (match[1] !== null) {
-      //@ts-ignore
-      params[match[1]] = match[2];
-    }
-  }
+  const urlObj = new URL(url);
+  const params: { [key: string]: string } = {};
+  urlObj.searchParams.forEach((value, key) => {
+    params[key] = value;
+  });
   return params;
 }
 

src/app/(app)/_layout.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { Link, Redirect, SplashScreen, Tabs } from 'expo-router';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { useAuth, useIsFirstTime } from '@/core';
 import { Pressable, Text } from '@/ui';

src/app/(app)/index.tsx

@@ -1,5 +1,5 @@
 import { FlashList } from '@shopify/flash-list';
-import React from 'react';
+import { useCallback } from 'react';
 
 import type { Post } from '@/api';
 import { usePosts } from '@/api';
@@ -8,7 +8,7 @@ import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui';
 
 export default function Feed() {
   const { data, isPending, isError } = usePosts();
-  const renderItem = React.useCallback(
+  const renderItem = useCallback(
     ({ item }: { item: Post }) => <Card {...item} />,
     []
   );

src/app/(app)/settings.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import { Env } from '@env';
 import { useColorScheme } from 'nativewind';