Skip to content

Commit 43ee6e8

Browse files
dgcode-tecdgcode-tec
committed
chore: resolve conflicts
2 parents 8232a11 + 9c606bf commit 43ee6e8

File tree

10 files changed

+366
-64
lines changed

10 files changed

+366
-64
lines changed

‎src/components/QRCodePopup.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.qr-code-popup {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 100%;
7+
background-color: rgba(0, 0, 0, 0.7);
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
z-index: 1000;
12+
}
13+
14+
.qr-code-popup-content {
15+
background: #fff;
16+
padding: 20px;
17+
border-radius: 8px;
18+
text-align: center;
19+
position: relative;
20+
}
21+
22+
.close-button {
23+
position: absolute;
24+
top: 10px;
25+
right: 10px;
26+
font-size: 24px;
27+
cursor: pointer;
28+
}

‎src/components/QRCodePopup.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
import "./QRCodePopup.css";
3+
4+
interface QRCodePopupProps {
5+
qrCodeData: string;
6+
onClose: () => void;
7+
}
8+
9+
const QRCodePopup: React.FC<QRCodePopupProps> = ({ qrCodeData, onClose }) => {
10+
return (
11+
<div className="qr-code-popup">
12+
<div className="qr-code-popup-content">
13+
<span className="close-button" onClick={onClose}>&times;</span>
14+
{qrCodeData ? (
15+
<img src={qrCodeData} alt="QR Code" />
16+
) : (
17+
<img src="/assets/images/evolution-logo.png" alt="Carregando..." />
18+
)}
19+
</div>
20+
</div>
21+
);
22+
};
23+
24+
export default QRCodePopup;

‎src/components/sidebar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useNavigate } from "react-router-dom";
22
import Menus from "./constants/menus";
3+
34
import { useInstance } from "@/contexts/InstanceContext";
45

