Skip to content

Commit 03a9e7f

Browse files
digoarthurdigoarthur
authored
refactor: separation of function in files (#30)
1 parent b4a6b25 commit 03a9e7f

File tree

9 files changed

+173
-146
lines changed

9 files changed

+173
-146
lines changed

‎src/components/ProjectIcons.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { IconsData } from '../hooks/useGithubAutomatedRepos';
3+
import { projectIconsURL } from '../icons/projectIconsURL';
44

55
type Props = {
66
itemTopics: string;
@@ -10,15 +10,15 @@ type Props = {
1010
/**
1111
* @param {string} itemTopics - Mandatory: ex.: item.topics.map(topics)...
1212
* @param {string} className - Optional: style className.
13-
* @returns {<img/>} - Return tag img, project svg icon.
13+
* @returns {ReactNode} - Return tag img, project svg icon.
1414
*/
1515

1616
export function ProjectIcons({ itemTopics, className }: Props) {
17-
const { projectIcons } = IconsData();
17+
1818
return (
1919
<div>
20-
{projectIcons[itemTopics as never] ? (
21-
<img className={className} alt={projectIcons[itemTopics as never]} src={projectIcons[itemTopics as never]} />
20+
{projectIconsURL[itemTopics] ? (
21+
<img className={className} alt={projectIconsURL[itemTopics]} src={projectIconsURL[itemTopics]} />
2222
) : (
2323
<> </>
2424
)}

‎src/components/StackIcons.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

3-
import { IconsData } from '../hooks/useGithubAutomatedRepos';
4-
3+
import { stackIconsURL } from '../icons/stackIconsURL';
4+
import { projectIconsURL } from '../icons/projectIconsURL';
55
type Props = {
66
itemTopics: string;
77
className?: string;
@@ -10,13 +10,13 @@ type Props = {
1010
/**
1111
* @param {string} itemTopics - Mandatory: ex.: item.topics.map(itemTopics) ...
1212
* @param {string} className - Optional: style className.
13-
* @returns {<img/>} - Return tag img, stack svg icon.
13+
* @returns {ReactNode} - Return tag img, stack svg icon.
1414
*/
1515
export function StackIcons({ itemTopics, className }: Props) {
16-
const { stackIcons, projectIcons } = IconsData();
17-
return itemTopics === 'deploy' || projectIcons[itemTopics as never] ? (
16+
17+
return itemTopics === 'deploy' || projectIconsURL[itemTopics] ? (
1818
<> </>
1919
) : (
20-
<img className={className} alt={stackIcons[itemTopics as never]} src={stackIcons[itemTopics as never]} />
20+
<img className={className} alt={stackIconsURL[itemTopics]} src={stackIconsURL[itemTopics]} />
2121
);
2222
}

‎src/components/StackLabels/StackLabels.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from 'react';
1+
import React, { ReactNode, ReactPortal } from 'react';
22

3-
import { IconsData } from '../../hooks/useGithubAutomatedRepos';
3+
import { projectIconsURL } from '../../icons/projectIconsURL';
4+
import { stackIconsURL } from '../../icons/stackIconsURL';
45
import { css } from './styles.js';
56

67
type Props = {
@@ -11,20 +12,17 @@ type Props = {
1112
/**
1213
* @param {string} itemTopics - Mandatory: ex.: item.topics.map(itemTopics)...
1314
* @param {string} className - Optional: style className.
14-
* @returns {<p/>} - Return tag p, stack text.
15+
* @returns {ReactNode} - Return tag p, stack text.
1516
*/
16-
export function StackLabels({ itemTopics, className = 'styleStackLabels' }: Props) {
17-
const { projectIcons, stackIcons } = IconsData();
17+
export function StackLabels({ itemTopics, className = 'styleStackLabels' }: Props){
18+
1819

19-
if (projectIcons[itemTopics as never]) {
20-
return <> </>;
21-
}
22-
if (stackIcons[itemTopics as never]) {
23-
return (
24-
<>
25-
<style>{css}</style>
26-
<p className={className}>{itemTopics}</p>
27-
</>
28-
);
29-
}
20+
return itemTopics === 'deploy' || projectIconsURL[itemTopics] || stackIconsURL[itemTopics] ==undefined ? (
21+
<> </>
22+
) : (
23+
<>
24+
<style>{css}</style>
25+
<p className={className}>{itemTopics}</p>
26+
</>
27+
);
3028
}

‎src/hook/useGithubAutomatedRepos.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
3+
import { useEffect, useState } from 'react';
4+
import { checkImage } from './utils/checkImage';
5+
import { fetchData } from './utils/fetchGitHubAPI';
6+
7+
export interface IGithubRepos {
8+
name: string;
9+
topics: string[];
10+
html_url: string;
11+
description: string;
12+
id: number;
13+
homepage: string;
14+
banner: () => string;
15+
}
16+
17+
/**
18+
* @param {string} usernameGitHub - Insert your username GitHub Ex.: https://github.com/USERNAME
19+
* @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-.
20+
* @returns {(IGithubRepos[])} - Returns an array with the properties: name, topics, html_url, description, id, homepage.
21+
*/
22+
export function useGitHubAutomatedRepos(usernameGitHub: string, keyWordDeploy: string) {
23+
24+
const [data, setData] = useState<IGithubRepos[]>([]);
25+
const [loading, setLoading] = useState<boolean>(true);
26+
const [error, setError] = useState<string>('');
27+
28+
useEffect(() => {
29+
fetchData(usernameGitHub,keyWordDeploy,setData,setLoading,setError);
30+
}, [usernameGitHub, keyWordDeploy]);
31+
32+
const repository = data.map((item: IGithubRepos) => ({
33+
id: item.id,
34+
name: item.name,
35+
html_url: item.html_url,
36+
description: item.description,
37+
topics: item.topics,
38+
homepage: item.homepage,
39+
banner: checkImage(usernameGitHub, item.name),
40+
}));
41+
return { repository, loading, error };
42+
43+
}
44+
45+
46+
47+
48+

‎src/hook/utils/checkImage.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
/**
3+
* @param {string} usernameGitHub - Insert your username GitHub Ex.: https://github.com/USERNAME
4+
* @param {string} repositoryName - 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-.
5+
* @returns {string} - Return imageURL, address to acess image
6+
*/
7+
8+
const typeImg = ['svg', 'png'];
9+
export const checkImage = (usernameGitHub: string, repositoryName: string): string => {
10+
let imageURL = '';
11+
typeImg.map((type) => {
12+
const checkURL = `https://raw.githubusercontent.com/${usernameGitHub}/${repositoryName}/main/src/assets/imgs/banner.${type}`;
13+
const http = new XMLHttpRequest();
14+
http.open('HEAD', checkURL, false);
15+
http.send();
16+
17+
if (http.status === 200) {
18+
imageURL = checkURL;
19+
}
20+
});
21+
return imageURL;
22+
}

‎src/hook/utils/fetchGitHubAPI.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
export interface IGithubRepos {
3+
name: string;
4+
topics: string[];
5+
html_url: string;
6+
description: string;
7+
id: number;
8+
homepage: string;
9+
banner: () => string;
10+
}
11+
12+
/**
13+
* @param {string} usernameGitHub - Insert your username GitHub Ex.: https://github.com/USERNAME
14+
* @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-.
15+
* @param {React.Dispatch<React.SetStateAction<IGithubRepos[]>} setData - Insert <useState> function to receive data from the GitHub API linked to the keyword. !! Don't forget to enter keywords in GitHub projects. !!
16+
* @param {React.Dispatch<React.SetStateAction<boolean>} setLoading - Insert <useState> function to receive loading states.
17+
* @param {React.Dispatch<React.SetStateAction<string>} setError - Insert <useState> function to receive request error message
18+
*/
19+
20+
export const fetchData = async (usernameGitHub:string,keyWordDeploy:string, setData:React.Dispatch<React.SetStateAction<IGithubRepos[]>>, setLoading:React.Dispatch<React.SetStateAction<boolean>>,setError:React.Dispatch<React.SetStateAction<string>>) => {
21+
setLoading(true);
22+
try {
23+
const response = await fetch(`https://api.github.com/users/${usernameGitHub}/repos?sort=created&per_page=999`);
24+
if (!response.ok) {
25+
throw new Error(`Unsuccessful request: ${response.statusText}`);
26+
}
27+
const jsonData = await response.json();
28+
setData(jsonData.filter((item: IGithubRepos) => item.topics.includes(keyWordDeploy)));
29+
} catch (err) {
30+
setError((err as Error).message);
31+
} finally {
32+
setLoading(false);
33+
}
34+
};

‎src/icons/projectIconsURL.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Project Icon Font:
2+
// https://www.svgrepo.com/svg/384245/controller-joystick-games-video-console?edit=true
3+
// https://www.svgrepo.com/svg/383702/landing-page-web-design?edit=true
4+
// https://www.svgrepo.com/svg/459107/robot?edit=true
5+
// https://www.svgrepo.com/svg/471159/check-square-broken?edit=true
6+
// https://www.svgrepo.com/svg/383754/security-protection-lock-padlock-square-locked?edit=true
7+
// https://www.svgrepo.com/svg/339111/dashboard?edit=true
8+
// https://www.svgrepo.com/svg/257454/profile?edit=true
9+
// https://www.svgrepo.com/svg/298828/store?edit=true
10+
// https://www.svgrepo.com/svg/429278/cart-essential-shopping?edit=true
11+
// https://www.svgrepo.com/svg/144539/artist-color-palette?edit=true
12+
// https://www.svgrepo.com/svg/424981/online?edit=true
13+
// https://www.svgrepo.com/svg/384295/weather-forecast-sunny-snow-cloud-day?edit=true
14+
// https://www.svgrepo.com/svg/456864/diagram
15+
// https://www.svgrepo.com/svg/455166/map-navigation?edit=true
16+
// https://www.svgrepo.com/svg/343466/news-feed?edit=true
17+
// https://www.svgrepo.com/svg/458454/database-1?edit=true
18+
19+
interface IProjectIcons {
20+
readonly [key: string]: string;
21+
}
22+
23+
// 64px
24+
export const projectIconsURL:IProjectIcons = {
25+
art: 'https://user-images.githubusercontent.com/59892368/212994060-8d1644c7-96d7-4f3b-8e94-65ff76db0c92.svg',
26+
artificialintelligence: 'https://user-images.githubusercontent.com/59892368/212984565-a424b06e-db5e-464a-a5df-ddf7c9bab6ad.svg',
27+
dashboard: 'https://user-images.githubusercontent.com/59892368/212991791-588a6c13-795e-47aa-b496-8bdbaa3cac30.svg',
28+
education: 'https://user-images.githubusercontent.com/59892368/212284904-0b4f29fa-4141-4212-b516-d4e4fcdb8519.svg',
29+
game: 'https://user-images.githubusercontent.com/59892368/212984732-79dd44aa-23a5-4b83-ae28-7a2ddd443032.svg',
30+
landingpage: 'https://user-images.githubusercontent.com/59892368/212984364-88a0808b-a8d1-440c-b74e-f82bc3e28748.svg',
31+
personalwebsite: 'https://user-images.githubusercontent.com/59892368/213131421-fa77f07c-9120-4b40-859d-2bd799de6681.svg',
32+
productivity: 'https://user-images.githubusercontent.com/59892368/212994727-f05595d9-53b7-43a5-b974-b27fa2557653.svg',
33+
security: 'https://user-images.githubusercontent.com/59892368/212985266-a658da1c-64ba-46b7-a069-a148ca217be9.svg',
34+
store: 'https://user-images.githubusercontent.com/59892368/213137554-83aa6798-9487-4d1b-a260-fd2035adaaad.svg',
35+
};
36+
37+
38+

‎src/hooks/useGithubAutomatedRepos.ts‎ renamed to ‎src/icons/stackIconsURL.ts‎

Lines changed: 5 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,8 @@
1-
// Project Icon Font:
2-
// https://www.svgrepo.com/svg/384245/controller-joystick-games-video-console?edit=true
3-
// https://www.svgrepo.com/svg/383702/landing-page-web-design?edit=true
4-
// https://www.svgrepo.com/svg/459107/robot?edit=true
5-
// https://www.svgrepo.com/svg/471159/check-square-broken?edit=true
6-
// https://www.svgrepo.com/svg/383754/security-protection-lock-padlock-square-locked?edit=true
7-
// https://www.svgrepo.com/svg/339111/dashboard?edit=true
8-
// https://www.svgrepo.com/svg/257454/profile?edit=true
9-
// https://www.svgrepo.com/svg/298828/store?edit=true
10-
// https://www.svgrepo.com/svg/429278/cart-essential-shopping?edit=true
11-
// https://www.svgrepo.com/svg/144539/artist-color-palette?edit=true
12-
// https://www.svgrepo.com/svg/424981/online?edit=true
13-
// https://www.svgrepo.com/svg/384295/weather-forecast-sunny-snow-cloud-day?edit=true
14-
// https://www.svgrepo.com/svg/456864/diagram
15-
// https://www.svgrepo.com/svg/455166/map-navigation?edit=true
16-
// https://www.svgrepo.com/svg/343466/news-feed?edit=true
17-
// https://www.svgrepo.com/svg/458454/database-1?edit=true
1+
interface IStackIcons {
2+
readonly [key: string]: string;
3+
}
184

19-
import { useEffect, useState } from 'react';
20-
21-
export interface IGithubRepos {
22-
name: string;
23-
topics: string[];
24-
html_url: string;
25-
description: string;
26-
id: number;
27-
homepage: string;
28-
banner: () => string;
29-
}
30-
31-
/**
32-
* @param {string} usernameGitHub - Insert your username GitHub Ex.: https://github.com/USERNAME
33-
* @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-.
34-
* @returns {(IGithubRepos[])} - Returns an array with the properties: name, topics, html_url, description, id, homepage.
35-
*/
36-
export function useGitHubAutomatedRepos(usernameGitHub: string, keyWordDeploy: string) {
37-
38-
const [data, setData] = useState<IGithubRepos[]>([]);
39-
const [loading, setLoading] = useState<boolean>(true);
40-
const [error, setError] = useState<string>('');
41-
42-
useEffect(() => {
43-
const fetchData = async () => {
44-
setLoading(true);
45-
try {
46-
const response = await fetch(`https://api.github.com/users/${usernameGitHub}/repos?sort=created&per_page=999`);
47-
if (!response.ok) {
48-
throw new Error(`Unsuccessful request: ${response.statusText}`);
49-
}
50-
const jsonData = await response.json();
51-
setData(jsonData.filter((item: IGithubRepos) => item.topics.includes(keyWordDeploy as never)));
52-
} catch (err) {
53-
setError((err as Error).message);
54-
} finally {
55-
setLoading(false);
56-
}
57-
};
58-
59-
fetchData();
60-
}, [usernameGitHub, keyWordDeploy]);
61-
62-
63-
const typeImg = ['svg', 'png'];
64-
function checkImage(usernameGitHub: string, repositoryName: string): string {
65-
let checkURL = '';
66-
typeImg.map((type) => {
67-
const url = `https://raw.githubusercontent.com/${usernameGitHub}/${repositoryName}/main/src/assets/imgs/banner.${type}`;
68-
const http = new XMLHttpRequest();
69-
http.open('HEAD', url, false);
70-
http.send();
71-
72-
if (http.status === 200) {
73-
checkURL = url;
74-
}
75-
});
76-
return checkURL;
77-
}
78-
79-
80-
81-
const repository = data.map((item: IGithubRepos) => ({
82-
83-
id: item.id,
84-
name: item.name,
85-
html_url: item.html_url,
86-
description: item.description,
87-
topics: item.topics,
88-
homepage: item.homepage,
89-
banner: checkImage(usernameGitHub, item.name),
90-
}));
91-
return { repository, loading, error };
92-
93-
}
94-
95-
export function IconsData() {
96-
// 25px
97-
const stackIcons = {
5+
export const stackIconsURL:IStackIcons = {
986
androidstudio: 'https://user-images.githubusercontent.com/59892368/216783644-f664d47c-f686-496d-8073-2e83b2b469ab.svg',
997
angular: 'https://github-production-user-asset-6210df.s3.amazonaws.com/59892368/287532135-7c81a717-da75-4aeb-ab22-95fc2a3254be.svg',
1008
arduino: 'https://user-images.githubusercontent.com/59892368/216785825-af6a605c-6ca3-4bb5-9889-31ad818fb20b.svg',
@@ -191,25 +99,4 @@ export function IconsData() {
19199
vitejs: 'https://user-images.githubusercontent.com/59892368/218274365-3eae86f7-7953-4209-b5e7-466c8335caa2.svg',
192100
vuejs: 'https://user-images.githubusercontent.com/59892368/215260542-defd6142-e8a8-44f5-8c8a-c6dfaf3d114a.svg',
193101
yarn: 'https://github-production-user-asset-6210df.s3.amazonaws.com/59892368/287774024-f3af28e4-40c9-4b02-b5e4-c33702c2fca0.svg',
194-
};
195-
196-
// 64px
197-
const projectIcons = {
198-
art: 'https://user-images.githubusercontent.com/59892368/212994060-8d1644c7-96d7-4f3b-8e94-65ff76db0c92.svg',
199-
artificialintelligence: 'https://user-images.githubusercontent.com/59892368/212984565-a424b06e-db5e-464a-a5df-ddf7c9bab6ad.svg',
200-
dashboard: 'https://user-images.githubusercontent.com/59892368/212991791-588a6c13-795e-47aa-b496-8bdbaa3cac30.svg',
201-
education: 'https://user-images.githubusercontent.com/59892368/212284904-0b4f29fa-4141-4212-b516-d4e4fcdb8519.svg',
202-
game: 'https://user-images.githubusercontent.com/59892368/212984732-79dd44aa-23a5-4b83-ae28-7a2ddd443032.svg',
203-
landingpage: 'https://user-images.githubusercontent.com/59892368/212984364-88a0808b-a8d1-440c-b74e-f82bc3e28748.svg',
204-
personalwebsite: 'https://user-images.githubusercontent.com/59892368/213131421-fa77f07c-9120-4b40-859d-2bd799de6681.svg',
205-
productivity: 'https://user-images.githubusercontent.com/59892368/212994727-f05595d9-53b7-43a5-b974-b27fa2557653.svg',
206-
security: 'https://user-images.githubusercontent.com/59892368/212985266-a658da1c-64ba-46b7-a069-a148ca217be9.svg',
207-
store: 'https://user-images.githubusercontent.com/59892368/213137554-83aa6798-9487-4d1b-a260-fd2035adaaad.svg',
208-
};
209-
210-
return {
211-
stackIcons,
212-
projectIcons,
213-
IconsData,
214-
};
215-
}
102+
}

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export { ProjectIcons } from './components/ProjectIcons';
22
export { StackIcons } from './components/StackIcons';
33
export { StackLabels } from './components/StackLabels/StackLabels';
4-
export { IGithubRepos, useGitHubAutomatedRepos, IconsData } from './hooks/useGithubAutomatedRepos';
4+
export { IGithubRepos, useGitHubAutomatedRepos} from './hook/useGithubAutomatedRepos';

0 commit comments

Comments
 (0)