reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added network status & updated root note component

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-18 09:27:36 +07:00
parent 8b2c6e67f5
commit eabb16dde1
4 changed files with 95 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/note/connector.tsx
View File

@@ -7,7 +7,7 @@ import { dateToUnix, hoursAgo } from '@utils/getDate';
import { useLocalStorage } from '@rehooks/local-storage';
import { useSetAtom } from 'jotai';
import { memo, useCallback, useContext, useMemo, useRef } from 'react';
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
export const NoteConnector = memo(function NoteConnector() {
const { db }: any = useContext(DatabaseContext);
@@ -17,6 +17,7 @@ export const NoteConnector = memo(function NoteConnector() {
const [relays]: any = useLocalStorage('relays');
const setHasNewerNote = useSetAtom(atomHasNewerNote);
const [isOnline, setIsOnline] = useState(navigator.onLine);
const now = useRef(new Date());
const insertDB = useCallback(
@@ -51,14 +52,34 @@ export const NoteConnector = memo(function NoteConnector() {
);
}, [relayPool, follows, relays, insertDB, setHasNewerNote]);
useEffect(() => {
const handleStatusChange = () => {
setIsOnline(navigator.onLine);
};
window.addEventListener('online', handleStatusChange);
window.addEventListener('offline', handleStatusChange);
return () => {
window.removeEventListener('online', handleStatusChange);
window.removeEventListener('offline', handleStatusChange);
};
}, [isOnline]);
return (
<>
<div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 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 bg-green-400 opacity-75"></span>
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
<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">Relays</p>
<p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
</div>
</>
);