blob: ccbfd9977fa23a94f8bbb67f66da3a7c95f9b893 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import styles from '../styles/Dashboard.module.css';
import { useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
function Dashboard() {
document.title = 'LinkLogger | Dashboard'
interface Log {
id: number;
link: string;
timestamp: string;
ip: string;
location: string;
browser: string;
os: string;
userAgent: string;
isp: string;
}
interface Link {
link: string;
owner: number;
redirect_link: string;
expire_date: string;
}
const [links, setLinks] = useState<Link[]>([]);
const [logs, setLogs] = useState<Log[]>([]);
const [visibleLog, setVisibleLog] = useState<string | null>(null);
const navigate = useNavigate();
// Fetch links from API
useEffect(() => {
Axios.get('/api/links').then((res) => {
if (res.status === 200) {
setLinks(res.data);
} else {
navigate('/login');
}
}).catch(() => {
navigate('/login');
});
}, []);
// Fetch logs from API
useEffect(() => {
Axios.get('/api/logs').then((res) => {
if (res.status === 200) {
setLogs(res.data);
} else {
navigate('/login');
}
}).catch(() => {
navigate('/login');
});
}, []);
const toggleLogRow = (link: string) => {
setVisibleLog(visibleLog === link ? null : link);
};
return (
<table id={styles.mainTable}>
<thead>
<tr style={{ border: '2px solid #ccc' }}>
<th>Link</th>
<th>Visits</th>
<th>Redirect</th>
<th>Expire Date</th>
</tr>
</thead>
<tbody>
{/* For every link and its logs */}
{links.map((link) => (
<React.Fragment key={link.link}>
<tr className={styles.linkTableRow}>
<td>
<button onClick={() => toggleLogRow(link.link)} className={styles.linkButton}>{link.link}</button>
</td>
<td>{logs.filter((log) => log.link === link.link).length || 0}</td>
<td>{link.redirect_link}</td>
<td>{link.expire_date}</td>
</tr>
{/* Conditionally render logs for this link */}
{visibleLog === link.link && (
<tr className={styles.logTableRow}>
<td colSpan={6}>
<table>
<thead>
<tr>
<th>ID</th>
<th>Timestamp</th>
<th>IP</th>
<th>Location</th>
<th colSpan={2}>ISP</th>
</tr>
</thead>
<tbody>
{/* Render logs only if visibleLog matches the link */}
{logs
.filter((log) => log.link === link.link)
.map((log, index, filteredLogs) => (
<tr key={log.id}>
<td>{filteredLogs.length - index}</td>
<td>{log.timestamp}</td>
<td>{log.ip}</td>
<td>{log.location}</td>
<td>{log.isp}</td>
<td><FontAwesomeIcon icon={faTrash} className={styles.trashBin}/></td>
</tr>
))}
</tbody>
</table>
</td>
</tr>
)}
</React.Fragment>
))}
</tbody>
</table>
)
}
export default Dashboard;
|
