Merge pull request #34 from DIGOARTHUR/31-feat-add-more-quantity-of-banner-image

feat(banner):add the possibility of more banner images

Author: digoarthur

src/components/ProjectIcons.tsx

@@ -14,14 +14,9 @@ type Props = {
  */
 
 export function ProjectIcons({ itemTopics, className }: Props) {
-   
     return (
         <div>
-            {projectIconsURL[itemTopics] ? (
-                <img className={className} alt={projectIconsURL[itemTopics]} src={projectIconsURL[itemTopics]} />
-            ) : (
-                <> </>
-            )}
+            {projectIconsURL[itemTopics] ? <img className={className} alt={projectIconsURL[itemTopics]} src={projectIconsURL[itemTopics]} /> : <> </>}
         </div>
     );
 }

src/components/StackIcons.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { stackIconsURL } from '../icons/stackIconsURL';
 import { projectIconsURL } from '../icons/projectIconsURL';
+import { stackIconsURL } from '../icons/stackIconsURL';
+
 type Props = {
     itemTopics: string;
     className?: string;
@@ -13,7 +14,6 @@ type Props = {
  * @returns {ReactNode} - Return tag img, stack svg icon.
  */
 export function StackIcons({ itemTopics, className }: Props) {
- 
     return itemTopics === 'deploy' || projectIconsURL[itemTopics] ? (
         <> </>
     ) : (

src/components/StackLabels/StackLabels.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, ReactPortal } from 'react';
+import React, { ReactNode } from 'react';
 
 import { projectIconsURL } from '../../icons/projectIconsURL';
 import { stackIconsURL } from '../../icons/stackIconsURL';
@@ -14,15 +14,13 @@ type Props = {
  * @param {string} className - Optional: style className.
  * @returns {ReactNode} - Return tag p, stack text.
  */
-export function StackLabels({ itemTopics, className = 'styleStackLabels' }: Props){
- 
-
-    return itemTopics === 'deploy' || projectIconsURL[itemTopics] || stackIconsURL[itemTopics] ==undefined ? (
+export function StackLabels({ itemTopics, className = 'styleStackLabels' }: Props): ReactNode {
+    return itemTopics === 'deploy' || projectIconsURL[itemTopics] || stackIconsURL[itemTopics] === undefined ? (
         <> </>
     ) : (
         <>
-        <style>{css}</style>
-        <p className={className}>{itemTopics}</p>
-    </>
+            <style>{css}</style>
+            <p className={className}>{itemTopics}</p>
+        </>
     );
 }

src/hook/api/fetchGitHubAPI.ts

@@ -0,0 +1,8 @@
+export async function fetchGitHubAPI(usernameGitHub: string) {
+    const response = await fetch(`https://api.github.com/users/${usernameGitHub}/repos?sort=created&per_page=999`);
+    if (!response.ok) {
+        throw new Error(`Unsuccessful request: ${response.statusText}`);
+    }
+    const jsonData = await response.json();
+    return jsonData;
+}

src/hook/api/fetchGitHubBanner.ts

@@ -0,0 +1,13 @@
+export async function fetchGitHubBanner(usernameGitHub: string, repositoryName: string) {
+    try {
+        const response = await fetch(`https://api.github.com/repos/${usernameGitHub}/${repositoryName}/contents/src/assets/imgs`);
+        if (!response.ok) {
+            throw new Error(`Unsuccessful request: ${response.statusText}`);
+        }
+        const jsonData = await response.json();
+
+        return jsonData;
+    } catch (err) {
+        return err as Error;
+    }
+}

src/hook/useGithubAutomatedRepos.ts

@@ -1,8 +1,6 @@
-
-
 import { useEffect, useState } from 'react';
-import { checkImage } from './utils/checkImage';
-import { fetchData } from './utils/fetchGitHubAPI';
+
+import { _handleRepository } from './utils/_handleRepository';
 
 export interface IGithubRepos {
     name: string;
@@ -11,38 +9,28 @@ export interface IGithubRepos {
     description: string;
     id: number;
     homepage: string;
-    banner: () => string;
+    banner: string[];
+}
+
+interface IGitHubAutomatedRepos {
+    repositoriesData: IGithubRepos[];
+    loading: boolean;
+    error: 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-.
- * @returns {(IGithubRepos[])} - Returns an array with the properties: name, topics, html_url, description, id, homepage.
+ * @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) {
-
-    const [data, setData] = useState<IGithubRepos[]>([]);
+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(() => {
-        fetchData(usernameGitHub,keyWordDeploy,setData,setLoading,setError);
-    }, [usernameGitHub, keyWordDeploy]);
-
-    const repository = data.map((item: IGithubRepos) => ({
-        id: item.id,
-        name: item.name,
-        html_url: item.html_url,
-        description: item.description,
-        topics: item.topics,
-        homepage: item.homepage,
-        banner: checkImage(usernameGitHub, item.name),
-    }));
-    return { repository, loading, error };
+        _handleRepository(usernameGitHub, keyWordDeploy, setRepositoriesData, setLoading, setError);
+    }, []);
 
+    return { repositoriesData, loading, error };
 }
-
-
- 
-
-

src/hook/utils/_handleBanner.ts

@@ -0,0 +1,25 @@
+import { fetchGitHubBanner } from '../api/fetchGitHubBanner';
+
+export interface IBanner {
+    download_url: string;
+}
+
+/**
+ * @param {string} usernameGitHub - Insert your username GitHub Ex.: https://github.com/USERNAME
+ * @param {string} repositoryName - Insert the repository name
+ * @returns {(Promise<string[])} - repositoriesData[] with the properties: name, topics[], html_url, description, id, homepage, banner[]. Loading to await for data. Error for a bad request.
+ */
+
+export async function _handleBanner(usernameGitHub: string, repositoryName: string): Promise<string[]> {
+    const banners_url: string[] = [];
+
+    await fetchGitHubBanner(usernameGitHub, repositoryName).then((repositorie_Banners: IBanner[]) => {
+        repositorie_Banners.map((item: IBanner) => {
+            if (item.download_url.includes('banner')) {
+                banners_url.push(item.download_url);
+            }
+        });
+    });
+
+    return banners_url;
+}

src/hook/utils/_handleRepository.ts

@@ -0,0 +1,56 @@
+import { fetchGitHubAPI } from '../api/fetchGitHubAPI';
+import { _handleBanner } from './_handleBanner';
+
+export interface IGithubRepos {
+    name: string;
+    topics: string[];
+    html_url: string;
+    description: string;
+    id: number;
+    homepage: string;
+    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-.
+ * @param {React.Dispatch<React.SetStateAction<IGithubRepos[]>} setRepositoriesData  - Insert <useState> function to receive data from the GitHub API linked to the keyword. !! Don't forget to enter keywords in GitHub projects. !!
+ * @param {React.Dispatch<React.SetStateAction<boolean>} setLoading  - Insert <useState> function to receive loading states.
+ * @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);
+    }
+}