feat: add avatars if assignee present

kudos-ink · Jan 31, 2025 · 45ea0d2 · 45ea0d2
1 parent 05a1df7
commit 45ea0d2
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 13 deletions.
diff --git a/api/core/_transformers.ts b/api/core/_transformers.ts
@@ -17,19 +17,29 @@ import {
   Repository,
   RepositoryDto,
 } from "@/types/repository";
+import { User, UserDto } from "@/types/user";
 
 export function dtoToTask(dto: TaskDto): Task {
   return {
     id: dto.id,
     taskId: dto.issue_id,
     isCertified: dto.certified,
     labels: dto.labels ?? [],
-    repository: dtoToRepository(dto.repository),
-    project: dtoToProject(dto.repository.project),
+    user: dto.user ? dtoToUser(dto.user) : null,
+    repository: dto.repository ? dtoToRepository(dto.repository) : null,
+    project: dto.repository ? dtoToProject(dto.repository.project) : null,
     title: dto.title,
     description: dto.description,
-    createdAt: dto.issue_created_at,
-    url: dto.repository.url + `/issues/${dto.issue_id}`,
+    createdAt: dto.issue_created_at ? dto.issue_created_at : dto.created_at,
+    url: dto.repository ? dto.repository.url + `/issues/${dto.issue_id}` : null,
+  };
+}
+
+export function dtoToUser(dto: UserDto): User {
+  return {
+    id: dto.id,
+    username: dto.username,
+    avatar: dto.avatar,
   };
 }
 

diff --git a/api/core/tasks.ts b/api/core/tasks.ts
@@ -10,7 +10,7 @@ import { fetchFromApi } from "./_client";
 import { dtoToTask, taskQueryParamsToDto } from "./_transformers";
 import { getAllLanguages } from "./languages";
 
-const TASKS_PATH = "/issues";
+const TASKS_PATH = "/tasks";
 
 export async function getTasks(
   query: TaskQueryParams & PaginationQueryParams = DEFAULT_PAGINATION,

diff --git a/components/table/row.tsx b/components/table/row.tsx
@@ -19,6 +19,7 @@ import { formatDate } from "@/utils/date";
 import { shuffleArray } from "@/utils/filters";
 import { createUrl } from "@/utils/url";
 import { CARNIVAL_NEW_LISTED_TASKS, CARNIVAL_WIP_TASKS } from "@/data/carnival";
+import NextImage from "next/image";
 
 const MAX_LABEL_WIDTH = 192;
 
@@ -67,7 +68,7 @@ interface IAvatarProps {
   src: string | null;
 }
 
-const Avatar = ({ alt, src }: IAvatarProps) => {
+export const Avatar = ({ alt, src }: IAvatarProps) => {
   return (
     <div className="bg-foreground rounded-md min-w-[40px] min-h-[40px] sm:min-w-[45px] sm:min-h-[45px] shrink-0 flex items-center justify-center">
       {src !== null && (
@@ -86,6 +87,27 @@ const Avatar = ({ alt, src }: IAvatarProps) => {
 
 Project.Avatar = Avatar;
 
+interface IUserAvatarProps {
+  alt: string;
+  src: string | null;
+}
+
+export const UserAvatar = ({ alt, src }: IAvatarProps) => {
+  return (
+    <div className="relative border bg-foreground overflow-hidden rounded-full min-w-[45px] min-h-[45px] shrink-0 flex items-center justify-center">
+      {src !== null && (
+        <NextImage
+          className="pointer-events-none absolute -left-0 -top-0 h-[45px] w-[45px] max-w-[initial] transition-opacity z-10 opacity-100 object-cover object-center"
+          src={src}
+          alt={alt}
+          height={40}
+          width={40}
+        />
+      )}
+    </div>
+  );
+};
+
 interface IContentProps {
   id: number;
   title: string;

diff --git a/components/table/static-table.tsx b/components/table/static-table.tsx
@@ -16,7 +16,14 @@ import {
 import { Task } from "@/types/task";
 
 import TaskModal from "./task-modal";
-import { ExternalLink, Content, Time, Project, ApplyButton } from "./row";
+import {
+  ExternalLink,
+  Content,
+  Time,
+  Project,
+  ApplyButton,
+  UserAvatar,
+} from "./row";
 import { getIconSrc } from "@/utils/icons";
 
 const DEFAULT_EMPTY = "No contributions to display yet";
@@ -64,6 +71,7 @@ const StaticTable = ({
     { name: "PROJECT", uid: "project" },
     { name: "CONTENT", uid: "content" },
     { name: "LABELS", uid: "labels" },
+    { name: "ASSIGNEE", uid: "assignee" },
     { name: "DATE", uid: "date" },
     { name: "ACTIONS", uid: "actions" },
   ]);
@@ -115,6 +123,17 @@ const StaticTable = ({
             />
           );
         }
+        case "assignee": {
+          const { user } = item;
+          return user ? (
+            <UserAvatar
+              alt={`${user?.username} avatar`}
+              src={user.avatar ?? null}
+            />
+          ) : (
+            ""
+          );
+        }
         case "date":
           return (
             <div className="flex flex-col items-center gap-2">
@@ -142,6 +161,7 @@ const StaticTable = ({
       { name: "PROJECT", uid: "project" },
       { name: "CONTENT", uid: "content" },
       ...(isLaptop ? [{ name: "LABELS", uid: "labels" }] : []),
+      { name: "ASSIGNEE", uid: "assignee" },
       { name: "DATE", uid: "date" },
       ...(isMobile ? [] : [{ name: "ACTIONS", uid: "actions" }]),
     ]);

diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const cspHeader = `
     default-src 'self';
-    connect-src 'self' https://api.morekudos.com/ https://www.google-analytics.com/;
+    connect-src 'self' http://localhost:8000 https://api.morekudos.com/ https://www.google-analytics.com/;
     script-src 'self' 'unsafe-eval' 'unsafe-inline' https://va.vercel-scripts.com/ https://www.google-analytics.com/ https://tagmanager.google.com/ https://www.googletagmanager.com/;
     style-src 'self' 'unsafe-inline';
     img-src 'self' https://cryptologos.cc/ https://avatars.githubusercontent.com/ blob: data:;

diff --git a/types/task.ts b/types/task.ts
@@ -1,16 +1,18 @@
 import { PaginationQueryParams } from "./pagination";
 import { Project } from "./project";
 import { Repository, RepositoryDto } from "./repository";
+import { User, UserDto } from "./user";
 
 export type TaskDto = {
   id: number;
   issue_id: number;
   labels: string[] | null;
   open: boolean;
   assignee_id: string | null;
-  assignee_username: string | null;
+  // assignee_username: string | null;
+  user: UserDto | null;
   certified: boolean;
-  repository: RepositoryDto;
+  repository: RepositoryDto | null;
   title: string | null;
   description: string | null;
   issue_created_at: string;
@@ -24,11 +26,12 @@ export type Task = {
   taskId: number;
   isCertified: boolean;
   labels: string[];
-  repository: Repository;
-  project: Project;
+  user: User | null;
+  repository: Repository | null;
+  project: Project | null;
   title: string | null;
   description: string | null;
-  url: string;
+  url: string | null;
   createdAt: string;
 };
 

diff --git a/types/user.ts b/types/user.ts
@@ -0,0 +1,14 @@
+export type UserDto = {
+  id: number;
+  username: string;
+  avatar: string;
+  created_at: string;
+  updated_at: string;
+  github_id: number;
+};
+
+export type User = {
+  id: number;
+  username: string;
+  avatar: string;
+};