Merge pull request #35 from DIGOARTHUR/33-feat-api-implement-react-query

feat(API): implement react query

Author: digoarthur

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+.DS_Store

.husky/commit-msg

@@ -10,7 +10,6 @@
         "yalc:update": "npx yalc push --scripts --update --replace",
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
-        "prepare": "husky install",
         "lint-staged": "lint-staged"
     },
     "lint-staged": {
@@ -31,7 +30,7 @@
     "devDependencies": {
         "@commitlint/cli": "^17.4.2",
         "@commitlint/config-conventional": "^17.4.2",
-        "@types/react": "^18.0.26",
+        "@types/react": "^18.3.12",
         "@typescript-eslint/eslint-plugin": "^5.50.0",
         "@typescript-eslint/parser": "^5.50.0",
         "commitizen": "^4.3.0",
@@ -49,17 +48,19 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-typescript": "^0.14.0",
-        "husky": "^8.0.3",
         "lint-staged": "^13.1.0",
         "prettier": "^2.8.3",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "typescript": "^4.9.4"
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "typescript": "^5.7.2"
     },
     "config": {
         "commitizen": {
             "path": "./node_modules/cz-conventional-changelog"
         }
     },
-    "dependencies": {}
+    "dependencies": {
+        "@tanstack/react-query": "^5.61.5",
+        "@types/react-dom": "^18.3.1"
+    }
 }

.husky/pre-commit

@@ -0,0 +1,22 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // Cache válido por 5 minutos
+      refetchOnWindowFocus: false, // Não refetch quando o foco retorna
+    
+    },
+  },
+});
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const ReactQueryProvider: React.FC<Props> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);

.husky/prepare-commit-msg

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { _handleRepository } from './utils/_handleRepository';
+import { _handleBanner } from './utils/_handleBanner';
 
+import { useQuery } from '@tanstack/react-query';
+import { fetchRepositories } from './utils/_handleRepository';
 export interface IGithubRepos {
     name: string;
     topics: string[];
@@ -23,14 +25,10 @@ interface IGitHubAutomatedRepos {
  * @param {string} keyWordDeploy - Insert a keyword chosen by you. - This key is responsible for managing your projects on GitHub in topics field Ex.: https://github.com/DIGOARTHUR/github-automated-repos#--about-library-.
  * @returns {(IGitHubAutomatedRepos)} - repositoriesData[] with the properties: name, topics[], html_url, description, id, homepage, banner[]. Loading to await for data. Error for a bad request.
  */
-export function useGitHubAutomatedRepos(usernameGitHub: string, keyWordDeploy: string): IGitHubAutomatedRepos {
-    const [repositoriesData, setRepositoriesData] = useState<IGithubRepos[]>([]);
-    const [loading, setLoading] = useState<boolean>(true);
-    const [error, setError] = useState<string>('');
-
-    useEffect(() => {
-        _handleRepository(usernameGitHub, keyWordDeploy, setRepositoriesData, setLoading, setError);
-    }, []);
-
-    return { repositoriesData, loading, error };
+export function useGitHubAutomatedRepos(usernameGitHub: string, keyWordDeploy: string)  {
+    return useQuery<IGithubRepos[]>({
+        queryKey: ["githubRepos", usernameGitHub, keyWordDeploy],
+        queryFn: () => fetchRepositories(usernameGitHub, keyWordDeploy),
+        
+      });
 }

package-lock.json

@@ -1,5 +1,8 @@
 import { fetchGitHubAPI } from '../api/fetchGitHubAPI';
 import { _handleBanner } from './_handleBanner';
+import { useQuery } from '@tanstack/react-query';
+
+
 
 export interface IGithubRepos {
     name: string;
@@ -11,6 +14,8 @@ export interface IGithubRepos {
     banner: string[];
 }
 
+
+
 /**
  * @param {string} usernameGitHub - Insert your username GitHub Ex.: https://github.com/USERNAME
  * @param {string} keyWordDeploy - Insert a keyword chosen by you. - This key is responsible for managing your projects on GitHub in topics field Ex.: https://github.com/DIGOARTHUR/github-automated-repos#--about-library-.
@@ -19,38 +24,31 @@ export interface IGithubRepos {
  * @param {React.Dispatch<React.SetStateAction<string>} setError - Insert <useState> function to receive request error message
  */
 
-export async function _handleRepository(
-    usernameGitHub: string,
-    keyWordDeploy: string,
-    setRepositoriesData: React.Dispatch<React.SetStateAction<IGithubRepos[]>>,
-    setLoading: React.Dispatch<React.SetStateAction<boolean>>,
-    setError: React.Dispatch<React.SetStateAction<string>>
-) {
-    setLoading(true);
-    try {
-        const jsonData = await fetchGitHubAPI(usernameGitHub);
-
-        const datafilter = jsonData.filter((item: IGithubRepos) => item.topics.includes(keyWordDeploy));
-
-        const repositories = await Promise.all(
-            datafilter.map(async (item: IGithubRepos) => {
-                const banner = await _handleBanner(usernameGitHub, item.name);
-                return {
-                    id: item.id,
-                    name: item.name,
-                    html_url: item.html_url,
-                    description: item.description,
-                    topics: item.topics,
-                    homepage: item.homepage,
-                    banner,
-                };
-            })
-        );
-
-        setRepositoriesData(repositories);
-    } catch (err) {
-        setError((err as Error).message);
-    } finally {
-        setLoading(false);
-    }
-}
+// Função de busca
+export const fetchRepositories = async (usernameGitHub: string, keyWordDeploy: string): Promise<IGithubRepos[]> => {
+    const jsonData = await fetchGitHubAPI(usernameGitHub);
+  
+    const datafilter = jsonData.filter((item: IGithubRepos) => item.topics.includes(keyWordDeploy));
+  
+    const repositories = await Promise.all(
+      datafilter.map(async (item: IGithubRepos) => {
+        const banner = await _handleBanner(usernameGitHub, item.name);
+        return {
+          id: item.id,
+          name: item.name,
+          html_url: item.html_url,
+          description: item.description,
+          topics: item.topics,
+          homepage: item.homepage,
+          banner,
+        };
+      })
+    );
+  
+    return repositories;
+  };
+  
+  // Hook personalizado
+  export function _handleRepository(usernameGitHub: string, keyWordDeploy: string) {
+   
+  }

package.json

@@ -2,3 +2,5 @@ export { ProjectIcons } from './components/ProjectIcons';
 export { StackIcons } from './components/StackIcons';
 export { StackLabels } from './components/StackLabels/StackLabels';
 export { IGithubRepos, useGitHubAutomatedRepos } from './hook/useGithubAutomatedRepos';
+export { ReactQueryProvider } from './hook/api/QueryClientProvider';
+export {_handleRepository } from "./hook/utils/_handleRepository"