From 21659046ec5257ccdd2dc4c53b83d2e39bedc870 Mon Sep 17 00:00:00 2001
From: Lio <liodotdev@gmail.com>
Date: Mon, 27 May 2024 18:11:38 +0200
Subject: [PATCH] refactor error, success and trashed messages

---
 resources/js/Components/Alert/Alert.tsx       | 50 ++++++++++++++
 .../js/Components/Button/CloseButton.tsx      | 23 +++++++
 .../js/Components/Messages/FlashMessages.tsx  | 66 +++++++------------
 .../js/Components/Messages/TrashedMessage.tsx | 37 ++++++-----
 resources/js/Pages/Contacts/Edit.tsx          |  7 +-
 resources/js/Pages/Organizations/Edit.tsx     |  7 +-
 resources/js/Pages/Users/Edit.tsx             |  8 +--
 7 files changed, 130 insertions(+), 68 deletions(-)
 create mode 100644 resources/js/Components/Alert/Alert.tsx
 create mode 100644 resources/js/Components/Button/CloseButton.tsx

diff --git a/resources/js/Components/Alert/Alert.tsx b/resources/js/Components/Alert/Alert.tsx
new file mode 100644
index 0000000..e40f7fa
--- /dev/null
+++ b/resources/js/Components/Alert/Alert.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Check, CircleX, TriangleAlert } from 'lucide-react';
+import CloseButton from '@/Components/Button/CloseButton';
+
+interface Alert {
+  message: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+  onClose?: () => void;
+  variant?: 'success' | 'error' | 'warning';
+}
+
+export default function Alert({
+  icon,
+  action,
+  message,
+  variant,
+  onClose
+}: Alert) {
+  const color = {
+    success: 'green',
+    error: 'red',
+    warning: 'yellow'
+  }[variant || 'success'];
+
+  const backGroundColor = {
+    success: 'bg-green-500 text-white',
+    error: 'bg-red-500 text-white',
+    warning: 'bg-yellow-500 text-yellow-800'
+  }[variant || 'success'];
+
+  const iconComponent = {
+    success: <Check size={20} />,
+    error: <CircleX size={20} />,
+    warning: <TriangleAlert size={20} />
+  }[variant || 'success'];
+
+  return (
+    <div
+      className={`${backGroundColor} px-4 mb-8 flex items-center justify-between rounded max-w-3xl`}
+    >
+      <div className="flex items-center space-x-2">
+        {icon || iconComponent}
+        <div className="py-4 text-sm font-medium">{message}</div>
+      </div>
+      {action}
+      {onClose && <CloseButton onClick={onClose} color={color} />}
+    </div>
+  );
+}
diff --git a/resources/js/Components/Button/CloseButton.tsx b/resources/js/Components/Button/CloseButton.tsx
new file mode 100644
index 0000000..d07d320
--- /dev/null
+++ b/resources/js/Components/Button/CloseButton.tsx
@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+import classNames from 'classnames';
+import { X } from 'lucide-react';
+
+interface CloseButtonProps extends ComponentProps<'button'> {
+  color: string | 'red' | 'green';
+}
+
+export default function CloseButton({ color, onClick }: CloseButtonProps) {
+  const className = classNames('block -mr-2 fill-current', {
+    'text-red-700 group-hover:text-red-800': color === 'red',
+    'text-green-700 group-hover:text-green-800': color === 'green'
+  });
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      className="focus:outline-none group p-2"
+    >
+      <X size={16} className={className} />
+    </button>
+  );
+}
diff --git a/resources/js/Components/Messages/FlashMessages.tsx b/resources/js/Components/Messages/FlashMessages.tsx
index 299c08a..65e6e5c 100644
--- a/resources/js/Components/Messages/FlashMessages.tsx
+++ b/resources/js/Components/Messages/FlashMessages.tsx
@@ -1,60 +1,40 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { usePage } from '@inertiajs/react';
-import classNames from 'classnames';
 import { PageProps } from '@/types';
