mirror of
https://github.com/idanoo/autobrr
synced 2025-07-25 17:59:14 +00:00
fix(web): TS typings and always active navbar link (#470)
* fix TS typings since `yarn build` was failing on my machine. * fixed the dashboard navlink (it was always active on my end)
This commit is contained in:
parent
8a782a5cab
commit
553320bf1d
5 changed files with 60 additions and 35 deletions
|
@ -4,6 +4,7 @@ import { classNames, get } from "../../utils";
|
||||||
import { useToggle } from "../../hooks/hooks";
|
import { useToggle } from "../../hooks/hooks";
|
||||||
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
|
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
|
||||||
import { ErrorMessage } from "@hookform/error-message";
|
import { ErrorMessage } from "@hookform/error-message";
|
||||||
|
import type { FieldValues } from "react-hook-form";
|
||||||
|
|
||||||
export type FormErrorMessageProps = {
|
export type FormErrorMessageProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -81,7 +82,7 @@ export const Input: FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
|
||||||
export type FormInputProps<TFormValues> = {
|
export type FormInputProps<TFormValues> = {
|
||||||
name: Path<TFormValues>;
|
name: Path<TFormValues>;
|
||||||
rules?: RegisterOptions;
|
rules?: RegisterOptions;
|
||||||
register?: UseFormRegister<TFormValues>;
|
register?: UseFormRegister<TFormValues & FieldValues>;
|
||||||
errors?: Partial<DeepMap<TFormValues, FieldError>>;
|
errors?: Partial<DeepMap<TFormValues, FieldError>>;
|
||||||
} & Omit<InputProps, "name">;
|
} & Omit<InputProps, "name">;
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React, {Fragment, useRef} from "react";
|
||||||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
import { Form, Formik } from "formik";
|
import { Form, Formik } from "formik";
|
||||||
|
import type { FormikValues } from "formik";
|
||||||
import DEBUG from "../debug";
|
import DEBUG from "../debug";
|
||||||
import { useToggle } from "../../hooks/hooks";
|
import { useToggle } from "../../hooks/hooks";
|
||||||
import { DeleteModal } from "../modals";
|
import { DeleteModal } from "../modals";
|
||||||
|
@ -9,7 +10,7 @@ import {classNames} from "../../utils";
|
||||||
|
|
||||||
interface SlideOverProps<DataType> {
|
interface SlideOverProps<DataType> {
|
||||||
title: string;
|
title: string;
|
||||||
initialValues: DataType;
|
initialValues: FormikValues & DataType;
|
||||||
validate?: (values: DataType) => void;
|
validate?: (values: DataType) => void;
|
||||||
onSubmit: (values?: DataType) => void;
|
onSubmit: (values?: DataType) => void;
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
|
|
|
@ -16,6 +16,17 @@ interface UpdateProps {
|
||||||
feed: Feed;
|
feed: Feed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface InitialValues {
|
||||||
|
id: number;
|
||||||
|
indexer: string;
|
||||||
|
enabled: boolean;
|
||||||
|
type: FeedType;
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
api_key: string;
|
||||||
|
interval: number;
|
||||||
|
}
|
||||||
|
|
||||||
export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
|
export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
|
||||||
const [isTesting, setIsTesting] = useState(false);
|
const [isTesting, setIsTesting] = useState(false);
|
||||||
const [isTestSuccessful, setIsSuccessfulTest] = useState(false);
|
const [isTestSuccessful, setIsSuccessfulTest] = useState(false);
|
||||||
|
@ -46,7 +57,6 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
const deleteAction = () => {
|
const deleteAction = () => {
|
||||||
deleteMutation.mutate(feed.id);
|
deleteMutation.mutate(feed.id);
|
||||||
};
|
};
|
||||||
|
@ -85,7 +95,7 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
|
||||||
testFeedMutation.mutate(data as Feed);
|
testFeedMutation.mutate(data as Feed);
|
||||||
};
|
};
|
||||||
|
|
||||||
const initialValues = {
|
const initialValues: InitialValues = {
|
||||||
id: feed.id,
|
id: feed.id,
|
||||||
indexer: feed.indexer,
|
indexer: feed.indexer,
|
||||||
enabled: feed.enabled,
|
enabled: feed.enabled,
|
||||||
|
@ -97,7 +107,7 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SlideOver
|
<SlideOver<InitialValues>
|
||||||
type="UPDATE"
|
type="UPDATE"
|
||||||
title="Feed"
|
title="Feed"
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
|
|
|
@ -394,6 +394,18 @@ interface UpdateProps {
|
||||||
notification: Notification;
|
notification: Notification;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface InitialValues {
|
||||||
|
id: number;
|
||||||
|
enabled: boolean;
|
||||||
|
type: NotificationType;
|
||||||
|
name: string;
|
||||||
|
webhook?: string;
|
||||||
|
token?: string;
|
||||||
|
api_key?: string;
|
||||||
|
channel?: string;
|
||||||
|
events: NotificationEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateProps) {
|
export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateProps) {
|
||||||
const mutation = useMutation(
|
const mutation = useMutation(
|
||||||
(notification: Notification) => APIClient.notifications.update(notification),
|
(notification: Notification) => APIClient.notifications.update(notification),
|
||||||
|
@ -437,7 +449,7 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
|
||||||
testMutation.mutate(data as Notification);
|
testMutation.mutate(data as Notification);
|
||||||
};
|
};
|
||||||
|
|
||||||
const initialValues = {
|
const initialValues: InitialValues = {
|
||||||
id: notification.id,
|
id: notification.id,
|
||||||
enabled: notification.enabled,
|
enabled: notification.enabled,
|
||||||
type: notification.type,
|
type: notification.type,
|
||||||
|
@ -450,7 +462,7 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SlideOver
|
<SlideOver<InitialValues>
|
||||||
type="UPDATE"
|
type="UPDATE"
|
||||||
title="Notification"
|
title="Notification"
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
|
|
|
@ -62,6 +62,7 @@ export default function Base() {
|
||||||
"transition-colors duration-200",
|
"transition-colors duration-200",
|
||||||
isActive ? "text-black dark:text-gray-50 font-bold" : "text-gray-600 dark:text-gray-500"
|
isActive ? "text-black dark:text-gray-50 font-bold" : "text-gray-600 dark:text-gray-500"
|
||||||
)}
|
)}
|
||||||
|
end={item.path === "/"}
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue