mirror of
https://github.com/idanoo/autobrr
synced 2025-07-26 02:09:13 +00:00
refactor: various frontend improvements (#101)
* Removed recoil and replaced it with react-ridge-state, a 0.4kb alternative. * Added AuthContext and SettingsContext persistent localStorage states. * Fixed tailwind.config.js incorrect key directive. See https://tailwindcss.com/docs/content-configuration#safelisting-classes. * Changed darkMode in Tailwind to "class" and started manually adjusting the theme according to the appropriate media query. * Added possibility of changing the theme manually via the Settings tab. * Changed Releases.tsx behavior to show the UI only when the HTTP request succeeded and there is some data (i.e. table is non-empty). * Changed the table color of screens/filters/list.tsx to a one notch lighter shade of gray for eye-comfort. * Replaced "User" in the header, with the users real username. * Made data version, commit and date fields optional in settings/Application.tsx. * Started working on a RegExp playground, which works fine, but JS won't cooperate and return the right match length. Either way, the RegExp must be implemented on backend and then must be communicated with the frontend. Otherwise a potential for incorrect results exists. * Removed Layout.tsx, since it was redundant. * Created a Checkbox component class for easier and consistent future use. * Rewritten App.tsx, Login.tsx, Logout.tsx to accomodate for new changes. * Fixed previous mistake regarding tailwind.config.js purge key, since we're still using old postcss7 from October last year * Removed package-lock.json from both root and web directories. * Refresh TypeScript configuration to support a types/ directory containing d.ts. The effect of this is that types don't have to be imported anymore and are at all times available globally. This also unifies them into a single source of truth, which will be a lot easier to manage in the future. Note: Only certain interop types have been moved at the time of writing. * Fixed minor Checkbox argument mistake. * fix: remove length from data check * chore: lock files are annoying * fix: select * fix: wip release filtering
This commit is contained in:
stacksmash76
GitHub
parent
53d75ef4d5
commit
20138030e1
40 changed files with 2596 additions and 2453 deletions
|
|
@ -70,32 +70,15 @@ function ActionSettings() {
|
|||
<tr>
|
||||
<td>empty</td>
|
||||
</tr>
|
||||
{/*{downloadclients.map((client, personIdx) => (*/}
|
||||
{/* <tr key={client.name}*/}
|
||||
{/* className={personIdx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>*/}
|
||||
{/* <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{client.name}</td>*/}
|
||||
{/* <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{client.type}</td>*/}
|
||||
{/* <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{client.port}</td>*/}
|
||||
{/* <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{client.enabled}</td>*/}
|
||||
{/* <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">*/}
|
||||
{/* <Link to="edit" className="text-indigo-600 hover:text-indigo-900">*/}
|
||||
{/* Edit*/}
|
||||
{/* </Link>*/}
|
||||
{/* </td>*/}
|
||||
{/* </tr>*/}
|
||||
{/*))}*/}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default ActionSettings;
|
||||
|
|
@ -1,25 +1,22 @@
|
|||
import React, { useState } from "react";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { classNames } from "../../utils";
|
||||
// import {useRecoilState} from "recoil";
|
||||
// import {configState} from "../../state/state";
|
||||
import { useQuery } from "react-query";
|
||||
import { Config } from "../../domain/interfaces";
|
||||
|
||||
import APIClient from "../../api/APIClient";
|
||||
import { Checkbox } from "../../components/Checkbox";
|
||||
import { SettingsContext } from "../../utils/Context";
|
||||
|
||||
|
||||
function ApplicationSettings() {
|
||||
const [isDebug, setIsDebug] = useState(true)
|
||||
// const [config] = useRecoilState(configState)
|
||||
const [settings, setSettings] = SettingsContext.use();
|
||||
|
||||
const { isLoading, data } = useQuery<Config, Error>(['config'], () => APIClient.config.get(),
|
||||
const { isLoading, data } = useQuery<Config, Error>(
|
||||
['config'],
|
||||
() => APIClient.config.get(),
|
||||
{
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
)
|
||||
onError: err => console.log(err)
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<form className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9" action="#" method="POST">
|
||||
|
|
@ -32,7 +29,6 @@ function ApplicationSettings() {
|
|||
</div>
|
||||
|
||||
{!isLoading && data && (
|
||||
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
<div className="col-span-6 sm:col-span-4">
|
||||
<label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
|
||||
|
|
@ -79,69 +75,53 @@ function ApplicationSettings() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-6 pb-6 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div className="pb-6 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div className="px-4 py-5 sm:p-0">
|
||||
<dl className="sm:divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
|
||||
<dt className="font-medium text-gray-500 dark:text-white">Version:</dt>
|
||||
<dd className="mt-1 font-semibold text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">{data?.version}</dd>
|
||||
</div>
|
||||
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6 dark:bg-gray-700">
|
||||
<dt className="font-medium text-gray-500 dark:text-white">Commit:</dt>
|
||||
<dd className="mt-1 font-semibold text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">{data?.commit}</dd>
|
||||
</div>
|
||||
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
|
||||
<dt className="font-medium text-gray-500 dark:text-white">Date:</dt>
|
||||
<dd className="mt-1 font-semibold text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">{data?.date}</dd>
|
||||
</div>
|
||||
{data?.version ? (
|
||||
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
|
||||
<dt className="font-medium text-gray-500 dark:text-white">Version:</dt>
|
||||
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">{data?.version}</dd>
|
||||
</div>
|
||||
) : null}
|
||||
{data?.commit ? (
|
||||
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
|
||||
<dt className="font-medium text-gray-500 dark:text-white">Commit:</dt>
|
||||
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">{data.commit}</dd>
|
||||
</div>
|
||||
) : null}
|
||||
{data?.date ? (
|
||||
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
|
||||
<dt className="font-medium text-gray-500 dark:text-white">Date:</dt>
|
||||
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">{data?.date}</dd>
|
||||
</div>
|
||||
) : null}
|
||||
</dl>
|
||||
</div>
|
||||
<div className="px-4 sm:px-6">
|
||||
<ul className="mt-2 divide-y divide-gray-200">
|
||||
<Switch.Group as="li" className="py-4 flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white" passive>
|
||||
Debug
|
||||
</Switch.Label>
|
||||
<Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Enable debug mode to get more logs.
|
||||
</Switch.Description>
|
||||
</div>
|
||||
<Switch
|
||||
checked={isDebug}
|
||||
disabled={true}
|
||||
onChange={setIsDebug}
|
||||
className={classNames(
|
||||
isDebug ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-700',
|
||||
'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
|
||||
)}
|
||||
>
|
||||
<span className="sr-only">Use setting</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={classNames(
|
||||
isDebug ? 'translate-x-5' : 'translate-x-0',
|
||||
'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
</Switch.Group>
|
||||
</ul>
|
||||
</div>
|
||||
{/*<div className="mt-4 py-4 px-4 flex justify-end sm:px-6">*/}
|
||||
{/* <button*/}
|
||||
{/* type="button"*/}
|
||||
{/* className="bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"*/}
|
||||
{/* >*/}
|
||||
{/* Cancel*/}
|
||||
{/* </button>*/}
|
||||
{/* <button*/}
|
||||
{/* type="submit"*/}
|
||||
{/* className="ml-5 bg-indigo-700 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"*/}
|
||||
{/* >*/}
|
||||
{/* Save*/}
|
||||
{/* </button>*/}
|
||||
{/*</div>*/}
|
||||
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div className="px-4 sm:px-6 py-1">
|
||||
<Checkbox
|
||||
label="Debug"
|
||||
description="Enable debug mode to get more logs."
|
||||
value={settings.debug}
|
||||
setValue={(newValue: boolean) => setSettings({
|
||||
...settings,
|
||||
debug: newValue
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-4 sm:px-6 py-1">
|
||||
<Checkbox
|
||||
label="Dark theme"
|
||||
description="Switch between dark and light theme"
|
||||
value={settings.darkTheme}
|
||||
setValue={(newValue: boolean) => setSettings({
|
||||
...settings,
|
||||
darkTheme: newValue
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { DownloadClient } from "../../domain/interfaces";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { useQuery } from "react-query";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { useEffect } from "react";
|
|||
import { useToggle } from "../../hooks/hooks";
|
||||
import { useQuery } from "react-query";
|
||||
import { IndexerAddForm, IndexerUpdateForm } from "../../forms";
|
||||
import { Indexer } from "../../domain/interfaces";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { classNames } from "../../utils";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
|
|
|
|||
|
|
@ -1,41 +1,11 @@
|
|||
import { useEffect } from "react";
|
||||
import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { useQuery } from "react-query";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
import APIClient from "../../api/APIClient";
|
||||
import { formatDistanceToNowStrict, formatISO9075 } from "date-fns";
|
||||
|
||||
interface IrcNetwork {
|
||||
id: number;
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
addr: string;
|
||||
server: string;
|
||||
port: string;
|
||||
nick: string;
|
||||
username: string;
|
||||
realname: string;
|
||||
pass: string;
|
||||
connected: boolean;
|
||||
connected_since: string;
|
||||
tls: boolean;
|
||||
nickserv: {
|
||||
account: string;
|
||||
}
|
||||
channels: Channel[]
|
||||
}
|
||||
import APIClient from "../../api/APIClient";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
|
||||
|
||||
interface Channel {
|
||||
id: number;
|
||||
enabled: boolean;
|
||||
name: string;
|
||||
password: string;
|
||||
detached: boolean;
|
||||
monitoring: boolean;
|
||||
monitoring_since: string;
|
||||
last_announce: string;
|
||||
}
|
||||
|
||||
function IsEmptyDate(date: string) {
|
||||
if (date !== "0001-01-01T00:00:00Z") {
|
||||
|
|
@ -57,9 +27,6 @@ function simplifyDate(date: string) {
|
|||
function IrcSettings() {
|
||||
const [addNetworkIsOpen, toggleAddNetwork] = useToggle(false)
|
||||
|
||||
useEffect(() => {
|
||||
}, []);
|
||||
|
||||
const { data } = useQuery<IrcNetwork[], Error>('networks', APIClient.irc.getNetworks,
|
||||
{
|
||||
refetchOnWindowFocus: false
|
||||
|
|
@ -167,13 +134,11 @@ const LiItem = ({ idx, network }: LiItemProps) => {
|
|||
Edit
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{edit && (
|
||||
<div className="px-4 py-4 flex border-b border-x-0 dark:border-gray-600 dark:bg-gray-700">
|
||||
<div className="min-w-full">
|
||||
<ol>
|
||||
|
||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Channel</div>
|
||||
<div className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Monitoring since</div>
|
||||
|
|
@ -181,9 +146,7 @@ const LiItem = ({ idx, network }: LiItemProps) => {
|
|||
</li>
|
||||
{network.channels.map(c => (
|
||||
<li key={c.id} className="text-gray-500 dark:text-gray-400">
|
||||
|
||||
<div className="grid grid-cols-12 gap-4 items-center py-4">
|
||||
|
||||
<div className="col-span-4 flex items-center sm:px-6 ">
|
||||
<span className="relative inline-flex items-center">
|
||||
{
|
||||
|
|
|
|||
99
web/src/screens/settings/RegexPlayground.tsx
Normal file
99
web/src/screens/settings/RegexPlayground.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import React, { useRef, useState } from "react";
|
||||
|
||||
export const RegexPlayground = () => {
|
||||
const regexRef = useRef<HTMLInputElement>(null);
|
||||
const [output, setOutput] = useState<Array<React.ReactElement>>();
|
||||
|
||||
const onInput = (text: string) => {
|
||||
if (!regexRef || !regexRef.current)
|
||||
return;
|
||||
|
||||
const regexp = new RegExp(regexRef.current.value, "g");
|
||||
|
||||
const results: Array<React.ReactElement> = [];
|
||||
text.split("\n").forEach((line, index) => {
|
||||
const matches = line.matchAll(regexp);
|
||||
|
||||
let lastIndex = 0;
|
||||
// @ts-ignore
|
||||
for (const match of matches) {
|
||||
if (match.index === undefined)
|
||||
continue;
|
||||
|
||||
const start = match.index;
|
||||
results.push(
|
||||
<span key={`match=${start}`}>
|
||||
{line.substring(lastIndex, start)}
|
||||
<span className="bg-green-200 text-black font-bold">
|
||||
{line.substring(start, start + match.length)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
lastIndex = start + match.length;
|
||||
}
|
||||
|
||||
if (lastIndex < line.length) {
|
||||
results.push(
|
||||
<span key={`last-${lastIndex + 1}`}>
|
||||
{line.substring(lastIndex)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (lastIndex > 0)
|
||||
results.push(<br key={`line-delim-${index}`}/>);
|
||||
});
|
||||
|
||||
setOutput(results);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
|
||||
<div className="py-6 px-4 sm:p-6 lg:pb-8">
|
||||
<div>
|
||||
<h2 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Application</h2>
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Regex playground. Experiment with your filters here. WIP.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-4">
|
||||
<label
|
||||
htmlFor="input-regex"
|
||||
className="block text-sm font-medium text-gray-300"
|
||||
>
|
||||
RegExp filter
|
||||
</label>
|
||||
<input
|
||||
ref={regexRef}
|
||||
id="input-regex"
|
||||
type="text"
|
||||
autoComplete="true"
|
||||
className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
/>
|
||||
<label
|
||||
htmlFor="input-lines"
|
||||
className="block text-sm font-medium text-gray-300"
|
||||
>
|
||||
Lines to match
|
||||
</label>
|
||||
<div
|
||||
id="input-lines"
|
||||
className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
onInput={(e) => onInput(e.currentTarget.innerText ?? "")}
|
||||
contentEditable
|
||||
></div>
|
||||
</div>
|
||||
<div className="py-4 px-4 sm:p-6 lg:pb-8">
|
||||
<div>
|
||||
<h3 className="text-md leading-6 font-medium text-gray-900 dark:text-white">
|
||||
Matches
|
||||
</h3>
|
||||
<p className="mt-1 text-lg text-gray-500 dark:text-gray-400">
|
||||
{output}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue