Skip to content

Commit

Permalink
generated the dependant card into the web-flow (#67)
Browse files Browse the repository at this point in the history 
* generated the dependant card into the web-flow

* handled zero reviewers found

* added 'top-reviewers' tag

* set threshold for card generation
  • Loading branch information
@e-for-eshaan
e-for-eshaan authored Dec 11, 2023
1 parent 4b0f21c commit 8aa7190
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 93 deletions.
14 changes: 13 additions & 1 deletion src/api-helpers/card-data-adapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { CodeReviewsData } from '@/components/templates/CodeReviews';
import { OSSContribsData } from '@/components/templates/OSSContribs';
import { sum } from 'ramda';
import { Username } from '@/components/templates/index';
import { DependantsData } from '@/components/templates/Dependants';

export const getDataFromGithubResponse = (data: GitHubDataResponse) => {
const intro: IntroCardProps | null = {
Expand Down Expand Up @@ -92,6 +93,15 @@ export const getDataFromGithubResponse = (data: GitHubDataResponse) => {
}
: null;

const userReviewers: DependantsData | null =
data.top_reviewers.length >= 2
? {
userAvatar: data.user.avatar_url,
dependants: data.top_reviewers,
username: data.user.login
}
: null;

return {
username: data.user.login,
[CardTypes.UNWRAPPED_INTRO]: intro,
Expand All @@ -102,7 +112,8 @@ export const getDataFromGithubResponse = (data: GitHubDataResponse) => {
[CardTypes.ZEN_OR_NINJA]: zenOrNinja,
[CardTypes.CONTRIBUTION_STREAK]: contributionStreak,
[CardTypes.TOP_REVIEWERS]: codeReviewerStats,
[CardTypes.OSS_CONTRIBUTION]: ossContribsData
[CardTypes.OSS_CONTRIBUTION]: ossContribsData,
[CardTypes.IT_TAKES_A_VILLAGE]: userReviewers
} as Record<
CardTypes,
| IntroCardProps
Expand All @@ -114,6 +125,7 @@ export const getDataFromGithubResponse = (data: GitHubDataResponse) => {
| StreakData
| CodeReviewsData
| OSSContribsData
| DependantsData
| null
> &
Username;
Expand Down
35 changes: 2 additions & 33 deletions src/api-helpers/general.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { websiteUrl } from '../constants/general';
import { IntroCardProps } from '../components/templates/IntroCard';
import { TimeOfTheDayData } from '../components/templates/TimeOfTheDay';
import { GitHubDataResponse, GithubData } from '../types/api-responses';
import { GitHubDataResponse } from '../types/api-responses';
import { CardTypes } from '../types/cards';
import { getDataFromGithubResponse } from './card-data-adapter';

Expand All @@ -11,38 +9,9 @@ export function arrayBufferToBuffer(arrayBuffer: ArrayBuffer): Buffer {
return nodeBuffer;
}

export const cardTemplateAdaptor = (data: GithubData) => {
let result: Record<
keyof typeof CardTypes,
IntroCardProps | TimeOfTheDayData | null
>;
result = {
[CardTypes.UNWRAPPED_INTRO]: {
username: data.data.username,
year: data.data.year
},
[CardTypes.DAY_NIGHT_CYCLE]: {
prsDuringDay: data.data.commits_during_day,
totalPrs: data.data.total_commits
},
[CardTypes.YOUR_CONTRIBUTIONS]: null,
[CardTypes.CONTRIBUTION_STREAK]: null,
[CardTypes.ZEN_OR_NINJA]: null,
[CardTypes.IT_TAKES_A_VILLAGE]: null,
[CardTypes.GUARDIAN_OF_PROD]: null,
[CardTypes.TOP_REVIEWERS]: null,
[CardTypes.PR_TIME_LAGS]: null,
[CardTypes.PR_REVIEWED_VS_AUTHORED]: null,
[CardTypes.PRODUCTION_BREAKING]: null,
[CardTypes.OSS_CONTRIBUTION]: null
};

return result;
};

export const abbreviateNumber = (value: number): string => {
if (value > 1000) {
return String(Number((value / 1000).toFixed(2))) + 'k';
return String(Number((value / 1000).toFixed(2))) + 'K';
}
return String(value);
};
Expand Down
41 changes: 27 additions & 14 deletions src/components/templates/Dependants.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import React, { FC } from 'react';
import { websiteUrl } from '../../constants/general';
import { RootCard } from './RootCard';
import { GithubReview } from '../../mocks/github';
import { Username } from '@/components/templates/index';

export type DependantsData = {
user: GithubReview;
dependants: GithubReview[];
userAvatar: string;
dependants: string[];
username: string;
};

export const Dependants: FC<DependantsData & Username> = ({
user,
username,
dependants,
username
userAvatar
}) => {
const village = `${websiteUrl}/assets/images/village.png`;
const attachedNodes = dependants.map(
(d) => '@' + shortenUsername(d.userName)
);
const attachedNodes = dependants
.slice(0, 4)
.map((userName) => '@' + shortenUsername(userName));
const centralNode = {
userName: '@' + shortenUsername(user.userName),
avatar: user.avatar
userName: '@' + shortenUsername(username),
avatar: userAvatar
};
return (
<RootCard bgColor="midnight" username={username}>
Expand All @@ -36,14 +36,15 @@ export const Dependants: FC<DependantsData & Username> = ({
<p tw="m-0">And shipping</p>
<p>your code involved</p>
<p tw="m-0">
<span tw="font-semibold mr-1">{attachedNodes.length} people</span>{' '}
this year!
<span tw="font-semibold mr-1">{dependants.length} people</span> this
year!
</p>
</div>
</div>
<img
tw="absolute bottom-[-20px] right-[-20px]"
width={270}
height={250}
src={village}
alt=""
/>
Expand Down Expand Up @@ -84,6 +85,9 @@ const Graph: FC<{
'my-4 flex relative top-4 p-1 mx-1 bg-[#788DDE] rounded-full items-center'
}
>
<p tw="text-[10px] -top-12 w-20 text-center -left-4 font-semibold absolute">
My top reviewers
</p>
<img
src={centralNode.avatar}
width={40}
Expand Down Expand Up @@ -122,6 +126,9 @@ const Graph: FC<{
'my-4 flex relative top-4 p-1 mx-1 bg-[#788DDE] rounded-full items-center'
}
>
<p tw="text-[10px] -top-12 w-20 text-center -left-4 font-semibold absolute">
My top reviewers
</p>
<img
src={centralNode.avatar}
width={40}
Expand Down Expand Up @@ -179,6 +186,9 @@ const Graph: FC<{
'my-4 flex relative top-4 p-1 mx-1 bg-[#788DDE] rounded-full items-center'
}
>
<p tw="text-[10px] -top-12 w-20 text-center -left-4 font-semibold absolute">
My top reviewers
</p>
<img
src={centralNode.avatar}
width={40}
Expand Down Expand Up @@ -273,6 +283,9 @@ const Graph: FC<{
'my-4 flex relative top-4 p-1 mx-1 bg-[#788DDE] rounded-full items-center'
}
>
<p tw="text-[10px] -top-12 w-20 text-center -left-4 font-semibold absolute">
My top reviewers
</p>
<img
src={centralNode.avatar}
width={40}
Expand Down Expand Up @@ -359,8 +372,8 @@ const ThirdArrow = () => (

const shortenUsername = (username: string) => {
const split = username.split('');
if (split.length > 20) {
return split.slice(0, 20).join('') + '...';
if (split.length > 18) {
return split.slice(0, 18).join('') + '...';
}
return username;
};
4 changes: 1 addition & 3 deletions src/mocks/github.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,7 @@ export const ghData = {
export type GithubReview = {
name: string;
userName: string;
avatar: string;
recievedFromUser?: boolean;
gaveToUser?: boolean;
avatar?: string;
};

export const updatedGhData = {
Expand Down
59 changes: 17 additions & 42 deletions src/pages/api/preview/dependants.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,32 @@
import { createImageUsingVercel } from '@/api-helpers/vercel-generator';
import { CardTypes } from '../../../types/cards';
import { DependantsData } from '../../../components/templates/Dependants';
import { GithubReview } from '../../../mocks/github';
import { Username } from '@/components/templates';

export const config = {
runtime: 'edge'
};

const generateStringOfNCharacters = (n: number) => {
return Array(n).fill('a').join('');
};

export const generateRandomNumberBetween = (
min: number = 0,
max: number = 40
) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};

const mockGithubDependants: GithubReview[] = [
{
name: 'John Doe',
userName: generateStringOfNCharacters(generateRandomNumberBetween()),
avatar: 'https://picsum.photos/id/11/200'
},
{
name: 'Jane Doe',
userName: generateStringOfNCharacters(generateRandomNumberBetween()),
avatar: 'https://picsum.photos/id/21/200'
},
{
name: 'John Smith',
userName: generateStringOfNCharacters(generateRandomNumberBetween()),
avatar: 'https://picsum.photos/id/31/200'
},
{
name: 'Smith',
userName: generateStringOfNCharacters(generateRandomNumberBetween()),
avatar: 'https://picsum.photos/id/31/200'
}
const mockGithubDependants = [
'jayantbhjandoiahdoahdlal',
'amoghjalan',
'dhruvagarwal',
'shivam-bit',
'e-for-eshaan',
'sidmohanty11',
'Sing-Li',
'adnanhashmi09',
'axonasif',
'Palanikannan1437',
'Dnouv',
'dkurt'
];

const mockGithubUser: GithubReview = {
name: 'eshaan',
userName: 'eshaan007',
avatar: 'https://picsum.photos/id/41/200'
};
const mockGithubUser = 'eshaan007';

const data: DependantsData & Username = {
const data: DependantsData = {
dependants: mockGithubDependants,
user: mockGithubUser,
username: 'jayantbh'
username: mockGithubUser,
userAvatar: 'https://avatars.githubusercontent.com/u/70485812?v=4'
};

const generateUsingVercel = async () => {
Expand Down

0 comments on commit 8aa7190

Please sign in to comment.