open-source-mirrors
/
bazarr
mirror of https://github.com/morpheus65535/bazarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add rooks package and rewrite some components to increase performance

Browse Source
pull/1405/head
LASER-Yi 4 years ago
parent e796422021
commit 66d4648c66
15 changed files with 138 additions and 165 deletions
Show Stats Download Patch File Download Diff File

109
frontend/package-lock.json generated
Unescape View File

@ -1,62 +1,63 @@
{
"name": "bazarr",
"version": "1.0.0",
"version": "1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "bazarr",
"version": "1.0.0",
"license": "GPL-3.0",
"version": "1",
"license": "GPL-3",
"dependencies": {
"@fontsource/roboto": "^4.2.2",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-brands-svg-icons": "^5.15.0",
"@fortawesome/free-regular-svg-icons": "^5.15.0",
"@fortawesome/free-solid-svg-icons": "^5.15.0",
"@fortawesome/fontawesome-svg-core": "^1.2",
"@fortawesome/free-brands-svg-icons": "^5.15",
"@fortawesome/free-regular-svg-icons": "^5.15",
"@fortawesome/free-solid-svg-icons": "^5.15",
"@fortawesome/react-fontawesome": "^0.1.11",
"@types/bootstrap": "^5.0.0",
"@types/lodash": "^4.0.0",
"@types/node": "^14.0.0",
"@types/rc-slider": "^8.6.6",
"@types/react": "^16.0.0",
"@types/react-dom": "^16.0.0",
"@types/react-helmet": "^6.1.0",
"@types/react-redux": "^7.0.0",
"@types/react-router-dom": "^5.0.0",
"@types/bootstrap": "^5",
"@types/lodash": "^4",
"@types/node": "^14",
"@types/rc-slider": "^8.6",
"@types/react": "^16",
"@types/react-dom": "^16",
"@types/react-helmet": "^6.1",
"@types/react-redux": "^7",
"@types/react-router-dom": "^5",
"@types/react-select": "^4.0.3",
"@types/react-table": "^7.0.0",
"@types/redux-actions": "^2.0.0",
"@types/redux-logger": "^3.0.0",
"@types/redux-promise": "^0.5.0",
"axios": "^0.21.0",
"bootstrap": "^4.0.0",
"http-proxy-middleware": "^0.19.1",
"lodash": "^4.0.0",
"rc-slider": "^9.7.1",
"react": "^16.0.0",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.0.0",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"react-select": "^4.0.0",
"react-table": "^7.0.0",
"@types/react-table": "^7",
"@types/redux-actions": "^2",
"@types/redux-logger": "^3",
"@types/redux-promise": "^0.5",
"axios": "^0.21",
"bootstrap": "^4",
"http-proxy-middleware": "^0.19",
"lodash": "^4",
"rc-slider": "^9.7",
"react": "^16",
"react-bootstrap": "^1",
"react-dom": "^16",
"react-helmet": "^6.1",
"react-redux": "^7.2",
"react-router-dom": "^5.2",
"react-scripts": "^4",
"react-select": "^4",
"react-table": "^7",
"recharts": "^2.0.8",
"redux-actions": "^2.0.0",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"sass": "^1.0.0",
"socket.io-client": "^4.0.0",
"typescript": "^4.0.0"
"redux-actions": "^2",
"redux-logger": "^3",
"redux-promise": "^0.6",
"redux-thunk": "^2.3",
"rooks": "^5",
"sass": "^1",
"socket.io-client": "^4",
"typescript": "^4"
},
"devDependencies": {
"husky": "^4.0.0",
"prettier": "^2.1.2",
"prettier-plugin-organize-imports": "^1.1.1",
"pretty-quick": "^3.1.0"
"husky": "^4",
"prettier": "^2",
"prettier-plugin-organize-imports": "^1",
"pretty-quick": "^3.1"
}
},
"node_modules/@babel/code-frame": {
@ -17296,6 +17297,15 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
},
"node_modules/rooks": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/rooks/-/rooks-5.0.2.tgz",
"integrity": "sha512-GPydrZ6Sd0g1INCK6RrzM+xnu5I2Fiir/3WRGDw1XeaU026xibPiTl/lOct5Q9ErRerSi0ETHwzdpcHuCw7NlA==",
"dependencies": {
"lodash.debounce": "^4.0.8",
"raf": "^3.4.1"
}
},
"node_modules/rsvp": {
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@ -35748,6 +35758,15 @@
}
}
},
"rooks": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/rooks/-/rooks-5.0.2.tgz",
"integrity": "sha512-GPydrZ6Sd0g1INCK6RrzM+xnu5I2Fiir/3WRGDw1XeaU026xibPiTl/lOct5Q9ErRerSi0ETHwzdpcHuCw7NlA==",
"requires": {
"lodash.debounce": "^4.0.8",
"raf": "^3.4.1"
}
},
"rsvp": {
"version": "4.8.5",
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

89
frontend/package.json
Unescape View File

@ -1,66 +1,67 @@
{
"name": "bazarr",
"version": "1.0.0",
"version": "1",
"description": "Bazarr is a companion application to Sonarr and Radarr. It manages and downloads subtitles based on your requirements. You define your preferences by TV show or movie and Bazarr takes care of everything for you.",
"repository": {
"type": "git",
"url": "git+https://github.com/morpheus65535/bazarr.git"
},
"author": "morpheus65535",
"license": "GPL-3.0",
"license": "GPL-3",
"bugs": {
"url": "https://github.com/morpheus65535/bazarr/issues"
},
"homepage": "./",
"dependencies": {
"@fontsource/roboto": "^4.2.2",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-brands-svg-icons": "^5.15.0",
"@fortawesome/free-regular-svg-icons": "^5.15.0",
"@fortawesome/free-solid-svg-icons": "^5.15.0",
"@fortawesome/fontawesome-svg-core": "^1.2",
"@fortawesome/free-brands-svg-icons": "^5.15",
"@fortawesome/free-regular-svg-icons": "^5.15",
"@fortawesome/free-solid-svg-icons": "^5.15",
"@fortawesome/react-fontawesome": "^0.1.11",
"@types/bootstrap": "^5.0.0",
"@types/lodash": "^4.0.0",
"@types/node": "^14.0.0",
"@types/rc-slider": "^8.6.6",
"@types/react": "^16.0.0",
"@types/react-dom": "^16.0.0",
"@types/react-helmet": "^6.1.0",
"@types/react-redux": "^7.0.0",
"@types/react-router-dom": "^5.0.0",
"@types/bootstrap": "^5",
"@types/lodash": "^4",
"@types/node": "^14",
"@types/rc-slider": "^8.6",
"@types/react": "^16",
"@types/react-dom": "^16",
"@types/react-helmet": "^6.1",
"@types/react-redux": "^7",
"@types/react-router-dom": "^5",
"@types/react-select": "^4.0.3",
"@types/react-table": "^7.0.0",
"@types/redux-actions": "^2.0.0",
"@types/redux-logger": "^3.0.0",
"@types/redux-promise": "^0.5.0",
"axios": "^0.21.0",
"bootstrap": "^4.0.0",
"http-proxy-middleware": "^0.19.1",
"lodash": "^4.0.0",
"rc-slider": "^9.7.1",
"react": "^16.0.0",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.0.0",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"react-select": "^4.0.0",
"react-table": "^7.0.0",
"@types/react-table": "^7",
"@types/redux-actions": "^2",
"@types/redux-logger": "^3",
"@types/redux-promise": "^0.5",
"axios": "^0.21",
"bootstrap": "^4",
"http-proxy-middleware": "^0.19",
"lodash": "^4",
"rc-slider": "^9.7",
"react": "^16",
"react-bootstrap": "^1",
"react-dom": "^16",
"react-helmet": "^6.1",
"react-redux": "^7.2",
"react-router-dom": "^5.2",
"react-scripts": "^4",
"react-select": "^4",
"react-table": "^7",
"recharts": "^2.0.8",
"redux-actions": "^2.0.0",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"sass": "^1.0.0",
"socket.io-client": "^4.0.0",
"typescript": "^4.0.0"
"redux-actions": "^2",
"redux-logger": "^3",
"redux-promise": "^0.6",
"redux-thunk": "^2.3",
"rooks": "^5",
"sass": "^1",
"socket.io-client": "^4",
"typescript": "^4"
},
"devDependencies": {
"husky": "^4.0.0",
"prettier": "^2.1.2",
"prettier-plugin-organize-imports": "^1.1.1",
"pretty-quick": "^3.1.0"
"husky": "^4",
"prettier": "^2",
"prettier-plugin-organize-imports": "^1",
"pretty-quick": "^3.1"
},
"scripts": {
"start": "react-scripts start",

6
frontend/src/@redux/actions/site.ts
Unescape View File

@ -9,7 +9,6 @@ import {
SITE_NOTIFICATIONS_REMOVE,
SITE_NOTIFICATIONS_REMOVE_BY_TIMESTAMP,
SITE_OFFLINE_UPDATE,
SITE_SAVE_LOCALSTORAGE,
SITE_SIDEBAR_UPDATE,
} from "../constants";
import { createAsyncAction, createCallbackAction } from "./factory";
@ -31,11 +30,6 @@ export const badgeUpdateAll = createAsyncAction(SITE_BADGE_UPDATE, () =>
BadgesApi.all()
);
export const siteSaveLocalstorage = createAction(
SITE_SAVE_LOCALSTORAGE,
(settings: LooseObject) => settings
);
export const siteAddNotification = createAction(
SITE_NOTIFICATIONS_ADD,
(err: ReduxStore.Notification) => err

1
frontend/src/@redux/constants/index.ts
Unescape View File

@ -34,7 +34,6 @@ export const MOVIES_UPDATE_BLACKLIST = "UPDATE_MOVIES_BLACKLIST";
export const SITE_NEED_AUTH = "SITE_NEED_AUTH";
export const SITE_INITIALIZED = "SITE_SYSTEM_INITIALIZED";
export const SITE_INITIALIZE_FAILED = "SITE_INITIALIZE_FAILED";
export const SITE_SAVE_LOCALSTORAGE = "SITE_SAVE_LOCALSTORAGE";
export const SITE_NOTIFICATIONS_ADD = "SITE_NOTIFICATIONS_ADD";
export const SITE_NOTIFICATIONS_REMOVE = "SITE_NOTIFICATIONS_REMOVE";
export const SITE_NOTIFICATIONS_REMOVE_BY_TIMESTAMP =

21
frontend/src/@redux/reducers/site.ts
Unescape View File

@ -1,5 +1,4 @@
import { Action, handleActions } from "redux-actions";
import { storage } from "../../@storage/local";
import apis from "../../apis";
import {
SITE_BADGE_UPDATE,
@ -10,17 +9,10 @@ import {
SITE_NOTIFICATIONS_REMOVE,
SITE_NOTIFICATIONS_REMOVE_BY_TIMESTAMP,
SITE_OFFLINE_UPDATE,
SITE_SAVE_LOCALSTORAGE,
SITE_SIDEBAR_UPDATE,
} from "../constants";
import { AsyncAction } from "../types";
function updateLocalStorage(): Partial<ReduxStore.Site> {
return {
pageSize: storage.pageSize,
};
}
const reducer = handleActions<ReduxStore.Site, any>(
{
[SITE_NEED_AUTH]: (state) => {
@ -40,17 +32,6 @@ const reducer = handleActions<ReduxStore.Site, any>(
...state,
initialized: "An Error Occurred When Initializing Bazarr UI",
}),
[SITE_SAVE_LOCALSTORAGE]: (state, action: Action<LooseObject>) => {
const settings = action.payload;
for (const key in settings) {
const value = settings[key];
localStorage.setItem(key, value);
}
return {
...state,
...updateLocalStorage(),
};
},
[SITE_NOTIFICATIONS_ADD]: (
state,
action: Action<ReduxStore.Notification>
@ -94,7 +75,6 @@ const reducer = handleActions<ReduxStore.Site, any>(
{
initialized: false,
auth: true,
pageSize: 50,
notifications: [],
sidebar: "",
badges: {
@ -104,7 +84,6 @@ const reducer = handleActions<ReduxStore.Site, any>(
status: 0,
},
offline: false,
...updateLocalStorage(),
}
);

1
frontend/src/@redux/redux.d.ts vendored
Unescape View File

@ -17,7 +17,6 @@ namespace ReduxStore {
// Initialization state or error message
initialized: boolean | string;
auth: boolean;
pageSize: number;
notifications: Notification[];
sidebar: string;
badges: Badge;

23
frontend/src/@storage/local.ts
Unescape View File

@ -1,10 +1,17 @@
import { useCallback } from "react";
import { useLocalstorage } from "rooks";
export const uiPageSizeKey = "storage-ui-pageSize";
export const storage: LocalStorageType = {
get pageSize(): number {
return parseInt(localStorage.getItem(uiPageSizeKey) ?? "50");
},
set pageSize(v: number) {
localStorage.setItem(uiPageSizeKey, v.toString());
},
};
export function useUpdateLocalStorage() {
return useCallback((newVals: LooseObject) => {
for (const key in newVals) {
const value = newVals[key];
localStorage.setItem(key, value);
}
}, []);
}
export function usePageSize() {
return useLocalstorage(uiPageSizeKey, 50);
}

2
frontend/src/App/index.tsx
Unescape View File

@ -42,7 +42,7 @@ const App: FunctionComponent<Props> = () => {
}, [initialized, hasUpdate, notify]);
const [sidebar, setSidebar] = useState(false);
const toggleSidebar = useCallback(() => setSidebar(!sidebar), [sidebar]);
const toggleSidebar = useCallback(() => setSidebar((s) => !s), []);
if (!auth) {
return <Redirect to="/login"></Redirect>;

5
frontend/src/Settings/UI/index.tsx
Unescape View File

@ -1,9 +1,10 @@
import React, { FunctionComponent } from "react";
import { uiPageSizeKey } from "../../@storage/local";
import { uiPageSizeKey, usePageSize } from "../../@storage/local";
import { Group, Input, Selector, SettingsProvider } from "../components";
import { pageSizeOptions } from "./options";
const SettingsUIView: FunctionComponent = () => {
const [pageSize] = usePageSize();
return (
<SettingsProvider title="Interface - Bazarr (Settings)">
<Group header="UI">
@ -11,7 +12,7 @@ const SettingsUIView: FunctionComponent = () => {
<Selector
options={pageSizeOptions}
settingKey={uiPageSizeKey}
override={(_, s) => s.site.pageSize}
override={(_) => pageSize}
></Selector>
</Input>
</Group>

7
frontend/src/Settings/components/hooks.ts
Unescape View File

@ -1,6 +1,5 @@
import { isArray, uniqBy } from "lodash";
import { useCallback, useContext, useMemo } from "react";
import { useStore } from "react-redux";
import { useSystemSettings } from "../../@redux/hooks";
import { log } from "../../utilites/logger";
import { StagedChangesContext } from "./provider";
@ -45,7 +44,7 @@ export function useMultiUpdate() {
type ValidateFuncType<T> = (v: any) => v is T;
export type OverrideFuncType<T> = (settings: Settings, store: ReduxStore) => T;
export type OverrideFuncType<T> = (settings: Settings) => T;
export function useExtract<T>(
key: string,
@ -55,8 +54,6 @@ export function useExtract<T>(
const [systemSettings] = useSystemSettings();
const settings = systemSettings.data;
const store = useStore<ReduxStore>();
const extractValue = useMemo(() => {
let value: Nullable<T> = null;
@ -89,7 +86,7 @@ export function useExtract<T>(
if (override && settings !== undefined) {
// TODO: Temporarily override
return override(settings, store.getState());
return override(settings);
} else {
return extractValue;
}

5
frontend/src/Settings/components/provider.tsx
Unescape View File

@ -10,9 +10,8 @@ import React, {
import { Container, Row } from "react-bootstrap";
import { Helmet } from "react-helmet";
import { Prompt } from "react-router";
import { siteSaveLocalstorage } from "../../@redux/actions";
import { useSystemSettings } from "../../@redux/hooks";
import { useReduxAction } from "../../@redux/hooks/base";
import { useUpdateLocalStorage } from "../../@storage/local";
import { SystemApi } from "../../apis";
import { ContentHeader } from "../../components";
import { useWhenLoadingFinish } from "../../utilites";
@ -54,7 +53,7 @@ interface Props {
const SettingsProvider: FunctionComponent<Props> = (props) => {
const { children, title } = props;
const updateStorage = useReduxAction(siteSaveLocalstorage);
const updateStorage = useUpdateLocalStorage();
const [stagedChange, setChange] = useState<LooseObject>({});
const [updating, setUpdating] = useState(false);

4
frontend/src/components/SearchBar.tsx
Unescape View File

@ -1,4 +1,3 @@
import { throttle } from "lodash";
import React, {
FunctionComponent,
useCallback,
@ -8,6 +7,7 @@ import React, {
} from "react";
import { Dropdown, Form } from "react-bootstrap";
import { useHistory } from "react-router";
import { useThrottle } from "rooks";
export interface SearchResult {
name: string;
@ -44,7 +44,7 @@ export const SearchBar: FunctionComponent<Props> = ({
[onSearch]
);
const debounceSearch = useMemo(() => throttle(search, 500), [search]);
const [debounceSearch] = useThrottle(search, 500);
useEffect(() => {
debounceSearch(text);

4
frontend/src/components/tables/AsyncPageTable.tsx
Unescape View File

@ -2,7 +2,7 @@ import { isNull } from "lodash";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { PluginHook, TableOptions, useTable } from "react-table";
import { LoadingIndicator } from "..";
import { useReduxStore } from "../../@redux/hooks/base";
import { usePageSize } from "../../@storage/local";
import { buildOrderListFrom, isNonNullable, ScrollToTop } from "../../utilites";
import BaseTable, { TableStyleProps, useStyleAndOptions } from "./BaseTable";
import PageControl from "./PageControl";
@ -32,7 +32,7 @@ export default function AsyncPageTable<T extends object>(props: Props<T>) {
// Impl a new pagination system instead of hooking into the existing one
const [pageIndex, setIndex] = useState(0);
const pageSize = useReduxStore((s) => s.site.pageSize);
const [pageSize] = usePageSize();
const totalRows = order.length;
const pageCount = Math.ceil(totalRows / pageSize);

22
frontend/src/components/tables/PageTable.tsx
Unescape View File

@ -1,4 +1,3 @@
import { isUndefined } from "lodash";
import React, { useEffect } from "react";
import {
PluginHook,
@ -7,7 +6,6 @@ import {
useRowSelect,
useTable,
} from "react-table";
import { useReduxStore } from "../../@redux/hooks/base";
import { ScrollToTop } from "../../utilites";
import BaseTable, { TableStyleProps, useStyleAndOptions } from "./BaseTable";
import PageControl from "./PageControl";
@ -51,12 +49,9 @@ export default function PageTable<T extends object>(props: Props<T>) {
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = instance;
const globalPageSize = useReduxStore((s) => s.site.pageSize);
// Scroll to top when page is changed
useEffect(() => {
if (autoScroll) {
@ -64,23 +59,6 @@ export default function PageTable<T extends object>(props: Props<T>) {
}
}, [pageIndex, autoScroll]);
useEffect(() => {
const selecting = options.isSelecting;
if (canSelect && !isUndefined(selecting)) {
if (selecting) {
setPageSize(rows.length);
} else {
setPageSize(globalPageSize);
}
}
}, [
canSelect,
globalPageSize,
options.isSelecting,
rows.length,
setPageSize,
]);
return (
<React.Fragment>
<BaseTable

4
frontend/src/components/tables/plugins/useDefaultSettings.tsx
Unescape View File

@ -1,5 +1,5 @@
import { Hooks, TableOptions } from "react-table";
import { useReduxStore } from "../../../@redux/hooks/base";
import { usePageSize } from "../../../@storage/local";
const pluginName = "useLocalSettings";
@ -9,7 +9,7 @@ function useDefaultSettings<T extends object>(hooks: Hooks<T>) {
useDefaultSettings.pluginName = pluginName;
function useOptions<T extends object>(options: TableOptions<T>) {
const { pageSize } = useReduxStore((s) => s.site);
const [pageSize] = usePageSize();
if (options.autoResetPage === undefined) {
options.autoResetPage = false;

Write Preview
Loading…
Cancel
Save