diff --git a/front/packages/models/src/query.tsx b/front/packages/models/src/query.tsx index 43dc5484..6ae9d280 100644 --- a/front/packages/models/src/query.tsx +++ b/front/packages/models/src/query.tsx @@ -49,7 +49,7 @@ export const queryFn = async ( type?: Parser, token?: string | null, ): Promise> => { - const url = context.apiUrl ? null : getCurrentApiUrl(); + const url = context.apiUrl ?? getCurrentApiUrl(); if (token === undefined && context.authenticated !== false) token = await getToken(); const path = [url] .concat( @@ -166,6 +166,7 @@ export type QueryIdentifier = { placeholderData?: T | (() => T); enabled?: boolean; + apiUrl?: string; options?: Partial[0]>; }; @@ -183,10 +184,10 @@ export type QueryPage = ComponentType< export const toQueryKey = (query: { path: (string | undefined)[]; params?: { [query: string]: boolean | number | string | string[] | undefined }; - options?: { apiUrl?: string }; + apiUrl?: string; }) => { return [ - query.options?.apiUrl, + query.apiUrl, ...query.path, query.params ? "?" + @@ -195,7 +196,7 @@ export const toQueryKey = (query: { .map(([k, v]) => `${k}=${Array.isArray(v) ? v.join(",") : v}`) .join("&") : null, - ]; + ].filter((x) => x); }; export const useFetch = (query: QueryIdentifier) => { diff --git a/front/packages/primitives/src/button.tsx b/front/packages/primitives/src/button.tsx index 32c5e48a..c9dad82a 100644 --- a/front/packages/primitives/src/button.tsx +++ b/front/packages/primitives/src/button.tsx @@ -31,6 +31,7 @@ export const Button = forwardRef(function Button( text, icon, licon, + disabled, as, ...props }: { @@ -38,6 +39,7 @@ export const Button = forwardRef(function Button( text?: string; licon?: ReactElement | Falsy; icon?: ReactElement | Falsy; + disabled?: boolean; as?: ComponentType; } & AsProps, ref: ForwardedRef, @@ -48,22 +50,35 @@ export const Button = forwardRef(function Button( return ( theme.accent, - borderWidth: ts(0.5), - fover: { - self: { bg: (theme: Theme) => theme.accent }, - text: { color: (theme: Theme) => theme.colors.white }, + [ + { + flexGrow: 0, + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + overflow: "hidden", + p: ts(0.5), + borderRadius: ts(5), + borderColor: (theme: Theme) => theme.accent, + borderWidth: ts(0.5), + fover: { + self: { bg: (theme: Theme) => theme.accent }, + text: { color: (theme: Theme) => theme.colors.white }, + }, }, - }, + disabled && { + child: { + self: { + borderColor: (theme) => theme.overlay1, + }, + text: { + color: (theme) => theme.overlay1, + }, + }, + }, + ], props as any, ) as AsProps)} > diff --git a/front/packages/ui/src/login/login.tsx b/front/packages/ui/src/login/login.tsx index 6bcfa4d6..928f4d70 100644 --- a/front/packages/ui/src/login/login.tsx +++ b/front/packages/ui/src/login/login.tsx @@ -44,7 +44,6 @@ export const LoginPage: QueryPage<{ apiUrl?: string; error?: string }> = ({ const { css } = useYoshiki(); useEffect(() => { - console.log("login", apiUrl); if (!apiUrl && Platform.OS !== "web") router.replace("/server-url", undefined, { experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false }, diff --git a/front/packages/ui/src/login/server-url.tsx b/front/packages/ui/src/login/server-url.tsx index 91a52d54..ff0dbb46 100644 --- a/front/packages/ui/src/login/server-url.tsx +++ b/front/packages/ui/src/login/server-url.tsx @@ -19,7 +19,7 @@ */ import { QueryIdentifier, QueryPage, ServerInfo, ServerInfoP, useFetch } from "@kyoo/models"; -import { Button, P, Input, ts, H1, HR, Link } from "@kyoo/primitives"; +import { Button, P, Input, ts, H1, HR, Link, tooltip } from "@kyoo/primitives"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Platform, View } from "react-native"; @@ -42,11 +42,12 @@ const query: QueryIdentifier = { export const ServerUrlPage: QueryPage = () => { const [_apiUrl, setApiUrl] = useState(""); const apiUrl = cleanApiUrl(_apiUrl); - const { data, error } = useFetch({ ...query, options: { apiUrl: apiUrl } }); + const { data, error } = useFetch({ ...query, apiUrl }); const router = useRouter(); const { t } = useTranslation(); const { css } = useYoshiki(); + console.log(data); return ( {

{t("login.server")}

-

theme.colors.red, alignSelf: "center" })}> - {error?.errors[0] ?? " "} -

+ {!data && ( +

theme.colors.red, alignSelf: "center" })}> + {error?.errors[0] ?? t("misc.loading")} +

+ )}