-
-
-
-
+
);
diff --git a/src/app/space/components/create.tsx b/src/app/space/components/create.tsx
new file mode 100644
index 00000000..89efa4f2
--- /dev/null
+++ b/src/app/space/components/create.tsx
@@ -0,0 +1,93 @@
+import { Dialog, Transition } from "@headlessui/react";
+import CancelIcon from "@icons/cancel";
+import PlusIcon from "@icons/plus";
+import { Fragment, useState } from "react";
+
+export function CreateBlockModal() {
+ const [isOpen, setIsOpen] = useState(false);
+ const [loading, setLoading] = useState(false);
+
+ const closeModal = () => {
+ setIsOpen(false);
+ };
+
+ const openModal = () => {
+ setIsOpen(true);
+ };
+
+ return (
+ <>
+
openModal()}
+ className="group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900"
+ >
+
+
+
+ Create a new block
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create block
+
+
+
+
+
+ Channels are freedom square, everyone can speech freely,
+ no one can stop you or deceive what to speech
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/space/components/feed.tsx b/src/app/space/components/feed.tsx
new file mode 100644
index 00000000..df2c3878
--- /dev/null
+++ b/src/app/space/components/feed.tsx
@@ -0,0 +1,137 @@
+import { NoteBase } from "@app/note/components/base";
+import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
+import { NoteSkeleton } from "@app/note/components/skeleton";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { getNotesByAuthor } from "@utils/storage";
+import { useEffect, useRef } from "react";
+
+const ITEM_PER_PAGE = 10;
+const TIME = Math.floor(Date.now() / 1000);
+
+export function FeedBlock({ params }: { params: any }) {
+ const {
+ status,
+ data,
+ fetchNextPage,
+ hasNextPage,
+ isFetching,
+ isFetchingNextPage,
+ }: any = useInfiniteQuery({
+ queryKey: [params.title],
+ queryFn: async ({ pageParam = 0 }) => {
+ return await getNotesByAuthor(
+ params.content,
+ TIME,
+ ITEM_PER_PAGE,
+ pageParam,
+ );
+ },
+ getNextPageParam: (lastPage) => lastPage.nextCursor,
+ });
+
+ const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
+ const parentRef = useRef();
+
+ const rowVirtualizer = useVirtualizer({
+ count: hasNextPage ? allRows.length + 1 : allRows.length,
+ getScrollElement: () => parentRef.current,
+ estimateSize: () => 400,
+ overscan: 2,
+ });
+
+ const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+
+ useEffect(() => {
+ const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
+
+ if (!lastItem) {
+ return;
+ }
+
+ if (
+ lastItem.index >= allRows.length - 1 &&
+ hasNextPage &&
+ !isFetchingNextPage
+ ) {
+ fetchNextPage();
+ }
+ }, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
+
+ return (
+
+
+
{params.title}
+
+
+ {status === "loading" ? (
+
+ ) : (
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const note = allRows[virtualRow.index];
+ if (note) {
+ if (note.kind === 1) {
+ return (
+
+
+ );
+ } else {
+ return (
+
+
+ );
+ }
+ }
+ })}
+
+
+ )}
+
+ {isFetching && !isFetchingNextPage && (
+
+ )}
+
+
+
+ );
+}
diff --git a/src/app/space/components/image.tsx b/src/app/space/components/image.tsx
new file mode 100644
index 00000000..b6857471
--- /dev/null
+++ b/src/app/space/components/image.tsx
@@ -0,0 +1,21 @@
+import { Image } from "@shared/image";
+
+export function ImageBlock({ params }: { params: any }) {
+ return (
+
+
+
{params.title}
+
+
+
+
+ );
+}
diff --git a/src/app/space/pages/index.page.tsx b/src/app/space/pages/index.page.tsx
index f42761b3..1439f22b 100644
--- a/src/app/space/pages/index.page.tsx
+++ b/src/app/space/pages/index.page.tsx
@@ -1,19 +1,30 @@
+import { FeedBlock } from "../components/feed";
+import { CreateBlockModal } from "@app/space/components/create";
import { FollowingBlock } from "@app/space/components/following";
-import PlusIcon from "@shared/icons/plus";
+import { ImageBlock } from "@app/space/components/image";
+import { getBlocks } from "@utils/storage";
+import useSWR from "swr";
+
+const fetcher = ([, id]) => getBlocks(1);
export function Page() {
+ const { data }: any = useSWR("blocks", fetcher);
+
return (
+ {data
+ ? data.map((block: any) =>
+ block.kind === 0 ? (
+
+ ) : (
+
+ ),
+ )
+ : null}
diff --git a/src/shared/eventCollector.tsx b/src/shared/eventCollector.tsx
index d24267df..73d0e395 100644
--- a/src/shared/eventCollector.tsx
+++ b/src/shared/eventCollector.tsx
@@ -136,7 +136,7 @@ export default function EventCollector() {
);
return (
-
+
);
diff --git a/src/utils/storage.tsx b/src/utils/storage.tsx
index 5f3e7161..477415d7 100644
--- a/src/utils/storage.tsx
+++ b/src/utils/storage.tsx
@@ -122,6 +122,26 @@ export async function getNotes(time: number, limit: number, offset: number) {
return notes;
}
+// get all notes by authors
+export async function getNotesByAuthor(
+ pubkey: string,
+ time: number,
+ limit: number,
+ offset: number,
+) {
+ const db = await connect();
+
+ const notes: any = { data: null, nextCursor: 0 };
+ const query: any = await db.select(
+ `SELECT * FROM notes WHERE created_at <= "${time}" AND pubkey == "${pubkey}" AND kind IN (1, 6, 1063) GROUP BY parent_id ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}";`,
+ );
+
+ notes["data"] = query;
+ notes["nextCursor"] = offset + limit;
+
+ return notes;
+}
+
// get all long notes
export async function getLongNotes(
time: number,
@@ -300,3 +320,11 @@ export async function updateItemInBlacklist(content: string, status: number) {
`UPDATE blacklist SET status = "${status}" WHERE content = "${content}";`,
);
}
+
+// get all blocks
+export async function getBlocks(account_id: number) {
+ const db = await connect();
+ return await db.select(
+ `SELECT * FROM blocks WHERE account_id <= "${account_id}";`,
+ );
+}