Skip to content

Commit

Permalink
Add Recent Activity
Browse files Browse the repository at this point in the history
  • Loading branch information
@devxprite
devxprite committed Apr 1, 2024
1 parent 2e9f2ae commit 4d69a71
Show file tree
Hide file tree
Showing 8 changed files with 235 additions and 46 deletions.
3 changes: 3 additions & 0 deletions app/[username]/Charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ const borderColor = [
'rgb(201, 203, 207)',
];

// const borderColor = []
// for (let i = 30; i <= 100; i += 5) borderColor.push(`hsla(0, 0%, ${i}%, 1)`);

const Charts = ({ commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages }) => {
return (
<GridContainer name="Charts" className={'grid-cols-2 gap-0 gap-y-6 px-6 md:grid-cols-4 md:gap-8 '}>
Expand Down
123 changes: 98 additions & 25 deletions app/[username]/RecentActivity.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,110 @@
// 'use client';

import GridContainer from '@/components/GridContainer';
import { IoGitPullRequestSharp, IoGitMergeSharp } from 'react-icons/io5';
import { RiGitClosePullRequestLine } from 'react-icons/ri';

const PrIcon = ({ status }) => {
if (status === 'MERGED') {
return (
<div className="rounded bg-purple-500 p-[3px] text-white">
<IoGitMergeSharp />
</div>
);
}
import { FaRegStar, FaCodeBranch } from 'react-icons/fa';
import { FaCodeCommit, FaCodeFork } from 'react-icons/fa6';
import { FaTag } from 'react-icons/fa6';
import { VscRepo } from 'react-icons/vsc';
import { GoIssueOpened } from 'react-icons/go';

if (status === 'CLOSED') {
return (
<div className="rounded bg-red-500 p-[3px] text-white">
<RiGitClosePullRequestLine />
</div>
);
}
import { IoGitPullRequestSharp } from 'react-icons/io5';

return (
<div className="rounded bg-green-600 p-[3px] text-white">
<IoGitPullRequestSharp />
</div>
);
const Activity = ({ event: { type, action, repo, size, issue, commits, branch, ref, pull_request } }) => {
switch (type) {
case 'star': {
return (
<div>
<FaRegStar className="mr-2 inline-block text-white" />
{action} repository <a href={repo.url}>{repo.name}</a>
</div>
);
}

case 'create': {
return (
<div>
{ref.type == 'branch' ?
<FaCodeBranch className="mr-2 inline-block text-white" />
: <FaTag className="mr-2 inline-block text-white" />}
Created New {ref.type} on <a href={repo.url}>{repo.name} </a>
{ref.type == 'branch' && (
<>
branch
<span className="rounded bg-gray-700 px-1 py-0.5 font-[monospace] text-sm">{ref.name}</span>
</>
)}
</div>
);
}

case 'public': {
return (
<div>
<VscRepo className="mr-2 inline-block text-white" />
Made <a href={repo.url}>{repo.name}</a> public
</div>
);
}

case 'fork': {
return (
<div>
<FaCodeFork className="mr-2 inline-block text-white" />
Forked <a href={repo.link}>{repo.name}</a> to <a href={repo.url}>{repo.forked}</a>
</div>
);
}

case 'pull_request': {
return (
<div>
<IoGitPullRequestSharp className="mr-2 inline-block text-white" />
{action} pull request <a href={pull_request.url}>{pull_request.title}</a> on{' '}
<a href={repo.url}>{repo.name}</a>
</div>
);
}

case 'issue': {
return (
<div>
<GoIssueOpened className="mr-2 inline-block text-white" />
{action} issue <a href={issue.url}>{issue.title}</a> on <a href={repo.url}>{repo.name}</a>
</div>
);
}

case 'push': {
return (
<div>
<FaCodeCommit className="mr-2 inline-block text-white" />
Pushed {size} commit(s) to <a href={repo.url}>{repo.name}</a> on branch{' '}
<span className="rounded bg-gray-700 px-1 py-0.5 font-[monospace] text-sm">{branch}</span>
<ol className="mt-1 list-inside list-disc text-sm text-gray-400">
{commits.map((commit, i) => (
<li key={i}>{commit.message}</li>
))}
</ol>
</div>
);
}
}
};

const RecentActivity = ({ activity }) => {
return (
<GridContainer name="Recent Activity" className={'grid-cols-1 md:grid-cols-3'}>

<GridContainer name="Recent Activity" className={'grid-cols-1 md:grid-cols-1'}>
{activity.map((event, i) => {
return (
<div className="box text-left hover:scale-100">
<p className="text-sm text-gray-400">{new Date(event.timestamp).toLocaleString()}</p>

<div className="mt-2.5 text-lg font-medium text-gray-200 [&_a]:text-cyan-500">
<Activity event={event} />
</div>
</div>
);
})}
</GridContainer>
);
};
Expand Down
2 changes: 0 additions & 2 deletions app/[username]/TopContributions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@ const TopContributions = ({ contributions }) => {
</ul>
</div>
))}


</GridContainer>
);
};
Expand Down
8 changes: 7 additions & 1 deletion app/[username]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,17 @@ import TopContributions from './TopContributions';
import Languages from './Languages';
import RecentActivity from './RecentActivity';
import FollowUp from './FollowUp';
import fetchActivity from '@/utils/fetchActivity';

const page = async ({ params: { username } }) => {
console.log('Username:', username);

const userInfo = await fetchUserInfo(username);
const userActivity = await fetchActivity(username);

// TO DO: Add Social Profiles


const {
languagesSize,
contributionCalendar,
Expand All @@ -36,7 +42,6 @@ const page = async ({ params: { username } }) => {
<Languages languages={languagesSize} />
<PopularProjects projects={popularRepositories} />
<TopContributions contributions={topContributions} />
<RecentActivity />

<Charts
commitsPerRepo={commitsPerRepo}
Expand All @@ -47,6 +52,7 @@ const page = async ({ params: { username } }) => {
<FollowUp follwoup={followUp} />
<ActivityGraph activity={contributionCalendar} />
<Calendar contributions={contributionCalendar} />
<RecentActivity activity={userActivity} />
</main>
);
};
Expand Down
20 changes: 4 additions & 16 deletions components/ChartInit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,22 +44,6 @@ ChartJS.defaults.plugins.title.color = '#ccc';

ChartJS.defaults.scale.grid.color = 'rgba(256, 256, 256, 0.07)';


// ChartJS.register({
// afterDraw: chart => {
// if (chart.data.datasets[0].data.length === 0) {
// var ctx = chart.chart.ctx;
// ctx.save();
// ctx.textAlign = 'center';
// ctx.textBaseline = 'middle';
// ctx.font = "22px Arial";
// ctx.fillStyle = "gray";
// ctx.fillText('No data available', chart.chart.width / 2, chart.chart.height / 2);
// ctx.restore();
// }
// }
// })

ChartJS.defaults.backgroundColor = [
'rgba(255, 99, 132, 0.5)',
'rgba(255, 159, 64, 0.5)',
Expand All @@ -70,6 +54,10 @@ ChartJS.defaults.backgroundColor = [
'rgba(201, 203, 207, 0.5)',
];

// const backgroundColor = [];
// for (let i = 30; i <= 100; i += 7) backgroundColor.push(`hsla(0, 0%, ${i}%, 0.6)`);
// ChartJS.defaults.backgroundColor = backgroundColor;

const ChartInit = () => {
return <div></div>;
};
Expand Down
121 changes: 121 additions & 0 deletions utils/fetchActivity.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import axios from 'axios';

const fetchActivity = async login => {
const { data } = await axios.get(`https://api.github.com/users/${login}/events/public`, {
headers: {
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
Accept: 'application/vnd.github+json',
},
});

// organize data
const activity = data
.map(({ type, payload, created_at: timestamp, repo, ...event }) => {
switch (type) {
// Created a git branch, tag, or repository
case 'CreateEvent': {
const { ref: name, ref_type: type } = payload;
return {
type: 'create',
ref: { name, type },
timestamp,
repo,
};
}

// Deleted a git branch or tag
case 'DeleteEvent': {
const { ref: deleted, ref_type: type } = payload;
return {
type: 'delete',
ref: { deleted, type },
timestamp,
repo,
};
}

// Forked a repository
case 'ForkEvent': {
const {
forkee: { full_name: forked },
} = payload;
return {
type: 'fork',
forked,
timestamp,
repo,
};
}

//Issue event
case 'IssuesEvent': {
if (!['opened', 'closed', 'reopened'].includes(payload.action)) return null;

const { action, issue } = payload;
return {
type: 'issue',
action,
issue,
timestamp,
repo,
};
}

//Pull requests events
case 'PullRequestEvent': {
if (!['opened', 'closed', 'reopened'].includes(payload.action)) return null;

const { action, pull_request } = payload;
return {
type: 'pull_request',
action,
pull_request: {
title: pull_request.title,
number: pull_request.number,
url: pull_request.html_url,
},
timestamp,
repo,
};
}

//Pushed commits to a repository
case 'PushEvent': {
const { size, commits, ref: branch } = payload;
return {
type: 'push',
size,
commits,
branch: branch.split('/').pop(),
timestamp,
repo,
};
}

//Starred a repository
case 'WatchEvent': {
const { action } = payload;
if (!['started'].includes(action)) return null;

return {
type: 'star',
timestamp,
repo,
action,
};
}

case 'PublicEvent': {
return { type: 'public', timestamp, repo };
}
}
})
.filter(Boolean)
.splice(0, 14);

console.log(activity);

return activity;
};

export default fetchActivity;
2 changes: 1 addition & 1 deletion utils/fetchUserData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const repositoriesQuery = `
repositories(
ownerAffiliations: OWNER
isFork: false
first: 25
first: 10
orderBy: {field: STARGAZERS, direction: DESC}
) {
nodes {
Expand Down
2 changes: 1 addition & 1 deletion utils/parse/getFollowUp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const getFollowUp = (response, login) => {
},
};

console.log(followUp);
// console.log(followUp);

return followUp;
};
Expand Down

0 comments on commit 4d69a71

Please sign in to comment.