56
function Sidebar() {

‎src/layout/InstanceLayout.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// InstanceLayout.tsx
21
import "./instance-layout.css";
32
import React from "react";
43
import { Header } from "@/components/header";

‎src/pages/Dashboard/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { useNavigate } from "react-router-dom";
1919
const fetchData = async (callback: (data: Instance[]) => void) => {
2020
try {
2121
const data = await fetchInstances();
22-
2322
callback(data);
2423
} catch (error) {
2524
console.error("Erro ao buscar dados:", error);
@@ -37,9 +36,9 @@ function Dashboard() {
3736
};
3837

3938
const handleInstance =
40-
(instanceId: string): (() => void) =>
39+
(instanceName: string): (() => void) =>
4140
() => {
42-
navigate(`/instance/${instanceId}/dashboard`);
41+
navigate(`/instance/${instanceName}/dashboard`);
4342
};
4443

4544
useEffect(() => {

‎src/pages/instance/DashboardInstance/index.tsx‎

Lines changed: 154 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,173 @@
1+
/* eslint-disable react-hooks/exhaustive-deps */
2+
import { useState } from "react";
13
import { Button } from "@/components/ui/button";
24
import "./style.css";
35
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
6+
import { logout, connect } from "@/services/instances.service";
7+
import QRCodePopup from "@/components/QRCodePopup";
48
import { useInstance } from "@/contexts/InstanceContext";
59

10+
const getStatusClass = (status: string) => {
11+
switch (status) {
12+
case "open":
13+
return "status-connected";
14+
case "close":
15+
return "status-disconnected";
16+
case "connecting":
17+
return "status-connecting";
18+
default:
19+
return "status-disconnected";
20+
}
21+
};
22+
23+
const getStatusText = (status: string) => {
24+
switch (status) {
25+
case "open":
26+
return "Conectado";
27+
case "close":
28+
return "Desconectado";
29+
case "connecting":
30+
return "Conectando";
31+
default:
32+
return "Desconectado";
33+
}
34+
};
35+
636
function DashboardInstance() {
37+
const [showQRCode, setShowQRCode] = useState(false);
38+
const [qrCodeData, setQRCodeData] = useState("");
39+
const [, setTimer] = useState(0);
40+
const token = localStorage.getItem("token");
41+
742
const { instance } = useInstance();
843

9-
const renderStatus = (status: string | undefined) => {
10-
switch (status) {
11-
case "open":
12-
return (
13-
<div className="dashboard-status">
14-
<i className="status-icon connected"></i>
15-
<span className="status-text">CONECTADO</span>
16-
</div>
17-
);
18-
case "connecting":
19-
return (
20-
<div className="dashboard-status">
21-
<i className="status-icon connecting"></i>
22-
<span className="status-text">CONECTANDO</span>
23-
</div>
24-
);
25-
case "closed":
26-
return (
27-
<div className="dashboard-status">
28-
<i className="status-icon disconnected"></i>
29-
<span className="status-text">DESCONECTADO</span>
30-
</div>
31-
);
32-
default:
33-
return (
34-
<div className="dashboard-status">
35-
<i className="status-icon disconnected"></i>
36-
<span className="status-text">DESCONECTADO</span>
37-
</div>
38-
);
44+
const handleRestart = async () => {
45+
// verificar
46+
};
47+
48+
const handleLogout = async (instanceName: string) => {
49+
try {
50+
await logout(instanceName);
51+
// verificar
52+
} catch (error) {
53+
console.error("Erro ao desconectar:", error);
54+
}
55+
};
56+
57+
const handleConnect = async (instanceName: string) => {
58+
try {
59+
setShowQRCode(true);
60+
setQRCodeData("");
61+
62+
if (!token) {
63+
console.error("Token não encontrado.");
64+
return;
65+
}
66+
67+
const data = await connect(instanceName, token);
68+
setQRCodeData(data.base64);
69+
setTimer(0);
70+
} catch (error) {
71+
console.error("Erro ao conectar:", error);
3972
}
4073
};
4174

75+
// const checkInstanceStatus = useCallback(async () => {
76+
// try {
77+
// if (!instance) {
78+
// return;
79+
// }
80+
// const instancesData = await fetchInstances();
81+
// const updatedInstance = instancesData.find(
82+
// (inst: Instance) => inst.name === instance.name
83+
// );
84+
// if (updatedInstance) {
85+
// setInstance(updatedInstance);
86+
87+
// const status = updatedInstance.connectionStatus;
88+
89+
// if (status === "open") {
90+
// setShowQRCode(false);
91+
// setQRCodeData("");
92+
// } else if (status === "close") {
93+
// setTimer((prevTimer) => {
94+
// if (prevTimer >= 45) {
95+
// handleConnect(instanceId);
96+
// return 0;
97+
// }
98+
// return prevTimer + 10;
99+
// });
100+
// }
101+
// }
102+
// } catch (error) {
103+
// console.error("Erro ao verificar status:", error);
104+
// }
105+
// }, [instanceId]);
106+
107+
// useEffect(() => {
108+
// if (showQRCode) {
109+
// const interval = setInterval(checkInstanceStatus, 10000); // Verifica a cada 10 segundos
110+
// return () => clearInterval(interval);
111+
// }
112+
// }, [showQRCode, checkInstanceStatus]);
113+
114+
const closeQRCodePopup = () => {
115+
setShowQRCode(false);
116+
setQRCodeData("");
117+
};
118+
119+
if (!instance) {
120+
return <div>Carregando...</div>;
121+
}
122+
42123
return (
43124
<>
44125
<main className="dashboard-instance">
45-
<div className="dashboard-card">
126+
<div className="dashboard-card" key={instance.id}>
46127
<div className="dashboard-info">
47-
{renderStatus(instance?.connectionStatus)}
48-
<div className="dashboard-name">{instance?.name}</div>
128+
<div
129+
className={`dashboard-status ${getStatusClass(
130+
instance.connectionStatus
131+
)}`}
132+
>
133+
<i
134+
className={`status-icon ${getStatusClass(
135+
instance.connectionStatus
136+
)}`}
137+
></i>
138+
<span className="status-text">
139+
{getStatusText(instance.connectionStatus)}
140+
</span>
141+
</div>
142+
<div className="dashboard-name">{instance.name}</div>
143+
<div className="dashboard-description">{instance.ownerJid}</div>
144+
{instance.connectionStatus === "close" && (
145+
<div className="connection-warning">
146+
<span>Telefone não conectado</span>
147+
<Button
148+
className="connect-button"
149+
onClick={() => handleConnect(instance.name)}
150+
>
151+
CONECTAR
152+
</Button>
153+
</div>
154+
)}
49155
</div>
50156
<div className="dashboard-actions">
51-
<Button className="action-button">REINICIAR</Button>
52-
<Button className="action-button disabled">DESCONECTAR</Button>
157+
<Button className="action-button" onClick={handleRestart}>
158+
REINICIAR
159+
</Button>
160+
<Button
161+
className={`action-button ${
162+
instance.connectionStatus === "close" ? "disabled" : ""
163+
}`}
164+
onClick={() => handleLogout(instance.name)}
165+
disabled={instance.connectionStatus === "close"}
166+
>
167+
DESCONECTAR
168+
</Button>
53169
</div>
54170
</div>
55-
<div className="connection-warning">
56-
<span>Telefone não conectado</span>
57-
<Button className="connect-button">CONECTAR</Button>
58-
</div>
59171
</main>
60172
<main className="instance-cards">
61173
<Card className="instance-card">
@@ -77,6 +189,9 @@ function DashboardInstance() {
77189
<CardContent>0</CardContent>
78190
</Card>
79191
</main>
192+
{showQRCode && (
193+
<QRCodePopup qrCodeData={qrCodeData} onClose={closeQRCodePopup} />
194+
)}
80195
</>
81196
);
82197
}

‎src/pages/instance/DashboardInstance/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
padding: 20px;
8585
border-radius: 8px;
8686
color: #fff;
87+
margin-top: 10px;
8788
}
8889

8990
.connect-button {
@@ -93,4 +94,5 @@
9394
padding: 10px 15px;
9495
border-radius: 4px;
9596
cursor: pointer;
97+
margin-left: 10px;
9698
}

0 commit comments

Comments
 (0)