feat: migrate frontend to new backend

This commit is contained in:
2024-02-08 21:24:08 +07:00
parent 17052aeeaa
commit ec78cf8bf7
34 changed files with 478 additions and 650 deletions

View File

@@ -1,15 +1,11 @@
import { PinIcon } from "@lume/icons";
import { COL_TYPES } from "@lume/utils";
import * as Tooltip from "@radix-ui/react-tooltip";
import { useTranslation } from "react-i18next";
import { useColumnContext } from "../../column/provider";
import { useNoteContext } from "../provider";
export function NotePin() {
const event = useNoteContext();
const { t } = useTranslation();
const { addColumn } = useColumnContext();
return (
<Tooltip.Provider>
@@ -17,13 +13,6 @@ export function NotePin() {
<Tooltip.Trigger asChild>
<button
type="button"
onClick={async () =>
await addColumn({
kind: COL_TYPES.thread,
title: "Thread",
content: event.id,
})
}
className="inline-flex items-center justify-center gap-2 pl-2 pr-3 text-sm font-medium rounded-full h-7 w-max bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800 dark:bg-neutral-900"
>
<PinIcon className="size-4" />

View File

@@ -1,3 +1,4 @@
import { useStorage } from "@lume/storage";
import { Kind } from "@lume/types";
import {
AUDIOS,
@@ -31,6 +32,7 @@ export function NoteContent({
}: {
className?: string;
}) {
const storage = useStorage();
const event = useNoteContext();
const [content, setContent] = useState(event.content);
@@ -221,7 +223,7 @@ export function NoteContent({
}
};
if (event.kind !== NDKKind.Text) {
if (event.kind !== Kind.Text) {
return <NIP89 className={className} />;
}

View File

@@ -2,17 +2,11 @@ import { COL_TYPES } from "@lume/utils";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useArk } from "../../../hooks/useArk";
import { useProfile } from "../../../hooks/useProfile";
import { useColumnContext } from "../../column/provider";
export function MentionUser({ pubkey }: { pubkey: string }) {
const ark = useArk();
const cleanPubkey = ark.getCleanPubkey(pubkey);
const { isLoading, isError, user } = useProfile(pubkey);
const { t } = useTranslation();
const { addColumn } = useColumnContext();
return (
<DropdownMenu.Root>
@@ -21,12 +15,12 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
? "@anon"
: isError
? pubkey
: `@${user?.name || user?.displayName || user?.username || "anon"}`}
: `@${user?.name || user?.display_name || user?.name || "anon"}`}
</DropdownMenu.Trigger>
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none">
<DropdownMenu.Item asChild>
<Link
to={`/users/${cleanPubkey}`}
to={`/users/${pubkey}`}
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
{t("note.buttons.viewProfile")}
@@ -35,13 +29,6 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
<DropdownMenu.Item asChild>
<button
type="button"
onClick={async () =>
await addColumn({
kind: COL_TYPES.user,
title: user?.name || user?.displayName || "User",
content: cleanPubkey,
})
}
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
{t("note.buttons.pin")}

View File

@@ -5,7 +5,6 @@ import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { useArk } from "../../hooks/useArk";
import { useColumnContext } from "../column/provider";
import { useNoteContext } from "./provider";
export function NoteMenu() {
@@ -14,7 +13,6 @@ export function NoteMenu() {
const navigate = useNavigate();
const { t } = useTranslation();
const { addColumn } = useColumnContext();
const copyID = async () => {
await writeText(await ark.event_to_bech32(event.id, [""]));
@@ -93,13 +91,6 @@ export function NoteMenu() {
<DropdownMenu.Item asChild>
<button
type="button"
onClick={() =>
addColumn({
kind: COL_TYPES.user,
title: "User",
content: event.pubkey,
})
}
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
>
{t("note.menu.pinAuthor")}

View File

@@ -1,9 +1,7 @@
import { NDKEvent } from "@nostr-dev-kit/ndk";
import { Event } from "@lume/types";
import { Note } from "..";
export function ChildReply({
event,
}: { event: NDKEvent; rootEventId?: string }) {
export function ChildReply({ event }: { event: Event; rootEventId?: string }) {
return (
<Note.Provider event={event}>
<Note.Root className="py-2">

View File

@@ -1,6 +1,6 @@
import { RepostIcon } from "@lume/icons";
import { Event } from "@lume/types";
import { cn } from "@lume/utils";
import { NDKEvent, NostrEvent } from "@nostr-dev-kit/ndk";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { Note } from "..";
@@ -10,7 +10,7 @@ import { User } from "../../user";
export function RepostNote({
event,
className,
}: { event: NDKEvent; className?: string }) {
}: { event: Event; className?: string }) {
const ark = useArk();
const { t } = useTranslation();
@@ -23,11 +23,11 @@ export function RepostNote({
queryFn: async () => {
try {
if (event.content.length > 50) {
const embed = JSON.parse(event.content) as NostrEvent;
return new NDKEvent(ark.ndk, embed);
const embed = JSON.parse(event.content) as Event;
return embed;
}
const id = event.tags.find((el) => el[0] === "e")[1];
return await ark.getEventById(id);
return await ark.get_event(id);
} catch {
throw new Error("Failed to get repost event");
}

View File

@@ -1,11 +1,11 @@
import { Event } from "@lume/types";
import { cn } from "@lume/utils";
import { NDKEvent } from "@nostr-dev-kit/ndk";
import { Note } from "..";
export function TextNote({
event,
className,
}: { event: NDKEvent; className?: string }) {
}: { event: Event; className?: string }) {
return (
<Note.Provider event={event}>
<Note.Root

View File

@@ -21,7 +21,7 @@ export function ThreadNote({ eventId }: { eventId: string }) {
<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
<User.Time time={data.created_at} />
<span>·</span>
<User.NIP05 pubkey={data.pubkey} />
<User.NIP05 />
</div>
</div>
</User.Root>

View File

@@ -1,12 +1,12 @@
import { NDKEvent } from "@nostr-dev-kit/ndk";
import { Event } from "@lume/types";
import { ReactNode, createContext, useContext } from "react";
const EventContext = createContext<NDKEvent>(null);
const EventContext = createContext<Event>(null);
export function NoteProvider({
event,
children,
}: { event: NDKEvent; children: ReactNode }) {
}: { event: Event; children: ReactNode }) {
return (
<EventContext.Provider value={event}>{children}</EventContext.Provider>
);

View File

@@ -20,7 +20,6 @@ export function NoteThread({
});
const { t } = useTranslation();
const { addColumn } = useColumnContext();
if (!thread) return null;
@@ -42,13 +41,6 @@ export function NoteThread({
</Link>
<button
type="button"
onClick={async () =>
await addColumn({
kind: COL_TYPES.thread,
title: "Thread",
content: thread?.rootEventId || thread?.replyEventId,
})
}
className="inline-flex items-center justify-center rounded-md text-neutral-600 dark:text-neutral-400 size-6 bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
>
<PinIcon className="size-4" />

View File

@@ -36,10 +36,7 @@ export function NoteUser({
<div className="flex flex-col gap-2">
<div>
<User.Name className="font-semibold leading-tight" />
<User.NIP05
pubkey={event.pubkey}
className="text-neutral-600 dark:text-neutral-400"
/>
<User.NIP05 className="text-neutral-600 dark:text-neutral-400" />
</div>
<User.About className="line-clamp-3" />
<Link

View File

@@ -4,7 +4,7 @@ import { useUserContext } from "./provider";
export function UserAbout({ className }: { className?: string }) {
const user = useUserContext();
if (!user) {
if (!user.profile) {
return (
<div className="flex flex-col gap-1">
<div

View File

@@ -18,7 +18,7 @@ export function UserAvatar({ className }: { className?: string }) {
[user],
);
if (!user) {
if (!user.profile) {
return (
<div className="shrink-0">
<div

View File

@@ -4,7 +4,7 @@ import { useUserContext } from "./provider";
export function UserName({ className }: { className?: string }) {
const user = useUserContext();
if (!user) {
if (!user.profile) {
return (
<div
className={cn(

View File

@@ -16,7 +16,7 @@ export function UserNip05({ className }: { className?: string }) {
enabled: !!user,
});
if (!user) {
if (!user.profile) {
return (
<div
className={cn(