feat: connect grouped Data to Component

ever-co · Jan 27, 2024 · 9309b58 · 9309b58
1 parent a6cc88f
commit 9309b58
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/apps/web/app/helpers/array-data.ts b/apps/web/app/helpers/array-data.ts
@@ -49,23 +49,23 @@ export function groupAppsByHour(apps: ITimerApps[]) {
 }
 
 export function groupByTime(data: ITaskTimesheet[]) {
-	const groupedData: { hour: string; items: ITaskTimesheet[] }[] = [];
+	const groupedData: { date: string; items: ITaskTimesheet[] }[] = [];
 
 	data.forEach((item) => {
-		const time = item.time.slice(0, 5);
+		const date = new Date(item.date).toDateString();
 
-		const hourDataIndex = groupedData.findIndex((el) => el.hour == time);
+		const dateDataIndex = groupedData.findIndex((el) => el.date == date);
 
-		if (hourDataIndex !== -1) {
-			groupedData[hourDataIndex].items.push(item);
+		if (dateDataIndex !== -1) {
+			groupedData[dateDataIndex].items.push(item);
 		} else
 			groupedData.push({
-				hour: item.time.slice(0, 5),
+				date,
 				items: [item]
 			});
 	});
 
-	return groupedData.sort((a, b) => (new Date(a.hour) > new Date(b.hour) ? -1 : 1));
+	return groupedData.sort((a, b) => (new Date(a.date) > new Date(b.date) ? -1 : 1));
 }
 
 const formatTime = (d: Date | string, addHour: boolean) => {

diff --git a/apps/web/app/interfaces/ITaskTimesheet.ts b/apps/web/app/interfaces/ITaskTimesheet.ts
@@ -4,6 +4,7 @@ import { ITeamTask } from './ITask';
 import { ITimerSlot } from './timer/ITimerSlot';
 
 export interface ITaskTimesheet {
+    id: string
 	title: string;
 	description?: string;
 	metaData?: string;

diff --git a/apps/web/lib/features/task/task-activity.tsx b/apps/web/lib/features/task/task-activity.tsx
@@ -22,23 +22,33 @@ export function TaskActivity({ task }: { task: ITeamTask }) {
 			className="w-full p-4 md:px-4 dark:bg-[#25272D] flex flex-col gap-6 border border-[#00000014] dark:border-[#26272C]"
 			shadow="bigger"
 		>
+			{/* TO DELETE: start */}
 			<div className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]">
 				<h3 className="text-xl font-semibold py-2">{'05.01.2024'}</h3>
 				<UserTaskActivity />
 				<UserTaskActivity />
 			</div>
+			{/* TO DELETE: end */}
+			{groupedData.map((timesheet, i) => (
+				<div
+					key={i}
+					className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]"
+				>
+					<h3 className="text-xl font-semibold py-2">{timesheet.date}</h3>
+					{timesheet.items.map((item) => (
+						<UserTaskActivity key={item.id} />
+					))}
+				</div>
+			))}
 
-			<div className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]">
-				<h3 className="text-xl font-semibold py-2">{'04.01.2024'}</h3>
-				<UserTaskActivity />
-			</div>
-
+			{/* TO DELETE: start */}
 			<div className="shadow-lg rounded-lg p-4 bg-light dark:bg-dark border border-[#00000014] dark:border-[#26272C]">
 				<h3 className="text-xl font-semibold py-2">{'03.01.2024'}</h3>
 				<UserTaskActivity />
 				<UserTaskActivity />
 				<UserTaskActivity />
 			</div>
+			{/* TO DELETE: end */}
 		</Card>
 	);
 }