feat: Update environment variable naming and refactor image URL handling across the application

.github/workflows/amplify-deployment.yml

@@ -58,19 +58,19 @@ jobs:
           export NEXT_PUBLIC_API_BASE_URL=$(aws ssm get-parameter --name "/tasker/api/base-url" --query "Parameter.Value" --output text)
           export NEXT_PUBLIC_COGNITO_USER_POOL_ID=$(aws ssm get-parameter --name "/tasker/cognito/user-pool-id" --query "Parameter.Value" --output text)
           export NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID=$(aws ssm get-parameter --name "/tasker/cognito/client-id" --query "Parameter.Value" --output text)
-          export S3_PUBLIC_IMAGE_URL=$(aws ssm get-parameter --name "/tasker/s3/public-images-url" --query "Parameter.Value" --output text)
+          export NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL=$(aws ssm get-parameter --name "/tasker/s3/public-images-url" --query "Parameter.Value" --output text)
 
           echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL" >> $GITHUB_ENV
           echo "NEXT_PUBLIC_COGNITO_USER_POOL_ID=$NEXT_PUBLIC_COGNITO_USER_POOL_ID" >> $GITHUB_ENV
           echo "NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID=$NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID" >> $GITHUB_ENV
-          echo "S3_PUBLIC_IMAGE_URL=$S3_PUBLIC_IMAGE_URL" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL=$NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL" >> $GITHUB_ENV
 
       - name: Set Amplify Environment Variables
         run: |
           amplify env set NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
           amplify env set NEXT_PUBLIC_COGNITO_USER_POOL_ID=$NEXT_PUBLIC_COGNITO_USER_POOL_ID
           amplify env set NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID=$NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID
-          amplify env set S3_PUBLIC_IMAGE_URL=$S3_PUBLIC_IMAGE_URL
+          amplify env set NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL=$NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL
 
       - name: Deploy Amplify App
         run: |

tasker-client/amplify.yml

@@ -23,4 +23,4 @@ env:
     NEXT_PUBLIC_API_BASE_URL: ""
     NEXT_PUBLIC_COGNITO_USER_POOL_ID: ""
     NEXT_PUBLIC_COGNITO_USER_POOL_CLIENT_ID: ""
-    S3_PUBLIC_IMAGE_URL: ""
+    NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL: ""

tasker-client/next.config.ts

@@ -1,7 +1,17 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: new URL(process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL || "")
+          .hostname,
+        port: "",
+        pathname: "/**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

tasker-client/src/app/components/ModalNewTask/index.tsx

@@ -1,6 +1,11 @@
 import Modal from "@/app/components/Modal";
