mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
updated following page and note connector
This commit is contained in:
parent
123d22d5cf
commit
9d96e3b5fd
@ -12,6 +12,7 @@
|
|||||||
"^@layouts/(.*)$",
|
"^@layouts/(.*)$",
|
||||||
"^@pages/(.*)$",
|
"^@pages/(.*)$",
|
||||||
"^@components/(.*)$",
|
"^@components/(.*)$",
|
||||||
|
"^@stores/(.*)$",
|
||||||
"^@utils/(.*)$",
|
"^@utils/(.*)$",
|
||||||
"<THIRD_PARTY_MODULES>",
|
"<THIRD_PARTY_MODULES>",
|
||||||
"^[./]"
|
"^[./]"
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
"bitcoin-address-validation": "^2.2.1",
|
"bitcoin-address-validation": "^2.2.1",
|
||||||
"boring-avatars": "^1.7.0",
|
"boring-avatars": "^1.7.0",
|
||||||
"framer-motion": "^9.1.7",
|
"framer-motion": "^9.1.7",
|
||||||
|
"jotai": "^2.0.3",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"next": "^13.2.4",
|
"next": "^13.2.4",
|
||||||
"next-remove-imports": "^1.0.10",
|
"next-remove-imports": "^1.0.10",
|
||||||
|
@ -29,6 +29,7 @@ specifiers:
|
|||||||
eslint-plugin-react-hooks: ^4.6.0
|
eslint-plugin-react-hooks: ^4.6.0
|
||||||
framer-motion: ^9.1.7
|
framer-motion: ^9.1.7
|
||||||
husky: ^8.0.3
|
husky: ^8.0.3
|
||||||
|
jotai: ^2.0.3
|
||||||
lint-staged: ^13.2.0
|
lint-staged: ^13.2.0
|
||||||
moment: ^2.29.4
|
moment: ^2.29.4
|
||||||
next: ^13.2.4
|
next: ^13.2.4
|
||||||
@ -65,6 +66,7 @@ dependencies:
|
|||||||
bitcoin-address-validation: 2.2.1
|
bitcoin-address-validation: 2.2.1
|
||||||
boring-avatars: 1.7.0
|
boring-avatars: 1.7.0
|
||||||
framer-motion: 9.1.7_biqbaboplfbrettd7655fr4n2y
|
framer-motion: 9.1.7_biqbaboplfbrettd7655fr4n2y
|
||||||
|
jotai: 2.0.3_react@18.2.0
|
||||||
moment: 2.29.4
|
moment: 2.29.4
|
||||||
next: 13.2.4_biqbaboplfbrettd7655fr4n2y
|
next: 13.2.4_biqbaboplfbrettd7655fr4n2y
|
||||||
next-remove-imports: 1.0.10
|
next-remove-imports: 1.0.10
|
||||||
@ -1160,9 +1162,9 @@ packages:
|
|||||||
- encoding
|
- encoding
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@supabase/gotrue-js/2.13.0:
|
/@supabase/gotrue-js/2.14.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-NFBHuHNUn94mP/zOQzsp1k2PtwV55Vhf6ZbTzmMpiUvIRlXhVteZcdfdoAQDIBrdxOdL7F54NFp1gIupPZka6g== }
|
{ integrity: sha512-FI6q4n4iZ2zrEt1BnBYYe8HQ1k9t5CpBcDQxVXa8PeMwygXpzR0AcdfAsZ5Yba42C8YsBA132ti01f+RINS3UQ== }
|
||||||
dependencies:
|
dependencies:
|
||||||
cross-fetch: 3.1.5
|
cross-fetch: 3.1.5
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
@ -1178,9 +1180,9 @@ packages:
|
|||||||
- encoding
|
- encoding
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@supabase/realtime-js/2.6.0:
|
/@supabase/realtime-js/2.7.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-tOVulMobhpxyDuu8VIImpL8FXmZOKsGNOSyS5ihJdj2xYmPPvYG+D2J51Ewfl+MFF65tweiB6p9N9bNIW1cDNA== }
|
{ integrity: sha512-wg35ofiCpIemycmPZvvZk3jM9c9z8VvnPUBbSP9ZZN2vSOEJ9C7DZuLiiZMXsyNUzjVgIn62A1tN99T5+9O8Aw== }
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/phoenix': 1.5.5
|
'@types/phoenix': 1.5.5
|
||||||
websocket: 1.0.34
|
websocket: 1.0.34
|
||||||
@ -1202,9 +1204,9 @@ packages:
|
|||||||
{ integrity: sha512-/vkpPxGDyLfTASWnVHL8vdgQxn9SX/Cs+BotTxFhLSIeGFSazC6rpQSMKu6RqzO7gjBD1KqTv0h3auWfClWs+Q== }
|
{ integrity: sha512-/vkpPxGDyLfTASWnVHL8vdgQxn9SX/Cs+BotTxFhLSIeGFSazC6rpQSMKu6RqzO7gjBD1KqTv0h3auWfClWs+Q== }
|
||||||
dependencies:
|
dependencies:
|
||||||
'@supabase/functions-js': 2.1.0
|
'@supabase/functions-js': 2.1.0
|
||||||
'@supabase/gotrue-js': 2.13.0
|
'@supabase/gotrue-js': 2.14.0
|
||||||
'@supabase/postgrest-js': 1.4.1
|
'@supabase/postgrest-js': 1.4.1
|
||||||
'@supabase/realtime-js': 2.6.0
|
'@supabase/realtime-js': 2.7.0
|
||||||
'@supabase/storage-js': 2.3.1
|
'@supabase/storage-js': 2.3.1
|
||||||
cross-fetch: 3.1.5
|
cross-fetch: 3.1.5
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
@ -2004,7 +2006,7 @@ packages:
|
|||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
caniuse-lite: 1.0.30001466
|
caniuse-lite: 1.0.30001466
|
||||||
electron-to-chromium: 1.4.330
|
electron-to-chromium: 1.4.331
|
||||||
node-releases: 2.0.10
|
node-releases: 2.0.10
|
||||||
update-browserslist-db: 1.0.10_browserslist@4.21.5
|
update-browserslist-db: 1.0.10_browserslist@4.21.5
|
||||||
|
|
||||||
@ -2414,9 +2416,9 @@ packages:
|
|||||||
{ integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== }
|
{ integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/electron-to-chromium/1.4.330:
|
/electron-to-chromium/1.4.331:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-PqyefhybrVdjAJ45HaPLtuVaehiSw7C3ya0aad+rvmV53IVyXmYRk3pwIOb2TxTDTnmgQdn46NjMMaysx79/6Q== }
|
{ integrity: sha512-tdtr9y9oJl8VDiS+HeB6e/JDJqdDGjIk3yRfEMHm5rDnWQ/D5SbafybAayInxolbfbH6pouV5g7ZUAwE/WVtHw== }
|
||||||
|
|
||||||
/emoji-regex/8.0.0:
|
/emoji-regex/8.0.0:
|
||||||
resolution:
|
resolution:
|
||||||
@ -3755,6 +3757,19 @@ packages:
|
|||||||
{ integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw== }
|
{ integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw== }
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/jotai/2.0.3_react@18.2.0:
|
||||||
|
resolution:
|
||||||
|
{ integrity: sha512-MMjhSPAL3RoeZD9WbObufRT2quThEAEknHHridf2ma8Ml7ZVQmUiHk0ssdbR3F0h3kcwhYqSGJ59OjhPge7RRg== }
|
||||||
|
engines: { node: '>=12.20.0' }
|
||||||
|
peerDependencies:
|
||||||
|
react: '>=17.0.0'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
react:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
react: 18.2.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/js-sdsl/4.3.0:
|
/js-sdsl/4.3.0:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ== }
|
{ integrity: sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ== }
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import { NoteConnector } from '@components/note/connector';
|
||||||
|
|
||||||
import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
|
import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
|
|
||||||
@ -15,7 +17,7 @@ export default function AppHeader() {
|
|||||||
return (
|
return (
|
||||||
<div data-tauri-drag-region className="flex h-full w-full items-center">
|
<div data-tauri-drag-region className="flex h-full w-full items-center">
|
||||||
<div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
|
<div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
|
||||||
<div className="px-2">
|
<div className="flex w-full flex-1 items-center justify-between px-2">
|
||||||
<div className="flex h-full gap-2">
|
<div className="flex h-full gap-2">
|
||||||
<button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
|
<button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
|
||||||
<ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
|
<ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
|
||||||
@ -24,6 +26,9 @@ export default function AppHeader() {
|
|||||||
<ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
|
<ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<NoteConnector />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,83 +0,0 @@
|
|||||||
import { DatabaseContext } from '@components/contexts/database';
|
|
||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
|
||||||
|
|
||||||
import { truncate } from '@utils/truncate';
|
|
||||||
|
|
||||||
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
|
||||||
import Avatar from 'boring-avatars';
|
|
||||||
import { memo, useCallback, useContext, useEffect, useState } from 'react';
|
|
||||||
import Moment from 'react-moment';
|
|
||||||
|
|
||||||
export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) {
|
|
||||||
const { db }: any = useContext(DatabaseContext);
|
|
||||||
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
|
|
||||||
|
|
||||||
const insertCacheProfile = useCallback(
|
|
||||||
async (event) => {
|
|
||||||
const metadata: any = JSON.parse(event.content);
|
|
||||||
|
|
||||||
await db.execute(
|
|
||||||
`INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`
|
|
||||||
);
|
|
||||||
setProfile(metadata);
|
|
||||||
},
|
|
||||||
[db, pubkey]
|
|
||||||
);
|
|
||||||
|
|
||||||
const getCacheProfile = useCallback(async () => {
|
|
||||||
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
|
|
||||||
return result;
|
|
||||||
}, [db, pubkey]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getCacheProfile()
|
|
||||||
.then((res) => {
|
|
||||||
if (res[0] !== undefined) {
|
|
||||||
setProfile(JSON.parse(res[0].metadata));
|
|
||||||
} else {
|
|
||||||
fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
|
|
||||||
res.json().then((res) => {
|
|
||||||
// update state
|
|
||||||
setProfile(JSON.parse(res.content));
|
|
||||||
// save profile to database
|
|
||||||
insertCacheProfile(res);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(console.error);
|
|
||||||
}, [getCacheProfile, insertCacheProfile, pubkey]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-start gap-4">
|
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
|
||||||
{profile.picture ? (
|
|
||||||
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
|
|
||||||
) : (
|
|
||||||
<Avatar
|
|
||||||
size={44}
|
|
||||||
name={pubkey}
|
|
||||||
variant="beam"
|
|
||||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
|
||||||
<div className="flex w-full justify-between">
|
|
||||||
<div className="flex items-baseline gap-2 text-sm">
|
|
||||||
<span className="font-bold leading-tight">
|
|
||||||
{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
|
|
||||||
</span>
|
|
||||||
<span className="leading-tight text-zinc-500">·</span>
|
|
||||||
<Moment fromNow unix className="text-zinc-500">
|
|
||||||
{time}
|
|
||||||
</Moment>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
@ -1,40 +1,28 @@
|
|||||||
import { DatabaseContext } from '@components/contexts/database';
|
import { DatabaseContext } from '@components/contexts/database';
|
||||||
import { RelayContext } from '@components/contexts/relay';
|
import { RelayContext } from '@components/contexts/relay';
|
||||||
|
|
||||||
|
import { atomHasNewerNote } from '@stores/note';
|
||||||
|
|
||||||
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
||||||
|
|
||||||
import { ReloadIcon } from '@radix-ui/react-icons';
|
import { SliderIcon } from '@radix-ui/react-icons';
|
||||||
import { useLocalStorage } from '@rehooks/local-storage';
|
import { useLocalStorage } from '@rehooks/local-storage';
|
||||||
import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
import { useSetAtom } from 'jotai';
|
||||||
|
import { memo, useCallback, useContext, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
export const NoteConnector = memo(function NoteConnector({
|
export const NoteConnector = memo(function NoteConnector() {
|
||||||
setParentReload,
|
|
||||||
setHasNewNote,
|
|
||||||
currentDate,
|
|
||||||
}: {
|
|
||||||
setParentReload: any;
|
|
||||||
setHasNewNote: any;
|
|
||||||
currentDate: any;
|
|
||||||
}) {
|
|
||||||
const { db }: any = useContext(DatabaseContext);
|
const { db }: any = useContext(DatabaseContext);
|
||||||
const relayPool: any = useContext(RelayContext);
|
const relayPool: any = useContext(RelayContext);
|
||||||
|
|
||||||
const [follows]: any = useLocalStorage('follows');
|
const [follows]: any = useLocalStorage('follows');
|
||||||
const [relays]: any = useLocalStorage('relays');
|
const [relays]: any = useLocalStorage('relays');
|
||||||
|
|
||||||
const [reload, setReload] = useState(false);
|
const setHasNewerNote = useSetAtom(atomHasNewerNote);
|
||||||
const timeout = useRef(null);
|
const now = useRef(new Date());
|
||||||
|
|
||||||
const reloadNewsfeed = () => {
|
|
||||||
setParentReload(true);
|
|
||||||
setReload(true);
|
|
||||||
timeout.current = setTimeout(() => {
|
|
||||||
setReload(false);
|
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const insertDB = useCallback(
|
const insertDB = useCallback(
|
||||||
async (event: any) => {
|
async (event: any) => {
|
||||||
|
// insert to local database
|
||||||
await db.execute(
|
await db.execute(
|
||||||
`INSERT OR IGNORE INTO
|
`INSERT OR IGNORE INTO
|
||||||
cache_notes
|
cache_notes
|
||||||
@ -45,7 +33,7 @@ export const NoteConnector = memo(function NoteConnector({
|
|||||||
"${event.created_at}",
|
"${event.created_at}",
|
||||||
"${event.kind}",
|
"${event.kind}",
|
||||||
'${JSON.stringify(event.tags)}',
|
'${JSON.stringify(event.tags)}',
|
||||||
"${event.content}"
|
'${JSON.stringify(event.content)}'
|
||||||
);`
|
);`
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@ -58,54 +46,34 @@ export const NoteConnector = memo(function NoteConnector({
|
|||||||
{
|
{
|
||||||
kinds: [1],
|
kinds: [1],
|
||||||
authors: follows,
|
authors: follows,
|
||||||
since: dateToUnix(hoursAgo(12, currentDate)),
|
since: dateToUnix(hoursAgo(12, now.current)),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
relays,
|
relays,
|
||||||
(event: any) => {
|
(event: any) => {
|
||||||
// show trigger update newer event
|
|
||||||
if (event.created_at > dateToUnix(currentDate)) {
|
|
||||||
setHasNewNote(true);
|
|
||||||
}
|
|
||||||
// insert event to local database
|
// insert event to local database
|
||||||
insertDB(event).catch(console.error);
|
insertDB(event).catch(console.error);
|
||||||
},
|
// ask user load newer note
|
||||||
undefined,
|
if (event.created_at > dateToUnix(now.current)) {
|
||||||
(events: any, relayURL: any) => {
|
setHasNewerNote(true);
|
||||||
console.log(events, relayURL);
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}, [relayPool, follows, currentDate, relays, insertDB, setHasNewNote]);
|
}, [relayPool, follows, relays, insertDB, setHasNewerNote]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchEvent();
|
fetchEvent();
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearTimeout(timeout.current);
|
|
||||||
};
|
|
||||||
}, [fetchEvent]);
|
}, [fetchEvent]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex h-12 items-center justify-between border-b border-zinc-800 px-6 shadow-input">
|
<>
|
||||||
<div>
|
<div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 hover:bg-zinc-900">
|
||||||
<h3 className="text-sm font-semibold text-zinc-500"># following</h3>
|
<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>
|
||||||
|
<p className="text-xs font-medium text-zinc-500">Relays</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
</>
|
||||||
<button
|
|
||||||
onClick={() => reloadNewsfeed()}
|
|
||||||
className={`${reload ? 'animate-spin' : ''} rounded-full p-1 hover:bg-zinc-800`}
|
|
||||||
>
|
|
||||||
<ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
|
|
||||||
</button>
|
|
||||||
<div className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-800 px-2.5 py-1">
|
|
||||||
{/* #TODO: get user network status */}
|
|
||||||
<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>
|
|
||||||
<p className="text-xs font-medium text-zinc-500">Online</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -14,7 +14,7 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
|
|||||||
export const Content = memo(function Content({ data }: { data: any }) {
|
export const Content = memo(function Content({ data }: { data: any }) {
|
||||||
const [preview, setPreview] = useState({});
|
const [preview, setPreview] = useState({});
|
||||||
|
|
||||||
const content = useRef(data.content);
|
const content = useRef(JSON.parse(data.content));
|
||||||
const urls = useMemo(
|
const urls = useMemo(
|
||||||
() =>
|
() =>
|
||||||
content.current.match(
|
content.current.match(
|
||||||
|
@ -2,7 +2,7 @@ import { memo } from 'react';
|
|||||||
|
|
||||||
export const Placeholder = memo(function Placeholder() {
|
export const Placeholder = memo(function Placeholder() {
|
||||||
return (
|
return (
|
||||||
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-6">
|
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-3">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
|
<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 flex-1 items-start justify-between">
|
||||||
|
@ -8,7 +8,7 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
|
|||||||
|
|
||||||
export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
|
export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
|
||||||
const { db }: any = useContext(DatabaseContext);
|
const { db }: any = useContext(DatabaseContext);
|
||||||
const [profile, setProfile] = useState({ picture: null, display_name: null });
|
const [profile, setProfile] = useState({ picture: null, name: null });
|
||||||
|
|
||||||
const insertCacheProfile = useCallback(
|
const insertCacheProfile = useCallback(
|
||||||
async (event) => {
|
async (event) => {
|
||||||
@ -67,7 +67,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
|
|||||||
</div>
|
</div>
|
||||||
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
|
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
|
||||||
<p className="truncate leading-tight text-zinc-300">
|
<p className="truncate leading-tight text-zinc-300">
|
||||||
{profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
|
{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,7 +16,7 @@ export default function Page() {
|
|||||||
if (currentUser) {
|
if (currentUser) {
|
||||||
timer.current = setTimeout(() => {
|
timer.current = setTimeout(() => {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
router.push('/newsfeed/circle');
|
router.push('/newsfeed/following');
|
||||||
}, 1000);
|
}, 1000);
|
||||||
} else {
|
} else {
|
||||||
timer.current = setTimeout(() => {
|
timer.current = setTimeout(() => {
|
||||||
|
@ -2,16 +2,16 @@ import BaseLayout from '@layouts/base';
|
|||||||
import WithSidebarLayout from '@layouts/withSidebar';
|
import WithSidebarLayout from '@layouts/withSidebar';
|
||||||
|
|
||||||
import { DatabaseContext } from '@components/contexts/database';
|
import { DatabaseContext } from '@components/contexts/database';
|
||||||
import { NoteConnector } from '@components/note/connector';
|
|
||||||
import NoteForm from '@components/note/form';
|
import NoteForm from '@components/note/form';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
import { Repost } from '@components/note/repost';
|
import { Repost } from '@components/note/repost';
|
||||||
import { Single } from '@components/note/single';
|
import { Single } from '@components/note/single';
|
||||||
|
|
||||||
|
import { atomHasNewerNote } from '@stores/note';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
|
||||||
import { ArrowUpIcon } from '@radix-ui/react-icons';
|
import { useAtomValue } from 'jotai';
|
||||||
import { writeStorage } from '@rehooks/local-storage';
|
|
||||||
import { useCallback, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
|
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
|
||||||
import { Virtuoso } from 'react-virtuoso';
|
import { Virtuoso } from 'react-virtuoso';
|
||||||
@ -20,8 +20,8 @@ export default function Page() {
|
|||||||
const { db }: any = useContext(DatabaseContext);
|
const { db }: any = useContext(DatabaseContext);
|
||||||
|
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
const [parentReload, setParentReload] = useState(false);
|
const [reload, setReload] = useState(false);
|
||||||
const [hasNewNote, setHasNewNote] = useState(false);
|
const hasNewerNote = useAtomValue(atomHasNewerNote);
|
||||||
|
|
||||||
const now = useRef(new Date());
|
const now = useRef(new Date());
|
||||||
const limit = useRef(30);
|
const limit = useRef(30);
|
||||||
@ -49,7 +49,6 @@ export default function Page() {
|
|||||||
LIMIT ${limit.current}`
|
LIMIT ${limit.current}`
|
||||||
);
|
);
|
||||||
setData((data) => [...result, ...data]);
|
setData((data) => [...result, ...data]);
|
||||||
setHasNewNote(false);
|
|
||||||
}, [db]);
|
}, [db]);
|
||||||
|
|
||||||
const ItemContent = useCallback(
|
const ItemContent = useCallback(
|
||||||
@ -66,22 +65,6 @@ export default function Page() {
|
|||||||
[data]
|
[data]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const getData = async () => {
|
|
||||||
const result = await db.select(
|
|
||||||
`SELECT * FROM cache_notes WHERE created_at <= ${dateToUnix(now.current)} ORDER BY created_at DESC LIMIT ${
|
|
||||||
limit.current
|
|
||||||
}`
|
|
||||||
);
|
|
||||||
if (result) {
|
|
||||||
setData(result);
|
|
||||||
writeStorage('settings', new Date());
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
getData().catch(console.error);
|
|
||||||
}, [db, parentReload]);
|
|
||||||
|
|
||||||
const computeItemKey = useCallback(
|
const computeItemKey = useCallback(
|
||||||
(index: string | number) => {
|
(index: string | number) => {
|
||||||
return data[index].id;
|
return data[index].id;
|
||||||
@ -89,16 +72,40 @@ export default function Page() {
|
|||||||
[data]
|
[data]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const getData = async () => {
|
||||||
|
const result = await db.select(
|
||||||
|
`SELECT * FROM cache_notes WHERE created_at <= ${dateToUnix(now.current)} ORDER BY created_at DESC LIMIT ${
|
||||||
|
limit.current
|
||||||
|
}`
|
||||||
|
);
|
||||||
|
if (result.length > 0) {
|
||||||
|
setData(result);
|
||||||
|
} else {
|
||||||
|
setReload(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (reload === false) {
|
||||||
|
getData().catch(console.error);
|
||||||
|
} else {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
getData().catch(console.error);
|
||||||
|
}, 8000);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [db, reload]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative h-full w-full">
|
<div className="relative h-full w-full">
|
||||||
{hasNewNote && (
|
{hasNewerNote && (
|
||||||
<div className="absolute top-16 left-1/2 z-50 -translate-x-1/2 transform">
|
<div className="absolute top-16 left-1/2 z-50 -translate-x-1/2 transform">
|
||||||
<button
|
<button
|
||||||
onClick={() => loadNewest()}
|
onClick={() => loadNewest()}
|
||||||
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 pl-3 pr-3.5 text-sm shadow-lg active:translate-y-1"
|
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg active:translate-y-1"
|
||||||
>
|
>
|
||||||
<ArrowUpIcon className="h-4 w-4" />
|
<span className="text-white drop-shadow">Load newest</span>
|
||||||
<span className="drop-shadow-md">Load newest</span>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -118,7 +125,7 @@ export default function Page() {
|
|||||||
endReached={loadMore}
|
endReached={loadMore}
|
||||||
overscan={800}
|
overscan={800}
|
||||||
increaseViewportBy={1000}
|
increaseViewportBy={1000}
|
||||||
className="relative h-full w-full"
|
className="scrollbar-hide relative h-full w-full"
|
||||||
style={{
|
style={{
|
||||||
contain: 'strict',
|
contain: 'strict',
|
||||||
}}
|
}}
|
||||||
|
3
src/stores/note.tsx
Normal file
3
src/stores/note.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { atom } from 'jotai';
|
||||||
|
|
||||||
|
export const atomHasNewerNote = atom(false);
|
@ -5,6 +5,7 @@
|
|||||||
"@pages/*": ["src/pages/*"],
|
"@pages/*": ["src/pages/*"],
|
||||||
"@layouts/*": ["src/layouts/*"],
|
"@layouts/*": ["src/layouts/*"],
|
||||||
"@components/*": ["src/components/*"],
|
"@components/*": ["src/components/*"],
|
||||||
|
"@stores/*": ["src/stores/*"],
|
||||||
"@utils/*": ["src/utils/*"],
|
"@utils/*": ["src/utils/*"],
|
||||||
"@assets/*": ["src/assets/*"]
|
"@assets/*": ["src/assets/*"]
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user