Wip backend (#4)

* feat: Add new API handlers for user, project, and task management; update package dependencies * feat: Update .gitignore, add Lambda layer configuration, and refactor DynamoDB handlers to use AWS SDK v3 * feat: Update serverless configuration and refactor API handlers to improve error handling and response structure * feat: Add Cognito user pool name parameter and update API handlers to include CORS headers * feat: Update task and project ID formats, add populateSeedData function, and enhance user ID handling * feat: Update image source paths to use S3 public URL for profile and task attachments
2024-11-23 18:17:00 +02:00
parent ac8455ab3a
commit 11e61829f1
39 changed files with 5438 additions and 100 deletions
--- a/tasker-client/src/app/components/ModalNewTask/index.tsx
+++ b/tasker-client/src/app/components/ModalNewTask/index.tsx
@@ -23,7 +23,14 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
  const [projectId, setProjectId] = useState("");

  const handleSubmit = async () => {
-    if (!title || !authorUserId || !(id !== null || projectId)) return;
+    console.log(title, authorUserId, id, projectId);
+
+    console.log("Creating task 1..");
+    if (
+      !(title && authorUserId && assignedUserId && (id !== null || projectId))
+    )
+      return;
+    console.log("Creating task 2...");

    const formattedStartDate = formatISO(new Date(startDate), {
      representation: "complete",
@@ -40,14 +47,17 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
      tags,
      startDate: formattedStartDate,
      dueDate: formattedDueDate,
-      authorUserId: parseInt(authorUserId),
-      assignedUserId: parseInt(assignedUserId),
-      projectId: id !== null ? Number(id) : Number(projectId),
+      authorUserId: authorUserId,
+      assignedUserId: assignedUserId,
+      projectId: id !== null ? id : projectId,
    });
  };

  const isFormValid = () => {
-    return title && authorUserId && !(id !== null || projectId);
+    console.log(title, authorUserId, id, projectId);
+    return (
+      title && authorUserId && assignedUserId && (id !== null || projectId)
+    );
  };

  const selectStyles =
@@ -87,7 +97,7 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
            }
          >
            <option value="">Select Status</option>
-            <option value={Status.ToDo}>Backlog</option>
+            <option value={Status.ToDo}>To Do</option>
            <option value={Status.InProgress}>In Progress</option>
            <option value={Status.TestReview}>Test/Review</option>
            <option value={Status.Done}>Done</option>
