idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 02:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: add eslint and cleanup (#118)

Browse source 
* refactor: modified existing react imports to conform with the recommended approach of not using the default export directly, since it will be deprecated in one of the future releases. see https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more info. note: react types don't require importing of react.
refactor: cleaned up some of the imports

* feat: added eslint and fixed all the errors/warning. eslint can now be invoked by running "npm run lint".
chore: updated .gitignore not to include unnecessary artefacts.
refactor: re-organized some of the imports.

* refactor: converted remaining few typed functional components to proper prop argument structure.

* fix: fixed small react-query invalidation bug for the FilterDetails component.

Co-authored-by: anonymous <anonymous>
This commit is contained in:
stacksmash76 2022-02-08 18:10:47 +01:00 • committed by GitHub
parent d1f08903d1
commit fe06363530
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 463 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

9
web/src/components/inputs/common.tsx
View file

@ -1,4 +1,3 @@
import React from "react";
import { Field } from "formik";
interface ErrorFieldProps {
@ -7,7 +6,7 @@ interface ErrorFieldProps {
subscribe?: any;
}
const ErrorField: React.FC<ErrorFieldProps> = ({ name, classNames }) => (
const ErrorField = ({ name, classNames }: ErrorFieldProps) => (
<Field name={name} subscribe={{ touched: true, error: true }}>
{({ meta: { touched, error } }: any) =>
touched && error ? <span className={classNames}>{error}</span> : null
@ -21,7 +20,11 @@ interface CheckboxFieldProps {
sublabel?: string;
}
const CheckboxField: React.FC<CheckboxFieldProps> = ({ name, label, sublabel }) => (
const CheckboxField = ({
name,
label,
sublabel
}: CheckboxFieldProps) => (
<div className="relative flex items-start">
<div className="flex items-center h-5">
<Field

34
web/src/components/inputs/input.tsx
View file

@ -1,4 +1,3 @@
import React from "react";
import { Field } from "formik";
import { classNames } from "../../utils";
import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
@ -11,11 +10,16 @@ interface TextFieldProps {
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
className?: string;
autoComplete?: string;
}
const TextField: React.FC<TextFieldProps> = ({ name, label, placeholder, columns, className, autoComplete }) => (
export const TextField = ({
name,
label,
placeholder,
columns,
autoComplete
}: TextFieldProps) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
@ -55,14 +59,22 @@ interface PasswordFieldProps {
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
className?: string;
autoComplete?: string;
defaultValue?: string;
help?: string;
required?: boolean;
}
const PasswordField: React.FC<PasswordFieldProps> = ({ name, label, placeholder, defaultValue, columns, className, autoComplete, help, required }) => {
export const PasswordField = ({
name,
label,
placeholder,
defaultValue,
columns,
autoComplete,
help,
required
}: PasswordFieldProps) => {
const [isVisible, toggleVisibility] = useToggle(false)
return (
@ -113,17 +125,13 @@ interface NumberFieldProps {
name: string;
label?: string;
placeholder?: string;
className?: string;
required?: boolean;
}
const NumberField: React.FC<NumberFieldProps> = ({
export const NumberField = ({
name,
label,
placeholder,
required,
className,
}) => (
placeholder
}: NumberFieldProps) => (
<div className="col-span-12 sm:col-span-6">
<label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
{label}
@ -155,5 +163,3 @@ const NumberField: React.FC<NumberFieldProps> = ({
</Field>
</div>
);
export { TextField, PasswordField, NumberField };

42
web/src/components/inputs/input_wide.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { Field, FieldProps } from "formik";
import { Field } from "formik";
import type { FieldProps } from "formik";
import { classNames } from "../../utils";
import { useToggle } from "../../hooks/hooks";
import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
@ -12,12 +12,19 @@ interface TextFieldWideProps {
help?: string;
placeholder?: string;
defaultValue?: string;
className?: string;
required?: boolean;
hidden?: boolean;
}
const TextFieldWide: React.FC<TextFieldWideProps> = ({ name, label, help, placeholder, defaultValue, required, hidden, className }) => (
export const TextFieldWide = ({
name,
label,
help,
placeholder,
defaultValue,
required,
hidden
}: TextFieldWideProps) => (
<div hidden={hidden} className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
@ -56,7 +63,14 @@ interface PasswordFieldWideProps {
required?: boolean;
}
function PasswordFieldWide({ name, label, placeholder, defaultValue, help, required }: PasswordFieldWideProps) {
export const PasswordFieldWide = ({
name,
label,
placeholder,
defaultValue,
help,
required
}: PasswordFieldWideProps) => {
const [isVisible, toggleVisibility] = useToggle(false)
return (
@ -103,21 +117,17 @@ interface NumberFieldWideProps {
help?: string;
placeholder?: string;
defaultValue?: number;
className?: string;
required?: boolean;
hidden?: boolean;
}
const NumberFieldWide: React.FC<NumberFieldWideProps> = ({
export const NumberFieldWide = ({
name,
label,
placeholder,
help,
defaultValue,
required,
hidden,
className,
}) => (
required
}: NumberFieldWideProps) => (
<div className="px-4 space-y-1 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<div>
<label
@ -165,7 +175,12 @@ interface SwitchGroupWideProps {
className?: string;
}
const SwitchGroupWide: React.FC<SwitchGroupWideProps> = ({ name, label, description, defaultValue }) => (
export const SwitchGroupWide = ({
name,
label,
description,
defaultValue
}: SwitchGroupWideProps) => (
<ul className="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
@ -214,4 +229,3 @@ const SwitchGroupWide: React.FC<SwitchGroupWideProps> = ({ name, label, descript
</ul>
)
export { NumberFieldWide, TextFieldWide, PasswordFieldWide, SwitchGroupWide };

43
web/src/components/inputs/select.tsx
View file

@ -9,17 +9,15 @@ interface MultiSelectProps {
label?: string;
options?: [] | any;
name: string;
className?: string;
columns?: COL_WIDTHS;
}
const MultiSelect: React.FC<MultiSelectProps> = ({
export const MultiSelect = ({
name,
label,
options,
className,
columns,
}) => (
}: MultiSelectProps) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
@ -44,9 +42,8 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
labelledBy={name}
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value === item))}
onChange={(values: any) => {
let am = values && values.map((i: any) => i.value)
setFieldValue(field.name, am)
const am = values && values.map((i: any) => i.value);
setFieldValue(field.name, am);
}}
className="dark:bg-gray-700 dark"
/>
@ -55,13 +52,12 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
</div>
);
const IndexerMultiSelect: React.FC<MultiSelectProps> = ({
export const IndexerMultiSelect = ({
name,
label,
options,
className,
columns,
}) => (
}: MultiSelectProps) => (
<div
className={classNames(
columns ? `col-span-${columns}` : "col-span-12"
@ -86,9 +82,8 @@ const IndexerMultiSelect: React.FC<MultiSelectProps> = ({
labelledBy={name}
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value?.id === item.id))}
onChange={(values: any) => {
let am = values && values.map((i: any) => i.value)
setFieldValue(field.name, am)
const am = values && values.map((i: any) => i.value);
setFieldValue(field.name, am);
}}
className="dark:bg-gray-700 dark"
/>
@ -103,8 +98,10 @@ interface DownloadClientSelectProps {
clients: DownloadClient[];
}
export default function DownloadClientSelect({
name, action, clients,
export function DownloadClientSelect({
name,
action,
clients
}: DownloadClientSelectProps) {
return (
<div className="col-span-6 sm:col-span-6">
@ -212,7 +209,12 @@ interface SelectFieldProps {
options: SelectFieldOption[];
}
function Select({ name, label, optionDefaultText, options }: SelectFieldProps) {
export const Select = ({
name,
label,
optionDefaultText,
options
}: SelectFieldProps) => {
return (
<div className="col-span-6">
<Field name={name} type="select">
@ -309,7 +311,12 @@ function Select({ name, label, optionDefaultText, options }: SelectFieldProps) {
);
}
function SelectWide({ name, label, optionDefaultText, options }: SelectFieldProps) {
export const SelectWide = ({
name,
label,
optionDefaultText,
options
}: SelectFieldProps) => {
return (
<div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
@ -409,5 +416,3 @@ function SelectWide({ name, label, optionDefaultText, options }: SelectFieldProp
</div>
);
}
export { MultiSelect, Select, SelectWide, DownloadClientSelect, IndexerMultiSelect }

27
web/src/components/inputs/switch.tsx
View file

@ -1,6 +1,12 @@
import React, { InputHTMLAttributes } from 'react'
import { Switch as HeadlessSwitch } from '@headlessui/react'
import { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikValues, Field } from 'formik'
import { Field } from "formik";
import type {
FieldInputProps,
FieldMetaProps,
FieldProps,
FormikProps,
FormikValues
} from "formik";
import { Switch as HeadlessSwitch } from "@headlessui/react";
import { classNames } from "../../utils";
type SwitchProps<V = any> = {
@ -13,14 +19,14 @@ type SwitchProps<V = any> = {
meta?: FieldMetaProps<V>
}
export const Switch: React.FC<SwitchProps> = ({
export const Switch = ({
label,
checked: $checked,
disabled = false,
onChange: $onChange,
field,
form,
}) => {
}: SwitchProps) => {
const checked = field?.checked ?? $checked
return (
@ -55,19 +61,22 @@ export const Switch: React.FC<SwitchProps> = ({
)
}
export type SwitchFormikProps = SwitchProps & FieldProps & InputHTMLAttributes<HTMLInputElement>
export type SwitchFormikProps = SwitchProps & FieldProps & React.InputHTMLAttributes<HTMLInputElement>;
export const SwitchFormik: React.FC<SwitchProps> = args => <Switch {...args} />
export const SwitchFormik = (props: SwitchProps) => <Switch {...props} />
interface SwitchGroupProps {
name: string;
label?: string;
description?: string;
defaultValue?: boolean;
className?: string;
}
const SwitchGroup: React.FC<SwitchGroupProps> = ({ name, label, description, defaultValue }) => (
const SwitchGroup = ({
name,
label,
description
}: SwitchGroupProps) => (
<ul className="mt-2 divide-y divide-gray-200">
<HeadlessSwitch.Group as="li" className="py-4 flex items-center justify-between">
{label && <div className="flex flex-col">