xevion/linkpulse
1
0
Fork 0
mirror of https://github.com/Xevion/linkpulse.git synced 2025-12-10 00:07:40 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update frontend to use new IP listing feature

Browse Source
This commit is contained in:
Xevion
2024-10-24 04:18:16 -05:00
parent 4267d40611
commit 6f26df1939
1 changed files with 43 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/App.tsx
View File

@@ -1,26 +1,32 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
const backendUrl = import.meta.env.PROD ? '/api' : `http://${import.meta.env.VITE_BACKEND_TARGET}/api`; const backendUrl = import.meta.env.PROD
? '/api'
: `http://${import.meta.env.VITE_BACKEND_TARGET}/api`;
const Code = (props: JSX.IntrinsicElements['code']) => ( const Code = (props: JSX.IntrinsicElements['code']) => (
<code <code
className="border-1 mx-1 2py-1 rounded border border-pink-500 bg-neutral-100 px-1 font-mono font-light text-pink-500 dark:border-pink-400 dark:bg-neutral-700 dark:text-pink-400" className="border-1 2py-1 mx-1 rounded border border-pink-500 bg-neutral-100 px-1 font-mono font-light text-pink-500 dark:border-pink-400 dark:bg-neutral-700 dark:text-pink-400"
{...props} {...props}
/> />
); );
type SeenIP = {
last_seen: string;
ip: string;
count: number;
};
export default function App() { export default function App() {
const [time, setTime] = useState<string | null>(null); const [seenIps, setSeenIps] = useState<SeenIP[]>([]);
const [clientIp, setClientIp] = useState<string | null>(null);
const refreshData = async () => { const refreshData = async () => {
try { try {
const response = await fetch(`${backendUrl}/test`); const response = await fetch(`${backendUrl}/ips`);
const data = await response.json(); const data = await response.json();
const { time, ip } = data;
setTime(time); setSeenIps(data.ips);
setClientIp(ip); console.log('Data fetched:', data);
} catch (error) { } catch (error) {
console.error('Error fetching data:', error); console.error('Error fetching data:', error);
} }
@@ -30,24 +36,40 @@ export default function App() {
useEffect(() => { useEffect(() => {
refreshData(); refreshData();
const interval = setInterval(() => { const interval = setInterval(
refreshData(); () => {
}, (import.meta.env.DEV ? 1 : 30) * 1000); refreshData();
},
(import.meta.env.DEV ? 3 : 30) * 1000,
);
return () => clearInterval(interval); return () => clearInterval(interval);
}, []); }, []);
return ( return (
<div className="min-w-full min-h-full"> <div className="min-h-full min-w-full">
<div className="mx-auto max-w-md my-8 mt-10 w-8/12 rounded border border-gray-200 p-4 shadow-md dark:border-neutral-600 dark:bg-neutral-800 dark:shadow-none"> <div className="mx-auto my-8 mt-10 w-8/12 max-w-md rounded border border-gray-200 p-4 shadow-md dark:border-neutral-600 dark:bg-neutral-800 dark:shadow-none">
<h1 className="mb-4 text-4xl">LinkPulse</h1> <h1 className="mb-4 text-3xl">LinkPulse</h1>
<p className="mx-4 my-2">
The current time is: <Code>{time || 'N/A'}</Code> <div className="relative overflow-x-auto">
</p> <table className="w-full text-left text-sm text-gray-500 rtl:text-right dark:text-gray-300">
<p className="mx-4 my-2"> <tbody>
Your IP address is: <Code>{clientIp || 'N/A'}</Code> {seenIps.map((ip) => (
</p> <tr key={ip.ip} className="border-b last:border-0 bg-white dark:border-neutral-700 dark:bg-neutral-800">
</div> <td className="py-4">
<Code>{ip.ip}</Code>
</td>
<td className="py-4">
{ip.count} time{ip.count > 1 ? 's' : ''}
</td>
<td className="py-4">{ip.last_seen}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div> </div>
); );
} }