[resumes][feat] scaffold for resume badges (#399)

* [resumes][fix] reduce font size in comments

* [resumes][feat] add queries for resume badges

* [resumes][feat] add scaffold for resume badges

* [resumes][chore] remove unused query

apps/portal/src/components/resumes/badgeIcons/reviewer/BronzeReviewerBadgeIcon.tsx

@@ -1,7 +1,12 @@
-export default function BronzeReviewerBadgeIcon() {
+type Props = Readonly<{
+  className: string;
+}>;
+
+export default function BronzeReviewerBadgeIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"
+      className={className}
       height="36px"
       preserveAspectRatio="xMidYMid meet"
       viewBox="0 0 36 36"

apps/portal/src/components/resumes/badgeIcons/reviewer/GoldReviewerBadgeIcon.tsx

@@ -1,7 +1,12 @@
-export default function GoldReviewerBadgeIcon() {
+type Props = Readonly<{
+  className: string;
+}>;
+
+export default function GoldReviewerBadgeIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"
+      className={className}
       height="36px"
       preserveAspectRatio="xMidYMid meet"
       role="img"

apps/portal/src/components/resumes/badgeIcons/reviewer/SilverReviewerBadgeIcon.tsx

@@ -1,7 +1,12 @@
-export default function SilverReviewerBadgeIcon() {
+type Props = Readonly<{
+  className: string;
+}>;
+
+export default function SilverReviewerBadgeIcon({ className }: Props) {
   return (
     <svg
       aria-hidden="true"
+      className={className}
       height="36px"
       preserveAspectRatio="xMidYMid meet"
       role="img"

apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx

@@ -0,0 +1,31 @@
+import type { BadgeIcon } from './resumeBadgeConstants';
+
+type Props = Readonly<{
+  description: string;
+  icon: BadgeIcon;
+  toolTip: string;
+}>;
+
+export default function ResumeUserBadge({
+  description,
+  icon: Icon,
+  toolTip,
+}: Props) {
+  return (
+    <div className="group">
+      <div
+        className="absolute left-16 -top-1 hidden w-64 -translate-y-full flex-col justify-center
+        rounded-lg bg-slate-50 px-2 py-2 text-center shadow-md
+       after:absolute after:left-1/2 after:top-[100%]
+       after:-translate-x-1/2 after:border-8 after:border-x-transparent
+       after:border-b-transparent after:border-t-slate-50
+       after:content-['']
+       group-hover:flex">
+        <Icon className="text-center" />
+        <p className="text-lg font-medium">{toolTip}</p>
+        <p className="text-sm font-light">{description}</p>
+      </div>
+      <Icon className="h-3 w-3" />
+    </div>
+  );
+}

apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx

@@ -0,0 +1,36 @@
+import { trpc } from '~/utils/trpc';
+
+import type { BadgePayload } from './resumeBadgeConstants';
+import { RESUME_USER_BADGES } from './resumeBadgeConstants';
+import ResumeUserBadge from './ResumeUserBadge';
+
+type Props = Readonly<{
+  userId: string;
+}>;
+
+export default function ResumeUserBadges({ userId }: Props) {
+  const userReviewedResumesCountQuery = trpc.useQuery([
+    'resumes.resume.findUserReviewedResumeCount',
+    { userId },
+  ]);
+
+  // TODO: Add other badges in
+  const payload: BadgePayload = {
+    reviewedResumesCount: userReviewedResumesCountQuery.data ?? 0,
+  };
+
+  return (
+    <>
+      {RESUME_USER_BADGES.filter((badge) => badge.isValid(payload)).map(
+        (badge) => (
+          <ResumeUserBadge
+            key={badge.id}
+            description={badge.description}
+            icon={badge.icon}
+            toolTip={badge.toolTip}
+          />
+        ),
+      )}
+    </>
+  );
+}

apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts

@@ -0,0 +1,57 @@
+import BronzeReviewerBadgeIcon from '../badgeIcons/reviewer/BronzeReviewerBadgeIcon';
+import GoldReviewerBadgeIcon from '../badgeIcons/reviewer/GoldReviewerBadgeIcon';
+import SilverReviewerBadgeIcon from '../badgeIcons/reviewer/SilverReviewerBadgeIcon';
+
+export type BadgeIcon = (
+  props: React.ComponentProps<
+    | typeof BronzeReviewerBadgeIcon
+    | typeof GoldReviewerBadgeIcon
+    | typeof SilverReviewerBadgeIcon
+  >,
+) => JSX.Element;
+
+export type BadgeInfo = {
+  description: string;
+  icon: BadgeIcon;
+  id: string;
+  isValid: (payload: BadgePayload) => boolean;
+  toolTip: string;
+};
+
+// TODO: Add other badges in
+export type BadgePayload = {
+  reviewedResumesCount: number;
+};
+
+const GOLD_TIER = 20;
+const SILVER_TIER = 10;
+const BRONZE_TIER = 5;
+
+export const RESUME_USER_BADGES: Array<BadgeInfo> = [
+  {
+    description: `User has reviewed over ${GOLD_TIER} resumes`,
+    icon: GoldReviewerBadgeIcon,
+    id: 'Superhero',
+    isValid: (payload: BadgePayload) =>
+      payload.reviewedResumesCount >= GOLD_TIER,
+    toolTip: 'True saviour of the people',
+  },
+  {
+    description: `User has reviewed over ${SILVER_TIER} resumes`,
+    icon: SilverReviewerBadgeIcon,
+    id: 'Detective',
+    isValid: (payload: BadgePayload) =>
+      payload.reviewedResumesCount >= SILVER_TIER &&
+      payload.reviewedResumesCount < GOLD_TIER,
+    toolTip: 'Keen eye for details like a private eye',
+  },
+  {
+    description: `User has reviewed over ${BRONZE_TIER} resumes`,
+    icon: BronzeReviewerBadgeIcon,
+    id: 'Eagle',
+    isValid: (payload: BadgePayload) =>
+      payload.reviewedResumesCount >= BRONZE_TIER &&
+      payload.reviewedResumesCount < SILVER_TIER,
+    toolTip: 'As sharp as an eagle',
+  },
+];

apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx

@@ -13,6 +13,7 @@ import { Button, TextArea } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
+import ResumeUserBadges from '../badges/ResumeUserBadges';
 import ResumeExpandableText from '../shared/ResumeExpandableText';
 
 import type { ResumeComment } from '~/types/resume-comments';
@@ -152,13 +153,15 @@ export default function ResumeCommentListItem({
           {/* Name and creation time */}
           <div className="flex flex-row justify-between">
             <div className="flex flex-row items-center space-x-1">
-              <div className="font-medium">
+              <p className="font-medium">
                 {comment.user.name ?? 'Reviewer ABC'}
-              </div>
+              </p>
 
-              <div className="text-primary-800 text-xs font-medium">
+              <p className="text-primary-800 text-xs font-medium">
                 {isCommentOwner ? '(Me)' : ''}
-              </div>
+              </p>
+
+              <ResumeUserBadges userId={comment.user.userId} />
             </div>
 
             <div className="px-2 text-xs text-gray-600">

apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx

@@ -33,7 +33,7 @@ export default function ResumeCommentsList({
   const commentsQuery = trpc.useQuery(['resumes.comments.list', { resumeId }]);
 
   const renderIcon = (section: ResumesSection) => {
-    const className = 'h-8 w-8';
+    const className = 'h-7 w-7';
     switch (section) {
       case ResumesSection.GENERAL:
         return <IdentificationIcon className={className} />;
@@ -83,11 +83,11 @@ export default function ResumeCommentsList({
             const commentCount = comments.length;
 
             return (
-              <div key={value} className="mb-4 space-y-3">
+              <div key={value} className="mb-4 space-y-4">
                 <div className="flex flex-row items-center space-x-2 text-indigo-800">
                   {renderIcon(value)}
 
-                  <div className="w-fit text-xl font-medium">{label}</div>
+                  <div className="w-fit text-lg font-medium">{label}</div>
                 </div>
 
                 {commentCount > 0 ? (

apps/portal/src/server/router/resumes/resumes-comments-router.ts

@@ -13,7 +13,6 @@ export const resumeCommentsRouter = createRouter().query('list', {
 
     // For this resume, we retrieve every comment's information, along with:
     // The user's name and image to render
-    // Number of votes, and whether the user (if-any) has voted
     const comments = await ctx.prisma.resumesComment.findMany({
       include: {
         user: {

apps/portal/src/server/router/resumes/resumes-resume-router.ts

@@ -138,4 +138,20 @@ export const resumesRouter = createRouter()
         },
       });
     },
+  })
+  .query('findUserReviewedResumeCount', {
+    input: z.object({
+      userId: z.string(),
+    }),
+    async resolve({ ctx, input }) {
+      return await ctx.prisma.resumesResume.count({
+        where: {
+          comments: {
+            some: {
+              userId: input.userId,
+            },
+          },
+        },
+      });
+    },
   });