diff --git a/apps/desktop2/src/routes/$account/home.lazy.tsx b/apps/desktop2/src/routes/$account/home.lazy.tsx deleted file mode 100644 index a2995d2c..00000000 --- a/apps/desktop2/src/routes/$account/home.lazy.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import { RepostNote } from "@/components/repost"; -import { Suggest } from "@/components/suggest"; -import { TextNote } from "@/components/text"; -import { useArk } from "@lume/ark"; -import { - LoaderIcon, - ArrowRightCircleIcon, - RefreshIcon, - InfoIcon, -} from "@lume/icons"; -import { Event, Kind } from "@lume/types"; -import { EmptyFeed } from "@lume/ui"; -import { FETCH_LIMIT } from "@lume/utils"; -import { useInfiniteQuery } from "@tanstack/react-query"; -import { createLazyFileRoute } from "@tanstack/react-router"; -import { Virtualizer } from "virtua"; - -export const Route = createLazyFileRoute("/$account/home")({ - component: Home, -}); - -function Home() { - const ark = useArk(); - const currentDate = new Date().toLocaleString("default", { - weekday: "long", - month: "long", - day: "numeric", - }); - - const { account } = Route.useParams(); - const { - data, - hasNextPage, - isLoading, - isRefetching, - isFetchingNextPage, - fetchNextPage, - refetch, - } = useInfiniteQuery({ - queryKey: ["local_newsfeed", account], - initialPageParam: 0, - queryFn: async ({ pageParam }: { pageParam: number }) => { - const events = await ark.get_events( - "local", - FETCH_LIMIT, - pageParam, - true, - ); - return events; - }, - getNextPageParam: (lastPage) => { - const lastEvent = lastPage?.at(-1); - if (!lastEvent) return; - return lastEvent.created_at - 1; - }, - select: (data) => data?.pages.flatMap((page) => page), - refetchOnWindowFocus: false, - }); - - const renderItem = (event: Event) => { - if (!event) return; - switch (event.kind) { - case Kind.Repost: - return ; - default: - return ; - } - }; - - return ( -
-
-

- {currentDate} -

-
- -
-
-
-
- {isLoading || isRefetching ? ( -
- -
- ) : !data.length ? ( -
-
- -

- Empty newsfeed. Or you can go to{" "} - - Discover - -

-
- -
- ) : ( - - {data.map((item) => renderItem(item))} - - )} -
- {hasNextPage ? ( - - ) : null} -
-
-
-
- ); -} diff --git a/apps/desktop2/src/routes/$account/home.tsx b/apps/desktop2/src/routes/$account/home.tsx new file mode 100644 index 00000000..31d1d07e --- /dev/null +++ b/apps/desktop2/src/routes/$account/home.tsx @@ -0,0 +1,68 @@ +import { GlobalIcon, LocalIcon, RefreshIcon } from "@lume/icons"; +import { cn } from "@lume/utils"; +import { useQueryClient } from "@tanstack/react-query"; +import { Link } from "@tanstack/react-router"; +import { Outlet, createFileRoute } from "@tanstack/react-router"; + +export const Route = createFileRoute("/$account/home")({ + component: Screen, +}); + +function Screen() { + const queryClient = useQueryClient(); + const { account } = Route.useParams(); + + const refresh = async () => { + const queryKey = `${window.location.pathname.split("/").at(-1)}_newsfeed`; + await queryClient.refetchQueries({ queryKey: [queryKey, account] }); + }; + + return ( +
+
+
+ + {({ isActive }) => ( +
+ + Local +
+ )} + + + {({ isActive }) => ( +
+ + Global +
+ )} + +
+
+ +
+
+ +
+ ); +} diff --git a/apps/desktop2/src/routes/$account/home/global.lazy.tsx b/apps/desktop2/src/routes/$account/home/global.lazy.tsx new file mode 100644 index 00000000..bd8c6772 --- /dev/null +++ b/apps/desktop2/src/routes/$account/home/global.lazy.tsx @@ -0,0 +1,91 @@ +import { RepostNote } from "@/components/repost"; +import { Suggest } from "@/components/suggest"; +import { TextNote } from "@/components/text"; +import { useArk } from "@lume/ark"; +import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons"; +import { Event, Kind } from "@lume/types"; +import { FETCH_LIMIT } from "@lume/utils"; +import { useInfiniteQuery } from "@tanstack/react-query"; +import { createLazyFileRoute } from "@tanstack/react-router"; +import { Virtualizer } from "virtua"; + +export const Route = createLazyFileRoute("/$account/home/global")({ + component: Screen, +}); + +function Screen() { + const ark = useArk(); + const { account } = Route.useParams(); + const { + data, + hasNextPage, + isLoading, + isRefetching, + isFetchingNextPage, + fetchNextPage, + } = useInfiniteQuery({ + queryKey: ["global_newsfeed", account], + initialPageParam: 0, + queryFn: async ({ pageParam }: { pageParam: number }) => { + const events = await ark.get_events( + "global", + FETCH_LIMIT, + pageParam, + true, + ); + return events; + }, + getNextPageParam: (lastPage) => { + const lastEvent = lastPage?.at(-1); + if (!lastEvent) return; + return lastEvent.created_at - 1; + }, + select: (data) => data?.pages.flatMap((page) => page), + refetchOnWindowFocus: false, + }); + + const renderItem = (event: Event) => { + if (!event) return; + switch (event.kind) { + case Kind.Repost: + return ; + default: + return ; + } + }; + + return ( +
+
+ {isLoading || isRefetching ? ( +
+ +
+ ) : ( + + {data.map((item) => renderItem(item))} + + )} +
+ {hasNextPage ? ( + + ) : null} +
+
+
+ ); +} diff --git a/apps/desktop2/src/routes/$account/home/local.lazy.tsx b/apps/desktop2/src/routes/$account/home/local.lazy.tsx new file mode 100644 index 00000000..1e47d56f --- /dev/null +++ b/apps/desktop2/src/routes/$account/home/local.lazy.tsx @@ -0,0 +1,108 @@ +import { RepostNote } from "@/components/repost"; +import { Suggest } from "@/components/suggest"; +import { TextNote } from "@/components/text"; +import { useArk } from "@lume/ark"; +import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons"; +import { Event, Kind } from "@lume/types"; +import { FETCH_LIMIT } from "@lume/utils"; +import { useInfiniteQuery } from "@tanstack/react-query"; +import { Link } from "@tanstack/react-router"; +import { createLazyFileRoute } from "@tanstack/react-router"; +import { Virtualizer } from "virtua"; + +export const Route = createLazyFileRoute("/$account/home/local")({ + component: Screen, +}); + +function Screen() { + const ark = useArk(); + const { account } = Route.useParams(); + const { + data, + hasNextPage, + isLoading, + isRefetching, + isFetchingNextPage, + fetchNextPage, + } = useInfiniteQuery({ + queryKey: ["local_newsfeed", account], + initialPageParam: 0, + queryFn: async ({ pageParam }: { pageParam: number }) => { + const events = await ark.get_events( + "local", + FETCH_LIMIT, + pageParam, + true, + ); + return events; + }, + getNextPageParam: (lastPage) => { + const lastEvent = lastPage?.at(-1); + if (!lastEvent) return; + return lastEvent.created_at - 1; + }, + select: (data) => data?.pages.flatMap((page) => page), + refetchOnWindowFocus: false, + }); + + const renderItem = (event: Event) => { + if (!event) return; + switch (event.kind) { + case Kind.Repost: + return ; + default: + return ; + } + }; + + return ( +
+
+ {isLoading || isRefetching ? ( +
+ +
+ ) : !data.length ? ( +
+
+ +

+ Empty newsfeed. Or you can go to{" "} + + Global Newsfeed + +

+
+ +
+ ) : ( + + {data.map((item) => renderItem(item))} + + )} +
+ {hasNextPage ? ( + + ) : null} +
+
+
+ ); +} diff --git a/apps/desktop2/src/routes/index.tsx b/apps/desktop2/src/routes/index.tsx index 98d6fa86..b768f36d 100644 --- a/apps/desktop2/src/routes/index.tsx +++ b/apps/desktop2/src/routes/index.tsx @@ -50,7 +50,7 @@ function Screen() { const loadAccount = await ark.load_selected_account(npub); if (loadAccount) { navigate({ - to: "/$account/home", + to: "/$account/home/local", params: { account: npub }, replace: true, }); diff --git a/packages/icons/index.ts b/packages/icons/index.ts index 19a36255..1d8887f8 100644 --- a/packages/icons/index.ts +++ b/packages/icons/index.ts @@ -116,3 +116,5 @@ export * from "./src/arrowUp"; export * from "./src/arrowUpSquare"; export * from "./src/arrowDown"; export * from "./src/link"; +export * from "./src/local"; +export * from "./src/global"; diff --git a/packages/icons/src/global.tsx b/packages/icons/src/global.tsx new file mode 100644 index 00000000..d224cb9f --- /dev/null +++ b/packages/icons/src/global.tsx @@ -0,0 +1,14 @@ +export function GlobalIcon(props: JSX.IntrinsicElements["svg"]) { + return ( + + + + + ); +} diff --git a/packages/icons/src/local.tsx b/packages/icons/src/local.tsx new file mode 100644 index 00000000..25ff30ee --- /dev/null +++ b/packages/icons/src/local.tsx @@ -0,0 +1,14 @@ +export function LocalIcon(props: JSX.IntrinsicElements["svg"]) { + return ( + + + + + ); +}