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

polish

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-26 21:08:36 +07:00
parent b2dd231f00
commit 2f553d8039
13 changed files with 192 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/auth/onboarding.tsx
View File

@@ -1,37 +1,29 @@
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { usePublish } from "@libs/ndk";
import { LoaderIcon } from "@shared/icons";
import { ArrowRightCircleIcon } from "@shared/icons/arrowRightCircle";
import { RelayContext } from "@shared/relayProvider";
import { User } from "@shared/user";
import { dateToUnix } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
import { useContext, useState } from "react";
import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
export function OnboardingScreen() {
const ndk = useContext(RelayContext);
const publish = usePublish();
const navigate = useNavigate();
const { status, account } = useAccount();
const [loading, setLoading] = useState(false);
const publish = async () => {
const submit = async () => {
try {
setLoading(true);
const event = new NDKEvent(ndk);
const signer = new NDKPrivateKeySigner(account.privkey);
ndk.signer = signer;
event.content =
"Running Lume, fighting for better future, join us here: https://lume.nu";
event.created_at = dateToUnix();
event.pubkey = account.pubkey;
event.kind = 1;
event.tags = [];
// publish event
event.publish();
publish({
content:
"Running Lume, fighting for better future, join us here: https://lume.nu",
kind: 1,
tags: [],
});
// redirect to home
setTimeout(() => navigate("/", { replace: true }), 1200);
@@ -81,7 +73,7 @@ export function OnboardingScreen() {
<div className="mt-4 w-full flex flex-col gap-2">
<button
type="button"
onClick={() => publish()}
onClick={() => submit()}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg px-6 font-medium text-zinc-100 bg-fuchsia-500 hover:bg-fuchsia-600"
>
{loading ? (

31
src/app/chat/components/messages/form.tsx
View File

@@ -1,20 +1,14 @@
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { usePublish } from "@libs/ndk";
import { EnterIcon } from "@shared/icons";
import { MediaUploader } from "@shared/mediaUploader";
import { RelayContext } from "@shared/relayProvider";
import { useChatMessages } from "@stores/chats";
import { dateToUnix } from "@utils/date";
import { nip04 } from "nostr-tools";
import { useCallback, useContext, useState } from "react";
import { useCallback, useState } from "react";
export function ChatMessageForm({
receiverPubkey,
userPubkey,
userPrivkey,
}: { receiverPubkey: string; userPubkey: string; userPrivkey: string }) {
const ndk = useContext(RelayContext);
const addMessage = useChatMessages((state: any) => state.add);
const publish = usePublish();
const [value, setValue] = useState("");
const encryptMessage = useCallback(async () => {
@@ -23,23 +17,10 @@ export function ChatMessageForm({
const submit = async () => {
const message = await encryptMessage();
const tags = [["p", receiverPubkey]];
const signer = new NDKPrivateKeySigner(userPrivkey);
ndk.signer = signer;
const event = new NDKEvent(ndk);
// build event
event.content = message;
event.kind = 4;
event.created_at = dateToUnix();
event.pubkey = userPubkey;
event.tags = [["p", receiverPubkey]];
// publish event
event.publish();
// add message to store
addMessage(receiverPubkey, event);
// publish message
publish({ content: message, kind: 4, tags });
// reset state
setValue("");

55
src/app/chat/index.tsx
View File

@@ -1,14 +1,18 @@
import { ChatMessageForm } from "@app/chat/components/messages/form";
import { ChatMessageItem } from "@app/chat/components/messages/item";
import { ChatSidebar } from "@app/chat/components/sidebar";
import { getChatMessages } from "@libs/storage";
import { useQuery } from "@tanstack/react-query";
import { createChat, getChatMessages } from "@libs/storage";
import { NDKSubscription } from "@nostr-dev-kit/ndk";
import { RelayContext } from "@shared/relayProvider";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useAccount } from "@utils/hooks/useAccount";
import { useCallback, useRef } from "react";
import { useCallback, useContext, useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import { Virtuoso } from "react-virtuoso";
export function ChatScreen() {
const ndk = useContext(RelayContext);
const queryClient = useQueryClient();
const virtuosoRef = useRef(null);
const { pubkey } = useParams();
@@ -43,6 +47,51 @@ export function ChatScreen() {
[data],
);
const chat = useMutation({
mutationFn: (data: any) => {
return createChat(
data.id,
data.receiver_pubkey,
data.sender_pubkey,
data.content,
data.tags,
data.created_at,
);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["chat", pubkey] });
},
});
useEffect(() => {
const sub: NDKSubscription = ndk.subscribe(
{
kinds: [4],
authors: [account.pubkey],
"#p": [pubkey],
since: Math.floor(Date.now() / 1000),
},
{
closeOnEose: false,
},
);
sub.addListener("event", (event) => {
chat.mutate({
id: event.id,
receiver_pubkey: pubkey,
sender_pubkey: event.pubkey,
content: event.content,
tags: event.tags,
created_at: event.created_at,
});
});
return () => {
sub.stop();
};
}, [pubkey]);
return (
<div className="h-full w-full grid grid-cols-3">
<div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">

33
src/libs/ndk.tsx
View File

@@ -2,8 +2,13 @@ import NDK, {
NDKConstructorParams,
NDKEvent,
NDKFilter,
NDKKind,
NDKPrivateKeySigner,
} from "@nostr-dev-kit/ndk";
import { RelayContext } from "@shared/relayProvider";
import { FULL_RELAYS } from "@stores/constants";
import { useAccount } from "@utils/hooks/useAccount";
import { useContext } from "react";
export async function initNDK(
relays?: string[],
@@ -39,3 +44,31 @@ export async function prefetchEvents(
});
});
}
export function usePublish() {
const { account } = useAccount();
const ndk = useContext(RelayContext);
if (!ndk.signer) {
const signer = new NDKPrivateKeySigner(account?.privkey);
ndk.signer = signer;
}
function publish({
content,
kind,
tags,
}: { content: string; kind: NDKKind; tags: string[][] }) {
const event = new NDKEvent(ndk);
event.content = content;
event.kind = kind;
event.created_at = Math.floor(Date.now() / 1000);
event.pubkey = account.pubkey;
event.tags = tags;
event.publish();
}
return publish;
}

2
src/main.tsx
View File

@@ -1,6 +1,7 @@
import App from "./app";
import { RelayProvider } from "@shared/relayProvider";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { createRoot } from "react-dom/client";
const queryClient = new QueryClient({
@@ -19,5 +20,6 @@ root.render(
<RelayProvider>
<App />
</RelayProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>,
);

35
src/shared/composer/types/post.tsx
View File

@@ -1,12 +1,10 @@
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { usePublish } from "@libs/ndk";
import { Button } from "@shared/button";
import { ImageUploader } from "@shared/composer/imageUploader";
import { TrashIcon } from "@shared/icons";
import { MentionNote } from "@shared/notes/mentions/note";
import { RelayContext } from "@shared/relayProvider";
import { useComposer } from "@stores/composer";
import { dateToUnix } from "@utils/date";
import { useCallback, useContext, useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import { Node, Transforms, createEditor } from "slate";
import { withHistory } from "slate-history";
import {
@@ -61,7 +59,7 @@ const ImagePreview = ({
};
export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
const ndk = useContext(RelayContext);
const publish = usePublish();
const [repost, toggle] = useComposer((state: any) => [
state.repost,
state.toggle,
@@ -86,29 +84,24 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
}, []);
const submit = () => {
// serialize content
const serializedContent = serialize(content);
const signer = new NDKPrivateKeySigner(privkey);
ndk.signer = signer;
const event = new NDKEvent(ndk);
event.content = serializedContent;
event.created_at = dateToUnix();
event.pubkey = pubkey;
let tags: string[][] = [];
let kind: number;
if (repost.id && repost.pubkey) {
event.kind = 6;
event.tags = [
kind = 6;
tags = [
["e", repost.id],
["p", repost.pubkey],
];
} else {
event.kind = 1;
event.tags = [];
kind = 1;
tags = [];
}
// publish event
event.publish();
// serialize content
const serializedContent = serialize(content);
// publish message
publish({ content: serializedContent, kind, tags });
// close modal
toggle(false);

5
src/shared/notes/preview/link.tsx
View File

@@ -34,7 +34,10 @@ export function LinkPreview({ urls }: { urls: string[] }) {
) : (
<>
<Image
src={data.images[0]}
src={
data.images?.[0] ||
"https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg"

21
src/shared/notes/replies/form.tsx
View File

@@ -1,15 +1,13 @@
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { usePublish } from "@libs/ndk";
import { Button } from "@shared/button";
import { Image } from "@shared/image";
import { RelayContext } from "@shared/relayProvider";
import { DEFAULT_AVATAR } from "@stores/constants";
import { dateToUnix } from "@utils/date";
import { useAccount } from "@utils/hooks/useAccount";
import { useProfile } from "@utils/hooks/useProfile";
import { useContext, useState } from "react";
import { useState } from "react";
export function NoteReplyForm({ id }: { id: string }) {
const ndk = useContext(RelayContext);
const publish = usePublish();
const { account } = useAccount();
const { status, user } = useProfile(account.npub);
@@ -17,19 +15,10 @@ export function NoteReplyForm({ id }: { id: string }) {
const [value, setValue] = useState("");
const submitEvent = () => {
const signer = new NDKPrivateKeySigner(account.privkey);
ndk.signer = signer;
const event = new NDKEvent(ndk);
// build event
event.content = value;
event.kind = 1;
event.created_at = dateToUnix();
event.pubkey = account.pubkey;
event.tags = [["e", id]];
const tags = [["e", id]];
// publish event
event.publish();
publish({ content: value, kind: 1, tags });
// reset form
setValue("");

2
src/shared/user.tsx
View File

@@ -46,7 +46,7 @@ export function User({
</Popover.Button>
<div className="flex flex-wrap items-baseline gap-1">
<h5
className={`text-zinc-200 font-medium leading-none truncate ${
className={`text-zinc-100 font-semibold leading-none truncate ${
size === "small" ? "max-w-[7rem]" : "max-w-[10rem]"
}`}
>

63
src/stores/chats.tsx
View File

@@ -1,63 +0,0 @@
import { createChat, getChatMessages, getChatsByPubkey } from "@libs/storage";
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
export const useChats = create(
immer((set: any) => ({
chats: [],
fetch: async (pubkey: string) => {
const response: any = await getChatsByPubkey(pubkey);
set({ chats: response });
},
add: async (pubkey: string) => {
set((state) => {
const target = state.chats.findIndex(
(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
);
if (target !== -1) {
state.chats[target]["new_messages"] =
state.chats[target]["new_messages"] + 1 || 1;
} else {
state.chats.push({ sender_pubkey: pubkey, new_messages: 1 });
}
});
},
clearBubble: (pubkey: string) => {
set((state) => {
const target = state.chats.findIndex(
(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
);
state.chats[target]["new_messages"] = 0;
});
},
})),
);
export const useChatMessages = create((set) => ({
messages: [],
fetch: async (receiver_pubkey: string, sender_pubkey: string) => {
const response: any = await getChatMessages(receiver_pubkey, sender_pubkey);
set({ messages: response });
},
add: async (receiver: string, event: any) => {
const save = await createChat(
event.id,
receiver,
event.pubkey,
event.content,
event.tags,
event.created_at,
);
if (save) {
set((state: any) => ({
messages: [
...state.messages,
{ ...event, sender_pubkey: event.pubkey, receiver_pubkey: receiver },
],
}));
}
},
clear: () => {
set(() => ({ messages: [] }));
},
}));

2
src/stores/constants.tsx
View File

@@ -66,5 +66,7 @@ export const OPENGRAPH = {
export const FULL_RELAYS = [
"wss://relay.damus.io",
"wss://relay.nostr.band/all",
"wss://relayable.org",
"wss://nostr.mutinywallet.com",
"wss://relay.nostrgraph.net",
];