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

major overhaul (not finished)

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-22 09:22:34 +07:00
parent 3c3ee2fc88
commit 49b7ebf32b
17 changed files with 150 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/contexts/database.tsx
View File

@@ -48,17 +48,25 @@ export default function DatabaseProvider({ children }: { children: React.ReactNo
return;
}, []);
const clearCacheNote = useCallback(async () => {
const result: any = await db.select('SELECT COUNT(*) AS "total" FROM cache_notes');
if (result[0].total >= 1000) {
await db.execute('DELETE FROM cache_notes');
}
}, []);
useEffect(() => {
getRelays().catch(console.error);
getAccount()
.then((res) => {
if (res) {
getFollows(res.id).catch(console.error);
clearCacheNote().catch(console.error);
}
setDone(true);
})
.catch(console.error);
}, [getAccount, getFollows, getRelays]);
}, [getAccount, getFollows, clearCacheNote, getRelays]);
if (!done) {
return <></>;

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

@@ -1,7 +1,7 @@
import { DatabaseContext } from '@components/contexts/database';
import { RelayContext } from '@components/contexts/relay';
import { atomHasNewerNote } from '@stores/note';
import { hasNewerNoteAtom } from '@stores/note';
import { dateToUnix, hoursAgo } from '@utils/getDate';
@@ -16,7 +16,7 @@ export const NoteConnector = memo(function NoteConnector() {
const [follows]: any = useLocalStorage('follows');
const [relays]: any = useLocalStorage('relays');
const setHasNewerNote = useSetAtom(atomHasNewerNote);
const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
const [isOnline, setIsOnline] = useState(navigator.onLine);
const now = useRef(new Date());
@@ -25,7 +25,7 @@ export const NoteConnector = memo(function NoteConnector() {
// 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)]
[event.id, event.pubkey, event.created_at, event.kind, event.content, String(event.tags)]
);
},
[db]

14
src/components/note/content/index.tsx
View File

@@ -9,11 +9,9 @@ import reactStringReplace from 'react-string-replace';
export const Content = memo(function Content({ data }: { data: any }) {
const content = useMemo(() => {
let parsedContent;
let tags;
// get data tags
if (data.tags.length > 1) {
tags = JSON.parse(data.tags);
}
const tags = String(data.tags).replaceAll("'", '"');
const parseTags = JSON.parse(tags);
// remove all image urls
parsedContent = data.content.replace(/(https?:\/\/.*\.(jpg|jpeg|gif|png|webp|mp4|webm)((\?.*)$|$))/gim, '');
// handle urls
@@ -29,10 +27,10 @@ export const Content = memo(function Content({ data }: { data: any }) {
</span>
));
// handle mentions
if (tags.length > 0) {
if (parseTags.length > 0) {
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
if (tags[match][0] === 'p') {
return <UserMention key={match + i} pubkey={tags[match][1]} />;
if (parseTags[match][0] === 'p') {
return <UserMention key={match + i} pubkey={parseTags[match][1]} />;
} else {
// #TODO: handle mention other note
// console.log(tags[match]);
@@ -48,7 +46,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
<UserExtend pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-6">
<div className="flex flex-col">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1">
{content}
</div>

8
src/components/note/counter/likes.tsx
View File

@@ -7,7 +7,7 @@ import LikedIcon from '@assets/icons/liked';
import { useLocalStorage } from '@rehooks/local-storage';
import { getEventHash, signEvent } from 'nostr-tools';
import { memo, useContext, useState } from 'react';
import { memo, useContext, useEffect, useState } from 'react';
export const LikesCounter = memo(function LikesCounter({
count,
@@ -24,7 +24,7 @@ export const LikesCounter = memo(function LikesCounter({
const [currentUser]: any = useLocalStorage('current-user');
const [isReact, setIsReact] = useState(false);
const [like, setLike] = useState(count);
const [like, setLike] = useState(0);
const handleLike = (e: any) => {
e.stopPropagation();
@@ -49,6 +49,10 @@ export const LikesCounter = memo(function LikesCounter({
setLike(like + 1);
};
useEffect(() => {
setLike(count);
}, [count]);
return (
<button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
<div className="rounded-md p-1 group-hover:bg-zinc-800">

17
src/components/note/index.tsx
View File

@@ -4,16 +4,17 @@ import { RootNote } from '@components/note/root';
import { memo, useMemo } from 'react';
export const Note = memo(function Note({ event }: { event: any }) {
const tags = JSON.parse(event.tags);
const tags = event.tags.replaceAll("'", '"');
const parseTags = JSON.parse(tags);
const fetchRootEvent = useMemo(() => {
if (tags.length > 0) {
if (tags[0][0] === 'e') {
return <RootNote id={tags[0][1]} />;
if (parseTags.length > 0) {
if (parseTags[0][0] === 'e' || parseTags[0][2] === 'root') {
return <RootNote id={parseTags[0][1]} />;
} else {
tags.every((tag) => {
if (tag[2] === 'root') {
return <RootNote id={tags[1]} />;
parseTags.every((tag) => {
if (tag[0] === 'e' && tag[2] === 'root') {
return <RootNote id={parseTags[1]} />;
}
return <></>;
});
@@ -21,7 +22,7 @@ export const Note = memo(function Note({ event }: { event: any }) {
} else {
return <></>;
}
}, [tags]);
}, [parseTags]);
return (
<div className="relative z-10 flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20">

2
src/components/note/placeholder.tsx
View File

@@ -4,7 +4,7 @@ export const Placeholder = memo(function Placeholder() {
return (
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
<div className="flex items-start gap-2">
<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-md 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">

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

@@ -16,8 +16,8 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
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)]
'INSERT OR IGNORE INTO cache_notes (id, pubkey, created_at, kind, content, tags, is_root) VALUES (?, ?, ?, ?, ?, ?, ?);',
[event.id, event.pubkey, event.created_at, event.kind, event.content, String(event.tags), 1]
);
},
[db]
@@ -76,7 +76,7 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
return (
<div className="relative z-10 flex h-min animate-pulse select-text flex-col pb-5">
<div className="flex items-start gap-2">
<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-md 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">

18
src/components/user/base.tsx
View File

@@ -4,12 +4,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
import { memo, useCallback, useContext, useEffect, useState } from 'react';
export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
const { db }: any = useContext(DatabaseContext);
const [profile, setProfile] = useState({ picture: null, display_name: null, name: null });
const [profile, setProfile] = useState(null);
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
@@ -38,22 +37,13 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
return (
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
{profile.picture ? (
{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 flex-col items-start">
<span className="font-medium leading-tight text-zinc-200">
{profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
</span>
<span className="text-sm leading-tight text-zinc-400">{profile.name}</span>
<span className="font-medium leading-tight text-zinc-200">{profile?.display_name || profile?.name}</span>
<span className="text-sm leading-tight text-zinc-400">{truncate(pubkey, 16, ' .... ')}</span>
</div>
</div>
);

14
src/components/user/extend.tsx
View File

@@ -1,8 +1,6 @@
import { DatabaseContext } from '@components/contexts/database';
import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
@@ -14,7 +12,7 @@ dayjs.extend(relativeTime);
export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: string; time: any }) {
const { db }: any = useContext(DatabaseContext);
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
const [profile, setProfile] = useState(null);
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
@@ -31,10 +29,10 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
const insertCacheProfile = useCallback(
async (event) => {
// insert to database
await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
// update state
setProfile(JSON.parse(event.content));
// insert to database
await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
},
[db, pubkey]
);
@@ -56,7 +54,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
return (
<div className="flex items-start gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
{profile.picture ? (
{profile?.picture ? (
<ImageWithFallback
src={profile.picture}
alt={pubkey}
@@ -76,9 +74,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
<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="font-bold leading-tight">{profile?.name}</span>
<span className="leading-tight text-zinc-500">·</span>
<span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
</div>

2
src/components/user/mention.tsx
View File

@@ -46,5 +46,5 @@ export const UserMention = memo(function UserMention({ pubkey }: { pubkey: strin
.catch(console.error);
}, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
return <span className="text-fuchsia-500">@{profile ? profile.name : truncate(pubkey, 16, ' .... ')}</span>;
return <span className="text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
});

12
src/components/user/mini.tsx
View File

@@ -9,7 +9,7 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
const { db }: any = useContext(DatabaseContext);
const [profile, setProfile] = useState({ picture: null, name: null });
const [profile, setProfile] = useState(null);
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
@@ -26,10 +26,10 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
const insertCacheProfile = useCallback(
async (event) => {
// insert to database
await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
// update state
setProfile(JSON.parse(event.content));
// insert to database
await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
},
[db, pubkey]
);
@@ -51,7 +51,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
return (
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
{profile.picture ? (
{profile?.picture ? (
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
) : (
<Avatar
@@ -64,9 +64,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
)}
</div>
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
<p className="truncate leading-tight text-zinc-300">
{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
</p>
<p className="truncate leading-tight text-zinc-300">{profile?.name || truncate(pubkey, 16, ' .... ')}</p>
</div>
</div>
);