#2771-added task title and fixed naming issues

src/frontend/src/hooks/users.hooks.ts

@@ -236,9 +236,14 @@ export const useUpdateUserRole = () => {
  );
 };
 
-export const useUserTasks = (id: string) => {
- return useQuery<Task[], Error>(['users', id, 'tasks'], async () => {
- const { data } = await getUserTasks(id);
+/**
+ * Custom React Hook to get the user's assigned tasks
+ * @param userId user to get assigned tasks of
+ * @returns user's assigned task
+ */
+export const useUserTasks = (userId: string) => {
+ return useQuery<Task[], Error>(['users', userId, 'tasks'], async () => {
+ const { data } = await getUserTasks(userId);
  return data;
  });
 };

src/frontend/src/pages/HomePage/components/CompleteDisplay.tsx → src/frontend/src/pages/HomePage/components/EmptyPageBlockDisplay.tsx

@@ -1,13 +1,13 @@
 import { Stack, Typography } from '@mui/material';
 import React from 'react';
 
-interface CompleteDisplayProps {
+interface EmptyPageBlockDisplayProps {
  icon: React.ReactNode;
  heading: String;
  message: String;
 }
 
-const CompleteDisplay: React.FC<CompleteDisplayProps> = ({ icon, heading, message }) => {
+const EmptyPageBlockDisplay: React.FC<EmptyPageBlockDisplayProps> = ({ icon, heading, message }) => {
  return (
  <Stack direction="column" spacing={1} alignItems="center" justifyContent="center">
  {icon}
@@ -17,4 +17,4 @@ const CompleteDisplay: React.FC<CompleteDisplayProps> = ({ icon, heading, messag
  );
 };
 
-export default CompleteDisplay;
+export default EmptyPageBlockDisplay;

src/frontend/src/pages/HomePage/components/MyTasks.tsx

@@ -3,7 +3,7 @@ import LoadingIndicator from '../../../components/LoadingIndicator';
 import { useCurrentUser, useUserTasks } from '../../../hooks/users.hooks';
 import TaskDetailCard from './TaskDetailCard';
 import ErrorPage from '../../ErrorPage';
-import CompleteDisplay from './CompleteDisplay';
+import EmptyPageBlockDisplay from './EmptyPageBlockDisplay';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ScrollablePageBlock from './ScrollablePageBlock';
 
@@ -18,7 +18,7 @@ const NoTasksDisplay: React.FC = () => {
  alignItems: 'center'
  }}
  >
- <CompleteDisplay
+ <EmptyPageBlockDisplay
  icon={<CheckCircleOutlineOutlinedIcon sx={{ fontSize: 128 }} />}
  heading={"You're all caught up!"}
  message={"You've completed all of your assigned tasks!"}

src/frontend/src/pages/HomePage/components/TaskDetailCard.tsx

@@ -71,7 +71,7 @@ const TaskDetailCard: React.FC<TaskDetailCardProps> = ({ task, taskNumber }) =>
  <Stack direction="column">
  <Box display="flex">
  <Typography fontWeight={'regular'} variant="h5">
- Task #{taskNumber}
+ Task #{taskNumber} - {task.title}
  </Typography>
  {taskOverdue && (
  <Chip