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

temp remove threads

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-07 13:30:50 +07:00
parent f00ed56a06
commit 2f3ea13613
10 changed files with 28 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/prefetch/pages/index.page.tsx
View File

@@ -74,12 +74,6 @@ export function Page() {
since: lastLogin,
});
// long post
query.push({
kinds: [30023],
since: lastLogin,
});
return query;
}, [account]);
@@ -169,19 +163,6 @@ export function Page() {
event.id,
);
break;
// long post
case 30023:
createNote(
event.id,
account.id,
event.pubkey,
event.kind,
event.tags,
event.content,
event.created_at,
event.id,
);
break;
default:
break;
}

1
src/app/threads/_default.page.tsx
View File

@@ -1 +0,0 @@
export { LayoutNewsfeed as Layout } from "./layout";

38
src/app/threads/components/author.tsx
View File

@@ -1,38 +0,0 @@
import { Image } from "@shared/image";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useProfile } from "@utils/hooks/useProfile";
import { shortenKey } from "@utils/shortenKey";
import dayjs from "dayjs";
export function ThreadAuthor({
pubkey,
time,
}: { pubkey: string; time: number }) {
const { user } = useProfile(pubkey);
return (
<div className="relative flex items-center gap-2.5">
<div className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
<Image
src={user?.picture || DEFAULT_AVATAR}
alt={pubkey}
className="h-9 w-9 object-cover"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex flex-col gap-0.5">
<h5 className="text-base font-semibold leading-none">
{user?.display_name || user?.name || (
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
)}
</h5>
<div className="flex items-baseline gap-1.5 text-base leading-none text-zinc-500">
<span>{user?.nip05 || shortenKey(pubkey)}</span>
<span>•</span>
<span>{dayjs().to(dayjs.unix(time), true)}</span>
</div>
</div>
</div>
</div>
);
}

40
src/app/threads/components/base.tsx
View File

@@ -1,40 +0,0 @@
import { ThreadAuthor } from "@app/threads/components/author";
import { Image } from "@shared/image";
export function ThreadBase({ event }: { event: any }) {
const metadata = JSON.parse(event.tags);
const title = metadata.find((i: any) => i[0] === "title")?.[1];
const summary = metadata.find((i: any) => i[0] === "summary")?.[1];
const image = metadata.find((i: any) => i[0] === "image")?.[1];
if (!title) {
return null;
}
return (
<div className="h-min w-full px-3 py-1.5">
<div className="rounded-md border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="px-3 py-3">
<div className="flex flex-row gap-2">
<div className="flex-1">
<h3 className="text-white text-lg font-semibold">{title}</h3>
<div className="mt-2 markdown">
<p>{summary}</p>
</div>
</div>
<div className="shrink-0 w-32 h-32">
<Image
src={image}
alt={title}
className="w-32 h-32 rounded-md object-cover"
/>
</div>
</div>
</div>
<div className="inline-flex border-t border-zinc-800 w-full justify-between items-center px-3 h-16">
<ThreadAuthor pubkey={event.pubkey} time={event.created_at} />
</div>
</div>
</div>
);
}

14
src/app/threads/layout.tsx
View File

