Merge pull request #3 from delphinegesse/feat/add-reminder-notification

Feat/add reminder notification

src/App.css

@@ -40,3 +40,26 @@
 .todo-text {
   border: none;
 }
+
+.reminder-notification-container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: white;
+  padding: 20px;
+  gap: 20px;
+  border-radius: 10px;
+  border: solid rgb(117, 9, 117) 2px;
+}
+
+.reminder-notification-title {
+  font-size: 28px;
+}
+
+.reminder-notification-content {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}

src/components/reminderNotification.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface ReminderNotificationProps {
+  name: string
+  date: string
+}
+
+export default function ReminderNotification({
+  name,
+  date
+}: ReminderNotificationProps) {
+  return (
+    <div className="reminder-notification-container">
+      <h1 className="reminder-notification-title">Task reminder</h1>
+      <div className="reminder-notification-content">
+        <p>{name}</p>
+        <p>{`Due ${date.split('T')[0]}`}</p>
+      </div>
+    </div>
+  )
+}

src/components/taskList.tsx

@@ -3,6 +3,7 @@ import { gql, useQuery, useSubscription } from '@apollo/client'
 
 import TaskElement from './taskElement'
 import { Task } from '../customTypes'
+import ReminderNotification from './reminderNotification'
 
 const GET_TASKS = gql`
   query GetTasks($order: String, $where: SequelizeJSON) {
@@ -72,10 +73,28 @@ export default function TaskList({ status }: { status: string }) {
 
   if (error) return <p>An error occured while loading the tasks !</p>
 
+  const today = new Date().toISOString().split('T')[0]
+
+  const isReminderNotificationToBeDisplayed = (
+    date: string,
+    active: boolean
+  ) => {
+    if (date !== undefined && active) {
+      const formattedDate = date?.split('T')[0]
+      return today === formattedDate
+    }
+    return false
+  }
+
   return (
     <ul id="todos" className="todos" aria-label="List of to do tasks">
       {data.task.map((task: Task) => (
-        <TaskElement task={task} key={task.id} reloadList={refetch} />
+        <>
+          <TaskElement task={task} key={task.id} reloadList={refetch} />
+          {isReminderNotificationToBeDisplayed(task.date, task.active) && (
+            <ReminderNotification name={task.name} date={task.date} />
+          )}
+        </>
       ))}
     </ul>
   )