feat: improve official columns
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { CheckCircleIcon } from "@lume/icons";
|
||||
import { ColumnRouteSearch } from "@lume/types";
|
||||
import { Column, User } from "@lume/ui";
|
||||
import { Column, Spinner, User } from "@lume/ui";
|
||||
import { createFileRoute, useRouter } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@@ -30,6 +30,7 @@ function Screen() {
|
||||
|
||||
const [title, setTitle] = useState<string>("Just a new group");
|
||||
const [users, setUsers] = useState<Array<string>>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isDone, setIsDone] = useState(false);
|
||||
|
||||
const toggleUser = (pubkey: string) => {
|
||||
@@ -43,13 +44,22 @@ function Screen() {
|
||||
try {
|
||||
if (isDone) return router.history.push(redirect);
|
||||
|
||||
// start loading
|
||||
setLoading(true);
|
||||
|
||||
const groups = await ark.set_nstore(
|
||||
`lume_group_${label}`,
|
||||
JSON.stringify(users),
|
||||
);
|
||||
|
||||
if (groups) setIsDone(true);
|
||||
if (groups) {
|
||||
toast.success("Group has been created successfully.");
|
||||
// start loading
|
||||
setIsDone(true);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
toast.error(e);
|
||||
}
|
||||
};
|
||||
@@ -101,14 +111,14 @@ function Screen() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="fixed z-10 flex items-center justify-center w-full bottom-3">
|
||||
<div className="fixed z-10 flex items-center justify-center w-full bottom-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
disabled={users.length < 1}
|
||||
className="inline-flex items-center justify-center px-4 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-36 h-11 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
|
||||
className="inline-flex items-center justify-center px-4 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-26 h-9 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
|
||||
>
|
||||
{isDone ? "Back" : "Update"}
|
||||
{isDone ? "Back" : loading ? <Spinner /> : "Update"}
|
||||
</button>
|
||||
</div>
|
||||
</Column.Content>
|
||||
|
||||
@@ -18,6 +18,7 @@ export const Route = createFileRoute("/foryou")({
|
||||
beforeLoad: async ({ search, context }) => {
|
||||
const ark = context.ark;
|
||||
const interests = await ark.get_interest();
|
||||
const settings = await ark.get_settings();
|
||||
|
||||
if (!interests) {
|
||||
throw redirect({
|
||||
@@ -31,6 +32,7 @@ export const Route = createFileRoute("/foryou")({
|
||||
|
||||
return {
|
||||
interests,
|
||||
settings,
|
||||
};
|
||||
},
|
||||
component: Screen,
|
||||
@@ -48,7 +50,6 @@ export function Screen() {
|
||||
interests.hashtags,
|
||||
20,
|
||||
pageParam,
|
||||
true,
|
||||
);
|
||||
return events;
|
||||
},
|
||||
@@ -87,13 +88,12 @@ export function Screen() {
|
||||
{data.map((item) => renderItem(item))}
|
||||
</Virtualizer>
|
||||
)}
|
||||
|
||||
{data?.length && hasNextPage ? (
|
||||
<div className="flex h-20 items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={isFetchingNextPage || isFetchingNextPage}
|
||||
disabled={isFetchingNextPage}
|
||||
className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
|
||||
@@ -17,7 +17,10 @@ export const Route = createFileRoute("/group")({
|
||||
},
|
||||
beforeLoad: async ({ search, context }) => {
|
||||
const ark = context.ark;
|
||||
const groups = await ark.get_nstore(`lume_group_${search.label}`);
|
||||
const groups = (await ark.get_nstore(
|
||||
`lume_group_${search.label}`,
|
||||
)) as string[];
|
||||
const settings = await ark.get_settings();
|
||||
|
||||
if (!groups) {
|
||||
throw redirect({
|
||||
@@ -31,6 +34,7 @@ export const Route = createFileRoute("/group")({
|
||||
|
||||
return {
|
||||
groups,
|
||||
settings,
|
||||
};
|
||||
},
|
||||
component: Screen,
|
||||
@@ -38,13 +42,13 @@ export const Route = createFileRoute("/group")({
|
||||
|
||||
export function Screen() {
|
||||
const { label, name, account } = Route.useSearch();
|
||||
const { ark } = Route.useRouteContext();
|
||||
const { ark, groups } = Route.useRouteContext();
|
||||
const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: [name, account],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({ pageParam }: { pageParam: number }) => {
|
||||
const events = await ark.get_events(20, pageParam);
|
||||
const events = await ark.get_events(20, pageParam, groups);
|
||||
return events;
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
|
||||
@@ -7,7 +7,6 @@ import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const Route = createFileRoute("/interests")({
|
||||
component: Screen,
|
||||
validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
|
||||
return {
|
||||
account: search.account,
|
||||
@@ -15,6 +14,7 @@ export const Route = createFileRoute("/interests")({
|
||||
name: search.name,
|
||||
};
|
||||
},
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
|
||||
@@ -6,8 +6,16 @@ export const Route = createFileRoute("/store/community")({
|
||||
|
||||
function Screen() {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 p-3">
|
||||
<p>Coming Soon</p>
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 p-3">
|
||||
<div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full">
|
||||
<div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h1 className="font-semibold text-lg">Coming Soon</h1>
|
||||
<p className="text-sm text-neutral-700 dark:text-neutral-300 leading-tight">
|
||||
Enhance your experience <br /> by adding column shared by community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user