Fix a few Mantine UI lint errors

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-04-18 15:04:02 +02:00
parent 54dc1455d7
commit a057601771
3 changed files with 18 additions and 11 deletions

View file

@ -1,5 +1,5 @@
import { ComponentType, useEffect, useState } from 'react'; import { ComponentType, useEffect, useState } from "react";
import InfiniteScroll from 'react-infinite-scroll-component'; import InfiniteScroll from "react-infinite-scroll-component";
const initialNumberOfItemsDisplayed = 50; const initialNumberOfItemsDisplayed = 50;
@ -12,11 +12,15 @@ interface CustomInfiniteScrollProps<T> {
child: ComponentType<InfiniteScrollItemsProps<T>>; child: ComponentType<InfiniteScrollItemsProps<T>>;
} }
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types const CustomInfiniteScroll = <T,>({
const CustomInfiniteScroll = <T,>({ allItems, child }: CustomInfiniteScrollProps<T>) => { allItems,
child,
}: CustomInfiniteScrollProps<T>) => {
const [items, setItems] = useState<T[]>(allItems.slice(0, 50)); const [items, setItems] = useState<T[]>(allItems.slice(0, 50));
const [index, setIndex] = useState<number>(initialNumberOfItemsDisplayed); const [index, setIndex] = useState<number>(initialNumberOfItemsDisplayed);
const [hasMore, setHasMore] = useState<boolean>(allItems.length > initialNumberOfItemsDisplayed); const [hasMore, setHasMore] = useState<boolean>(
allItems.length > initialNumberOfItemsDisplayed
);
const Child = child; const Child = child;
useEffect(() => { useEffect(() => {
@ -40,7 +44,7 @@ const CustomInfiniteScroll = <T,>({ allItems, child }: CustomInfiniteScrollProps
hasMore={hasMore} hasMore={hasMore}
loader={<h4>loading...</h4>} loader={<h4>loading...</h4>}
dataLength={items.length} dataLength={items.length}
height={items.length > 25 ? '75vh' : ''} height={items.length > 25 ? "75vh" : ""}
> >
<Child items={items} /> <Child items={items} />
</InfiniteScroll> </InfiniteScroll>

View file

@ -7,22 +7,22 @@ const statusConfig: Record<
string, string,
{ {
title?: string; title?: string;
formatValue?: (v: any) => string; formatValue?: (v: string | boolean) => string;
} }
> = { > = {
startTime: { startTime: {
title: "Start time", title: "Start time",
formatValue: (v: string) => formatValue: (v: string | boolean) =>
formatTimestamp(new Date(v).valueOf() / 1000, false), // TODO: Set useLocalTime parameter correctly. formatTimestamp(new Date(v as string).valueOf() / 1000, false), // TODO: Set useLocalTime parameter correctly.
}, },
CWD: { title: "Working directory" }, CWD: { title: "Working directory" },
reloadConfigSuccess: { reloadConfigSuccess: {
title: "Configuration reload", title: "Configuration reload",
formatValue: (v: boolean) => (v ? "Successful" : "Unsuccessful"), formatValue: (v: string | boolean) => (v ? "Successful" : "Unsuccessful"),
}, },
lastConfigTime: { lastConfigTime: {
title: "Last successful configuration reload", title: "Last successful configuration reload",
formatValue: (v: string) => new Date(v).toUTCString(), formatValue: (v: string | boolean) => new Date(v as string).toUTCString(),
}, },
corruptionCount: { title: "WAL corruptions" }, corruptionCount: { title: "WAL corruptions" },
goroutineCount: { title: "Goroutines" }, goroutineCount: { title: "Goroutines" },

View file

@ -166,6 +166,8 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
} }
}, [formatResult, formatError]); }, [formatResult, formatError]);
// This is just a placeholder until query history is implemented, so disable the linter warning.
// eslint-disable-next-line react-hooks/exhaustive-deps
const queryHistory = [] as string[]; const queryHistory = [] as string[];
// (Re)initialize editor based on settings / setting changes. // (Re)initialize editor based on settings / setting changes.
@ -191,6 +193,7 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
<Group align="flex-start" wrap="nowrap" gap="xs"> <Group align="flex-start" wrap="nowrap" gap="xs">
{/* TODO: For wrapped long lines, the input grows in width more and more, the {/* TODO: For wrapped long lines, the input grows in width more and more, the
longer the line is. Figure out why and fix it. */} longer the line is. Figure out why and fix it. */}
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
<InputBase<any> <InputBase<any>
leftSection={ leftSection={
isFormatting ? <Loader size="xs" color="gray.5" /> : <IconTerminal /> isFormatting ? <Loader size="xs" color="gray.5" /> : <IconTerminal />