diff --git a/src/App.js b/src/App.js index 6614762..0ac8ef0 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ import Skill from "./components/Skill"; import Experience from "./components/Experience"; import Education from "./components/Education"; import Project from "./components/Project"; +import { setRepo } from "./store/slices/repoSlice"; function App() { const dispatch = useDispatch(); @@ -28,13 +29,13 @@ function App() { }, [theme]) useEffect(() => { - loadGitData(); + loadProfile(); + loadRepo(); }, []) - const loadGitData = () => { + const loadProfile = () => { axios.get(`https://api.github.com/users/${config.githubUsername}`) .then(response => { - let data = response.data; let profileData = { @@ -48,14 +49,15 @@ function App() { dispatch(setProfile(profileData)); }) - .catch(error => { + .catch((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(403); } else if (error.response.status === 404) { @@ -63,14 +65,41 @@ function App() { } else { setError(500); } - } catch (error) { + } catch (error2) { setError(500); } }) .finally(() => { dispatch(setLoading(false)); }); + } + const loadRepo = () => { + dispatch(setLoading(true)); + + axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`) + .then(response => { + let data = response.data; + + dispatch(setRepo(data.items)); + }) + .catch((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(), + }); + + + } catch (error2) { + console.error('Error:', error2); + } + }) + .finally(() => { + dispatch(setLoading(false)); + });; } return ( @@ -109,7 +138,7 @@ function App() { ) : (
-
+
{ !config.themeConfig.disableSwitch && ( @@ -121,100 +150,13 @@ function App() {
- - - - {/*
-
-
-
-
- -
-
-
-
-

Janis Johnson

-

Accounts Agent

-
+
+
+ + +
-
-
-
-

Meredith Mayer

-

Data Liaison

-
-
- -
-
-
-
-
-
-

4,600

-

Page views

-
-
- - -
-
-
-
-
- -
-

- Enable Notifications -

-

- To get latest updates -

-
-
-
-
-
-

- Top 10 UI Components -

-
-
- Colors -
-
- UI Design -
-
- Creativity -
-
-

- Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente. -

-
- - -
-
-
*/}
) diff --git a/src/components/Project.js b/src/components/Project.js index 85c8ff6..2d26a72 100644 --- a/src/components/Project.js +++ b/src/components/Project.js @@ -3,8 +3,35 @@ import { useSelector } from "react-redux"; import { skeleton } from "../helpers/utils"; import { FiChevronsDown } from 'react-icons/fi'; +const LIMIT = 8; + const Project = () => { const loading = useSelector(state => state.loading); + const repo = useSelector(state => state.repo); + + const renderProjects = () => { + if (loading) { + + } else { + return repo.slice(0, LIMIT).map((project, index) => ( +
+
+
+
+ + {project.name} +
+

{project.description}

+
+
+ Stats +
+
+
+ )); + } + + } return ( @@ -34,62 +61,7 @@ const Project = () => {
-
-
-
-
- - Ezfolio -
-

Open Source Portfolio/Resume CMS built using Laravel, React and Ant Design.

-
-
- Stats -
-
-
-
-
-
-
- - Ezfolio -
-

Open Source Portfolio/Resume CMS built using Laravel, React and Ant Design. Open Source Portfolio/Resume CMS built using Laravel, React and Ant Design.

-
-
- Stats -
-
-
-
-
-
-
- - Ezfolio -
-

Open Source Portfolio/Resume CMS built using Laravel

-
-
- Stats -
-
-
-
-
-
-
- - Ezfolio -
-

Open Source Por

-
-
- Stats -
-
-
+ {renderProjects()}
diff --git a/src/config.js b/src/config.js index 3786d2f..e51c972 100644 --- a/src/config.js +++ b/src/config.js @@ -1,5 +1,5 @@ module.exports = { - githubUsername: 'tailwindlabs', // required + githubUsername: 'arifszn', // required email: 'contact@arifszn.com', // optional linkedinUsername: 'ariful-alam', // optional dribbbleUsername: '', // optional diff --git a/src/store/slices/repoSlice.js b/src/store/slices/repoSlice.js new file mode 100644 index 0000000..cd005ba --- /dev/null +++ b/src/store/slices/repoSlice.js @@ -0,0 +1,19 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const initialState = []; + +export const repoSlice = createSlice({ + name: 'repo', + initialState: initialState, + reducers: { + setRepo: (state, action) => { + state = action.payload; + + return state; + } + } +}) + +export const { setRepo } = repoSlice.actions; + +export default repoSlice.reducer; \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js index 0e10339..fb15eed 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,12 +1,14 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit'; import loadingSlice from './slices/loadingSlice'; import profileSlice from './slices/profileSlice'; +import repoSlice from './slices/repoSlice'; import themeSlice from './slices/themeSlice'; const rootReducer = combineReducers({ profile: profileSlice, theme: themeSlice, loading: loadingSlice, + repo: repoSlice, }) export const store = configureStore({