@@ -1,14 +0,0 @@
import { MultiAccounts } from "@shared/multiAccounts";
import { Navigation } from "@shared/navigation";
export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
return (
<div className="flex w-screen h-screen">
<div className="relative flex flex-row flex-wrap shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}

103
src/app/threads/pages/index.page.tsx
View File

@@ -1,103 +0,0 @@
import { NoteSkeleton } from "@app/note/components/skeleton";
import { ThreadBase } from "@app/threads/components/base";
import { useVirtualizer } from "@tanstack/react-virtual";
import { getLongNotes } from "@utils/storage";
import { useEffect, useMemo, useRef } from "react";
import useSWRInfinite from "swr/infinite";
const ITEM_PER_PAGE = 10;
const TIME = Math.floor(Date.now() / 1000);
const fetcher = async ([, offset]) => getLongNotes(TIME, ITEM_PER_PAGE, offset);
function isJSON(str: string) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
export function Page() {
const getKey = (pageIndex, previousPageData) => {
if (previousPageData && !previousPageData.data) return null;
if (pageIndex === 0) return ["following", 0];
return ["following", previousPageData.nextCursor];
};
const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
const notes = useMemo(
() => (data ? data.flatMap((d) => d.data) : []),
[data],
);
const parentRef = useRef();
const rowVirtualizer = useVirtualizer({
count: notes.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
overscan: 2,
});
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
useEffect(() => {
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
if (!lastItem) {
return;
}
if (lastItem.index >= notes.length - 1) {
setSize(size + 1);
}
}, [notes.length, rowVirtualizer.getVirtualItems()]);
return (
<div
ref={parentRef}
className="scrollbar-hide h-full overflow-y-auto"
style={{ contain: "strict" }}
>
{!data || isLoading ? (
<div className="px-3 py-1.5">
<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
<NoteSkeleton />
</div>
</div>
) : (
<div
className="relative w-full mt-2"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
}}
>
<div
className="absolute left-0 top-0 w-full"
style={{
transform: `translateY(${
itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
}px)`,
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const note = notes[virtualRow.index];
if (note && isJSON(note.tags)) {
return (
<div
key={virtualRow.index}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
>
<ThreadBase key={note.event_id} event={note} />
</div>
);
}
})}
</div>
</div>
)}
</div>
);
}

2
src/shared/icons/index.tsx
View File

@@ -20,7 +20,7 @@ export * from "./like";
export * from "./lume";
export * from "./media";
export * from "./mute";
export * from "./myspace";
export * from "./space";
export * from "./navArrowDown";
export * from "./plus";
export * from "./plusCircle";

24
src/shared/icons/myspace.tsx
View File

@@ -1,24 +0,0 @@
import { SVGProps } from "react";
export function MyspaceIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M8.75 7.75H15.25M8.75 11.75H12.25M4.25 3.25V20.75H19.75V3.25H4.25Z"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

22
src/shared/icons/space.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { SVGProps } from "react";
export function SpaceIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M2.79055 12.1075C1.4706 12.8201 0.744814 13.464 0.86677 13.9192C1.16059 15.0158 6.26396 14.6011 12.2655 12.993C18.2669 11.3849 22.8939 9.19232 22.6001 8.09576C22.4781 7.64061 21.5276 7.44582 20.0282 7.48865M2.79055 12.1075C2.80163 12.8595 2.90491 13.6226 3.10854 14.3825C4.43075 19.3171 9.48321 22.2508 14.3935 20.935C19.3038 19.6193 22.2126 14.5525 20.8904 9.61792C20.6867 8.85797 20.3946 8.14547 20.0282 7.48865M2.79055 12.1075C2.72972 7.9763 5.45127 4.1785 9.60537 3.06541C13.7595 1.95233 18.0153 3.88054 20.0282 7.48865"
stroke="currentColor"
strokeWidth={1.5}
/>
</svg>
);
}

10
src/shared/navigation.tsx
View File

@@ -4,7 +4,7 @@ import { Disclosure } from "@headlessui/react";
import { ActiveLink } from "@shared/activeLink";
import { AppHeader } from "@shared/appHeader";
import { ComposerModal } from "@shared/composer/modal";
import { NavArrowDownIcon, ThreadsIcon, WorldIcon } from "@shared/icons";
import { NavArrowDownIcon, SpaceIcon, WorldIcon } from "@shared/icons";
export function Navigation() {
return (
@@ -27,19 +27,19 @@ export function Navigation() {
activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
>
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
<WorldIcon width={12} height={12} className="text-white" />
<SpaceIcon width={12} height={12} className="text-white" />
</span>
<span className="font-medium">Space</span>
</ActiveLink>
<ActiveLink
href="/app/threads"
href="/app/trending"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-zinc-200 hover:text-white"
activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
>
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
<ThreadsIcon width={12} height={12} className="text-white" />
<WorldIcon width={12} height={12} className="text-white" />
</span>
<span className="font-medium">Threads</span>
<span className="font-medium">Trending</span>
</ActiveLink>
</div>
</div>