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 & 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/columns/account/index.tsx
View File

@ -48,7 +48,7 @@ export default function AccountColumn() {
</Link>
</div>
<div className="flex flex-col gap-0.5 text-center">
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-sm font-black uppercase leading-tight text-transparent">
<span className="animate-moveBg from-fuchsia-300 via-orange-100 to-amber-300 text-sm font-black uppercase leading-tight text-zinc-600 hover:bg-gradient-to-r hover:bg-clip-text hover:text-transparent">
Lume
</span>
<span className="text-xs font-medium text-zinc-700">v{version}</span>

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>
</>
);

5
src/components/note/content/metadata.tsx
View File

@ -37,8 +37,11 @@ export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string
}
},
undefined,
(events: any, relayURL: any) => {
(events, relayURL) => {
console.log(events, relayURL);
},
{
unsubscribeOnEose: true,
}
);
// eslint-disable-next-line react-hooks/exhaustive-deps

69
src/components/note/root.tsx
View File

@ -1,3 +1,4 @@
import { DatabaseContext } from '@components/contexts/database';
import { RelayContext } from '@components/contexts/relay';
import { Content } from '@components/note/content';
@ -5,11 +6,28 @@ import useLocalStorage from '@rehooks/local-storage';
import { memo, useCallback, useContext, useEffect, useState } from 'react';
export const RootNote = memo(function RootNote({ id }: { id: string }) {
const { db }: any = useContext(DatabaseContext);
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [event, setEvent] = useState(null);
const insertDB = useCallback(
async (event: any) => {
// insert to local database
await db.execute(
'INSERT OR IGNORE INTO cache_notes (id, pubkey, created_at, kind, content, tags) VALUES (?, ?, ?, ?, ?, ?);',
[event.id, event.pubkey, event.created_at, event.kind, event.content, JSON.stringify(event.tags)]
);
},
[db]
);
const getData = useCallback(async () => {
const result = await db.select(`SELECT * FROM cache_notes WHERE id = "${id}"`);
return result[0];
}, []);
const fetchEvent = useCallback(() => {
relayPool.subscribe(
[
@ -20,14 +38,32 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
],
relays,
(event: any) => {
// update state
setEvent(event);
// insert to database
insertDB(event);
},
undefined,
(events, relayURL) => {
console.log(events, relayURL);
},
{
unsubscribeOnEose: true,
}
);
}, [id, relayPool, relays]);
}, [id, insertDB, relayPool, relays]);
useEffect(() => {
fetchEvent();
}, [fetchEvent]);
getData()
.then((res) => {
if (res) {
setEvent(res);
} else {
fetchEvent();
}
})
.catch(console.error);
}, [fetchEvent, getData]);
if (event) {
return (
@ -37,6 +73,31 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
</div>
);
} else {
return <>Loading...</>;
return (
<div className="relative z-10 flex h-min animate-pulse select-text flex-col">
<div className="flex items-start gap-4">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2 text-sm">
<div className="h-4 w-16 rounded bg-zinc-700" />
<span className="text-zinc-500">·</span>
<div className="h-4 w-12 rounded bg-zinc-700" />
</div>
<div className="h-3 w-3 rounded-full bg-zinc-700" />
</div>
</div>
</div>
<div className="-mt-4 pl-[60px]">
<div className="flex flex-col gap-6">
<div className="h-16 w-full rounded bg-zinc-700" />
<div className="flex items-center gap-8">
<div className="h-4 w-12 rounded bg-zinc-700" />
<div className="h-4 w-12 rounded bg-zinc-700" />
</div>
</div>
</div>
</div>
);
}
});