From 33c54a1b48603806591a81ed5c6ca75031f8ddcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Thu, 30 Nov 2023 02:03:33 +0000
Subject: [PATCH] chore: implement suggestions

---
 components/Input/index.tsx               |  2 +-
 components/Notification/Notification.tsx | 46 +++++++++++++++++++
 components/Notification/index.tsx        |  1 +
 components/ResetPassword/index.tsx       | 58 +++++++++++++-----------
 components/Select/index.tsx              |  4 +-
 5 files changed, 83 insertions(+), 28 deletions(-)
 create mode 100644 components/Notification/Notification.tsx
 create mode 100644 components/Notification/index.tsx

diff --git a/components/Input/index.tsx b/components/Input/index.tsx
index 63eb6798..3f5015a5 100644
--- a/components/Input/index.tsx
+++ b/components/Input/index.tsx
@@ -34,7 +34,7 @@ export function InputBase({
       </label>
       <div
         className={`text-iregular mt-2 flex items-center  ${
-          enabled == false ? "text-gray-500" : textColor 
+          enabled == false ? "text-gray-500" : textColor
         } ${backColor} appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm sm:text-sm`}
       >
         {children}
diff --git a/components/Notification/Notification.tsx b/components/Notification/Notification.tsx
new file mode 100644
index 00000000..122995f9
--- /dev/null
+++ b/components/Notification/Notification.tsx
@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+interface INotificationProps {
+  title: string;
+}
+
+export default function Notification({ title }: INotificationProps) {
+  console.log("Notification");
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className="fixed right-4 top-0 z-50 h-16 w-72">
+      <div className="pointer-events-auto min-w-full overflow-hidden rounded-lg bg-quinary shadow-lg ring-1 ring-black ring-opacity-5 ">
+        <div className="min-w-full p-4 ">
+          <div className="flex items-start">
+            <div className="flex-shrink-0"></div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p className="text-md font-medium text-white">{title}</p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                onClick={() => setVisible(false)}
+                className="inline-flex rounded-md bg-quinary text-white hover:text-primary focus:outline-none"
+              >
+                <span className="sr-only">Close</span>
+                <span className="h-5 w-5">X</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Notification/index.tsx b/components/Notification/index.tsx
new file mode 100644
index 00000000..4dfbd4b0
--- /dev/null
+++ b/components/Notification/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Notification";
diff --git a/components/ResetPassword/index.tsx b/components/ResetPassword/index.tsx
index 7f0a252d..5ca2a4f3 100644
--- a/components/ResetPassword/index.tsx
+++ b/components/ResetPassword/index.tsx
@@ -1,34 +1,40 @@
+import { useState, useEffect } from "react";
 import { resetPassword } from "@lib/api";
-import Swal from "sweetalert2";
+import Notification from "@components/Notification";
 
-const onResetPassword = (user: any) => {
-  resetPassword(user.email)
-    .then((_) =>
-      Swal.fire({
-        icon: "success",
-        title: "Password Reset",
-        text: "An email has been sent to your account for you to recover your password!",
+export default function ResetPassword(user: any) {
+  const [showNotification, setShowNotification] = useState(false);
+
+  const onResetPassword = (user: any) => {
+    resetPassword(user.email)
+      .then((_) => {
+        setShowNotification(true);
       })
-    )
-    .catch((_) => {
-      Swal.fire({
-        icon: "error",
-        title: "Oops...",
-        text: "Something went wrong!",
+      .catch((_) => {
+        setShowNotification(false);
       });
-    });
-};
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowNotification(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  });
 
-export default function ResetPassword(user) {
   return (
-    <button
-      className="inline-block h-auto pl-6 pb-5 text-quinary underline"
-      onClick={(e) => {
-        e.preventDefault();
-        onResetPassword(user);
-      }}
-    >
-      Reset Password
-    </button>
+    <>
+      <button
+        className="inline-block h-auto pl-6 pb-5 text-quinary underline"
+        onClick={(e) => {
+          e.preventDefault();
+          onResetPassword(user);
+        }}
+      >
+        Reset Password
+      </button>
+      {showNotification && <Notification title="Password reset email sent" />}
+    </>
   );
 }
diff --git a/components/Select/index.tsx b/components/Select/index.tsx
index 80489e6c..2f1f5f7d 100644
--- a/components/Select/index.tsx
+++ b/components/Select/index.tsx
@@ -50,7 +50,9 @@ export default function Select({
           {...rest}
         >
           {options.map((option) => (
-            <option key={option.key} value={option.key}>{option.name}</option>
+            <option key={option.key} value={option.key}>
+              {option.name}
+            </option>
           ))}
         </select>
         <ChevronDownIcon