Skip to content

Commit

Permalink
feat: add custom profile banner for verified OpenSauced user (open-sa…
Browse files Browse the repository at this point in the history 
…uced#771)

Fixes open-sauced#713
  • Loading branch information
@OgDev-01
OgDev-01 authored Jan 13, 2023
1 parent 788186c commit 4f73c15
Show file tree
Hide file tree
Showing 8 changed files with 174 additions and 83 deletions.
37 changes: 32 additions & 5 deletions components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,42 @@
import Avatar from "components/atoms/Avatar/avatar";
import { StaticImageData } from "next/image";
import Image from "next/image";
import React from "react";
import RainbowBg from "img/rainbow-cover.png";
import Button from "components/atoms/Button/button";
import Link from "next/link";

interface ContributorProfileHeaderProps {
avatarUrl?: string;
githubName?: string;
isConnected: boolean;
}
const ContributorProfileHeader = ({ avatarUrl }: ContributorProfileHeaderProps) => {
const ContributorProfileHeader = ({ avatarUrl, githubName, isConnected }: ContributorProfileHeaderProps) => {
return (
<div className="w-full flex items-end px-6 md:px-10 lg:px-16 bg-[#DFE3E6] h-[216px]">
<div className="translate-y-[70px]">
<Avatar hasBorder avatarURL={avatarUrl} size={184} isCircle />
<div className="w-full relative bg-light-slate-6 h-[216px]">
{isConnected && (
<div className="relative w-full h-full">
<Image priority alt="user profile cover image" layout="fill" objectFit="cover" src={RainbowBg} />
</div>
)}

<div className="w-full absolute -top-6 px-6 md:px-12 lg:px-16 flex flex-row items-end justify-between py-6">
<div className="translate-y-[75px]">
<Avatar className="" hasBorder avatarURL={avatarUrl} size={184} isCircle />
</div>
{isConnected && (
<div className="flex gap-3 flex-col md:flex-row items-center">
<a target="_blank" rel="noopener noreferrer" href={`https://github.com/${githubName}`}>
<Button className="!px-5 !py-2 !bg-white" type="text">
View on GitHub
</Button>
</a>
<Link href="#">
<Button className="!px-8 !py-2 !hidden" type="primary">
Collaborate
</Button>
</Link>
</div>
)}
</div>
</div>
);
Expand Down
158 changes: 87 additions & 71 deletions components/organisms/ContributorProfilePage/contributor-profile-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import ContributorTable from "components/molecules/ContributorTable/contributor-
import color from "lib/utils/color.json";
import { useTopicContributorCommits } from "lib/hooks/useTopicContributorCommits";
import { getRelativeDays } from "lib/utils/date-utils";
import Pill from "components/atoms/Pill/pill";
import getPercent from "lib/utils/get-percent";

const colorKeys = Object.keys(color);
interface PrObjectType {
Expand All @@ -39,20 +41,28 @@ interface ContributorProfilePageProps {
langList: string[];
repoList: RepoList[];
recentContributionCount: number;
user?: DbUser;
prTotal: number;
openPrs: number;
prReviews: number;
prVelocity: number;
prMerged: number;
loading: boolean;
error: boolean;
}
const ContributorProfilePage = ({
repositories,
recentContributionCount,
user,
githubAvatar,
githubName,
langList,
repoList,
openPrs,
prReviews,
prTotal,
loading,
error,
prMerged,
prVelocity
}: ContributorProfilePageProps) => {
const languageList = langList?.map((language) => {
Expand All @@ -65,87 +75,93 @@ const ContributorProfilePage = ({
});

const { chart } = useTopicContributorCommits(githubName, "*", repositories);
const prsMergedPercentage = getPercent(prTotal, prMerged || 0);
const isLoaded = !loading && !error;

return (
<div className=" w-full">
<ContributorProfileHeader avatarUrl={githubAvatar} />
<div className="pt-24 px-4 md:px-10 lg:px-16 flex flex-col lg:flex-row lg:gap-40 w-full overflow-hidden justify-between">
<div className="flex flex-col min-w-[270px] gap-4 ">
<div className="pb-6 border-b">
<Title className="!text-2xl !text-light-slate-12" level={3}>
{githubName}
</Title>
<span className="text-light-slate-11 text-sm">{`@${githubName}`}</span>
</div>
<div>
<p className="mb-4">Languages</p>
<CardHorizontalBarChart languageList={languageList} />
</div>
</div>
<div className="flex-1">
<div>
<Title className="!text-light-slate-12 !text-xl" level={4}>
Contribution Insights
</Title>
</div>
<div className="bg-white mt-4 rounded-2xl border p-4 md:p-6">
<div className=" flex flex-col lg:flex-row gap-2 md:gap-12 lg:gap-16 justify-between">
<div>
<span className="text-xs text-light-slate-11">PRs opened</span>
{openPrs ? (
<div className="flex lg:justify-center md:pr-8 mt-1">
<Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">{openPrs} PRs</Text>
</div>
) : (
<div className="flex justify-center items-end mt-1"> - </div>
)}
{loading && <>Loading...</>}
{error && <>An error has occured...</>}
{isLoaded && (
<>
<ContributorProfileHeader isConnected={!!user} githubName={githubName} avatarUrl={githubAvatar} />
<div className="pt-24 px-4 md:px-10 lg:px-16 flex flex-col lg:flex-row lg:gap-40 w-full overflow-hidden justify-between">
<div className="flex flex-col min-w-[270px] gap-4 ">
<div className="pb-6 border-b">
<Title className="!text-2xl !text-light-slate-12" level={3}>
{githubName}
</Title>
<span className="text-light-slate-11 text-sm">{`@${githubName}`}</span>
</div>
<div>
<span className="text-xs text-light-slate-11">Avg PRs velocity</span>
{prVelocity ? (
<div className="flex gap-2 lg:justify-center items-center">
<Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
{getRelativeDays(prVelocity)}
</Text>
<p className="flex text-red-700 items-end">
<IconContext.Provider value={{ color: "purple", style: { width: 20, height: 20 } }}>
<VscGitMerge />
</IconContext.Provider>
</p>
</div>
) : (
<div className="flex justify-center items-end mt-1"> - </div>
)}
<p className="mb-4">Languages</p>
<CardHorizontalBarChart languageList={languageList} />
</div>
</div>
<div className="flex-1">
<div>
<span className="text-xs text-light-slate-11">Contributed Repos</span>
{recentContributionCount ? (
<div className="flex lg:justify-center mt-1">
<Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
{`${recentContributionCount} Repo${recentContributionCount > 1 ? "s" : ""}`}
</Text>
</div>
) : (
<div className="flex justify-center items-end mt-1"> - </div>
)}
<Title className="!text-light-slate-12 !text-xl" level={4}>
Contribution Insights
</Title>
</div>
</div>
<div className="mt-10 h-32">
<CardLineChart lineChartOption={chart} />
</div>
<div>
<CardRepoList limit={7} repoList={repoList} />
</div>
<div className="bg-white mt-4 rounded-2xl border p-4 md:p-6">
<div className=" flex flex-col lg:flex-row gap-2 md:gap-12 lg:gap-16 justify-between">
<div>
<span className="text-xs text-light-slate-11">PRs opened</span>
{openPrs ? (
<div className="flex lg:justify-center md:pr-8 mt-1">
<Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
{openPrs} PRs
</Text>
</div>
) : (
<div className="flex justify-center items-end mt-1"> - </div>
)}
</div>
<div>
<span className="text-xs text-light-slate-11">Avg PRs velocity</span>
{prVelocity ? (
<div className="flex gap-2 lg:justify-center items-center">
<Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
{getRelativeDays(prVelocity)}
</Text>
<Pill color="purple" text={`${prsMergedPercentage}%`} />
</div>
) : (
<div className="flex justify-center items-end mt-1"> - </div>
)}
</div>
<div>
<span className="text-xs text-light-slate-11">Contributed Repos</span>
{recentContributionCount ? (
<div className="flex lg:justify-center mt-1">
<Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
{`${recentContributionCount} Repo${recentContributionCount > 1 ? "s" : ""}`}
</Text>
</div>
) : (
<div className="flex justify-center items-end mt-1"> - </div>
)}
</div>
</div>
<div className="mt-10 h-32">
<CardLineChart lineChartOption={chart} />
</div>
<div>
<CardRepoList limit={7} repoList={repoList} />
</div>

<div className="mt-6">
<ContributorTable limit={15} contributor={githubName} topic={"*"} repositories={undefined} />
</div>
<div className="mt-8 text-light-slate-9 text-sm">
<p>The data for these contributions is from publicly available open source projects on GitHub.</p>
<div className="mt-6">
<ContributorTable limit={15} contributor={githubName} topic={"*"} repositories={undefined} />
</div>
<div className="mt-8 text-light-slate-9 text-sm">
<p>The data for these contributions is from publicly available open source projects on GitHub.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)}
</div>
);
};
Expand Down
Binary file added img/rainbow-cover.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions lib/hooks/useFetchUser.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import publicApiFetcher from "lib/utils/public-api-fetcher";
import useSWR, { Fetcher } from "swr";

interface UserResponse extends DbUser {}
const useFetchUser = (username: string) => {
const { data, error } = useSWR<UserResponse, Error>(
`users/${username}`,
publicApiFetcher as Fetcher<UserResponse, Error>
);

return {
data: data || undefined,
isLoading: !error && !data,
isError: !!error
};
};

export { useFetchUser };
16 changes: 15 additions & 1 deletion next-types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ interface DbContribution {
readonly recent_opened_prs: number;
readonly recent_pr_reviews: number;
readonly recent_pr_velocity: number;
readonly recent_pr_merged: number;
}

interface DbInsight {
Expand Down Expand Up @@ -98,7 +99,7 @@ interface DbUserInsight {
readonly short_code: string;
readonly created_at: string;
readonly updated_at: string;
readonly repos: DbUserInsightRepo[]
readonly repos: DbUserInsightRepo[];
}

interface DbUserInsightRepo {
Expand All @@ -107,3 +108,16 @@ interface DbUserInsightRepo {
readonly repo_id: number;
readonly created_at: string;
}

interface DbUser {
readonly id: number;
readonly open_issues: number;
readonly is_private: boolean;
readonly is_open_sauced_member: boolean;
readonly created_at: string;
readonly updated_at: string;
readonly login: string;
readonly is_onboarded: boolean;
readonly is_waitlisted: boolean;
readonly role: number;
}
13 changes: 12 additions & 1 deletion pages/user/[username].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,21 @@ import { ContributorsProfileType } from "components/molecules/ContributorHoverCa
import HubPageLayout from "layouts/hub-page";
import HubLayout from "layouts/hub";
import ProfileLayout from "layouts/profile";
import { useFetchUser } from "lib/hooks/useFetchUser";

const Contributor = () => {
const router = useRouter();
const { username } = router.query;
const contributorLogin = username as string;

const { data: contributor, isLoading: contributorLoading, isError } = useSingleContributor(contributorLogin);
const {
data: contributor,
isLoading: contributorLoading,
isError: contributorError
} = useSingleContributor(contributorLogin);
const { data: user, isLoading: userLoading, isError: userError } = useFetchUser(contributorLogin);

const isError = contributorError;
const repoList = useRepoList(contributor[0]?.recent_repo_list || "");
const contributorLanguageList = (contributor[0]?.langs || "").split(",");
const profile: ContributorsProfileType = {
Expand All @@ -27,6 +34,10 @@ const Contributor = () => {
return (
<div className="w-full">
<ContributorProfilePage
prMerged={contributor[0]?.recent_pr_merged}
error={isError}
loading={userLoading}
user={user}
repoList={repoList}
langList={contributorLanguageList}
githubName={profile.githubName}
Expand Down
3 changes: 2 additions & 1 deletion stories/molecules/contributor-profile-header.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,6 @@ const ContributorProfileHeaderTemplate: ComponentStory<typeof ContributorProfile
export const ContributorProfileHeaderStory = ContributorProfileHeaderTemplate.bind({});
ContributorProfileHeaderStory.args = {
avatarUrl:
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80",
isConnected: true
};
12 changes: 8 additions & 4 deletions stories/molecules/insight-page-card.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ const contributors: DbContribution[] = [
recent_contribution_count: 2,
recent_opened_prs: 5,
recent_pr_reviews: 12,
recent_pr_velocity: 10
recent_pr_velocity: 10,
recent_pr_merged: 20
},
{
id: 2,
Expand All @@ -44,7 +45,8 @@ const contributors: DbContribution[] = [
recent_contribution_count: 2,
recent_opened_prs: 5,
recent_pr_reviews: 12,
recent_pr_velocity: 10
recent_pr_velocity: 10,
recent_pr_merged: 20
},
{
id: 3,
Expand All @@ -62,7 +64,8 @@ const contributors: DbContribution[] = [
recent_contribution_count: 2,
recent_opened_prs: 5,
recent_pr_reviews: 12,
recent_pr_velocity: 10
recent_pr_velocity: 10,
recent_pr_merged: 20
},
{
id: 4,
Expand All @@ -80,7 +83,8 @@ const contributors: DbContribution[] = [
recent_contribution_count: 2,
recent_opened_prs: 5,
recent_pr_reviews: 12,
recent_pr_velocity: 10
recent_pr_velocity: 10,
recent_pr_merged: 20
}
];

Expand Down

0 comments on commit 4f73c15

Please sign in to comment.