AndrewTrieu/tasker
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrew Trieu
2024-11-26 10:34:29 +02:00
parent 29e8d3d133
commit b7771ac827
14 changed files with 107 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.github/workflows/amplify-deployment.yml vendored
View File

@@ -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: |

2
tasker-client/amplify.yml
View File

@@ -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: ""

12
tasker-client/next.config.ts
View File

@@ -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;

54
tasker-client/src/app/components/ModalNewTask/index.tsx
View File

@@ -1,6 +1,11 @@
import Modal from "@/app/components/Modal";
import { Priority, Status, useCreateTaskMutation } from "@/state/api";
import React, { useState } from "react";
import {
Priority,
Status,
useCreateTaskMutation,
useGetAuthUserQuery,
} from "@/state/api";
import React, { useEffect, useState } from "react";
import { formatISO } from "date-fns";
type Props = {
@@ -22,20 +27,26 @@ 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..");
if (
!(title && authorUserId && assignedUserId && (id !== null || projectId))
)
return;
console.log("Creating task 2...");
const finalAssignedUserId = assignedUserId.trim() || authorUserId;
const formattedStartDate = formatISO(new Date(startDate), {
const formattedStartDate =
startDate ??
formatISO(new Date(startDate), {
representation: "complete",
});
const formattedDueDate = formatISO(new Date(dueDate), {
const formattedDueDate =
dueDate ??
formatISO(new Date(dueDate), {
representation: "complete",
});
@@ -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 && assignedUserId && (id !== null || projectId)
);
return title && authorUserId && (id !== null || projectId);
};
const selectStyles =
@@ -92,9 +102,13 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
<select
className={selectStyles}
value={status}
onChange={(e) =>
setStatus(Status[e.target.value as keyof typeof Status])
}
onChange={(e) => {
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,6 +153,7 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
onChange={(e) => setDueDate(e.target.value)}
/>
</div>
{authorUserId === "" && (
<input
type="text"
className={inputStyles}
@@ -146,6 +161,7 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
value={authorUserId}
onChange={(e) => setAuthorUserId(e.target.value)}
/>
)}
<input
type="text"
className={inputStyles}

2
tasker-client/src/app/components/Navbar/index.tsx
View File

@@ -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}

4
tasker-client/src/app/components/Sidebar/index.tsx
View File

@@ -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}

2
tasker-client/src/app/components/TaskCard/index.tsx
View File

@@ -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}

2
tasker-client/src/app/components/UserCard/index.tsx
View File

@@ -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}

12
tasker-client/src/app/projects/BoardView/index.tsx
View File

@@ -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}
src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.assignee.profilePictureUrl!}`}
key={`assignee#${task.assignee.userId}`}
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}
src={`${process.env.S3_PUBLIC_IMAGE_URL}/${task.author.profilePictureUrl!}`}
key={`author#${task.author.userId}`}
src={`${process.env.NEXT_PUBLIC_S3_PUBLIC_IMAGE_URL}/${task.author.profilePictureUrl!}`}
alt={task.author.username}
width={30}
height={30}

11
tasker-client/src/app/projects/TimelineView/index.tsx
View File

@@ -21,8 +21,11 @@ const Timeline = ({ projectId, setIsModalNewTaskOpen }: Props) => {
});
const ganttTasks = useMemo(() => {
if (!tasks || tasks.length === 0) return [];
return (
tasks?.map((task) => ({
tasks
?.filter((task) => task.startDate && task.dueDate)
.map((task) => ({
start: new Date(task.startDate as string),
end: new Date(task.dueDate as string),
name: task.title,
@@ -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">
{ganttTasks.length > 0 && (
<div className="timeline">
<Gantt
tasks={ganttTasks}
{...displayOptions}
columnWidth={displayOptions.viewMode === ViewMode.Month ? 150 : 100}
columnWidth={
displayOptions.viewMode === ViewMode.Month ? 150 : 100
}
listCellWidth="100px"
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"

2
tasker-client/src/app/users/page.tsx
View File

@@ -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}

2
tasker-server/seed/populateSeedData.ts
View File

@@ -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);
}

3
tasker-server/src/handlers/createUser.ts
View File

@@ -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 {

6
tasker-server/src/handlers/getUserTasks.ts
View File

@@ -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 {