mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
added network status
This commit is contained in:
parent
cb35c70351
commit
4ad5cdbe3d
@ -1,3 +1,4 @@
|
|||||||
|
import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@components/relaysProvider';
|
||||||
|
|
||||||
import { hasNewerNoteAtom } from '@stores/note';
|
import { hasNewerNoteAtom } from '@stores/note';
|
||||||
@ -10,17 +11,16 @@ import useLocalStorage, { writeStorage } from '@rehooks/local-storage';
|
|||||||
import { window } from '@tauri-apps/api';
|
import { window } from '@tauri-apps/api';
|
||||||
import { TauriEvent } from '@tauri-apps/api/event';
|
import { TauriEvent } from '@tauri-apps/api/event';
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
|
import { useCallback, useContext, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
export default function EventCollector() {
|
export default function EventCollector() {
|
||||||
const [pool, relays]: any = useContext(RelayContext);
|
const [pool, relays]: any = useContext(RelayContext);
|
||||||
|
|
||||||
const [isOnline] = useState(true);
|
|
||||||
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
|
|
||||||
|
|
||||||
const [activeAccount]: any = useLocalStorage('activeAccount', {});
|
const [activeAccount]: any = useLocalStorage('activeAccount', {});
|
||||||
const [follows] = useLocalStorage('activeAccountFollows', []);
|
const [follows] = useLocalStorage('activeAccountFollows', []);
|
||||||
|
|
||||||
|
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
|
||||||
|
|
||||||
const now = useRef(new Date());
|
const now = useRef(new Date());
|
||||||
const unsubscribe = useRef(null);
|
const unsubscribe = useRef(null);
|
||||||
const unlisten = useRef(null);
|
const unlisten = useRef(null);
|
||||||
@ -132,18 +132,8 @@ export default function EventCollector() {
|
|||||||
}, [setHasNewerNote, subscribe, listenWindowClose]);
|
}, [setHasNewerNote, subscribe, listenWindowClose]);
|
||||||
|
|
||||||
return (
|
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">
|
<NetworkStatusIndicator />
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
21
src/components/networkStatusIndicator.tsx
Normal file
21
src/components/networkStatusIndicator.tsx
Normal 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
23
src/utils/network.tsx
Normal 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;
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user