feat: add Maintainer badge to dashboard HoverCard and `ContributorC…

…ard` (#1586)
open-sauced · Aug 21, 2023 · ea34f7e · ea34f7e
1 parent 4058f79
commit ea34f7e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/components/molecules/ContributorHoverCard/contributor-hover-card.tsx b/components/molecules/ContributorHoverCard/contributor-hover-card.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 
 import { calcDistanceFromToday } from "lib/utils/date-utils";
+import Badge from "components/atoms/Badge/badge";
 import CardProfile from "../CardProfile/card-profile";
 import CardRepoList, { RepoList } from "../CardRepoList/card-repo-list";
 import PullRequestTable from "../PullRequestTable/pull-request-table";
@@ -18,6 +19,7 @@ interface ContributorHoverCardProps {
   dateOfFirstPr: string | undefined;
   topic?: string;
   repositories?: number[];
+  isMaintainer: boolean;
 }
 const ContributorHoverCard = ({
   repoList,
@@ -26,6 +28,7 @@ const ContributorHoverCard = ({
   dateOfFirstPr,
   githubAvatar,
   repositories,
+  isMaintainer,
 }: ContributorHoverCardProps) => {
   const router = useRouter();
   const { filterName } = router.query;
@@ -34,14 +37,15 @@ const ContributorHoverCard = ({
   const calculatedDateFromToday = dateOfFirstPr ? calcDistanceFromToday(new Date(parseInt(dateOfFirstPr))) : "-";
   return (
     <div className="w-[364px] bg-white gap-4 p-3 rounded-lg shadow-superlative flex flex-col">
-      <div>
+      <div className="flex items-center justify-between">
         <CardProfile
           dateOfFirstPR={calculatedDateFromToday}
           githubAvatar={githubAvatar}
           githubName={githubName}
           totalPRs={totalPR}
           isRoundedAvatar={true}
         />
+        {isMaintainer && <Badge text="maintainer" />}
       </div>
       <div className="">
         <PullRequestTable isHoverCard repositories={repositories} limit={5} contributor={githubName} topic={topic} />

diff --git a/components/molecules/HoverCardWrapper/hover-card-wrapper.tsx b/components/molecules/HoverCardWrapper/hover-card-wrapper.tsx
@@ -22,16 +22,19 @@ const HoverCardWrapper = ({ username, repositories }: HoverCardWrapperProps) =>
     totalPR: repoList.length,
   };
 
+  const { is_maintainer, first_opened_pr_at } = contributor ?? {};
+
   return (
     <>
       <ContributorHoverCard
-        dateOfFirstPr={contributor?.first_opened_pr_at}
+        dateOfFirstPr={first_opened_pr_at}
         totalPR={profile.totalPR}
         githubAvatar={profile.githubAvatar}
         githubName={profile.githubName}
         repoList={repoList}
         topic={topic}
         repositories={repositories}
+        isMaintainer={!!is_maintainer}
       />
     </>
   );

diff --git a/components/organisms/ContributorCard/contributor-card.tsx b/components/organisms/ContributorCard/contributor-card.tsx
@@ -10,6 +10,8 @@ import PullRequestTable from "components/molecules/PullRequestTable/pull-request
 
 import { useContributorPullRequestsChart } from "lib/hooks/useContributorPullRequestsChart";
 import useContributorLanguages from "lib/hooks/api/useContributorLanguages";
+import { useFetchUser } from "lib/hooks/useFetchUser";
+import Badge from "components/atoms/Badge/badge";
 
 export interface ContributorObject {
   profile: {
@@ -33,14 +35,20 @@ const ContributorCard = ({ className, contributor, topic, repositories, range }:
   const [showPRs, setShowPRs] = useState(false);
   const { chart, repoList, meta } = useContributorPullRequestsChart(profile.githubName, topic, repositories, range);
   const languageList = useContributorLanguages(profile.githubName);
+  const { data: user } = useFetchUser(profile.githubName, {
+    revalidateOnFocus: false,
+  });
+
+  const { is_maintainer: isMaintainer } = user ?? {};
 
   return (
     <Card className={className && className}>
       <div className="flex flex-col gap-3">
-        <div className="flex w-full justify-between items-center gap-2">
+        <div className="flex items-center justify-between w-full gap-2">
           <CardProfile {...profile} totalPRs={meta.itemCount} />
-          <div>
+          <div className="flex flex-col items-end gap-2">
             <CardHorizontalBarChart withDescription={false} languageList={languageList} />
+            {!!isMaintainer && <Badge text="maintainer" />}
           </div>
         </div>
         <div className="h-[110px] overflow-hidden">
@@ -52,10 +60,10 @@ const ContributorCard = ({ className, contributor, topic, repositories, range }:
           <PullRequestTable contributor={profile.githubName} topic={topic} repositories={repositories} range={range} />
         ) : null}
 
-        <div className="flex w-full justify-center">
+        <div className="flex justify-center w-full">
           <button
             onClick={() => setShowPRs((prevState) => !prevState)}
-            className="w-full bg-white py-1 border-light-slate-6 hover:bg-light-slate-1 rounded-lg border transition"
+            className="w-full py-1 transition bg-white border rounded-lg border-light-slate-6 hover:bg-light-slate-1"
           >
             <Text className="!text-sm !text-light-slate-11  ">{showPRs ? "Hide" : "Show"} latest pull requests</Text>
           </button>