nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

added network status

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-14 14:56:01 +07:00
parent cb35c70351
commit 4ad5cdbe3d
3 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/eventCollector.tsx
View File

@ -1,3 +1,4 @@
import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
import { RelayContext } from '@components/relaysProvider';
import { hasNewerNoteAtom } from '@stores/note';
@ -10,17 +11,16 @@ import useLocalStorage, { writeStorage } from '@rehooks/local-storage';
import { window } from '@tauri-apps/api';
import { TauriEvent } from '@tauri-apps/api/event';
import { useSetAtom } from 'jotai';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { useCallback, useContext, useEffect, useRef } from 'react';
export default function EventCollector() {
const [pool, relays]: any = useContext(RelayContext);
const [isOnline] = useState(true);
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
const [activeAccount]: any = useLocalStorage('activeAccount', {});
const [follows] = useLocalStorage('activeAccountFollows', []);
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
const now = useRef(new Date());
const unsubscribe = useRef(null);
const unlisten = useRef(null);
@ -132,18 +132,8 @@ export default function EventCollector() {
}, [setHasNewerNote, subscribe, listenWindowClose]);
return (
<div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">
<span className="relative flex h-1.5 w-1.5">
<span
className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
isOnline ? 'bg-green-400' : 'bg-red-400'
}`}
></span>
<span
className={`relative inline-flex h-1.5 w-1.5 rounded-full ${isOnline ? 'bg-green-400' : 'bg-amber-400'}`}
></span>
</span>
<p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
</div>
<>
<NetworkStatusIndicator />
</>
);
}

21
src/components/networkStatusIndicator.tsx Normal file
View File

@ -0,0 +1,21 @@
import { useNavigatorOnLine } from '@utils/network';
export const NetworkStatusIndicator = () => {
const isOnline = useNavigatorOnLine();
return (
<div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">
<div className="relative flex h-1.5 w-1.5">
<span
className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
isOnline ? 'bg-green-400' : 'bg-red-400'
}`}
></span>
<span
className={`relative inline-flex h-1.5 w-1.5 rounded-full ${isOnline ? 'bg-green-400' : 'bg-amber-400'}`}
></span>
</div>
<p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
</div>
);
};

23
src/utils/network.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useEffect, useState } from 'react';
const getOnLineStatus = () =>
typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
export const useNavigatorOnLine = () => {
const [status, setStatus] = useState(getOnLineStatus());
const setOnline = () => setStatus(true);
const setOffline = () => setStatus(false);
useEffect(() => {
window.addEventListener('online', setOnline);
window.addEventListener('offline', setOffline);
return () => {
window.removeEventListener('online', setOnline);
window.removeEventListener('offline', setOffline);
};
}, []);
return status;
};