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

Fix eslint warnings

Browse Source
This commit is contained in:
Zoe Roux 2023-09-11 13:22:24 +02:00
parent c3816b709c
commit ec2b0e0f78
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
front/packages/ui/src/fetch-infinite.web.tsx
View File

@ -20,7 +20,7 @@
import { Page, QueryIdentifier, useInfiniteFetch } from "@kyoo/models"; import { Page, QueryIdentifier, useInfiniteFetch } from "@kyoo/models";
import { HR } from "@kyoo/primitives"; import { HR } from "@kyoo/primitives";
import { ComponentType, Fragment, isValidElement, ReactElement, useEffect, useRef } from "react"; import { ComponentType, Fragment, isValidElement, ReactElement, useCallback, useEffect, useRef } from "react";
import { Stylable, useYoshiki } from "yoshiki"; import { Stylable, useYoshiki } from "yoshiki";
import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch"; import { EmptyView, ErrorView, Layout, WithLoading } from "./fetch";
@ -42,18 +42,12 @@ const InfiniteScroll = <Props,>({
hasMore: boolean; hasMore: boolean;
isFetching: boolean; isFetching: boolean;
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement; Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props headerProps?: Props;
} & Stylable) => { } & Stylable) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const { css } = useYoshiki(); const { css } = useYoshiki();
// Automatically trigger a scroll check on start and after a fetch end in case the user is already const onScroll = useCallback(() => {
// at the bottom of the page or if there is no scroll bar (ultrawide or something like that)
useEffect(() => {
onScroll();
}, [isFetching]);
const onScroll = () => {
if (!ref.current || !hasMore || isFetching) return; if (!ref.current || !hasMore || isFetching) return;
const scroll = const scroll =
layout === "horizontal" layout === "horizontal"
@ -62,9 +56,16 @@ const InfiniteScroll = <Props,>({
const offset = layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight; const offset = layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight;
if (scroll <= offset * 1.2) loadMore(); if (scroll <= offset * 1.2) loadMore();
}; }, [hasMore, isFetching, layout, loadMore]);
const scrollProps = { ref, onScroll }; const scrollProps = { ref, onScroll };
// Automatically trigger a scroll check on start and after a fetch end in case the user is already
// at the bottom of the page or if there is no scroll bar (ultrawide or something like that)
useEffect(() => {
onScroll();
}, [isFetching, onScroll]);
const list = (props: object) => ( const list = (props: object) => (
<div <div
{...css( {...css(
@ -98,8 +99,13 @@ const InfiniteScroll = <Props,>({
); );
if (!Header) return list({ ...scrollProps, ...props }); if (!Header) return list({ ...scrollProps, ...props });
// @ts-ignore if (!isValidElement(Header))
if (!isValidElement(Header)) return <Header {...scrollProps} {...headerProps}>{list(props)}</Header>; return (
// @ts-ignore
<Header {...scrollProps} {...headerProps}>
{list(props)}
</Header>
);
return ( return (
<> <>
{Header} {Header}
@ -134,7 +140,7 @@ export const InfiniteFetch = <Data, _, HeaderProps>({
empty?: string | JSX.Element; empty?: string | JSX.Element;
divider?: boolean | ComponentType; divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement; Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
headerProps: HeaderProps, headerProps: HeaderProps;
getItemType?: (item: Data, index: number) => string | number; getItemType?: (item: Data, index: number) => string | number;
}): JSX.Element | null => { }): JSX.Element | null => {
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch."); if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
@ -182,7 +188,7 @@ export const InfiniteFetch = <Data, _, HeaderProps>({
const addHeader = <Props,>( const addHeader = <Props,>(
Header: ComponentType<{ children: JSX.Element } & Props> | ReactElement | undefined, Header: ComponentType<{ children: JSX.Element } & Props> | ReactElement | undefined,
children: ReactElement, children: ReactElement,
headerProps?: Props headerProps?: Props,
) => { ) => {
if (!Header) return children; if (!Header) return children;
return !isValidElement(Header) ? ( return !isValidElement(Header) ? (

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

@ -68,7 +68,7 @@ const SearchBar = forwardRef<TextInput, Stylable>(function SearchBar(props, ref)
const action = window.location.pathname.startsWith("/search") ? replace : push; const action = window.location.pathname.startsWith("/search") ? replace : push;
if (query) action(`/search?q=${encodeURI(query)}`, undefined, { shallow: true }); if (query) action(`/search?q=${encodeURI(query)}`, undefined, { shallow: true });
else back(); else back();
}, [query]); }, [query, push, replace, back]);
return ( return (
<Input <Input