Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 04:44:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Prettier

Browse Source
This commit is contained in:
Infinite
2020-01-20 21:56:23 +01:00
parent 9827647122
commit 244c8ff234
82 changed files with 3729 additions and 2304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
ui/v2.5/src/hooks/ListHook.tsx
View File

@@ -1,10 +1,10 @@
import _ from "lodash";
import queryString from "query-string";
import React, { useState } from "react";
import { Spinner } from 'react-bootstrap';
import { Spinner } from "react-bootstrap";
import { QueryHookResult } from "react-apollo-hooks";
import { ApolloError } from 'apollo-client';
import { useHistory } from 'react-router-dom';
import { ApolloError } from "apollo-client";
import { useHistory } from "react-router-dom";
import {
FindScenesQuery,
FindScenesVariables,
@@ -21,7 +21,7 @@ import {
FindPerformersQuery,
FindPerformersVariables,
PerformerDataFragment
} from 'src/core/generated-graphql';
} from "src/core/generated-graphql";
import { ListFilter } from "../components/list/ListFilter";
import { Pagination } from "../components/list/Pagination";
import { StashService } from "../core/StashService";
@@ -32,19 +32,31 @@ import { DisplayMode, FilterMode } from "../models/list-filter/types";
interface IListHookData {
filter: ListFilterModel;
template: JSX.Element;
onSelectChange: (id: string, selected : boolean, shiftKey: boolean) => void;
onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}
interface IListHookOperation<T> {
text: string;
onClick: (result: T, filter: ListFilterModel, selectedIds: Set<string>) => void;
onClick: (
result: T,
filter: ListFilterModel,
selectedIds: Set<string>
) => void;
}
interface IListHookOptions<T> {
zoomable?: boolean;
otherOperations?: IListHookOperation<T>[];
renderContent: (result: T, filter: ListFilterModel, selectedIds: Set<string>, zoomIndex: number) => JSX.Element | undefined;
renderSelectedOptions?: (result: T, selectedIds: Set<string>) => JSX.Element | undefined;
renderContent: (
result: T,
filter: ListFilterModel,
selectedIds: Set<string>,
zoomIndex: number
) => JSX.Element | undefined;
renderSelectedOptions?: (
result: T,
selectedIds: Set<string>
) => JSX.Element | undefined;
}
interface IDataItem {
@@ -63,10 +75,15 @@ interface IQuery<T extends IQueryResult, T2 extends IDataItem> {
}
const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
options: (IListHookOptions<QueryResult> & IQuery<QueryResult, QueryData>)
options: IListHookOptions<QueryResult> & IQuery<QueryResult, QueryData>
): IListHookData => {
const history = useHistory();
const [filter, setFilter] = useState<ListFilterModel>(new ListFilterModel(options.filterMode, queryString.parse(history.location.search)));
const [filter, setFilter] = useState<ListFilterModel>(
new ListFilterModel(
options.filterMode,
queryString.parse(history.location.search)
)
);
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
const [lastClickedId, setLastClickedId] = useState<string | undefined>();
const [zoomIndex, setZoomIndex] = useState<number>(1);
@@ -75,8 +92,8 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
const totalCount = options.getCount(result);
const items = options.getData(result);
function updateQueryParams(listfilter:ListFilterModel) {
const newLocation = { ...history.location};
function updateQueryParams(listfilter: ListFilterModel) {
const newLocation = { ...history.location };
newLocation.search = listfilter.makeQueryParameters();
history.replace(newLocation);
}
@@ -123,7 +140,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
const newFilter = _.cloneDeep(filter);
// Find if we are editing an existing criteria, then modify that. Or create a new one.
const existingIndex = newFilter.criteria.findIndex((c) => {
const existingIndex = newFilter.criteria.findIndex(c => {
// If we modified an existing criterion, then look for the old id.
const id = oldId || criterion.getId();
return c.getId() === id;
@@ -136,7 +153,9 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
// Remove duplicate modifiers
newFilter.criteria = newFilter.criteria.filter((obj, pos, arr) => {
return arr.map((mapObj: any) => mapObj.getId()).indexOf(obj.getId()) === pos;
return (
arr.map((mapObj: any) => mapObj.getId()).indexOf(obj.getId()) === pos
);
});
newFilter.currentPage = 1;
@@ -146,7 +165,9 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
function onRemoveCriterion(removedCriterion: Criterion) {
const newFilter = _.cloneDeep(filter);
newFilter.criteria = newFilter.criteria.filter((criterion) => criterion.getId() !== removedCriterion.getId());
newFilter.criteria = newFilter.criteria.filter(
criterion => criterion.getId() !== removedCriterion.getId()
);
newFilter.currentPage = 1;
setFilter(newFilter);
updateQueryParams(newFilter);
@@ -172,7 +193,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
setSelectedIds(newSelectedIds);
}
function selectRange(startIndex : number, endIndex : number) {
function selectRange(startIndex: number, endIndex: number) {
let start = startIndex;
let end = endIndex;
if (start > end) {
@@ -182,9 +203,9 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
}
const subset = items.slice(start, end + 1);
const newSelectedIds : Set<string> = new Set();
const newSelectedIds: Set<string> = new Set();
subset.forEach((item) => {
subset.forEach(item => {
newSelectedIds.add(item.id);
});
@@ -196,19 +217,19 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
let thisIndex = -1;
if (lastClickedId) {
startIndex = items.findIndex((item) => {
startIndex = items.findIndex(item => {
return item.id === lastClickedId;
});
}
thisIndex = items.findIndex((item) => {
thisIndex = items.findIndex(item => {
return item.id === id;
});
selectRange(startIndex, thisIndex);
}
function onSelectChange(id: string, selected : boolean, shiftKey: boolean) {
function onSelectChange(id: string, selected: boolean, shiftKey: boolean) {
if (shiftKey) {
multiSelect(id);
} else {
@@ -217,8 +238,8 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
}
function onSelectAll() {
const newSelectedIds : Set<string> = new Set();
items.forEach((item) => {
const newSelectedIds: Set<string> = new Set();
items.forEach(item => {
newSelectedIds.add(item.id);
});
@@ -227,23 +248,25 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
}
function onSelectNone() {
const newSelectedIds : Set<string> = new Set();
const newSelectedIds: Set<string> = new Set();
setSelectedIds(newSelectedIds);
setLastClickedId(undefined);
}
function onChangeZoom(newZoomIndex : number) {
function onChangeZoom(newZoomIndex: number) {
setZoomIndex(newZoomIndex);
}
const otherOperations = options.otherOperations ? options.otherOperations.map((o) => {
return {
text: o.text,
onClick: () => {
o.onClick(result, filter, selectedIds);
}
}
}) : undefined;
const otherOperations = options.otherOperations
? options.otherOperations.map(o => {
return {
text: o.text,
onClick: () => {
o.onClick(result, filter, selectedIds);
}
};
})
: undefined;
const template = (
<div>
@@ -262,8 +285,14 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
otherOperations={otherOperations}
filter={filter}
/>
{options.renderSelectedOptions && selectedIds.size > 0 ? options.renderSelectedOptions(result, selectedIds) : undefined}
{result.loading ? <Spinner animation="border" variant="light" /> : undefined}
{options.renderSelectedOptions && selectedIds.size > 0
? options.renderSelectedOptions(result, selectedIds)
: undefined}
{result.loading ? (
<Spinner animation="border" variant="light" />
) : (
undefined
)}
{result.error ? <h1>{result.error.message}</h1> : undefined}
{options.renderContent(result, filter, selectedIds, zoomIndex)}
<Pagination
@@ -276,61 +305,71 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
);
return { filter, template, onSelectChange };
}
};
type ScenesQuery = QueryHookResult<FindScenesQuery, FindScenesVariables>;
export const useScenesList = (props:IListHookOptions<ScenesQuery>) => (
export const useScenesList = (props: IListHookOptions<ScenesQuery>) =>
useList<ScenesQuery, SlimSceneDataFragment>({
...props,
filterMode: FilterMode.Scenes,
useData: StashService.useFindScenes,
getData: (result:ScenesQuery) => (result?.data?.findScenes?.scenes ?? []),
getCount: (result:ScenesQuery) => (result?.data?.findScenes?.count ?? 0)
})
)
getData: (result: ScenesQuery) => result?.data?.findScenes?.scenes ?? [],
getCount: (result: ScenesQuery) => result?.data?.findScenes?.count ?? 0
});
type SceneMarkersQuery = QueryHookResult<FindSceneMarkersQuery, FindSceneMarkersVariables>;
export const useSceneMarkersList = (props:IListHookOptions<SceneMarkersQuery>) => (
type SceneMarkersQuery = QueryHookResult<
FindSceneMarkersQuery,
FindSceneMarkersVariables
>;
export const useSceneMarkersList = (
props: IListHookOptions<SceneMarkersQuery>
) =>
useList<SceneMarkersQuery, FindSceneMarkersSceneMarkers>({
...props,
filterMode: FilterMode.SceneMarkers,
useData: StashService.useFindSceneMarkers,
getData: (result:SceneMarkersQuery) => (result?.data?.findSceneMarkers?.scene_markers?? []),
getCount: (result:SceneMarkersQuery) => (result?.data?.findSceneMarkers?.count ?? 0)
})
)
getData: (result: SceneMarkersQuery) =>
result?.data?.findSceneMarkers?.scene_markers ?? [],
getCount: (result: SceneMarkersQuery) =>
result?.data?.findSceneMarkers?.count ?? 0
});
type GalleriesQuery = QueryHookResult<FindGalleriesQuery, FindGalleriesVariables>;
export const useGalleriesList = (props:IListHookOptions<GalleriesQuery>) => (
type GalleriesQuery = QueryHookResult<
FindGalleriesQuery,
FindGalleriesVariables
>;
export const useGalleriesList = (props: IListHookOptions<GalleriesQuery>) =>
useList<GalleriesQuery, GalleryDataFragment>({
...props,
filterMode: FilterMode.Galleries,
useData: StashService.useFindGalleries,
getData: (result:GalleriesQuery) => (result?.data?.findGalleries?.galleries ?? []),
getCount: (result:GalleriesQuery) => (result?.data?.findGalleries?.count ?? 0)
})
)
getData: (result: GalleriesQuery) =>
result?.data?.findGalleries?.galleries ?? [],
getCount: (result: GalleriesQuery) =>
result?.data?.findGalleries?.count ?? 0
});
type StudiosQuery = QueryHookResult<FindStudiosQuery, FindStudiosVariables>;
export const useStudiosList = (props:IListHookOptions<StudiosQuery>) => (
export const useStudiosList = (props: IListHookOptions<StudiosQuery>) =>
useList<StudiosQuery, StudioDataFragment>({
...props,
filterMode: FilterMode.Studios,
useData: StashService.useFindStudios,
getData: (result:StudiosQuery) => (result?.data?.findStudios?.studios ?? []),
getCount: (result:StudiosQuery) => (result?.data?.findStudios?.count ?? 0)
})
)
getData: (result: StudiosQuery) => result?.data?.findStudios?.studios ?? [],
getCount: (result: StudiosQuery) => result?.data?.findStudios?.count ?? 0
});
type PerformersQuery = QueryHookResult<FindPerformersQuery, FindPerformersVariables>;
export const usePerformersList = (props:IListHookOptions<PerformersQuery>) => (
type PerformersQuery = QueryHookResult<
FindPerformersQuery,
FindPerformersVariables
>;
export const usePerformersList = (props: IListHookOptions<PerformersQuery>) =>
useList<PerformersQuery, PerformerDataFragment>({
...props,
filterMode: FilterMode.Performers,
useData: StashService.useFindPerformers,
getData: (result:PerformersQuery) => (result?.data?.findPerformers?.performers ?? []),
getCount: (result:PerformersQuery) => (result?.data?.findPerformers?.count ?? 0)
})
)
getData: (result: PerformersQuery) =>
result?.data?.findPerformers?.performers ?? [],
getCount: (result: PerformersQuery) =>
result?.data?.findPerformers?.count ?? 0
});