abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(modal): port Error and ShowToken

Browse Source
This commit is contained in:
Paul Makles
2022-06-18 12:25:56 +01:00
parent 374be319c4
commit d10bd96900
13 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/context/intermediate/Modals.tsx
View File

@@ -1,14 +1,10 @@
import { internalEmit } from "../../lib/eventEmitter";
//import { isModalClosing } from "../../components/ui/Modal";
import { Screen } from "./Intermediate";
import { ClipboardModal } from "./modals/Clipboard";
import { ErrorModal } from "./modals/Error";
import { ExternalLinkModal } from "./modals/ExternalLinkPrompt";
import { InputModal } from "./modals/Input";
import { OnboardingModal } from "./modals/Onboarding";
import { PromptModal } from "./modals/Prompt";
import { TokenRevealModal } from "./modals/TokenReveal";
export interface Props {
screen: Screen;
@@ -26,12 +22,8 @@ export default function Modals({ screen, openScreen }: Props) {
return <PromptModal onClose={onClose} {...screen} />;
case "_input":
return <InputModal onClose={onClose} {...screen} />;
case "error":
return <ErrorModal onClose={onClose} {...screen} />;
case "clipboard":
return <ClipboardModal onClose={onClose} {...screen} />;
case "token_reveal":
return <TokenRevealModal onClose={onClose} {...screen} />;
case "onboarding":
return <OnboardingModal onClose={onClose} {...screen} />;
case "external_link_prompt":

14
src/context/intermediate/modals/Error.tsx → src/context/modals/components/Error.tsx
View File

@@ -2,23 +2,23 @@ import { Text } from "preact-i18n";
import { Modal } from "@revoltchat/ui";
interface Props {
onClose: () => void;
error: string;
}
import { noopTrue } from "../../../lib/js";
export function ErrorModal({ onClose, error }: Props) {
import { ModalProps } from "../types";
export function Error({ error, ...props }: ModalProps<"error">) {
return (
<Modal
onClose={onClose}
{...props}
title={<Text id="app.special.modals.error" />}
actions={[
{
onClick: onClose,
onClick: noopTrue,
confirmation: true,
children: <Text id="app.special.modals.actions.ok" />,
},
{
palette: "plain-secondary",
onClick: () => location.reload(),
children: <Text id="app.special.modals.actions.reload" />,
},

16
src/context/intermediate/modals/TokenReveal.tsx → src/context/modals/components/ShowToken.tsx
View File

@@ -2,25 +2,23 @@ import { Text } from "preact-i18n";
import { Modal } from "@revoltchat/ui";
interface Props {
onClose: () => void;
token: string;
username: string;
}
import { noopTrue } from "../../../lib/js";
export function TokenRevealModal({ onClose, token, username }: Props) {
import { ModalProps } from "../types";
export function ShowToken({ name, token, ...props }: ModalProps<"show_token">) {
return (
<Modal
onClose={onClose}
{...props}
title={
<Text
id={"app.special.modals.token_reveal"}
fields={{ name: username }}
fields={{ name }}
/>
}
actions={[
{
onClick: onClose,
onClick: noopTrue,
confirmation: true,
children: <Text id="app.special.modals.actions.close" />,
},

7
src/context/modals/components/Test.tsx
View File

@@ -1,7 +0,0 @@
import { Modal } from "@revoltchat/ui";
import { ModalProps } from "../types";
export default function Test({ onClose }: ModalProps<"test">) {
return <Modal title="I am a sub modal!" onClose={onClose} />;
}

9
src/context/modals/index.tsx
View File

@@ -9,13 +9,14 @@ import type { Client, API } from "revolt.js";
import { ulid } from "ulid";
import Changelog from "./components/Changelog";
import { Error } from "./components/Error";
import MFAEnableTOTP from "./components/MFAEnableTOTP";
import MFAFlow from "./components/MFAFlow";
import MFARecovery from "./components/MFARecovery";
import OutOfDate from "./components/OutOfDate";
import { ShowToken } from "./components/ShowToken";
import { SignOutSessions } from "./components/SignOutSessions";
import { SignedOut } from "./components/SignedOut";
import Test from "./components/Test";
import { Modal } from "./types";
type Components = Record<string, React.FC<any>>;
@@ -92,6 +93,9 @@ class ModalController<T extends Modal> {
);
}
/**
* Whether a modal is currently visible
*/
get isVisible() {
return this.stack.length > 0;
}
@@ -140,11 +144,12 @@ class ModalControllerExtended extends ModalController<Modal> {
export const modalController = new ModalControllerExtended({
changelog: Changelog,
error: Error,
mfa_flow: MFAFlow,
mfa_recovery: MFARecovery,
mfa_enable_totp: MFAEnableTOTP,
out_of_date: OutOfDate,
show_token: ShowToken,
signed_out: SignedOut,
sign_out_sessions: SignOutSessions,
test: Test,
});

13
src/context/modals/types.ts
View File

@@ -33,13 +33,22 @@ export type Modal = {
initial?: number;
}
| {
type: "sign_out_sessions";
client: Client;
onDelete: () => void;
onDeleting: () => void;
type: "sign_out_sessions";
}
| {
type: "test" | "signed_out";
type: "show_token";
name: string;
token: string;
}
| {
type: "error";
error: string;
}
| {
type: "signed_out";
}
);

21
src/context/revoltjs/FileUploads.tsx
View File

@@ -12,6 +12,7 @@ import { IconButton, Preloader } from "@revoltchat/ui";
import { determineFileSize } from "../../lib/fileSize";
import { useIntermediate } from "../intermediate/Intermediate";
import { modalController } from "../modals";
import { AppContext } from "./RevoltClient";
import { takeError } from "./util";
@@ -139,12 +140,19 @@ export function FileUploader(props: Props) {
);
}
} catch (err) {
return openScreen({ id: "error", error: takeError(err) });
return modalController.push({
type: "error",
error: takeError(err),
});
} finally {
setUploading(false);
}
},
() => openScreen({ id: "error", error: "FileTooLarge" }),
() =>
modalController.push({
type: "error",
error: "FileTooLarge",
}),
props.behaviour === "multi",
);
}
@@ -180,8 +188,8 @@ export function FileUploader(props: Props) {
const blob = item.getAsFile();
if (blob) {
if (blob.size > props.maxFileSize) {
openScreen({
id: "error",
modalController.push({
type: "error",
error: "FileTooLarge",
});
continue;
@@ -212,7 +220,10 @@ export function FileUploader(props: Props) {
const files = [];
for (const item of dropped) {
if (item.size > props.maxFileSize) {
openScreen({ id: "error", error: "FileTooLarge" });
modalController.push({
type: "error",
error: "FileTooLarge",
});
continue;
}

9
src/context/revoltjs/RevoltClient.tsx
View File

@@ -9,7 +9,6 @@ import { Preloader } from "@revoltchat/ui";
import { useApplicationState } from "../../mobx/State";
import { useIntermediate } from "../intermediate/Intermediate";
import { modalController } from "../modals";
import { registerEvents } from "./events";
import { takeError } from "./util";
@@ -30,7 +29,7 @@ export interface ClientOperations {
export const AppContext = createContext<Client>(null!);
export const StatusContext = createContext<ClientStatus>(null!);
export const LogOutContext = createContext((avoidReq?: boolean) => {});
export const LogOutContext = createContext<(avoidReq?: boolean) => void>(null!);
type Props = {
children: Children;
@@ -38,7 +37,6 @@ type Props = {
export default observer(({ children }: Props) => {
const state = useApplicationState();
const { openScreen } = useIntermediate();
const [client, setClient] = useState<Client>(null!);
const [status, setStatus] = useState(ClientStatus.LOADING);
const [loaded, setLoaded] = useState(false);
@@ -72,7 +70,10 @@ export default observer(({ children }: Props) => {
modalController.push({ type: "signed_out" });
} else {
setStatus(ClientStatus.DISCONNECTED);
openScreen({ id: "error", error });
modalController.push({
type: "error",
error,
});
}
})
.finally(() => setLoaded(true));