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

removed nostr-react

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-02 14:00:18 +07:00
parent 6d1b40d6dc
commit 862082c857
11 changed files with 123 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/navigatorBar/createPost.tsx
View File

@@ -1,18 +1,23 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { RelayContext } from '@components/contexts/relay';
import { dateToUnix } from '@utils/getDate';
import * as Dialog from '@radix-ui/react-dialog';
import { useLocalStorage } from '@rehooks/local-storage';
import * as commands from '@uiw/react-md-editor/lib/commands';
import dynamic from 'next/dynamic';
import { dateToUnix, useNostr } from 'nostr-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { useState } from 'react';
import { useContext, useState } from 'react';
const MDEditor = dynamic(() => import('@uiw/react-md-editor').then((mod) => mod.default), {
ssr: false,
});
export default function CreatePost() {
const { publish } = useNostr();
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [value, setValue] = useState('');
const [currentUser]: any = useLocalStorage('current-user');
@@ -40,11 +45,10 @@ export default function CreatePost() {
pubkey: pubkey,
tags: [],
};
event.id = getEventHash(event);
event.sig = signEvent(event, privkey);
publish(event);
relayPool.publish(event, relays);
setValue('');
}
},

48
src/components/note/atoms/reaction.tsx
View File

@@ -1,12 +1,17 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { RelayContext } from '@components/contexts/relay';
import { dateToUnix } from '@utils/getDate';
import { HeartFilledIcon, HeartIcon } from '@radix-ui/react-icons';
import { useLocalStorage } from '@rehooks/local-storage';
import { dateToUnix, useNostr, useNostrEvents } from 'nostr-react';
import { getEventHash, signEvent } from 'nostr-tools';
import { useState } from 'react';
import { useContext, useState } from 'react';
export default function Reaction({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
const { publish } = useNostr();
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [reaction, setReaction] = useState(0);
const [isReact, setIsReact] = useState(false);
@@ -14,25 +19,26 @@ export default function Reaction({ eventID, eventPubkey }: { eventID: string; ev
const pubkey = currentUser.pubkey;
const privkey = currentUser.privkey;
const { onEvent } = useNostrEvents({
filter: {
'#e': [eventID],
since: 0,
kinds: [7],
limit: 20,
},
});
onEvent((rawMetadata) => {
try {
const content = rawMetadata.content;
if (content === '🤙' || content === '+') {
setReaction(reaction + 1);
relayPool.subscribe(
[
{
'#e': [eventID],
since: 0,
kinds: [7],
limit: 10,
},
],
relays,
(event: any) => {
if (event.content === '🤙' || event.content === '+') {
//setReaction(reaction + 1);
}
} catch (err) {
console.error(err, rawMetadata);
},
undefined,
(events: any, relayURL: any) => {
console.log(events, relayURL);
}
});
);
const handleReaction = (e: any) => {
e.stopPropagation();
@@ -50,7 +56,7 @@ export default function Reaction({ eventID, eventPubkey }: { eventID: string; ev
event.id = getEventHash(event);
event.sig = signEvent(event, privkey);
publish(event);
relayPool.publish(event, relays);
setIsReact(true);
setReaction(reaction + 1);

15
src/components/note/atoms/reply.tsx
View File

@@ -1,22 +1,17 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ChatBubbleIcon } from '@radix-ui/react-icons';
import { useNostrEvents } from 'nostr-react';
import { useState } from 'react';
export default function Reply({ eventID }: { eventID: string }) {
const { events } = useNostrEvents({
filter: {
'#e': [eventID],
since: 0,
kinds: [1],
limit: 10,
},
});
console.log(eventID);
const [count] = useState(0);
return (
<button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
<ChatBubbleIcon className="h-4 w-4 group-hover:text-orange-400" />
</div>
<span>{events.length || 0}</span>
<span>{count}</span>
</button>
);
}

35
src/components/note/atoms/user.tsx
View File

@@ -1,42 +1,18 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { DatabaseContext } from '@components/contexts/database';
import { RelayContext } from '@components/contexts/relay';
import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
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 relayPool: any = useContext(RelayContext);
const [relays] = useLocalStorage('relays');
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
relayPool.subscribe(
[
{
authors: [pubkey],
kinds: [0],
},
],
relays,
(event: any) => {
if (profile.picture === null || profile.name === null) {
insertCacheProfile(event);
}
},
undefined,
(events: any, relayURL: any) => {
console.log(events, relayURL);
}
);
const insertCacheProfile = useCallback(
async (event) => {
const metadata: any = JSON.parse(event.content);
@@ -57,10 +33,19 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
.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]);
}, [getCacheProfile, insertCacheProfile, pubkey]);
return (
<div className="relative flex items-start gap-4">

29
src/components/note/atoms/userRepost.tsx
View File

@@ -1,30 +1,19 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { truncate } from '@utils/truncate';
import { useNostrEvents } from 'nostr-react';
import { memo, useState } from 'react';
import { memo, useEffect, useState } from 'react';
export const UserRepost = memo(function UserRepost({ pubkey }: { pubkey: string }) {
const [profile, setProfile] = useState({ picture: null, name: null });
const { onEvent } = useNostrEvents({
filter: {
authors: [pubkey],
kinds: [0],
},
});
// #TODO: save response to DB
onEvent((rawMetadata) => {
try {
const metadata: any = JSON.parse(rawMetadata.content);
if (metadata) {
setProfile(metadata);
}
} catch (err) {
console.error(err, rawMetadata);
}
});
useEffect(() => {
fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
res.json().then((res) => {
// update state
setProfile(JSON.parse(res.content));
})
);
}, [pubkey]);
return (
<div className="text-zinc-400">

41
src/components/note/atoms/userWithUsername.tsx
View File

@@ -5,49 +5,18 @@ import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import Avatar from 'boring-avatars';
import { useNostrEvents } from 'nostr-react';
import { memo, useEffect, useState } from 'react';
import Database from 'tauri-plugin-sql-api';
const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pubkey: string }) {
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
const { onEvent } = useNostrEvents({
filter: {
authors: [pubkey],
kinds: [0],
},
});
onEvent(async (rawMetadata) => {
try {
const metadata: any = JSON.parse(rawMetadata.content);
if (profile.picture === null || profile.name === null) {
setProfile(metadata);
await db.execute(`INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`);
} else {
return;
}
} catch (err) {
console.error(err, rawMetadata);
}
});
useEffect(() => {
const initialProfile = async () => {
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"`);
return result;
};
initialProfile()
.then((res) => {
if (res[0] !== undefined) {
setProfile(JSON.parse(res[0].metadata));
}
fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
res.json().then((res) => {
// update state
setProfile(JSON.parse(res.content));
})
.catch(console.error);
);
}, [pubkey]);
return (

31
src/components/note/modal/index.tsx
View File

@@ -1,18 +1,33 @@
import { RelayContext } from '@components/contexts/relay';
import { Content } from '@components/note/content';
import NoteReply from '@components/note/modal/noteReply';
import { useNostrEvents } from 'nostr-react';
import { memo } from 'react';
import useLocalStorage from '@rehooks/local-storage';
import { memo, useContext, useState } from 'react';
/* eslint-disable @typescript-eslint/no-explicit-any */
const Modal = ({ event }: { event: any }) => {
const { events } = useNostrEvents({
filter: {
'#e': [event.id],
since: event.created_at,
kinds: [1],
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [events, setEvents] = useState([]);
relayPool.subscribe(
[
{
'#e': [event.id],
since: event.created_at,
kinds: [1],
},
],
relays,
(event: any) => {
setEvents((events) => [event, ...events]);
},
});
undefined,
(events: any, relayURL: any) => {
console.log(events, relayURL);
}
);
return (
<div className="flex min-h-full items-center justify-center p-4">

35
src/components/note/repost.tsx
View File

@@ -1,13 +1,14 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { RelayContext } from '@components/contexts/relay';
import { UserRepost } from '@components/note/atoms/userRepost';
import { Content } from '@components/note/content';
import { Placeholder } from '@components/note/placeholder';
import * as Dialog from '@radix-ui/react-dialog';
import { LoopIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
import dynamic from 'next/dynamic';
import { useNostrEvents } from 'nostr-react';
import { memo } from 'react';
import { memo, useContext, useState } from 'react';
const Modal = dynamic(() => import('@components/note/modal'), {
ssr: false,
@@ -15,13 +16,27 @@ const Modal = dynamic(() => import('@components/note/modal'), {
});
export const Repost = memo(function Repost({ root, user }: { root: any; user: string }) {
const { events } = useNostrEvents({
filter: {
ids: [root[0][1]],
since: 0,
kinds: [1],
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [events, setEvents] = useState([]);
relayPool.subscribe(
[
{
ids: [root[0][1]],
since: 0,
kinds: [1],
},
],
relays,
(event: any) => {
setEvents((events) => [event, ...events]);
},
});
undefined,
(events: any, relayURL: any) => {
console.log(events, relayURL);
}
);
if (events !== null && Object.keys(events).length > 0) {
return (
@@ -38,9 +53,7 @@ export const Repost = memo(function Repost({ root, user }: { root: any; user: st
</div>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
<Dialog.Content className="fixed inset-0 overflow-y-auto">
{events[0].content && <Modal event={events[0]} />}
</Dialog.Content>
<Dialog.Content className="fixed inset-0 overflow-y-auto">{events[0].content && <Modal event={events[0]} />}</Dialog.Content>
</Dialog.Portal>
</Dialog.Trigger>
</Dialog.Root>