-import { Priority, Status, useCreateTaskMutation } from "@/state/api";
+import {
-import React, { useState } from "react";
+  Priority,
+  Status,
+  useCreateTaskMutation,
+  useGetAuthUserQuery,
+} from "@/state/api";
+import React, { useEffect, useState } from "react";
 import { formatISO } from "date-fns";
 
 type Props = {
@@ -22,22 +27,28 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
   const [assignedUserId, setAssignedUserId] = useState("");
   const [projectId, setProjectId] = useState("");
 
+  const { data: currentUser } = useGetAuthUserQuery({});
+  const userId = currentUser?.userDetails?.userId ?? null;
+
+  useEffect(() => {
+    setAuthorUserId(userId || "");
+  }, [userId]);
+
   const handleSubmit = async () => {
-    console.log(title, authorUserId, id, projectId);
+    if (!(title && authorUserId && (id !== null || projectId))) return;
 
-    console.log("Creating task 1..");
+    const finalAssignedUserId = assignedUserId.trim() || authorUserId;
-    if (
-      !(title && authorUserId && assignedUserId && (id !== null || projectId))
-    )
-      return;
-    console.log("Creating task 2...");
 
-    const formattedStartDate = formatISO(new Date(startDate), {
+    const formattedStartDate =
-      representation: "complete",
+      startDate ??
-    });
+      formatISO(new Date(startDate), {
-    const formattedDueDate = formatISO(new Date(dueDate), {
+        representation: "complete",
-      representation: "complete",
+      });
-    });
+    const formattedDueDate =
+      dueDate ??
+      formatISO(new Date(dueDate), {
+        representation: "complete",
+      });
 
     await createTask({
       title,
@@ -48,16 +59,15 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
       startDate: formattedStartDate,
       dueDate: formattedDueDate,
       authorUserId: authorUserId,
-      assignedUserId: assignedUserId,
+      assignedUserId: finalAssignedUserId,
       projectId: id !== null ? id : projectId,
     });
+
+    onClose();
   };
 
   const isFormValid = () => {
-    console.log(title, authorUserId, id, projectId);
+    return title && authorUserId && (id !== null || projectId);
-    return (
-      title && authorUserId && assignedUserId && (id !== null || projectId)
-    );
   };
 
   const selectStyles =
@@ -92,9 +102,13 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
           <select
             className={selectStyles}
             value={status}
-            onChange={(e) =>
+            onChange={(e) => {
-              setStatus(Status[e.target.value as keyof typeof Status])
+              const selectedStatus = Object.entries(Status).find(
-            }
+                ([, value]) => value === e.target.value,
+              )?.[0] as keyof typeof Status;
+
+              setStatus(selectedStatus ? Status[selectedStatus] : Status.ToDo);
+            }}
           >
             <option value="">Select Status</option>
             <option value={Status.ToDo}>To Do</option>
@@ -139,13 +153,15 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
             onChange={(e) => setDueDate(e.target.value)}
           />
         </div>
-        <input
+        {authorUserId === "" && (
-          type="text"
+          <input
-          className={inputStyles}
+            type="text"
-          placeholder="Author User ID"
+            className={inputStyles}
-          value={authorUserId}
+            placeholder="Author User ID"
-          onChange={(e) => setAuthorUserId(e.target.value)}
+            value={authorUserId}
-        />
+            onChange={(e) => setAuthorUserId(e.target.value)}
+          />
+        )}
         <input
           type="text"
           className={inputStyles}

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={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
+                src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
                 alt={currentUserDetails?.username || "User Profile Picture"}
                 width={100}
                 height={50}

tasker-client/src/app/components/Sidebar/index.tsx

@@ -71,7 +71,7 @@ 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={`${process.env.S3_PUBLIC_IMAGE_URL}/logo.png`}
+            src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/logo.png`}
             alt="logo"
             width={40}
             height={40}
@@ -162,7 +162,7 @@ const Sidebar = () => {
           <div className="align-center flex h-9 w-9 justify-center">
             {!!currentUserDetails?.profilePictureUrl ? (
               <Image
-                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
+                src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${currentUserDetails?.profilePictureUrl}`}
                 alt={currentUserDetails?.username || "User Profile Picture"}
                 width={100}
                 height={50}

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={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
+                src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
                 alt={task.attachments[0].fileName}
                 width={400}
                 height={200}

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={`${process.env.S3_PUBLIC_IMAGE_URL}/${user.profilePictureUrl}`}
+          src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${user.profilePictureUrl}`}
           alt="profile picture"
           width={32}
           height={32}

tasker-client/src/app/projects/BoardView/index.tsx

@@ -24,6 +24,7 @@ const BoardView = ({ projectId, setIsModalNewTaskOpen }: BoardProps) => {
     data: fetchedTasks,
     isLoading,
     error,
+    refetch,
   } = useGetTasksQuery({ projectId });
   const [updateTaskStatus] = useUpdateTaskStatusMutation();
   const [tasks, setTasks] = useState<TaskType[]>([]);
@@ -43,6 +44,7 @@ const BoardView = ({ projectId, setIsModalNewTaskOpen }: BoardProps) => {
 
     try {
       await updateTaskStatus({ taskId, status: toStatus });
+      await refetch();
     } catch (error) {
       console.error("Failed to update task status:", error);
       setTasks(fetchedTasks || []);
@@ -197,7 +199,7 @@ const Task = ({ task }: TaskProps) => {
     >
       {task.attachments && task.attachments.length > 0 && (
         <Image
-          src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
+          src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${task.attachments[0].fileURL}`}
           alt={task.attachments[0].fileName}
           width={400}
           height={200}
@@ -248,8 +250,8 @@ const Task = ({ task }: TaskProps) => {
           <div className="flex -space-x-[6px] overflow-hidden">
             {task.assignee && (
               <Image
-                key={task.assignee.userId}
+                key={`assignee#${task.assignee.userId}`}
-                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.assignee.profilePictureUrl!}`}
+                src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${task.assignee.profilePictureUrl!}`}
                 alt={task.assignee.username}
                 width={30}
                 height={30}
@@ -258,8 +260,8 @@ const Task = ({ task }: TaskProps) => {
             )}
             {task.author && (
               <Image
-                key={task.author.userId}
+                key={`author#${task.author.userId}`}
-                src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.author.profilePictureUrl!}`}
+                src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${task.author.profilePictureUrl!}`}
                 alt={task.author.username}
                 width={30}
                 height={30}

tasker-client/src/app/projects/TimelineView/index.tsx

@@ -21,16 +21,19 @@ const Timeline = ({ projectId, setIsModalNewTaskOpen }: Props) => {
   });
 
   const ganttTasks = useMemo(() => {
+    if (!tasks || tasks.length === 0) return [];
     return (
-      tasks?.map((task) => ({
+      tasks
-        start: new Date(task.startDate as string),
+        ?.filter((task) => task.startDate && task.dueDate)
-        end: new Date(task.dueDate as string),
+        .map((task) => ({
-        name: task.title,
+          start: new Date(task.startDate as string),
-        id: `Task-${task.taskId}`,
+          end: new Date(task.dueDate as string),
-        type: "task" as TaskTypeItems,
+          name: task.title,
-        progress: task.points ? (task.points / 10) * 100 : 0,
+          id: `Task-${task.taskId}`,
-        isDisabled: false,
+          type: "task" as TaskTypeItems,
-      })) || []
+          progress: task.points ? (task.points / 10) * 100 : 0,
+          isDisabled: false,
+        })) || []
     );
   }, [tasks]);
 
