s3si.ts/gui/src/components/OpenSplatnet.tsx

61 lines
1.7 KiB
TypeScript

import { invoke } from '@tauri-apps/api';
import classNames from 'classnames';
import { usePromise } from 'hooks/usePromise';
import React, { useState } from 'react'
import { getConfig, getProfile, setProfile } from 'services/config';
import { ensureTokenValid } from 'services/s3si';
import { composeLoadable } from 'utils/composeLoadable';
import { ErrorContent } from './ErrorContent';
type OpenSplatnetProps = {
children?: React.ReactNode
}
export const OpenSplatnet: React.FC<OpenSplatnetProps> = ({ children }) => {
let { loading, error, retry, result } = composeLoadable({
config: usePromise(getConfig),
profile: usePromise(() => getProfile(0)),
});
const [doing, setDoing] = useState(false);
const [err, setError] = useState<any>();
const onClick = async () => {
setDoing(true);
try {
if (!result) {
return;
}
const state = result.profile.state;
const newState = await ensureTokenValid(state);
await setProfile(0, {
...result.profile,
state: newState,
});
retry?.();
const gtoken = newState.loginState?.gToken;
await invoke('open_splatnet', {
gtoken,
lang: result.profile.state.userLang,
});
} catch (e) {
setError(e);
} finally {
setDoing(false);
}
};
if (error || err) {
return <>
<ErrorContent error={error || err} retry={retry} />
</>
}
const btnLoading = loading || doing;
return <>
<button className={classNames('btn w-full', {
'btn-disabled': !result?.profile.state.loginState?.sessionToken,
})} onClick={onClick} disabled={btnLoading}>{btnLoading ? <span className='loading' /> : children}</button>
</>
}