diff --git a/src/App.jsx b/src/App.jsx index f941509..a8c2e3e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,206 +1,7 @@ -import axios from 'axios'; -import { Fragment, useCallback, useEffect, useState } from 'react'; -import moment from 'moment'; -import HeadTagEditor from './components/head-tag-editor'; -import ErrorPage from './components/error-page'; -import ThemeChanger from './components/theme-changer'; -import AvatarCard from './components/avatar-card'; -import Details from './components/details'; -import Skill from './components/skill'; -import Experience from './components/experience'; -import Education from './components/education'; -import Project from './components/project'; -import Blog from './components/blog'; -import { getInitialTheme, setupHotjar } from './helpers/utils'; -import config from '../gitprofile.config'; -import './assets/index.css'; +import GitProfile from './components/GitProfile'; function App() { - const [theme, setTheme] = useState(getInitialTheme()); - const [loading, setLoading] = useState(true); - const [profile, setProfile] = useState(null); - const [repo, setRepo] = useState(null); - const [error, setError] = useState(null); - const [rateLimit, setRateLimit] = useState(null); - - useEffect(() => { - if (theme) { - document.documentElement.setAttribute('data-theme', theme); - } - }, [theme]); - - useEffect(() => { - setupHotjar(); - }, []); - - const loadData = useCallback(() => { - axios - .get(`https://api.github.com/users/${config.github.username}`) - .then((response) => { - let data = response.data; - - let profileData = { - avatar: data.avatar_url, - name: data.name ? data.name : '', - bio: data.bio ? data.bio : '', - location: data.location ? data.location : '', - company: data.company ? data.company : '', - }; - - setProfile(profileData); - }) - .then(() => { - let excludeRepo = ``; - - config.github.exclude.projects.forEach((project) => { - excludeRepo += `+-repo:${config.github.username}/${project}`; - }); - - let query = `user:${config.github.username}+fork:${!config.github - .exclude.forks}${excludeRepo}`; - - let url = `https://api.github.com/search/repositories?q=${query}&sort=${config.github.sortBy}&per_page=${config.github.limit}&type=Repositories`; - - axios - .get(url, { - headers: { - 'Content-Type': 'application/vnd.github.v3+json', - }, - }) - .then((response) => { - let data = response.data; - - setRepo(data.items); - }) - .catch((error) => { - handleError(error); - }); - }) - .catch((error) => { - handleError(error); - }) - .finally(() => { - setLoading(false); - }); - }, [setLoading]); - - useEffect(() => { - loadData(); - }, [loadData]); - - const handleError = (error) => { - console.error('Error:', error); - try { - setRateLimit({ - remaining: error.response.headers['x-ratelimit-remaining'], - reset: moment( - new Date(error.response.headers['x-ratelimit-reset'] * 1000) - ).fromNow(), - }); - - if (error.response.status === 403) { - setError(429); - } else if (error.response.status === 404) { - setError(404); - } else { - setError(500); - } - } catch (error2) { - setError(500); - } - }; - - return ( - - -
- {error ? ( - - Please provide correct github username in{' '} - gitprofile.config.js -

- ) : error === 429 ? ( -

- Oh no, you hit the{' '} - - rate limit - - ! Try again later{rateLimit && ` ${rateLimit.reset}`}. -

- ) : ( - `Something went wrong` - ) - } - /> - ) : ( - -
-
-
-
- {!config.themeConfig.disableSwitch && ( - - )} - -
- - - -
-
-
-
- - -
-
-
-
- {/* DO NOT REMOVE/MODIFY THE FOOTER. FOR MORE INFO https://github.com/arifszn/gitprofile#-please-read */} - - - )} -
- - ); + return ; } export default App; diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx new file mode 100644 index 0000000..c651e80 --- /dev/null +++ b/src/components/GitProfile.jsx @@ -0,0 +1,207 @@ +import axios from 'axios'; +import { Fragment, useCallback, useEffect, useState } from 'react'; +import moment from 'moment'; +import HeadTagEditor from './head-tag-editor'; +import ErrorPage from './error-page'; +import ThemeChanger from './theme-changer'; +import AvatarCard from './avatar-card'; +import Details from './details'; +import Skill from './skill'; +import Experience from './experience'; +import Education from './education'; +import Project from './project'; +import Blog from './blog'; +import { getInitialTheme, setupHotjar } from '../helpers/utils'; +import config from '../../gitprofile.config'; +import '../assets/index.css'; +import { HelmetProvider } from 'react-helmet-async'; + +const GitProfile = () => { + const [theme, setTheme] = useState(getInitialTheme()); + const [loading, setLoading] = useState(true); + const [profile, setProfile] = useState(null); + const [repo, setRepo] = useState(null); + const [error, setError] = useState(null); + const [rateLimit, setRateLimit] = useState(null); + + useEffect(() => { + if (theme) { + document.documentElement.setAttribute('data-theme', theme); + } + }, [theme]); + + useEffect(() => { + setupHotjar(); + }, []); + + const loadData = useCallback(() => { + axios + .get(`https://api.github.com/users/${config.github.username}`) + .then((response) => { + let data = response.data; + + let profileData = { + avatar: data.avatar_url, + name: data.name ? data.name : '', + bio: data.bio ? data.bio : '', + location: data.location ? data.location : '', + company: data.company ? data.company : '', + }; + + setProfile(profileData); + }) + .then(() => { + let excludeRepo = ``; + + config.github.exclude.projects.forEach((project) => { + excludeRepo += `+-repo:${config.github.username}/${project}`; + }); + + let query = `user:${config.github.username}+fork:${!config.github + .exclude.forks}${excludeRepo}`; + + let url = `https://api.github.com/search/repositories?q=${query}&sort=${config.github.sortBy}&per_page=${config.github.limit}&type=Repositories`; + + axios + .get(url, { + headers: { + 'Content-Type': 'application/vnd.github.v3+json', + }, + }) + .then((response) => { + let data = response.data; + + setRepo(data.items); + }) + .catch((error) => { + handleError(error); + }); + }) + .catch((error) => { + handleError(error); + }) + .finally(() => { + setLoading(false); + }); + }, [setLoading]); + + useEffect(() => { + loadData(); + }, [loadData]); + + const handleError = (error) => { + console.error('Error:', error); + try { + setRateLimit({ + remaining: error.response.headers['x-ratelimit-remaining'], + reset: moment( + new Date(error.response.headers['x-ratelimit-reset'] * 1000) + ).fromNow(), + }); + + if (error.response.status === 403) { + setError(429); + } else if (error.response.status === 404) { + setError(404); + } else { + setError(500); + } + } catch (error2) { + setError(500); + } + }; + + return ( + + +
+ {error ? ( + + Please provide correct github username in{' '} + gitprofile.config.js +

+ ) : error === 429 ? ( +

+ Oh no, you hit the{' '} + + rate limit + + ! Try again later{rateLimit && ` ${rateLimit.reset}`}. +

+ ) : ( + `Something went wrong` + ) + } + /> + ) : ( + +
+
+
+
+ {!config.themeConfig.disableSwitch && ( + + )} + +
+ + + +
+
+
+
+ + +
+
+
+
+ {/* DO NOT REMOVE/MODIFY THE FOOTER. FOR MORE INFO https://github.com/arifszn/gitprofile#-please-read */} + + + )} +
+ + ); +}; + +export default GitProfile; diff --git a/src/main.jsx b/src/main.jsx index 5c33570..c1f31c5 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,13 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; -import { HelmetProvider } from 'react-helmet-async'; ReactDOM.render( - - - + , document.getElementById('root') );