From 0248c1fe774f76dc233ebd0dba5d82553a639bc9 Mon Sep 17 00:00:00 2001 From: bonz88 Date: Fri, 15 Mar 2024 15:10:28 +0100 Subject: [PATCH 1/3] used export for levelsCount so it can be used in other components --- src/app/components/LevelSelector.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/LevelSelector.tsx b/src/app/components/LevelSelector.tsx index c6b5808..dbfb42a 100644 --- a/src/app/components/LevelSelector.tsx +++ b/src/app/components/LevelSelector.tsx @@ -1,4 +1,5 @@ const levels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; +export const levelsCount = levels.length; type LevelSelectorProps = { label: string; From e766038e0fc311aa54c9ffbb7c6bb6ac910909ae Mon Sep 17 00:00:00 2001 From: bonz88 Date: Fri, 15 Mar 2024 15:11:19 +0100 Subject: [PATCH 2/3] added page for displaying tasks --- .../components/PriorityComplexityDisplay.tsx | 38 ++++++++++++ src/app/components/TaskCard.tsx | 43 +++++++++++++ src/app/components/TaskForm.tsx | 1 + src/app/icons/CalendarIcon.tsx | 18 ++++++ src/app/icons/ComplexityIcon.tsx | 61 +++++++++++++++++++ src/app/icons/PriorityIcon.tsx | 26 ++++++++ src/app/icons/SearchIcon.tsx | 17 ++++++ src/app/page.tsx | 43 +++++++------ src/redux/features/taskSlice.ts | 1 + 9 files changed, 229 insertions(+), 19 deletions(-) create mode 100644 src/app/components/PriorityComplexityDisplay.tsx create mode 100644 src/app/components/TaskCard.tsx create mode 100644 src/app/icons/CalendarIcon.tsx create mode 100644 src/app/icons/ComplexityIcon.tsx create mode 100644 src/app/icons/PriorityIcon.tsx create mode 100644 src/app/icons/SearchIcon.tsx diff --git a/src/app/components/PriorityComplexityDisplay.tsx b/src/app/components/PriorityComplexityDisplay.tsx new file mode 100644 index 0000000..9611920 --- /dev/null +++ b/src/app/components/PriorityComplexityDisplay.tsx @@ -0,0 +1,38 @@ +import { PriorityIcon } from "../icons/PriorityIcon"; +import { ComplexityIcon } from "../icons/ComplexityIcon"; +import { levelsCount } from "./LevelSelector"; + +type PriorityComplexityDisplayProps = { + priority?: number; + complexity?: number; +}; + +export default function PriorityComplexityDisplay({ + priority, + complexity, +}: PriorityComplexityDisplayProps) { + const priorityComplexityDesc = (desc: number) => { + if (desc < 4) return "Low"; + if (desc < 7) return "Medium"; + return "High"; + }; + return ( +
+ {priority ? : } +
+ + {priority ? "Priority:" : "Complexity:"}{" "} + + + + {priority && priorityComplexityDesc(priority)} + {complexity && priorityComplexityDesc(complexity)} + + + ({priority || complexity}/{levelsCount}) + + +
+
+ ); +} diff --git a/src/app/components/TaskCard.tsx b/src/app/components/TaskCard.tsx new file mode 100644 index 0000000..4f7f6af --- /dev/null +++ b/src/app/components/TaskCard.tsx @@ -0,0 +1,43 @@ +import PriorityComplexityDisplay from "./PriorityComplexityDisplay"; +import { ITask } from "../types/types"; +import { CalendarIcon } from "../icons/CalendarIcon"; + +type TaskCardProps = { + task: ITask; +}; + +export default function TaskCard({ task }: TaskCardProps) { + return ( +
+
+
+ + {task.value} +
+
+ + Due Date: + + {task.dueDate ? task.dueDate : "No date"},{" "} + {task.dueTime ? task.dueTime : "No time"} + +
+ + + {task.tags.length > 0 && ( +
+ {task.tags.map((tag) => ( + + {tag.value} + + ))} +
+ )} +
+
+ ); +} diff --git a/src/app/components/TaskForm.tsx b/src/app/components/TaskForm.tsx index ed1b24a..2112bc0 100644 --- a/src/app/components/TaskForm.tsx +++ b/src/app/components/TaskForm.tsx @@ -48,6 +48,7 @@ export default function TaskForm({ label }: { label: string }) { handleAddTask({ id: Math.random().toString(), value, + isCompleted: false, priority, complexity, dueDate, diff --git a/src/app/icons/CalendarIcon.tsx b/src/app/icons/CalendarIcon.tsx new file mode 100644 index 0000000..5ca71af --- /dev/null +++ b/src/app/icons/CalendarIcon.tsx @@ -0,0 +1,18 @@ +export const CalendarIcon = () => { + return ( + + + + ); +}; diff --git a/src/app/icons/ComplexityIcon.tsx b/src/app/icons/ComplexityIcon.tsx new file mode 100644 index 0000000..6dbd309 --- /dev/null +++ b/src/app/icons/ComplexityIcon.tsx @@ -0,0 +1,61 @@ +export const ComplexityIcon = () => { + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/src/app/icons/PriorityIcon.tsx b/src/app/icons/PriorityIcon.tsx new file mode 100644 index 0000000..9f33908 --- /dev/null +++ b/src/app/icons/PriorityIcon.tsx @@ -0,0 +1,26 @@ +export const PriorityIcon = () => { + return ( + + + + + ); +}; diff --git a/src/app/icons/SearchIcon.tsx b/src/app/icons/SearchIcon.tsx new file mode 100644 index 0000000..6e8fd65 --- /dev/null +++ b/src/app/icons/SearchIcon.tsx @@ -0,0 +1,17 @@ +export const SearchIcon = ({ className }: { className: string }) => { + return ( + + + + ); +}; diff --git a/src/app/page.tsx b/src/app/page.tsx index 2dc39db..e925371 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,30 +1,35 @@ "use client"; - +import Link from "next/link"; import { useAppSelector } from "../redux/store"; +import { SearchIcon } from "./icons/SearchIcon"; +import { PlusIcon } from "./icons/PlusIcon"; +import TaskCard from "./components/TaskCard"; export default function Home() { const tasks = useAppSelector((state) => state.task.tasks); return ( -
- {tasks.map((task) => ( -
-

{task.value}

-

{task.priority}

-

{task.complexity}

-

{task.dueDate}

-

{task.dueTime}

- {task.subtasks.map((subtask) => ( -
-

{subtask.value}

-

Completed: {subtask.isCompleted}

-
- ))} - {task.tags.map((tag) => ( -

{tag.value}

+
+
+
+ + +
+
+ {tasks.map((task) => ( + ))}
- ))} -
+ + + + + ); } diff --git a/src/redux/features/taskSlice.ts b/src/redux/features/taskSlice.ts index 055b60c..fc510ca 100644 --- a/src/redux/features/taskSlice.ts +++ b/src/redux/features/taskSlice.ts @@ -4,6 +4,7 @@ import { ISubtask, ITag } from "../../app/types/types"; type ITask = { id: string; value: string; + isCompleted: false; priority: number; complexity: number; dueDate: string; From 779fbea04d3187e46d53c16a0e10cce8965eebd1 Mon Sep 17 00:00:00 2001 From: bonz88 Date: Sat, 16 Mar 2024 10:52:30 +0100 Subject: [PATCH 3/3] moved function PriorityComplexityDesc outside component PriorityComplexityDisplay --- src/app/components/PriorityComplexityDisplay.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/components/PriorityComplexityDisplay.tsx b/src/app/components/PriorityComplexityDisplay.tsx index 9611920..7e22e56 100644 --- a/src/app/components/PriorityComplexityDisplay.tsx +++ b/src/app/components/PriorityComplexityDisplay.tsx @@ -7,15 +7,16 @@ type PriorityComplexityDisplayProps = { complexity?: number; }; +const priorityComplexityDesc = (desc: number) => { + if (desc < 4) return "Low"; + if (desc < 7) return "Medium"; + return "High"; +}; + export default function PriorityComplexityDisplay({ priority, complexity, }: PriorityComplexityDisplayProps) { - const priorityComplexityDesc = (desc: number) => { - if (desc < 4) return "Low"; - if (desc < 7) return "Medium"; - return "High"; - }; return (
{priority ? : }