From f10e0a10061c635b4180ceb4624629693bc95e0f Mon Sep 17 00:00:00 2001
From: elvisscochito <elvirodominguezsoriano@outlook.com>
Date: Mon, 11 Sep 2023 14:06:14 -0600
Subject: [PATCH] feat: :rocket: improve styles and code

---
 frontend/src/components/ModalCard.jsx       | 25 ++++++++++++++++-----
 frontend/src/styles/DateSlider.module.css   |  4 ++++
 frontend/src/styles/MeetingCard.module.css  |  4 ++++
 frontend/src/styles/Meetings.module.css     |  4 ++++
 frontend/src/styles/Modal.module.css        |  4 ++++
 frontend/src/styles/ModalCard.module.css    | 13 +++++++++++
 frontend/src/styles/RoomSwitcher.module.css |  4 ++++
 7 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ModalCard.jsx b/frontend/src/components/ModalCard.jsx
index c77e44f..b3239b0 100644
--- a/frontend/src/components/ModalCard.jsx
+++ b/frontend/src/components/ModalCard.jsx
@@ -2,6 +2,7 @@ import { faCircleDot, faCircleExclamation, faCircleInfo, faCircleXmark, faClockR
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import apiUrlPrefix from '../config/apiUrlPrefix.js';
 import styles from '../styles/ModalCard.module.css';
 import { dateOptions, timeOptions } from '../utils/utils.js';
 
@@ -108,14 +109,19 @@ const ModalCard = ({ datetime, currentDate, setCurrentDate, room, rooms, setMeet
       try {
         const start = new Date(`${inputDate}T${startTime}`).toISOString();
         const end = new Date(`${inputDate}T${endTime}`).toISOString();
-        const response = await fetch(`${apiUrlPrefix}/${room}/meeting?start=${start}&end=${end}`);
+        const currentDateTime = new Date().toISOString();
 
-        const data = await response.json();
+        if (start >= currentDateTime) {
+          const response = await fetch(`${apiUrlPrefix}/${room}/meeting?start=${start}&end=${end}`);
+          const data = await response.json();
 
-        if (data.overlap) {
-          setErrorTimeMessage('Ya hay una reunión programada en ese horario');
+          if (data.overlap) {
+            setErrorTimeMessage('Ya hay una reunión programada en ese horario');
+          } else {
+            setErrorTimeMessage('');
+          }
         } else {
-          setErrorTimeMessage('');
+          setErrorTimeMessage('Selecciona una hora de inicio en el futuro');
         }
       } catch (error) {
         console.error(error);
@@ -166,6 +172,15 @@ const ModalCard = ({ datetime, currentDate, setCurrentDate, room, rooms, setMeet
 
   const handleUpdateMeeting = async (e) => {
     e.preventDefault();
+
+    const startDateTime = new Date(`${inputDate}T${startTime}`);
+    const endDateTime = new Date(`${inputDate}T${endTime}`);
+
+    if (endDateTime <= startDateTime) {
+      setErrorTimeMessage('La hora de finalización debe ser posterior a la hora de inicio');
+      return;
+    }
+
     try {
       const response = await fetch(`${apiUrlPrefix}/${room}/meeting/${meeting._id}`, {
         method: 'PUT',
diff --git a/frontend/src/styles/DateSlider.module.css b/frontend/src/styles/DateSlider.module.css
index 0738588..652c49e 100644
--- a/frontend/src/styles/DateSlider.module.css
+++ b/frontend/src/styles/DateSlider.module.css
@@ -32,6 +32,10 @@ span.arrowButton {
   /* transition: all 0.2s ease-in-out; */
 }
 
+span.arrowButton:hover {
+  cursor: pointer;
+}
+
 /* button.arrowButtonLeft {
   position: absolute;
   top: 100%;
diff --git a/frontend/src/styles/MeetingCard.module.css b/frontend/src/styles/MeetingCard.module.css
index d99cfbd..81deefa 100644
--- a/frontend/src/styles/MeetingCard.module.css
+++ b/frontend/src/styles/MeetingCard.module.css
@@ -12,6 +12,10 @@ div.card {
   /* border-left-color: var(--brand-color); */
 }
 
+div.card:hover {
+  cursor: pointer;
+}
+
 div.status {
   display: flex;
   flex-direction: row;
diff --git a/frontend/src/styles/Meetings.module.css b/frontend/src/styles/Meetings.module.css
index 927ed51..7c164c3 100644
--- a/frontend/src/styles/Meetings.module.css
+++ b/frontend/src/styles/Meetings.module.css
@@ -62,6 +62,10 @@ button.button {
   /* transition: all 0.2s ease-in-out; */
 }
 
+button.button:hover {
+  cursor: pointer;
+}
+
 button.button:disabled {
   background-color: hsla(151, 100%, 23%, 0.5);
 }
diff --git a/frontend/src/styles/Modal.module.css b/frontend/src/styles/Modal.module.css
index 164d9e4..90a027a 100644
--- a/frontend/src/styles/Modal.module.css
+++ b/frontend/src/styles/Modal.module.css
@@ -123,6 +123,10 @@ button.button {
   */
 }
 
+button.button:hover {
+  cursor: pointer;
+}
+
 button.default {
   background-color: var(--brand-color);
   color: #fff;
diff --git a/frontend/src/styles/ModalCard.module.css b/frontend/src/styles/ModalCard.module.css
index bfd174c..86de92c 100644
--- a/frontend/src/styles/ModalCard.module.css
+++ b/frontend/src/styles/ModalCard.module.css
@@ -84,6 +84,10 @@ label.roomLabel {
   font-weight: 500;
 }
 
+label.roomLabel:hover {
+  cursor: pointer;
+}
+
 /* turn label text color into green if input radio is checked */
 label.roomLabel:has(input[type="radio"].radio:checked) {
   background-color: var(--brand-color);
@@ -176,6 +180,10 @@ button.button {
   */
 }
 
+button.button:hover {
+  cursor: pointer;
+}
+
 button.default {
   background-color: var(--brand-color);
   color: #fff;
@@ -290,3 +298,8 @@ button.closeWarning {
   font-weight: 500;
   padding: .5rem;
 }
+
+button.close,
+button.closeWarning {
+  cursor: pointer;
+}
diff --git a/frontend/src/styles/RoomSwitcher.module.css b/frontend/src/styles/RoomSwitcher.module.css
index eacb410..7af9554 100644
--- a/frontend/src/styles/RoomSwitcher.module.css
+++ b/frontend/src/styles/RoomSwitcher.module.css
@@ -18,3 +18,7 @@ button.room {
   border-radius: 1.875rem;
   transition: all 0.2s ease-in-out;
 }
+
+button.room:hover {
+  cursor: pointer;
+}