Fetch repo
This commit is contained in:
MD. Ariful Alam
parent
eff1e1fd08
commit
3924ed3288
140
src/App.js
140
src/App.js
@ -13,6 +13,7 @@ import Skill from "./components/Skill";
|
|||||||
import Experience from "./components/Experience";
|
import Experience from "./components/Experience";
|
||||||
import Education from "./components/Education";
|
import Education from "./components/Education";
|
||||||
import Project from "./components/Project";
|
import Project from "./components/Project";
|
||||||
|
import { setRepo } from "./store/slices/repoSlice";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -28,13 +29,13 @@ function App() {
|
|||||||
}, [theme])
|
}, [theme])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadGitData();
|
loadProfile();
|
||||||
|
loadRepo();
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const loadGitData = () => {
|
const loadProfile = () => {
|
||||||
axios.get(`https://api.github.com/users/${config.githubUsername}`)
|
axios.get(`https://api.github.com/users/${config.githubUsername}`)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
|
||||||
let data = response.data;
|
let data = response.data;
|
||||||
|
|
||||||
let profileData = {
|
let profileData = {
|
||||||
@ -48,14 +49,15 @@ function App() {
|
|||||||
|
|
||||||
dispatch(setProfile(profileData));
|
dispatch(setProfile(profileData));
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch((error) => {
|
||||||
console.error('Error:', error);
|
console.error('Error:', error);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
setRateLimit({
|
setRateLimit({
|
||||||
remaining: error.response.headers['x-ratelimit-remaining'],
|
remaining: error.response.headers['x-ratelimit-remaining'],
|
||||||
reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
|
reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
|
||||||
})
|
});
|
||||||
|
|
||||||
if (error.response.status === 403) {
|
if (error.response.status === 403) {
|
||||||
setError(403);
|
setError(403);
|
||||||
} else if (error.response.status === 404) {
|
} else if (error.response.status === 404) {
|
||||||
@ -63,14 +65,41 @@ function App() {
|
|||||||
} else {
|
} else {
|
||||||
setError(500);
|
setError(500);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error2) {
|
||||||
setError(500);
|
setError(500);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
dispatch(setLoading(false));
|
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 (
|
return (
|
||||||
@ -109,7 +138,7 @@ function App() {
|
|||||||
) : (
|
) : (
|
||||||
<div className="p-4 lg:p-10 min-h-full bg-base-200">
|
<div className="p-4 lg:p-10 min-h-full bg-base-200">
|
||||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:bg-base-200 rounded-box">
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:bg-base-200 rounded-box">
|
||||||
<div className="row-span-3">
|
<div className="col-span-1">
|
||||||
<div className="grid grid-cols-1 gap-6">
|
<div className="grid grid-cols-1 gap-6">
|
||||||
{
|
{
|
||||||
!config.themeConfig.disableSwitch && (
|
!config.themeConfig.disableSwitch && (
|
||||||
@ -121,100 +150,13 @@ function App() {
|
|||||||
<Skill/>
|
<Skill/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Experience/>
|
<div className="col-span-2">
|
||||||
<Education/>
|
<div className="grid grid-cols-1 gap-6">
|
||||||
<Project/>
|
<Experience/>
|
||||||
{/* <div className="card shadow-lg compact side bg-base-100">
|
<Education/>
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
<Project/>
|
||||||
<div>
|
|
||||||
<div className="avatar">
|
|
||||||
<div className="rounded-full w-14 h-14 shadow">
|
|
||||||
<img src="https://i.pravatar.cc/500?img=32" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="card-title">Janis Johnson</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">Accounts Agent</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="card-title">Meredith Mayer</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">Data Liaison</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-0">
|
|
||||||
<button className="btn btn-sm">Follow</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="card-title text-primary">4,600</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">Page views</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-2 flex-0">
|
|
||||||
<button className="btn btn-sm btn-square">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-sm btn-square">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<label className="flex-0">
|
|
||||||
<input type="checkbox" defaultChecked="checked" className="toggle toggle-primary" />
|
|
||||||
</label>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="card-title">
|
|
||||||
Enable Notifications
|
|
||||||
</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">
|
|
||||||
To get latest updates
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card col-span-1 row-span-3 shadow-lg xl:col-span-2 bg-base-100">
|
|
||||||
<div className="card-body">
|
|
||||||
<h2 className="my-4 text-4xl font-bold card-title">
|
|
||||||
Top 10 UI Components
|
|
||||||
</h2>
|
|
||||||
<div className="mb-4 space-x-2 card-actions">
|
|
||||||
<div className="badge badge-ghost">
|
|
||||||
Colors
|
|
||||||
</div>
|
|
||||||
<div className="badge badge-ghost">
|
|
||||||
UI Design
|
|
||||||
</div>
|
|
||||||
<div className="badge badge-ghost">
|
|
||||||
Creativity
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
|
|
||||||
</p>
|
|
||||||
<div className="justify-end space-x-2 card-actions">
|
|
||||||
<button className="btn btn-primary">
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
<button className="btn">
|
|
||||||
Register
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -3,8 +3,35 @@ import { useSelector } from "react-redux";
|
|||||||
import { skeleton } from "../helpers/utils";
|
import { skeleton } from "../helpers/utils";
|
||||||
import { FiChevronsDown } from 'react-icons/fi';
|
import { FiChevronsDown } from 'react-icons/fi';
|
||||||
|
|
||||||
|
const LIMIT = 8;
|
||||||
|
|
||||||
const Project = () => {
|
const Project = () => {
|
||||||
const loading = useSelector(state => state.loading);
|
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) => (
|
||||||
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
|
<div className="flex justify-between flex-col p-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
|
||||||
|
<span>{project.name}</span>
|
||||||
|
</div>
|
||||||
|
<p className="mb-8">{project.description}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Stats
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
@ -34,62 +61,7 @@ const Project = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-span-2">
|
<div class="col-span-2">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
{renderProjects()}
|
||||||
<div className="flex justify-between flex-col p-8">
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
|
|
||||||
<span>Ezfolio</span>
|
|
||||||
</div>
|
|
||||||
<p className="mb-8">Open Source Portfolio/Resume CMS built using Laravel, React and Ant Design.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Stats
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex justify-between flex-col p-8">
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
|
|
||||||
<span>Ezfolio</span>
|
|
||||||
</div>
|
|
||||||
<p className="mb-8">Open Source Portfolio/Resume CMS built using Laravel, React and Ant Design. Open Source Portfolio/Resume CMS built using Laravel, React and Ant Design.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Stats
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex justify-between flex-col p-8">
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
|
|
||||||
<span>Ezfolio</span>
|
|
||||||
</div>
|
|
||||||
<p className="mb-8">Open Source Portfolio/Resume CMS built using Laravel</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Stats
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex justify-between flex-col p-8">
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
|
|
||||||
<span>Ezfolio</span>
|
|
||||||
</div>
|
|
||||||
<p className="mb-8">Open Source Por</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Stats
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
githubUsername: 'tailwindlabs', // required
|
githubUsername: 'arifszn', // required
|
||||||
email: 'contact@arifszn.com', // optional
|
email: 'contact@arifszn.com', // optional
|
||||||
linkedinUsername: 'ariful-alam', // optional
|
linkedinUsername: 'ariful-alam', // optional
|
||||||
dribbbleUsername: '', // optional
|
dribbbleUsername: '', // optional
|
||||||
|
|||||||
19
src/store/slices/repoSlice.js
Normal file
19
src/store/slices/repoSlice.js
Normal file
@ -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;
|
||||||
@ -1,12 +1,14 @@
|
|||||||
import { combineReducers, configureStore } from '@reduxjs/toolkit';
|
import { combineReducers, configureStore } from '@reduxjs/toolkit';
|
||||||
import loadingSlice from './slices/loadingSlice';
|
import loadingSlice from './slices/loadingSlice';
|
||||||
import profileSlice from './slices/profileSlice';
|
import profileSlice from './slices/profileSlice';
|
||||||
|
import repoSlice from './slices/repoSlice';
|
||||||
import themeSlice from './slices/themeSlice';
|
import themeSlice from './slices/themeSlice';
|
||||||
|
|
||||||
const rootReducer = combineReducers({
|
const rootReducer = combineReducers({
|
||||||
profile: profileSlice,
|
profile: profileSlice,
|
||||||
theme: themeSlice,
|
theme: themeSlice,
|
||||||
loading: loadingSlice,
|
loading: loadingSlice,
|
||||||
|
repo: repoSlice,
|
||||||
})
|
})
|
||||||
|
|
||||||
export const store = configureStore({
|
export const store = configureStore({
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user