--- a/tasker-client/src/app/components/Navbar/index.tsx
+++ b/tasker-client/src/app/components/Navbar/index.tsx
@@ -77,7 +77,7 @@ const Navbar = () => {
          <div className="align-center flex h-9 w-9 justify-center">
            {!!currentUserDetails?.profilePictureUrl ? (
              <Image
-                src={`/${currentUserDetails?.profilePictureUrl}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
                alt={currentUserDetails?.username || "User Profile Picture"}
                width={100}
                height={50}
--- a/tasker-client/src/app/components/Sidebar/index.tsx
+++ b/tasker-client/src/app/components/Sidebar/index.tsx
@@ -70,7 +70,12 @@ const Sidebar = () => {
          )}
        </div>
        <div className="flex items-center gap-5 border-y-[1.5px] border-gray-200 px-8 py-4 dark:border-gray-700">
-          <Image src="/logo.png" alt="logo" width={40} height={40} />
+          <Image
+            src={`${process.env.S3_PUBLIC_IMAGE_URL}/logo.png`}
+            alt="logo"
+            width={40}
+            height={40}
+          />
          <div>
            <h3 className="text-md font-bold tracking-widest dark:text-gray-200">
              Tasker.IO
@@ -93,7 +98,6 @@ const Sidebar = () => {
        <button
          onClick={() =>
            setShowProjects((prev) => {
-              console.log(prev);
              return !prev;
            })
          }
@@ -109,10 +113,10 @@ const Sidebar = () => {
        {showProjects &&
          projects?.map((project) => (
            <SidebarLink
-              key={project.id}
+              key={project.projectId}
              icon={Briefcase}
              label={project.name}
-              href={`/projects/${project.id}`}
+              href={`/projects/${project.projectId}`}
            />
          ))}

@@ -158,7 +162,7 @@ const Sidebar = () => {
          <div className="align-center flex h-9 w-9 justify-center">
            {!!currentUserDetails?.profilePictureUrl ? (
              <Image
-                src={`/${currentUserDetails?.profilePictureUrl}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
                alt={currentUserDetails?.username || "User Profile Picture"}
                width={100}
                height={50}
--- a/tasker-client/src/app/components/TaskCard/index.tsx
+++ b/tasker-client/src/app/components/TaskCard/index.tsx
@@ -16,7 +16,7 @@ const TaskCard = ({ task }: Props) => {
          <div className="flex flex-wrap">
            {task.attachments && task.attachments.length > 0 && (
              <Image
-                src={`/${task.attachments[0].fileURL}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
                alt={task.attachments[0].fileName}
                width={400}
                height={200}
@@ -27,7 +27,7 @@ const TaskCard = ({ task }: Props) => {
        </div>
      )}
      <p>
-        <strong>ID:</strong> {task.id}
+        <strong>ID:</strong> {task.taskId}
      </p>
      <p>
        <strong>Title:</strong> {task.title}
--- a/tasker-client/src/app/components/UserCard/index.tsx
+++ b/tasker-client/src/app/components/UserCard/index.tsx
@@ -11,7 +11,7 @@ const UserCard = ({ user }: Props) => {
    <div className="flex items-center rounded border p-4 shadow">
      {user.profilePictureUrl && (
        <Image
-          src={`/${user.profilePictureUrl}`}
+          src={`${process.env.S3_PUBLIC_IMAGE_URL}/${user.profilePictureUrl}`}
          alt="profile picture"
          width={32}
          height={32}
--- a/tasker-client/src/app/home/page.tsx
+++ b/tasker-client/src/app/home/page.tsx
@@ -5,6 +5,7 @@ import {
  Priority,
  Project,
  Task,
+  useGetAuthUserQuery,
  useGetProjectsQuery,
  useGetTasksByUserQuery,
 } from "@/state/api";
@@ -77,12 +78,13 @@ const taskColumns: GridColDef[] = [
 const statusColors = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

 const HomePage = () => {
-  const userId = 1;
+  const { data: currentUser } = useGetAuthUserQuery({});
+  const userId = currentUser?.userDetails?.userId ?? null;
  const {
    data: tasks,
    isLoading: tasksLoading,
    isError: tasksError,
-  } = useGetTasksByUserQuery(userId || 0, {
+  } = useGetTasksByUserQuery(userId || "", {
    skip: userId === null,
  });
  const { data: projects, isLoading: isProjectsLoading } =
@@ -191,6 +193,7 @@ const HomePage = () => {
              columns={taskColumns}
              checkboxSelection
              loading={tasksLoading}
+              getRowId={(row) => row.taskId}
              getRowClassName={() => "data-grid-row"}
              getCellClassName={() => "data-grid-cell"}
              className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
--- a/tasker-client/src/app/priority/reusablePriorityPage/index.tsx
+++ b/tasker-client/src/app/priority/reusablePriorityPage/index.tsx
@@ -83,7 +83,7 @@ const ReusablePriorityPage = ({ priority }: Props) => {
    data: tasks,
    isLoading,
    isError: isTasksError,
-  } = useGetTasksByUserQuery(userId || 0, {
+  } = useGetTasksByUserQuery(userId || "", {
    skip: userId === null,
  });

@@ -135,7 +135,7 @@ const ReusablePriorityPage = ({ priority }: Props) => {
      ) : view === "list" ? (
        <div className="grid grid-cols-1 gap-4">
          {filteredTasks?.map((task: Task) => (
-            <TaskCard key={task.id} task={task} />
+            <TaskCard key={task.taskId} task={task} />
          ))}
        </div>
      ) : (
@@ -146,7 +146,7 @@ const ReusablePriorityPage = ({ priority }: Props) => {
              rows={filteredTasks}
              columns={columns}
              checkboxSelection
-              getRowId={(row) => row.id}
+              getRowId={(row) => row.taskId}
              className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
              sx={dataGridSxStyles(isDarkMode)}
            />
--- a/tasker-client/src/app/projects/BoardView/index.tsx
+++ b/tasker-client/src/app/projects/BoardView/index.tsx
@@ -1,6 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useGetTasksQuery, useUpdateTaskStatusMutation } from "@/state/api";
-import React from "react";
+import {
+  Status,
+  useGetTasksQuery,
+  useUpdateTaskStatusMutation,
+} from "@/state/api";
+import React, { useEffect, useState } from "react";
 import { DndProvider, useDrag, useDrop } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { Task as TaskType } from "@/state/api";
@@ -9,22 +13,40 @@ import { format } from "date-fns";
 import Image from "next/image";

 type BoardProps = {
-  id: string;
+  projectId: string;
  setIsModalNewTaskOpen: (isOpen: boolean) => void;
 };

 const taskStatus = ["To Do", "In Progress", "Test/Review", "Done"];

-const BoardView = ({ id, setIsModalNewTaskOpen }: BoardProps) => {
+const BoardView = ({ projectId, setIsModalNewTaskOpen }: BoardProps) => {
  const {
-    data: tasks,
+    data: fetchedTasks,
    isLoading,
    error,
-  } = useGetTasksQuery({ projectId: Number(id) });
+  } = useGetTasksQuery({ projectId });
  const [updateTaskStatus] = useUpdateTaskStatusMutation();
+  const [tasks, setTasks] = useState<TaskType[]>([]);

-  const moveTask = (taskId: number, toStatus: string) => {
-    updateTaskStatus({ taskId, status: toStatus });
+  useEffect(() => {
+    if (fetchedTasks) {
+      setTasks(fetchedTasks);
+    }
+  }, [fetchedTasks]);
+
+  const moveTask = async (taskId: string, toStatus: string) => {
+    setTasks((prevTasks) =>
+      prevTasks.map((task) =>
+        task.taskId === taskId ? { ...task, status: toStatus as Status } : task,
+      ),
+    );
+
+    try {
+      await updateTaskStatus({ taskId, status: toStatus });
+    } catch (error) {
+      console.error("Failed to update task status:", error);
+      setTasks(fetchedTasks || []);
+    }
  };

  if (isLoading) return <div>Loading...</div>;
@@ -50,7 +72,7 @@ const BoardView = ({ id, setIsModalNewTaskOpen }: BoardProps) => {
 type TaskColumnProps = {
  status: string;
  tasks: TaskType[];
-  moveTask: (taskId: number, toStatus: string) => void;
+  moveTask: (taskId: string, toStatus: string) => void;
  setIsModalNewTaskOpen: (isOpen: boolean) => void;
 };

@@ -62,7 +84,7 @@ const TaskColumn = ({
 }: TaskColumnProps) => {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: "task",
-    drop: (item: { id: number }) => moveTask(item.id, status),
+    drop: (item: { id: string }) => moveTask(item.id, status),
    collect: (monitor: any) => ({
      isOver: !!monitor.isOver(),
    }),
@@ -116,7 +138,7 @@ const TaskColumn = ({
      {tasks
        .filter((task) => task.status === status)
        .map((task) => (
-          <Task key={task.id} task={task} />
+          <Task key={task.taskId} task={task} />
        ))}
    </div>
  );
@@ -129,7 +151,7 @@ type TaskProps = {
 const Task = ({ task }: TaskProps) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: "task",
-    item: { id: task.id },
+    item: { id: task.taskId },
    collect: (monitor: any) => ({
      isDragging: !!monitor.isDragging(),
    }),
@@ -175,7 +197,7 @@ const Task = ({ task }: TaskProps) => {
    >
      {task.attachments && task.attachments.length > 0 && (
        <Image
-          src={`/${task.attachments[0].fileURL}`}
+          src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
          alt={task.attachments[0].fileName}
          width={400}
          height={200}
@@ -227,7 +249,7 @@ const Task = ({ task }: TaskProps) => {
            {task.assignee && (
              <Image
                key={task.assignee.userId}
-                src={`/${task.assignee.profilePictureUrl!}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.assignee.profilePictureUrl!}`}
                alt={task.assignee.username}
                width={30}
                height={30}
@@ -237,7 +259,7 @@ const Task = ({ task }: TaskProps) => {
            {task.author && (
              <Image
                key={task.author.userId}
-                src={`/${task.author.profilePictureUrl!}`}
+                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.author.profilePictureUrl!}`}
                alt={task.author.username}
                width={30}
                height={30}
--- a/tasker-client/src/app/projects/ListView/index.tsx
+++ b/tasker-client/src/app/projects/ListView/index.tsx
@@ -4,16 +4,12 @@ import { Task, useGetTasksQuery } from "@/state/api";
 import React from "react";

 type Props = {
-  id: string;
+  projectId: string;
  setIsModalNewTaskOpen: (isOpen: boolean) => void;
 };

-const ListView = ({ id, setIsModalNewTaskOpen }: Props) => {
-  const {
-    data: tasks,
-    error,
-    isLoading,
-  } = useGetTasksQuery({ projectId: Number(id) });
+const ListView = ({ projectId, setIsModalNewTaskOpen }: Props) => {
+  const { data: tasks, error, isLoading } = useGetTasksQuery({ projectId });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred while fetching tasks</div>;
@@ -35,7 +31,7 @@ const ListView = ({ id, setIsModalNewTaskOpen }: Props) => {
        />
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-6">
-        {tasks?.map((task: Task) => <TaskCard key={task.id} task={task} />)}
+        {tasks?.map((task: Task) => <TaskCard key={task.taskId} task={task} />)}
      </div>
    </div>
  );
--- a/tasker-client/src/app/projects/TableView/index.tsx
+++ b/tasker-client/src/app/projects/TableView/index.tsx
@@ -7,7 +7,7 @@ import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import React from "react";

 type Props = {
-  id: string;
+  projectId: string;
  setIsModalNewTaskOpen: (isOpen: boolean) => void;
 };

@@ -29,7 +29,7 @@ const columns: GridColDef[] = [
    renderCell: (params) => (
      <span
        className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${
-          params.value === "In Progress"
+          params.value === "Work In Progress"
            ? "bg-green-200 text-green-600"
            : params.value === "Test/Review"
              ? "bg-green-200 text-green-600"
@@ -93,13 +93,9 @@ const columns: GridColDef[] = [
  },
 ];

-const TableView = ({ id, setIsModalNewTaskOpen }: Props) => {
+const TableView = ({ projectId, setIsModalNewTaskOpen }: Props) => {
  const isDarkMode = useAppSelector((state) => state.global.isDarkMode);
-  const {
-    data: tasks,
-    error,
-    isLoading,
-  } = useGetTasksQuery({ projectId: Number(id) });
+  const { data: tasks, error, isLoading } = useGetTasksQuery({ projectId });

  if (isLoading) return <div>Loading...</div>;
  if (error || !tasks) return <div>An error occurred while fetching tasks</div>;
@@ -123,6 +119,7 @@ const TableView = ({ id, setIsModalNewTaskOpen }: Props) => {
      <DataGrid
        rows={tasks || []}
        columns={columns}
+        getRowId={(row) => row.taskId}
        className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
        sx={dataGridSxStyles(isDarkMode)}
      />
--- a/tasker-client/src/app/projects/TimelineView/index.tsx
+++ b/tasker-client/src/app/projects/TimelineView/index.tsx
@@ -5,19 +5,15 @@ import "gantt-task-react/dist/index.css";
 import React, { useMemo, useState } from "react";

 type Props = {
-  id: string;
+  projectId: string;
  setIsModalNewTaskOpen: (isOpen: boolean) => void;
 };

 type TaskTypeItems = "task" | "milestone" | "project";

-const Timeline = ({ id, setIsModalNewTaskOpen }: Props) => {
+const Timeline = ({ projectId, setIsModalNewTaskOpen }: Props) => {
  const isDarkMode = useAppSelector((state) => state.global.isDarkMode);
-  const {
-    data: tasks,
-    error,
-    isLoading,
-  } = useGetTasksQuery({ projectId: Number(id) });
+  const { data: tasks, error, isLoading } = useGetTasksQuery({ projectId });

  const [displayOptions, setDisplayOptions] = useState<DisplayOption>({
    viewMode: ViewMode.Month,
@@ -30,7 +26,7 @@ const Timeline = ({ id, setIsModalNewTaskOpen }: Props) => {
        start: new Date(task.startDate as string),
        end: new Date(task.dueDate as string),
        name: task.title,
-        id: `Task-${task.id}`,
+        id: `Task-${task.taskId}`,
        type: "task" as TaskTypeItems,
        progress: task.points ? (task.points / 10) * 100 : 0,
        isDisabled: false,
--- a/tasker-client/src/app/projects/[id]/page.tsx
+++ b/tasker-client/src/app/projects/[id]/page.tsx
@@ -26,16 +26,19 @@ const Project = ({ params }: Props) => {
      />
      <ProjectHeader activeTab={activeTab} setActiveTab={setActiveTab} />
      {activeTab === "Board" && (
-        <Board id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        <Board projectId={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
      )}
      {activeTab === "List" && (
-        <List id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        <List projectId={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
      )}
      {activeTab === "Timeline" && (
-        <Timeline id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        <Timeline
+          projectId={id}
+          setIsModalNewTaskOpen={setIsModalNewTaskOpen}
+        />
      )}
      {activeTab === "Table" && (
-        <Table id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        <Table projectId={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
      )}
    </div>
  );
--- a/tasker-client/src/app/search/page.tsx
+++ b/tasker-client/src/app/search/page.tsx
@@ -49,14 +49,14 @@ const Search = () => {
              <h2>Tasks</h2>
            )}
            {searchResults.tasks?.map((task) => (
-              <TaskCard key={task.id} task={task} />
+              <TaskCard key={task.taskId} task={task} />
            ))}

            {searchResults.projects && searchResults.projects?.length > 0 && (
              <h2>Projects</h2>
            )}
            {searchResults.projects?.map((project) => (
-              <ProjectCard key={project.id} project={project} />
+              <ProjectCard key={project.projectId} project={project} />
            ))}

            {searchResults.users && searchResults.users?.length > 0 && (
--- a/tasker-client/src/app/teams/page.tsx
+++ b/tasker-client/src/app/teams/page.tsx
@@ -20,7 +20,7 @@ const CustomToolbar = () => (
 );

 const columns: GridColDef[] = [
-  { field: "id", headerName: "Team ID", width: 100 },
+  { field: "teamId", headerName: "Team ID", width: 100 },
  { field: "teamName", headerName: "Team Name", width: 200 },
  { field: "productOwnerUsername", headerName: "Product Owner", width: 200 },
  {
@@ -48,6 +48,7 @@ const Teams = () => {
          slots={{
            toolbar: CustomToolbar,
          }}
+          getRowId={(row) => row.teamId}
          className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
          sx={dataGridSxStyles(isDarkMode)}
        />
--- a/tasker-client/src/app/timeline/page.tsx
+++ b/tasker-client/src/app/timeline/page.tsx
@@ -24,7 +24,7 @@ const Timeline = () => {
        start: new Date(project.startDate as string),
        end: new Date(project.endDate as string),
        name: project.name,
-        id: `Project-${project.id}`,
+        id: `Project-${project.projectId}`,
        type: "project" as TaskTypeItems,
        progress: 50,
        isDisabled: false,
--- a/tasker-client/src/app/users/page.tsx
+++ b/tasker-client/src/app/users/page.tsx
@@ -31,7 +31,7 @@ const columns: GridColDef[] = [
      <div className="flex h-full w-full items-center justify-center">
        <div className="h-9 w-9">
          <Image
-            src={`/${params.value}`}
+            src={`${process.env.S3_PUBLIC_IMAGE_URL}/${params.value}`}
            alt={params.row.username}
            width={100}
            height={50}