@@ -66,16 +69,20 @@ const Timeline = ({ projectId, setIsModalNewTaskOpen }: Props) => {
       </div>
 
       <div className="overflow-hidden rounded-md bg-white shadow dark:bg-dark-secondary dark:text-white">
-        <div className="timeline">
+        {ganttTasks.length > 0 && (
-          <Gantt
+          <div className="timeline">
-            tasks={ganttTasks}
+            <Gantt
-            {...displayOptions}
+              tasks={ganttTasks}
-            columnWidth={displayOptions.viewMode === ViewMode.Month ? 150 : 100}
+              {...displayOptions}
-            listCellWidth="100px"
+              columnWidth={
-            barBackgroundColor={isDarkMode ? "#101214" : "#aeb8c2"}
+                displayOptions.viewMode === ViewMode.Month ? 150 : 100
-            barBackgroundSelectedColor={isDarkMode ? "#000" : "#9ba1a6"}
+              }
-          />
+              listCellWidth="100px"
-        </div>
+              barBackgroundColor={isDarkMode ? "#101214" : "#aeb8c2"}
+              barBackgroundSelectedColor={isDarkMode ? "#000" : "#9ba1a6"}
+            />
+          </div>
+        )}
         <div className="px-4 pb-5 pt-1">
           <button
             className="flex items-center rounded bg-blue-primary px-3 py-2 text-white hover:bg-blue-600"

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={`${process.env.S3_PUBLIC_IMAGE_URL}/${params.value}`}
+            src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${params.value}`}
             alt={params.row.username}
             width={100}
             height={50}

tasker-server/seed/populateSeedData.ts

@@ -1174,7 +1174,7 @@ export const handler = async () => {
       console.info(`Data population for table ${tableName} complete.`);
     }
 
-    console.log("Data population complete.");
+    console.info("Data population complete.");
   } catch (error) {
     console.error("Failed to populate data:", error);
   }

tasker-server/src/handlers/createUser.ts

@@ -10,10 +10,9 @@ const client = new DynamoDBClient({ region: SLS_REGION });
 const docClient = DynamoDBDocument.from(client);
 
 export const handler = async (event: any): Promise<any> => {
-  console.info(`Event: ${JSON.stringify(event)}`);
   const username =
     event.request.userAttributes["preferred_username"] || event.userName;
-  const cognitoId = event.userName;
+  const cognitoId = event.request.userAttributes["sub"];
   const teamId = await fetchRandomTeamId();
 
   try {

tasker-server/src/handlers/getUserTasks.ts

@@ -17,13 +17,17 @@ export const handler = async (event: any): Promise<any> => {
 
     const userTasks = [...authorTasks, ...assigneeTasks];
 
+    const uniqueTasks = Array.from(
+      new Map(userTasks.map((task) => [task.taskId, task])).values()
+    );
+
     return {
       statusCode: 200,
       headers: {
         "Content-Type": "application/json",
         "Access-Control-Allow-Origin": "*",
       },
-      body: JSON.stringify(userTasks),
+      body: JSON.stringify(uniqueTasks),
     };
   } catch (error: any) {
     return {