ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use gql for "extensions"

Browse Source
This commit is contained in:
schroda
2023-09-01 20:28:23 +02:00
parent 81cfeedbba
commit 4a80e18cd0
5 changed files with 77 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ExtensionCard.tsx
View File

@@ -14,12 +14,11 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import { Box } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { IExtension, TranslationKey } from '@/typings';
import { Extension, TranslationKey } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
interface IProps {
extension: IExtension;
notifyInstall: () => void;
extension: Extension;
}
enum ExtensionAction {
@@ -65,17 +64,16 @@ export default function ExtensionCard(props: IProps) {
const { t } = useTranslation();
const {
extension: { name, lang, versionName, installed, hasUpdate, obsolete, pkgName, iconUrl, isNsfw },
notifyInstall,
extension: { name, lang, versionName, isInstalled, hasUpdate, isObsolete, pkgName, iconUrl, isNsfw },
} = props;
const [installedState, setInstalledState] = useState<InstalledStates>(() => {
if (obsolete) {
if (isObsolete) {
return InstalledState.OBSOLETE;
}
if (hasUpdate) {
return InstalledState.UPDATE;
}
return installed ? InstalledState.UNINSTALL : InstalledState.INSTALL;
return isInstalled ? InstalledState.UNINSTALL : InstalledState.INSTALL;
});
const langPress = lang === 'all' ? t('extension.language.all') : lang.toUpperCase();
@@ -87,19 +85,18 @@ export default function ExtensionCard(props: IProps) {
setInstalledState(state);
switch (action) {
case ExtensionAction.INSTALL:
await requestManager.installExtension(pkgName).response;
await requestManager.updateExtension(pkgName, { install: true }).response;
break;
case ExtensionAction.UNINSTALL:
await requestManager.uninstallExtension(pkgName).response;
await requestManager.updateExtension(pkgName, { uninstall: true }).response;
break;
case ExtensionAction.UPDATE:
await requestManager.updateExtension(pkgName).response;
await requestManager.updateExtension(pkgName, { update: true }).response;
break;
default:
throw new Error(`Unexpected ExtensionAction "${action}"`);
}
setInstalledState(nextAction);
notifyInstall();
};
function handleButtonClick() {

55
src/lib/requests/RequestManager.ts
View File

@@ -26,7 +26,6 @@ import {
BatchChaptersChange,
ICategory,
IChapter,
IExtension,
IManga,
IMangaChapter,
IncludeInGlobalUpdate,
@@ -46,14 +45,29 @@ import {
CheckForServerUpdatesQueryVariables,
GetAboutQuery,
GetAboutQueryVariables,
GetExtensionsFetchMutation,
GetExtensionsFetchMutationVariables,
GetExtensionsQuery,
GetExtensionsQueryVariables,
GetGlobalMetadatasQuery,
GetGlobalMetadatasQueryVariables,
InstallExternalExtensionMutation,
InstallExternalExtensionMutationVariables,
SetGlobalMetadataMutation,
SetGlobalMetadataMutationVariables,
UpdateExtensionMutation,
UpdateExtensionMutationVariables,
UpdateExtensionPatchInput,
} from '@/lib/graphql/generated/graphql.ts';
import { GET_GLOBAL_METADATA, GET_GLOBAL_METADATAS } from '@/lib/graphql/queries/GlobalMetadataQuery.ts';
import { SET_GLOBAL_METADATA } from '@/lib/graphql/mutations/GlobalMetadataMutation.ts';
import { CHECK_FOR_SERVER_UPDATES, GET_ABOUT } from '@/lib/graphql/queries/ServerInfoQuery.ts';
import { GET_EXTENSION, GET_EXTENSIONS } from '@/lib/graphql/queries/ExtensionQuery.ts';
import {
GET_EXTENSIONS_FETCH,
INSTALL_EXTERNAL_EXTENSION,
UPDATE_EXTENSION,
} from '@/lib/graphql/mutations/ExtensionMutation.ts';
enum SWRHttpMethod {
SWR_GET,
@@ -460,24 +474,39 @@ export class RequestManager {
return this.doRequestNew(GQLMethod.USE_QUERY, CHECK_FOR_SERVER_UPDATES, {}, options);
}
public useGetExtensionList(swrOptions?: SWROptions<IExtension[]>): AbortableSWRResponse<IExtension[]> {
return this.doRequest(HttpMethod.SWR_GET, 'extension/list', { swrOptions });
public useGetExtensionList(
options?: QueryHookOptions<GetExtensionsQuery, GetExtensionsQueryVariables>,
): AbortableApolloUseQueryResponse<GetExtensionsQuery, GetExtensionsQueryVariables> {
return this.doRequestNew(GQLMethod.USE_QUERY, GET_EXTENSIONS, {}, options);
}
public installExtension(extension: string | File): AbortableAxiosResponse {
if (typeof extension === 'string') {
return this.doRequest(HttpMethod.GET, `extension/install/${extension}`);
}
return this.doRequest(HttpMethod.POST, `extension/install`, { formData: { file: extension } });
public useExtensionListFetch(
options?: MutationHookOptions<GetExtensionsFetchMutation, GetExtensionsFetchMutationVariables>,
): AbortableApolloUseMutationResponse<GetExtensionsFetchMutation, GetExtensionsFetchMutationVariables> {
return this.doRequestNew(GQLMethod.USE_MUTATION, GET_EXTENSIONS_FETCH, {}, options);
}
public updateExtension(extension: string): AbortableAxiosResponse {
return this.doRequest(HttpMethod.GET, `extension/update/${extension}`);
public installExternalExtension(
extensionFile: File,
): AbortableApolloMutationResponse<InstallExternalExtensionMutation> {
return this.doRequestNew<InstallExternalExtensionMutation, InstallExternalExtensionMutationVariables>(
GQLMethod.MUTATION,
INSTALL_EXTERNAL_EXTENSION,
{ file: extensionFile },
{ refetchQueries: [GET_EXTENSION, GET_EXTENSIONS] },
);
}
public uninstallExtension(extension: string): AbortableAxiosResponse {
return this.doRequest(HttpMethod.GET, `extension/uninstall/${extension}`);
public updateExtension(
id: string,
patch: UpdateExtensionPatchInput,
): AbortableApolloMutationResponse<UpdateExtensionMutation> {
return this.doRequestNew<UpdateExtensionMutation, UpdateExtensionMutationVariables>(
GQLMethod.MUTATION,
UPDATE_EXTENSION,
{ input: { id, patch } },
{ refetchQueries: [GET_EXTENSION, GET_EXTENSIONS, GET_SOURCES] },
);
}
public getExtensionIconUrl(extension: string): string {

39
src/screens/Extensions.tsx
View File

@@ -14,7 +14,6 @@ import { StringParam, useQueryParam } from 'use-query-params';
import { Virtuoso } from 'react-virtuoso';
import { Typography, useMediaQuery, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { IExtension } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language';
import useLocalStorage from '@/util/useLocalStorage';
@@ -31,11 +30,12 @@ import { makeToaster } from '@/components/util/Toast';
import LangSelect from '@/components/navbar/action/LangSelect';
import NavbarContext from '@/components/context/NavbarContext';
import ExtensionCard from '@/components/ExtensionCard';
import { Extension } from '@/typings.ts';
const LANGUAGE = 0;
const EXTENSIONS = 1;
function getExtensionsInfo(extensions: IExtension[]): {
function getExtensionsInfo(extensions: Extension[]): {
allLangs: string[];
groupedExtensions: GroupedExtensionsResult;
} {
@@ -55,12 +55,12 @@ function getExtensionsInfo(extensions: IExtension[]): {
allLangs.push(extension.lang);
}
}
if (extension.installed) {
if (extension.isInstalled) {
if (extension.hasUpdate) {
sortedExtensions[ExtensionState.UPDATE_PENDING].push(extension);
return;
}
if (extension.obsolete) {
if (extension.isObsolete) {
sortedExtensions[ExtensionState.OBSOLETE].push(extension);
return;
}
@@ -100,7 +100,17 @@ export default function MangaExtensions() {
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [query] = useQueryParam('query', StringParam);
const { data: allExtensions, mutate, isLoading } = requestManager.useGetExtensionList();
const [extensionsTimestamp, setExtensionsTimestamp] = useLocalStorage('extensionsTimestamp', 0);
const [fetchExtensions, { loading: isFetching }] = requestManager.useExtensionListFetch();
const { data, loading: isLoading } = requestManager.useGetExtensionList();
const allExtensions = data?.extensions.nodes;
useEffect(() => {
const updateExtensionsList = Date.now() - extensionsTimestamp >= 1000 * 60; // update list in case it's older than 1 minute
if (updateExtensionsList) {
fetchExtensions().catch(() => setExtensionsTimestamp(Date.now()));
}
}, []);
const filteredExtensions = useMemo(
() =>
@@ -122,7 +132,7 @@ export default function MangaExtensions() {
[shownLangs, groupedExtensions],
);
const flatRenderItems: (IExtension | string)[] = filteredGroupedExtensions.flat(2);
const flatRenderItems: (Extension | string)[] = filteredGroupedExtensions.flat(2);
const [toasts, makeToast] = makeToaster(useState<React.ReactElement[]>([]));
@@ -134,10 +144,9 @@ export default function MangaExtensions() {
makeToast(t('extension.label.installing_file'), 'info');
requestManager
.installExtension(file)
.installExternalExtension(file)
.response.then(() => {
makeToast(t('extension.label.installed_successfully'), 'success');
mutate();
})
.catch(() => makeToast(t('extension.label.installation_failed'), 'error'));
} else {
@@ -178,7 +187,7 @@ export default function MangaExtensions() {
};
}, []);
if (isLoading) {
if (isLoading || isFetching) {
return <LoadingPlaceholder />;
}
@@ -220,17 +229,9 @@ export default function MangaExtensions() {
</Typography>
);
}
const item = flatRenderItems[index] as IExtension;
const item = flatRenderItems[index] as Extension;
return (
<ExtensionCard
key={item.apkName}
extension={item}
notifyInstall={() => {
mutate();
}}
/>
);
return <ExtensionCard key={item.apkName} extension={item} />;
}}
/>
</>

10
src/screens/util/Extensions.ts
View File

@@ -7,7 +7,7 @@
*/
import { t } from 'i18next';
import { IExtension, TranslationKey } from '@/typings';
import { Extension, TranslationKey } from '@/typings';
import { DefaultLanguage, langCodeToName } from '@/util/language';
export enum ExtensionState {
@@ -16,16 +16,16 @@ export enum ExtensionState {
OBSOLETE = 'OBSOLETE',
}
export type GroupedExtensionsResult<KEY extends string = string> = [KEY, IExtension[]][];
export type GroupedExtensionsResult<KEY extends string = string> = [KEY, Extension[]][];
export type GroupedByExtensionState = {
[state in ExtensionState]: IExtension[];
[state in ExtensionState]: Extension[];
};
export type GroupedByLanguage = {
[language in DefaultLanguage]: IExtension[];
[language in DefaultLanguage]: Extension[];
} & {
[language: string]: IExtension[];
[language: string]: Extension[];
};
export type GroupedExtensions = GroupedByExtensionState & GroupedByLanguage;

15
src/typings.ts
View File

@@ -10,6 +10,7 @@ import { OverridableComponent } from '@mui/material/OverridableComponent';
import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon';
import { ParseKeys } from 'i18next';
import { Location } from 'react-router-dom';
import { ExtensionType } from '@/lib/graphql/generated/graphql.ts';
type GenericLocation<State = any> = Omit<Location, 'state'> & { state?: State };
@@ -21,19 +22,7 @@ declare module 'react-router-dom' {
export type TranslationKey = ParseKeys;
export interface IExtension {
name: string;
pkgName: string;
versionName: string;
versionCode: number;
lang: string;
isNsfw: boolean;
apkName: string;
iconUrl: string;
installed: boolean;
hasUpdate: boolean;
obsolete: boolean;
}
export type Extension = Omit<ExtensionType, 'source'>;
export interface ISource {
id: string;