diff --git a/apps/app/components/FeedbackModal/index.tsx b/apps/app/components/FeedbackModal/index.tsx new file mode 100644 index 00000000..04f3e4e3 --- /dev/null +++ b/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 = ({ + visible, + onClose, + tabsInfo, + modalTitle, +}) => { + const [activeTab, setActiveTab] = useState(""); + const [tabInfo, setTabInfo] = useState(""); + + 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 ( + + + {tabsInfo.map((tab) => ( + + + + ))} + + + ); +}; + +export default FeedbackModal; diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx index 1cfbdd9f..00e7a81e 100644 --- a/apps/app/pages/index.tsx +++ b/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,35 @@ 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, + }, + ]); + openModal(); + notifyInfo("Enviado com successo!"); }) .catch((error) => { notifyError("Não foi enviado!"); @@ -46,8 +72,19 @@ 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, + }, + ]); + openModal(); + notifyInfo("Enviado com successo!"); }) .catch((error) => { notifyError("Não foi enviado!"); @@ -149,6 +186,12 @@ function Dashboard() { <> )} + ); }