Feat/add assignee autocomplete

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,
   };
 }
 

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,

app/api/update-task/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { taskId, assignedUserId } = await req.json();
+
+    if (!taskId || !assignedUserId) {
+      return NextResponse.json(
+        { error: "Missing required fields" },
+        { status: 400 },
+      );
+    }
+
+    const GITHUB_TOKEN = process.env.GITHUB_TOKEN;
+    if (!GITHUB_TOKEN) {
+      return NextResponse.json(
+        { error: "GitHub token not found" },
+        { status: 500 },
+      );
+    }
+
+    const response = await fetch(`http://localhost:8000/tasks/${taskId}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${GITHUB_TOKEN}`,
+      },
+      body: JSON.stringify({ assignee_user_id: assignedUserId }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: data?.message || "Failed to update task" },
+        { status: response.status },
+      );
+    }
+
+    return NextResponse.json(
+      { message: "Task updated successfully" },
+      { status: 200 },
+    );
+  } catch (error) {
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    );
+  }
+}

components/table/assign-user.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Autocomplete, AutocompleteItem } from "@nextui-org/autocomplete";
+import { User } from "@/types/user";
+import { useAsyncList } from "@react-stately/data";
+
+export default function Users({ taskId }: { taskId: number }) {
+  const onSelectionChange = async (key: React.Key | null) => {
+    if (!key) return;
+
+    const selectedUserId = Number(key);
+    if (isNaN(selectedUserId)) {
+      console.error("Invalid user ID:", key);
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/update-task", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          taskId,
+          assignedUserId: selectedUserId,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to assign user to task");
+      }
+
+      console.log("User assigned successfully");
+    } catch (error) {
+      console.error("Error assigning user:", error);
+    }
+  };
+
+  let list = useAsyncList<User>({
+    async load({ filterText }) {
+      let res = await fetch(
+        `http://localhost:8000/users?search=${filterText}`,
+        {
+          cache: "no-store",
+        },
+      );
+      let users = await res.json();
+      return { items: users };
+    },
+  });
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      inputValue={list.filterText}
+      isLoading={list.isLoading}
+      items={list.items}
+      label="Select a user"
+      placeholder="Type to search..."
+      variant="bordered"
+      onSelectionChange={onSelectionChange}
+      onInputChange={list.setFilterText}
+    >
+      {(item: User) => (
+        <AutocompleteItem key={item.id} className="capitalize">
+          {item.username}
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+}

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;

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" }]),
     ]);

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/ http://localhost:8000/users;
     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:;

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@next/third-parties": "15.1.3",
+    "@nextui-org/autocomplete": "^2.3.9",
     "@nextui-org/button": "2.2.8",
     "@nextui-org/card": "^2.2.8",
     "@nextui-org/checkbox": "^2.3.7",
@@ -32,6 +33,8 @@
     "@nextui-org/table": "^2.2.7",
     "@nextui-org/theme": "2.4.4",
     "@nextui-org/tooltip": "^2.2.6",
+    "@nextui-org/use-infinite-scroll": "^2.2.2",
+    "@react-stately/data": "^3.12.1",
     "@tanstack/react-query": "^5.62.11",
     "@tanstack/react-query-devtools": "^5.62.11",
     "@types/react": "19.0.2",