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

feat(columns): add group column

Browse Source
This commit is contained in:
reya
2024-01-01 17:32:57 +07:00
parent 499765c10a
commit a52fb3c437
17 changed files with 430 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/@columns/timeline/src/home.tsx
View File

@@ -10,7 +10,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
const ark = useArk();
const storage = useStorage();
const ref = useRef<VListHandle>();
const cacheKey = "newsfeed-vlist";
const cacheKey = `${colKey}-vlist`;
const [offset, cache] = useMemo(() => {
const serialized = sessionStorage.getItem(cacheKey);
@@ -91,19 +91,19 @@ export function HomeRoute({ colKey }: { colKey: string }) {
) : (
allEvents.map((item) => renderItem(item))
)}
<div className="flex h-16 items-center justify-center">
<div className="flex items-center justify-center h-16">
{hasNextPage ? (
<button
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-40 items-center justify-center gap-2 rounded-full bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-5 w-5 animate-spin" />
<LoaderIcon className="w-5 h-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
<ArrowRightCircleIcon className="w-5 h-5" />
Load more
</>
)}

4
packages/@columns/timeline/src/index.tsx
View File

@@ -1,15 +1,15 @@
import { Column, useStorage } from "@lume/ark";
import { TimelineIcon } from "@lume/icons";
import { IColumn } from "@lume/types";
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
import { useQueryClient } from "@tanstack/react-query";
import { useRef } from "react";
import { IColumn } from "../../../types";
import { EventRoute } from "./event";
import { HomeRoute } from "./home";
import { UserRoute } from "./user";
export function Timeline({ column }: { column: IColumn }) {
const colKey = "newsfeed";
const colKey = `timeline-${column.id}`;
const storage = useStorage();
const queryClient = useQueryClient();
const since = useRef(Math.floor(Date.now() / 1000));