Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Display a login button when the user is loggedout

Browse Source
This commit is contained in:
Zoe Roux 2023-03-10 18:30:09 +09:00
parent e3be74d519
commit 98a0466761
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
front/packages/ui/src/fetch.tsx
View File

@ -29,10 +29,15 @@ export type WithLoading<Item> =
| (Item & { isLoading: false })
| (Partial<Item> & { isLoading: true });
// We keep a Partial<Item> on the error value to allow destructuring.
export type WithError<Item> =
| (Item & { isError: false; error: undefined })
| (Partial<Item> & { isError: true; error: KyooErrors });
const isPage = <T = unknown,>(obj: unknown): obj is Page<T> =>
(typeof obj === "object" && obj && "items" in obj) || false;
export const Fetch = <Data,>({
export const FetchNE = <Data,>({
query,
placeholderCount = 1,
children,
@ -40,13 +45,16 @@ export const Fetch = <Data,>({
query: QueryIdentifier<Data>;
placeholderCount?: number;
children: (
item: Data extends Page<infer Item> ? WithLoading<Item> : WithLoading<Data>,
item: Data extends Page<infer Item>
? WithError<WithLoading<Item>>
: WithError<WithLoading<Data>>,
i: number,
) => JSX.Element | null;
}): JSX.Element | null => {
const { data, error } = useFetch(query);
if (error) return <ErrorView error={error} />;
// @ts-ignore
if (error) return children({ isError: true, error }, 0);
if (!data) {
const placeholders = [...Array(placeholderCount)].map((_, i) =>
children({ isLoading: true } as any, i),
@ -58,6 +66,27 @@ export const Fetch = <Data,>({
return <>{data.items.map((item, i) => children({ ...item, isLoading: false } as any, i))}</>;
};
export const Fetch = <Data,>({
children,
...params
}: {
query: QueryIdentifier<Data>;
placeholderCount?: number;
children: (
item: Data extends Page<infer Item> ? WithLoading<Item> : WithLoading<Data>,
i: number,
) => JSX.Element | null;
}): JSX.Element | null => {
return (
<FetchNE {...params}>
{({ isError, error, ...item }, i) =>
// @ts-ignore
isError ? <ErrorView error={error} /> : children(item, i)
}
</FetchNE>
);
};
export const ErrorView = ({ error }: { error: KyooErrors }) => {
const { css } = useYoshiki();

6
front/packages/ui/src/navbar/index.tsx
View File

@ -37,7 +37,7 @@ import { useRouter } from "solito/router";
import { rem, Stylable, useYoshiki } from "yoshiki/native";
import Menu from "@material-symbols/svg-400/rounded/menu-fill.svg";
import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
import { Fetch } from "../fetch";
import { Fetch, FetchNE } from "../fetch";
import { KyooLongLogo } from "./icon";
import { forwardRef, useRef, useState } from "react";
@ -93,7 +93,7 @@ export const NavbarProfile = () => {
// TODO: show logged in user.
return (
<Fetch query={MeQuery}>
<FetchNE query={MeQuery}>
{({ username }) => (
<Link
href="/login"
@ -108,7 +108,7 @@ export const NavbarProfile = () => {
/>
</Link>
)}
</Fetch>
</FetchNE>
);
};
export const NavbarRight = () => {