-import { Check, CircleX, X } from 'lucide-react';
-
-const ButtonClose = ({ color, onClick }) => {
-  const className = classNames('block fill-current', {
-    'text-red-700 group-hover:text-red-800': color === 'red',
-    'text-green-700 group-hover:text-green-800': color === 'green'
-  });
-  return (
-    <button
-      onClick={onClick}
-      type="button"
-      className="focus:outline-none group mr-2 p-2"
-    >
-      <X size={16} className={className} />
-    </button>
-  );
-};
+import Alert from '@/Components/Alert/Alert';
 
 export default function FlashedMessages() {
   const [visible, setVisible] = useState(true);
   const { flash, errors } = usePage<PageProps>().props;
-  const numOfErrors = Object.keys(errors).length;
+  const formErrors = Object.keys(errors).length;
 
   useEffect(() => {
     setVisible(true);
   }, [flash, errors]);
 
   return (
-    <div>
+    <>
       {flash.success && visible && (
-        <div className="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
-          <div className="flex items-center">
-            <Check color="white" size={20} className="ml-4 mr-2" />
-            <div className="py-4 text-white text-sm font-medium">
-              {flash.success}
-            </div>
-          </div>
-          <ButtonClose onClick={() => setVisible(false)} color="green" />
-        </div>
+        <Alert
+          variant="success"
+          message={flash.success}
+          onClose={() => setVisible(false)}
+        />
+      )}
+      {flash.error && visible && (
+        <Alert
+          variant="error"
+          message={flash.error}
+          onClose={() => setVisible(false)}
+        />
       )}
-      {(flash.error || numOfErrors > 0) && visible && (
-        <div className="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
-          <div className="flex items-center">
-            <CircleX color="white" size={20} className="ml-4 mr-2" />
-            <div className="py-4 text-white text-sm font-medium">
-              {flash.error && flash.error}
-              {numOfErrors === 1 && 'There is one form error'}
-              {numOfErrors > 1 && `There are ${numOfErrors} form errors.`}
-            </div>
-          </div>
-          <ButtonClose onClick={() => setVisible(false)} color="red" />
-        </div>
+      {formErrors > 0 && visible && (
+        <Alert
+          variant="error"
+          message={'There are ' + formErrors + ' form errors.'}
+          onClose={() => setVisible(false)}
+        />
       )}
-    </div>
+    </>
   );
 }
diff --git a/resources/js/Components/Messages/TrashedMessage.tsx b/resources/js/Components/Messages/TrashedMessage.tsx
index 67051dd..9039a39 100644
--- a/resources/js/Components/Messages/TrashedMessage.tsx
+++ b/resources/js/Components/Messages/TrashedMessage.tsx
@@ -1,20 +1,27 @@
 import { Trash2 } from 'lucide-react';
+import Alert from '@/Components/Alert/Alert';
 
-export default function TrashedMessage({ onRestore, children }) {
+interface TrashedMessageProps {
+  message: string;
+  onRestore: () => void;
+}
+
+export default function TrashedMessage({
+  message,
+  onRestore
+}: TrashedMessageProps) {
   return (
-    <div className="max-w-3xl mb-6 p-4 bg-yellow-400 rounded border border-yellow-500 flex items-center justify-between">
-      <div className="flex items-center space-x-2">
-        <Trash2 size={20} className="text-yellow-800" />
-        <div className="text-yellow-800">{children}</div>
-      </div>
-      <button
-        className="text-yellow-800 focus:outline-none text-sm hover:underline"
-        tabIndex={-1}
-        type="button"
-        onClick={onRestore}
-      >
-        Restore
-      </button>
-    </div>
+    <Alert
+      variant="warning"
+      message={message}
+      icon={<Trash2 size={20} />}
+      action={
+        <button
+          onClick={onRestore}
+          children="Restore"
+          className="text-yellow-800 focus:outline-none text-xs font-medium hover:underline"
+        />
+      }
+    />
   );
 }
diff --git a/resources/js/Pages/Contacts/Edit.tsx b/resources/js/Pages/Contacts/Edit.tsx
index 01b09e9..1dc0bbd 100644
--- a/resources/js/Pages/Contacts/Edit.tsx
+++ b/resources/js/Pages/Contacts/Edit.tsx
@@ -60,9 +60,10 @@ const Edit = () => {
         {data.first_name} {data.last_name}
       </h1>
       {contact.deleted_at && (
-        <TrashedMessage onRestore={restore}>
-          This contact has been deleted.
-        </TrashedMessage>
+        <TrashedMessage
+          message="This contact has been deleted."
+          onRestore={restore}
+        />
       )}
       <div className="max-w-3xl overflow-hidden bg-white rounded shadow">
         <form onSubmit={handleSubmit}>
diff --git a/resources/js/Pages/Organizations/Edit.tsx b/resources/js/Pages/Organizations/Edit.tsx
index b49e245..bf6deb4 100644
--- a/resources/js/Pages/Organizations/Edit.tsx
+++ b/resources/js/Pages/Organizations/Edit.tsx
@@ -55,9 +55,10 @@ const Edit = () => {
         {data.name}
       </h1>
       {organization.deleted_at && (
-        <TrashedMessage onRestore={restore}>
-          This organization has been deleted.
-        </TrashedMessage>
+        <TrashedMessage
+          message="This organization has been deleted."
+          onRestore={restore}
+        />
       )}
       <div className="max-w-3xl overflow-hidden bg-white rounded shadow">
         <form onSubmit={handleSubmit}>
diff --git a/resources/js/Pages/Users/Edit.tsx b/resources/js/Pages/Users/Edit.tsx
index 981cdcc..50e8512 100644
--- a/resources/js/Pages/Users/Edit.tsx
+++ b/resources/js/Pages/Users/Edit.tsx
@@ -67,9 +67,10 @@ const Edit = () => {
         )}
       </div>
       {user.deleted_at && (
-        <TrashedMessage onRestore={restore}>
-          This user has been deleted.
-        </TrashedMessage>
+        <TrashedMessage
+          message="This user has been deleted."
+          onRestore={restore}
+        />
       )}
       <div className="max-w-3xl overflow-hidden bg-white rounded shadow">
         <form onSubmit={handleSubmit}>
@@ -138,7 +139,6 @@ const Edit = () => {
 
             <FieldGroup label="Photo" name="photo" error={errors.photo}>
               <FileInput
-                label="Photo"
                 name="photo"
                 accept="image/*"
                 error={errors.photo}