feat: add listing email response using notify button

apps/app/components/FeedbackModal/index.tsx

@@ -0,0 +1,64 @@
+import { Input, Modal, Tabs } from "antd";
+import React, { useEffect, useState } from "react";
+
+interface TabInfo {
+  tabTitle: string;
+  info: string;
+}
+
+interface DynamicTabsProps {
+  visible: boolean;
+  onClose: () => void;
+  tabsInfo: TabInfo[];
+  modalTitle: string;
+}
+
+const FeedbackModal: React.FC<DynamicTabsProps> = ({
+  visible,
+  onClose,
+  tabsInfo,
+  modalTitle,
+}) => {
+  const [activeTab, setActiveTab] = useState<string>("");
+  const [tabInfo, setTabInfo] = useState<string>("");
+
+  useEffect(() => {
+    if (tabsInfo.length > 0) {
+      setActiveTab(tabsInfo[0].tabTitle);
+      setTabInfo(tabsInfo[0].info);
+    }
+  }, [tabsInfo]);
+
+  const handleTabChange = (key: string) => {
+    const selectedTab = tabsInfo.find((tab) => tab.tabTitle === key);
+    if (selectedTab) {
+      setActiveTab(selectedTab.tabTitle);
+      setTabInfo(selectedTab.info);
+    }
+  };
+
+  return (
+    <Modal
+      title={modalTitle}
+      visible={visible}
+      onCancel={onClose}
+      footer={null}
+    >
+      <Tabs activeKey={activeTab} onChange={handleTabChange}>
+        {tabsInfo.map((tab) => (
+          <Tabs.TabPane tab={tab.tabTitle} key={tab.tabTitle}>
+            <Input.TextArea
+              value={tabInfo}
+              rows={25}
+              style={{ resize: "none" }}
+              placeholder="Nenhuma informação para apresentar"
+              readOnly={true}
+            />
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+    </Modal>
+  );
+};
+
+export default FeedbackModal;

apps/app/pages/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Button, Col, Popconfirm, Row, Typography } from "antd";
+import { Button, Col, Modal, Popconfirm, Row, Typography } from "antd";
 import { useAuth } from "@coderdojobraga/ui";
 import { withAuth } from "~/components/Auth/withAuth";
 import AppLayout from "~/layouts/AppLayout";
@@ -9,6 +9,7 @@ import { EUser, getNinjas, notify_selected, notify_signup } from "bokkenjs";
 import Ninja from "~/components/Ninja";
 import { useEvents } from "~/hooks/events";
 import { notifyError, notifyInfo } from "~/components/Notification";
+import FeedbackModal from "~/components/FeedbackModal";
 import styles from "~/styles/Dashboard.module.css";
 import moment from "moment";
 
@@ -34,10 +35,34 @@ function Dashboard() {
     return sorted_events[0] != undefined ? sorted_events[0] : false;
   };
 
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const openModal = () => {
+    setModalVisible(true);
+  };
+
+  const closeModal = () => {
+    setModalVisible(false);
+  };
+
+  const [tabsInfo, setTabsInfo] = useState([
+    { tabTitle: "None", info: "Sem informação" },
+  ]);
+
   const notify_signup_ninjas = () => {
     notify_signup()
-      .then(() => {
-        notifyInfo("Enviado com sucesso!");
+      .then((response) => {
+        setTabsInfo((prevTabsInfo) => [
+          {
+            tabTitle: "Enviados",
+            info: response.success,
+          },
+          {
+            tabTitle: "Não enviados",
+            info: response.fail,
+          },
+        ]);
+        notifyInfo("Enviado com successo!");
       })
       .catch((error) => {
         notifyError("Não foi enviado!");
@@ -46,8 +71,18 @@ function Dashboard() {
 
   const notify_selected_ninjas = () => {
     notify_selected()
-      .then(() => {
-        notifyInfo("Enviado com sucesso!");
+      .then((response) => {
+        setTabsInfo((prevTabsInfo) => [
+          {
+            tabTitle: "Enviados",
+            info: response.success,
+          },
+          {
+            tabTitle: "Não enviados",
+            info: response.fail,
+          },
+        ]);
+        notifyInfo("Enviado com successo!");
       })
       .catch((error) => {
         notifyError("Não foi enviado!");
@@ -80,7 +115,10 @@ function Dashboard() {
                   title="Tens a certeza que queres notificar?"
                   cancelText="Não"
                   okText="Sim"
-                  onConfirm={(_) => notify_signup_ninjas()}
+                  onConfirm={(_) => {
+                    notify_signup_ninjas();
+                    openModal();
+                  }}
                 >
                   <Button type="primary">Notificar abertura</Button>
                 </Popconfirm>
@@ -94,7 +132,10 @@ function Dashboard() {
                   title="Tens a certeza que queres notificar?"
                   cancelText="Não"
                   okText="Sim"
-                  onConfirm={(_) => notify_selected_ninjas()}
+                  onConfirm={(_) => {
+                    notify_selected_ninjas();
+                    openModal();
+                  }}
                 >
                   <Button type="primary">Notificar selecionados</Button>
                 </Popconfirm>
@@ -149,6 +190,12 @@ function Dashboard() {
           <></>
         )}
       </AppLayout>
+      <FeedbackModal
+        visible={modalVisible}
+        onClose={closeModal}
+        tabsInfo={tabsInfo}
+        modalTitle="Relatório de e-mails"
+      />
     </>
   );
 }