118 lines
4.7 KiB
JavaScript
118 lines
4.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
|
|
const GithubHistory = () => {
|
|
const [events, setEvents] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const fetchEvents = async () => {
|
|
try {
|
|
const response = await fetch('https://api.github.com/users/MatissJurevics/events/public?per_page=5');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch GitHub history');
|
|
}
|
|
const data = await response.json();
|
|
setEvents(data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchEvents();
|
|
}, []);
|
|
|
|
const getEventMessage = (event) => {
|
|
switch (event.type) {
|
|
case 'PushEvent':
|
|
return `Pushed to ${event.repo.name.replace('MatissJurevics/', '')}`;
|
|
case 'CreateEvent':
|
|
return `Created ${event.payload.ref_type} in ${event.repo.name.replace('MatissJurevics/', '')}`;
|
|
case 'WatchEvent':
|
|
return `Starred ${event.repo.name.replace('MatissJurevics/', '')}`;
|
|
case 'PullRequestEvent':
|
|
return `${event.payload.action} PR in ${event.repo.name.replace('MatissJurevics/', '')}`;
|
|
default:
|
|
return `${event.type} on ${event.repo.name.replace('MatissJurevics/', '')}`;
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(date);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666', fontFamily: 'monospace' }}>
|
|
LOADING HISTORY...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ff4d00', fontFamily: 'monospace' }}>
|
|
ERROR LOAD GITHUB DATA
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section style={{
|
|
height: '600px',
|
|
background: '#0a0a0a',
|
|
color: '#e4e4e4',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '60px 20px',
|
|
position: 'relative'
|
|
}}>
|
|
<div style={{
|
|
maxWidth: '600px', // Narrower container for list
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<h2 className="uppercase" style={{ fontSize: '3rem', marginBottom: '40px', lineHeight: 1, textAlign: 'center' }}>
|
|
Github <br /> History
|
|
</h2>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
|
{events.map(event => (
|
|
<div key={event.id} style={{
|
|
borderLeft: '2px solid #333',
|
|
paddingLeft: '20px',
|
|
transition: 'border-color 0.3s ease',
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.borderColor = '#ff4d00'}
|
|
onMouseLeave={(e) => e.currentTarget.style.borderColor = '#333'}
|
|
>
|
|
<p className="mono" style={{ fontSize: '0.8rem', color: '#666', marginBottom: '5px' }}>
|
|
{formatDate(event.created_at)}
|
|
</p>
|
|
<a href={`https://github.com/${event.repo.name}`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: 'inherit' }}>
|
|
<p style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
|
|
{getEventMessage(event)}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div style={{ marginTop: '40px', textAlign: 'center' }}>
|
|
<a href="https://github.com/MatissJurevics" target="_blank" rel="noopener noreferrer" className="mono" style={{ color: '#ff4d00', textDecoration: 'none', fontSize: '0.9rem' }}>
|
|
VIEW FULL PROFILE →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default GithubHistory;
|