shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-17 04:46:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

replaced all react-query usages with new hooks + removed react-query

Browse Source
This commit is contained in:
dswbx
2024-12-13 17:36:09 +01:00
parent 8c91dff94d
commit 1631bbb754
23 changed files with 148 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/src/ui/routes/auth/auth.index.tsx
View File

@@ -1,25 +1,19 @@
import { useClient } from "ui/client";
import { useApiQuery } from "ui/client";
import { useBknd } from "ui/client/bknd";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { ButtonLink, type ButtonLinkProps } from "ui/components/buttons/Button";
import { Alert } from "ui/components/display/Alert";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { routes } from "ui/lib/routes";
import {
Button,
ButtonLink,
type ButtonLinkProps,
type ButtonProps
} from "../../components/buttons/Button";
import * as AppShell from "../../layouts/AppShell/AppShell";
export function AuthIndex() {
const client = useClient();
const { app } = useBknd();
const {
config: { roles, strategies, entity_name, enabled }
} = useBkndAuth();
const users_entity = entity_name;
const query = client.query().data.entity("users").count();
const usersTotal = query.data?.body.count ?? 0;
const $q = useApiQuery((api) => api.data.count(users_entity));
const usersTotal = $q.data?.count ?? 0;
const rolesTotal = Object.keys(roles ?? {}).length ?? 0;
const strategiesTotal = Object.keys(strategies ?? {}).length ?? 0;

25
app/src/ui/routes/data/data.$entity.$id.tsx
View File

@@ -1,8 +1,8 @@
import { ucFirst } from "core/utils";
import type { Entity, EntityData, EntityRelation } from "data";
import type { Entity, EntityData, EntityRelation, RepoQuery } from "data";
import { Fragment, useState } from "react";
import { TbDots } from "react-icons/tb";
import { useClient, useEntityQuery } from "ui/client";
import { useApiQuery, useEntityQuery } from "ui/client";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
@@ -232,18 +232,17 @@ function EntityDetailInner({
relation: EntityRelation;
}) {
const other = relation.other(entity);
const client = useClient();
const [navigate] = useNavigate();
const search = {
const search: Partial<RepoQuery> = {
select: other.entity.getSelect(undefined, "table"),
limit: 10,
offset: 0
};
const query = client
.query()
.data.entity(entity.name)
.readManyByReference(id, other.reference, other.entity.name, search);
// @todo: add custom key for invalidation
const $q = useApiQuery((api) =>
api.data.readManyByReference(entity.name, id, other.reference, search)
);
function handleClickRow(row: Record<string, any>) {
navigate(routes.data.entity.edit(other.entity.name, row.id));
@@ -262,12 +261,11 @@ function EntityDetailInner({
}
}
if (query.isPending) {
if (!$q.data) {
return null;
}
const isUpdating = query.isInitialLoading || query.isFetching;
//console.log("query", query, search.select);
const isUpdating = $q.isValidating || $q.isLoading;
return (
<div
@@ -276,13 +274,12 @@ function EntityDetailInner({
>
<EntityTable2
select={search.select}
data={query.data?.data ?? []}
data={$q.data ?? null}
entity={other.entity}
onClickRow={handleClickRow}
onClickNew={handleClickNew}
page={1}
/* @ts-ignore */
total={query.data?.body?.meta?.count ?? 1}
total={$q.data?.body?.meta?.count ?? 1}
/*onClickPage={handleClickPage}*/
/>
</div>

4
app/src/ui/routes/data/data.$entity.create.tsx
View File

@@ -1,9 +1,9 @@
import { Type } from "core/utils";
import type { EntityData } from "data";
import { useState } from "react";
import { useEntityMutate, useEntityQuery } from "ui/client";
import { useEntityMutate } from "ui/client";
import { useBknd } from "ui/client/BkndProvider";
import { Button } from "ui/components/buttons/Button";
import { type EntityData, useEntity } from "ui/container";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import { useSearch } from "ui/hooks/use-search";
import * as AppShell from "ui/layouts/AppShell/AppShell";

41
app/src/ui/routes/media/_media.root.tsx
View File

@@ -1,16 +1,17 @@
import { IconPhoto } from "@tabler/icons-react";
import type { MediaFieldSchema } from "modules";
import { TbSettings } from "react-icons/tb";
import { Dropzone } from "ui/modules/media/components/dropzone/Dropzone";
import { useApi, useBaseUrl, useEntityQuery } from "ui/client";
import { useBknd } from "ui/client/BkndProvider";
import { IconButton } from "ui/components/buttons/IconButton";
import { Empty } from "ui/components/display/Empty";
import { Link } from "ui/components/wouter/Link";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import { useEvent } from "ui/hooks/use-event";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { Dropzone, type FileState } from "ui/modules/media/components/dropzone/Dropzone";
import { mediaItemsToFileStates } from "ui/modules/media/helper";
import { useLocation } from "wouter";
import { useClient } from "../../client";
import { useBknd } from "../../client/BkndProvider";
import { IconButton } from "../../components/buttons/IconButton";
import { Empty } from "../../components/display/Empty";
import { Link } from "../../components/wouter/Link";
import { useBrowserTitle } from "../../hooks/use-browser-title";
import { useEvent } from "../../hooks/use-event";
import * as AppShell from "../../layouts/AppShell/AppShell";
export function MediaRoot({ children }) {
const { app, config } = useBknd();
@@ -62,32 +63,30 @@ export function MediaRoot({ children }) {
// @todo: add infinite load
export function MediaEmpty() {
useBrowserTitle(["Media"]);
const client = useClient();
const query = client.media().list({ limit: 50 });
const baseUrl = useBaseUrl();
const api = useApi();
const $q = useEntityQuery("media", undefined, { limit: 50 });
const getUploadInfo = useEvent((file) => {
const api = client.media().api();
return {
url: api.getFileUploadUrl(file),
headers: api.getUploadHeaders(),
url: api.media.getFileUploadUrl(file),
headers: api.media.getUploadHeaders(),
method: "POST"
};
});
const handleDelete = useEvent(async (file) => {
return await client.media().deleteFile(file);
const handleDelete = useEvent(async (file: FileState) => {
return api.media.deleteFile(file.path);
});
const media = query.data?.data || [];
const initialItems = mediaItemsToFileStates(media, { baseUrl: client.baseUrl });
console.log("initialItems", initialItems);
const media = ($q.data || []) as MediaFieldSchema[];
const initialItems = mediaItemsToFileStates(media, { baseUrl });
return (
<AppShell.Scrollable>
<div className="flex flex-1 p-3">
<Dropzone
key={query.isSuccess ? "loaded" : "initial"}
key={$q.isLoading ? "loaded" : "initial"}
getUploadInfo={getUploadInfo}
handleDelete={handleDelete}
autoUpload

15
app/src/ui/routes/root.tsx
View File

@@ -1,20 +1,11 @@
import { IconHome } from "@tabler/icons-react";
import { Suspense, useEffect } from "react";
import { useEffect } from "react";
import { useAuth } from "ui/client";
import { Empty } from "../components/display/Empty";
import { useBrowserTitle } from "../hooks/use-browser-title";
import * as AppShell from "../layouts/AppShell/AppShell";
import { useNavigate } from "../lib/routes";
// @todo: package is still required somehow
const ReactQueryDevtools = (p: any) => null; /*!isDebug()
? () => null // Render nothing in production
: lazy(() =>
import("@tanstack/react-query-devtools").then((res) => ({
default: res.ReactQueryDevtools,
})),
);*/
export const Root = ({ children }) => {
const { verify } = useAuth();
@@ -26,10 +17,6 @@ export const Root = ({ children }) => {
<AppShell.Root>
<AppShell.Header />
<AppShell.Content>{children}</AppShell.Content>
<Suspense>
<ReactQueryDevtools buttonPosition="bottom-left" />
</Suspense>
</AppShell.Root>
);
};