From abfe85f363aeda7bf30f13969ee4df80c0f10a91 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sat, 18 Feb 2023 20:11:12 +0100
Subject: [PATCH] fix: Apply Prettier

---
 src/apis/check-is-domain-disposable.ts        |  4 +-
 src/components/widgets/FaviconImage.tsx       | 16 ++-----
 .../widgets/MultiStepForm.module.css          | 48 +++++++++----------
 src/components/widgets/MultiStepForm.tsx      | 36 ++++----------
 .../widgets/MultiStepFormElement.tsx          |  4 +-
 src/components/widgets/PasswordField.tsx      | 18 ++-----
 src/components/widgets/SimplePage.tsx         | 11 +----
 src/constants/themes.ts                       |  4 +-
 src/hocs/WithEncryptionRequired.tsx           |  4 +-
 src/hooks/use-interval-update.ts              |  4 +-
 src/hooks/use-ui-state.ts                     |  4 +-
 src/main.tsx                                  |  4 +-
 .../EmailForm/DetectEmailAutofillService.tsx  | 36 ++++----------
 src/routes/SignupRoute.tsx                    | 17 ++-----
 src/utils/when-enter-pressed.ts               |  4 +-
 15 files changed, 61 insertions(+), 153 deletions(-)

diff --git a/src/apis/check-is-domain-disposable.ts b/src/apis/check-is-domain-disposable.ts
index a9c316c..5e894f6 100644
--- a/src/apis/check-is-domain-disposable.ts
+++ b/src/apis/check-is-domain-disposable.ts
@@ -1,8 +1,6 @@
 import {client} from "~/constants/axios-client"
 
-export default async function checkIsDomainDisposable(
-	domain: string,
-): Promise<boolean> {
+export default async function checkIsDomainDisposable(domain: string): Promise<boolean> {
 	const {data} = await client.get(`https://api.mailcheck.ai/domain/${domain}`)
 
 	return !data.mx || data.disposable
diff --git a/src/components/widgets/FaviconImage.tsx b/src/components/widgets/FaviconImage.tsx
index ca1c43c..e1387e4 100644
--- a/src/components/widgets/FaviconImage.tsx
+++ b/src/components/widgets/FaviconImage.tsx
@@ -2,10 +2,7 @@ import React, {ReactElement, useState} from "react"
 
 export interface FaviconImageProps
 	extends Omit<
-		React.DetailedHTMLProps<
-			React.ImgHTMLAttributes<HTMLImageElement>,
-			HTMLImageElement
-		>,
+		React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
 		"src"
 	> {
 	url: string
@@ -16,10 +13,7 @@ const getDomain = (url: string): string => {
 	return `${hostname}${port ? `:${port}` : ""}`
 }
 
-export default function FaviconImage({
-	url,
-	...props
-}: FaviconImageProps): ReactElement {
+export default function FaviconImage({url, ...props}: FaviconImageProps): ReactElement {
 	const [source, setSource] = useState<string>(`${url}/favicon.ico`)
 
 	return (
@@ -27,11 +21,7 @@ export default function FaviconImage({
 			{...props}
 			src={source}
 			onError={() =>
-				setSource(
-					`https://external-content.duckduckgo.com/ip3/${getDomain(
-						url,
-					)}.ico`,
-				)
+				setSource(`https://external-content.duckduckgo.com/ip3/${getDomain(url)}.ico`)
 			}
 		/>
 	)
diff --git a/src/components/widgets/MultiStepForm.module.css b/src/components/widgets/MultiStepForm.module.css
index 55743ee..3c7efec 100644
--- a/src/components/widgets/MultiStepForm.module.css
+++ b/src/components/widgets/MultiStepForm.module.css
@@ -1,37 +1,37 @@
 .animateOut {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
 
-    animation: slideOut 3s linear;
+	animation: slideOut 3s linear;
 }
 
 .animateIn {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
 
-    animation: slideIn 3s linear;
+	animation: slideIn 3s linear;
 }
 
 @keyframes slideIn {
-    0% {
-        transform: translateX(100%);
-    }
-    100% {
-        transform: translateX(0);
-    }
+	0% {
+		transform: translateX(100%);
+	}
+	100% {
+		transform: translateX(0);
+	}
 }
 
 @keyframes slideOut {
-    0% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(-100%);
-    }
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-100%);
+	}
 }
diff --git a/src/components/widgets/MultiStepForm.tsx b/src/components/widgets/MultiStepForm.tsx
index ffcd3ca..6f7e875 100644
--- a/src/components/widgets/MultiStepForm.tsx
+++ b/src/components/widgets/MultiStepForm.tsx
@@ -46,8 +46,7 @@ function MultiStepForm({
 	}, [index, currentIndex])
 
 	const hasSize = Boolean(
-		(currentSize?.width || nextSize?.width) &&
-			(currentSize?.height || nextSize?.height),
+		(currentSize?.width || nextSize?.width) && (currentSize?.height || nextSize?.height),
 	)
 
 	return (
@@ -58,12 +57,8 @@ function MultiStepForm({
 				flexDirection: "column",
 				alignItems: "center",
 				justifyContent: "center",
-				width:
-					Math.max(currentSize?.width || 0, nextSize?.width || 0) ||
-					"100%",
-				height:
-					Math.max(currentSize?.height || 0, nextSize?.height || 0) ||
-					"100%",
+				width: Math.max(currentSize?.width || 0, nextSize?.width || 0) || "100%",
+				height: Math.max(currentSize?.height || 0, nextSize?.height || 0) || "100%",
 				overflow: hasSize ? "hidden" : "visible",
 			}}
 		>
@@ -73,13 +68,9 @@ function MultiStepForm({
 					...currentSize,
 					position: "absolute",
 					transition: easing,
-					transitionDuration: isTransitioning
-						? `${duration}ms`
-						: "0ms",
+					transitionDuration: isTransitioning ? `${duration}ms` : "0ms",
 					transformOrigin: isTransitioning
-						? `${nextSize?.x - currentSize.x}px ${
-								nextSize?.y - currentSize.y
-						  }px`
+						? `${nextSize?.x - currentSize.x}px ${nextSize?.y - currentSize.y}px`
 						: "",
 					// Scale the difference between currentSize and nextSize
 					transform: isTransitioning
@@ -102,12 +93,7 @@ function MultiStepForm({
 					// @ts-ignore
 					$currentElement.current = ref
 
-					const {
-						width = 0,
-						height = 0,
-						x,
-						y,
-					} = ref.getBoundingClientRect()
+					const {width = 0, height = 0, x, y} = ref.getBoundingClientRect()
 
 					if (
 						width !== 0 &&
@@ -152,16 +138,10 @@ function MultiStepForm({
 					height: "max-content",
 					transition: easing,
 					transitionDuration: isTransitioning ? `${duration}ms` : "",
-					transform: isTransitioning
-						? ""
-						: nextSize?.x
-						? "translateX(100%)"
-						: "",
+					transform: isTransitioning ? "" : nextSize?.x ? "translateX(100%)" : "",
 				}}
 			>
-				{currentIndex === steps.length - 1
-					? null
-					: steps[currentIndex + 1]}
+				{currentIndex === steps.length - 1 ? null : steps[currentIndex + 1]}
 			</div>
 		</div>
 	)
diff --git a/src/components/widgets/MultiStepFormElement.tsx b/src/components/widgets/MultiStepFormElement.tsx
index 59f0852..01c0839 100644
--- a/src/components/widgets/MultiStepFormElement.tsx
+++ b/src/components/widgets/MultiStepFormElement.tsx
@@ -6,9 +6,7 @@ export interface MultiStepFormElementProps {
 	children: ReactElement
 }
 
-export default function MultiStepFormElement({
-	children,
-}: MultiStepFormElementProps): ReactElement {
+export default function MultiStepFormElement({children}: MultiStepFormElementProps): ReactElement {
 	return (
 		<Box maxWidth="90vw" justifyContent="center" alignItems="center">
 			<Container maxWidth="xs">{children}</Container>
diff --git a/src/components/widgets/PasswordField.tsx b/src/components/widgets/PasswordField.tsx
index d5c99c9..8a9df1b 100644
--- a/src/components/widgets/PasswordField.tsx
+++ b/src/components/widgets/PasswordField.tsx
@@ -1,12 +1,7 @@
 import {MdVisibility, MdVisibilityOff} from "react-icons/md"
 import React, {ReactElement, useState} from "react"
 
-import {
-	IconButton,
-	InputAdornment,
-	TextField,
-	TextFieldProps,
-} from "@mui/material"
+import {IconButton, InputAdornment, TextField, TextFieldProps} from "@mui/material"
 
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type"> {}
 
@@ -24,15 +19,8 @@ export default function PasswordField({
 				...InputProps,
 				endAdornment: (
 					<InputAdornment position="end">
-						<IconButton
-							edge="end"
-							onClick={() => setShowPassword(value => !value)}
-						>
-							{showPassword ? (
-								<MdVisibilityOff />
-							) : (
-								<MdVisibility />
-							)}
+						<IconButton edge="end" onClick={() => setShowPassword(value => !value)}>
+							{showPassword ? <MdVisibilityOff /> : <MdVisibility />}
 						</IconButton>
 					</InputAdornment>
 				),
diff --git a/src/components/widgets/SimplePage.tsx b/src/components/widgets/SimplePage.tsx
index 4840018..9a1f1c9 100644
--- a/src/components/widgets/SimplePage.tsx
+++ b/src/components/widgets/SimplePage.tsx
@@ -28,12 +28,7 @@ export default function SimplePage({
 				</Typography>
 			</Grid>
 			<Grid item width="100%">
-				<Grid
-					container
-					spacing={4}
-					flexDirection="column"
-					alignItems="stretch"
-				>
+				<Grid container spacing={4} flexDirection="column" alignItems="stretch">
 					{subtitle && (
 						<Grid item>
 							<Typography variant="h6" component="h2">
@@ -48,9 +43,7 @@ export default function SimplePage({
 							</Typography>
 						</Grid>
 					)}
-					{pageOptionsActions && (
-						<Grid item>{pageOptionsActions}</Grid>
-					)}
+					{pageOptionsActions && <Grid item>{pageOptionsActions}</Grid>}
 					<Grid item>{children}</Grid>
 				</Grid>
 			</Grid>
diff --git a/src/constants/themes.ts b/src/constants/themes.ts
index 2438f6c..175bbc7 100644
--- a/src/constants/themes.ts
+++ b/src/constants/themes.ts
@@ -4,8 +4,8 @@ export const lightTheme = createTheme({
 	palette: {
 		mode: "dark",
 		secondary: {
-		    main: "#ACF",
-		    contrastText: "#FFF",
+			main: "#ACF",
+			contrastText: "#FFF",
 		},
 	},
 })
diff --git a/src/hocs/WithEncryptionRequired.tsx b/src/hocs/WithEncryptionRequired.tsx
index 134ff94..7c021cc 100644
--- a/src/hocs/WithEncryptionRequired.tsx
+++ b/src/hocs/WithEncryptionRequired.tsx
@@ -2,9 +2,7 @@ import {ReactElement} from "react"
 
 import {DecryptionPasswordMissingAlert} from "~/components"
 
-export default function WithEncryptionRequired(
-	Component: any,
-): (props: any) => ReactElement {
+export default function WithEncryptionRequired(Component: any): (props: any) => ReactElement {
 	return (props: any): ReactElement => {
 		return (
 			<DecryptionPasswordMissingAlert>
diff --git a/src/hooks/use-interval-update.ts b/src/hooks/use-interval-update.ts
index 7f70f8f..16c74c9 100644
--- a/src/hooks/use-interval-update.ts
+++ b/src/hooks/use-interval-update.ts
@@ -1,8 +1,6 @@
 import {useEffect, useState} from "react"
 
-export default function useIntervalUpdate(
-	updateIntervalInMilliSeconds = 1000,
-): [Date, () => void] {
+export default function useIntervalUpdate(updateIntervalInMilliSeconds = 1000): [Date, () => void] {
 	const [, setForceUpdateValue] = useState<number>(0)
 	const [startDate, setStartDate] = useState(() => new Date())
 
diff --git a/src/hooks/use-ui-state.ts b/src/hooks/use-ui-state.ts
index a2a3be5..b8473a5 100644
--- a/src/hooks/use-ui-state.ts
+++ b/src/hooks/use-ui-state.ts
@@ -1,9 +1,7 @@
 import {Dispatch, SetStateAction, useState} from "react"
 import {useUpdateEffect} from "react-use"
 
-export default function useUIState<T>(
-	outerValue: T,
-): [T, Dispatch<SetStateAction<T>>] {
+export default function useUIState<T>(outerValue: T): [T, Dispatch<SetStateAction<T>>] {
 	const [value, setValue] = useState<T>(outerValue)
 
 	useUpdateEffect(() => {
diff --git a/src/main.tsx b/src/main.tsx
index 3707268..a224cfc 100755
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,6 +3,4 @@ import ReactDOM from "react-dom/client"
 
 import App from "~/App"
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLDivElement).render(
-	<App />,
-)
+ReactDOM.createRoot(document.getElementById("root") as HTMLDivElement).render(<App />)
diff --git a/src/route-widgets/SignupRoute/EmailForm/DetectEmailAutofillService.tsx b/src/route-widgets/SignupRoute/EmailForm/DetectEmailAutofillService.tsx
index 1b12989..dfb2e81 100644
--- a/src/route-widgets/SignupRoute/EmailForm/DetectEmailAutofillService.tsx
+++ b/src/route-widgets/SignupRoute/EmailForm/DetectEmailAutofillService.tsx
@@ -1,12 +1,6 @@
 import {MdCheck} from "react-icons/md"
 import {useSessionStorage} from "react-use"
-import React, {
-	ReactElement,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from "react"
+import React, {ReactElement, useCallback, useEffect, useRef, useState} from "react"
 
 import {
 	Alert,
@@ -41,10 +35,7 @@ export default function DetectEmailAutofillService({
 	const $hasDetected = useRef<boolean>(false)
 
 	const [type, setType] = useState<AliasType | null>(null)
-	const [hasShownModal, setHasShownModal] = useSessionStorage<boolean>(
-		STORAGE_KEY,
-		false,
-	)
+	const [hasShownModal, setHasShownModal] = useSessionStorage<boolean>(STORAGE_KEY, false)
 
 	const handleFound = useCallback(
 		(type: AliasType) => {
@@ -72,9 +63,7 @@ export default function DetectEmailAutofillService({
 			return false
 		}
 		const checkSimpleLogin = () => {
-			const $element = document.querySelector(
-				"body > div.sl-button-wrapper",
-			)
+			const $element = document.querySelector("body > div.sl-button-wrapper")
 
 			if (
 				$element &&
@@ -116,17 +105,14 @@ export default function DetectEmailAutofillService({
 				<Grid container spacing={2} justifyContent="center">
 					<Grid item>
 						<DialogContentText>
-							We detected that you are using an email relay
-							service to sign up. This KleckRelay instance does
-							not support relaying to another email relay service.
-							You can either choose a different instance or sign
-							up with a different email address.
+							We detected that you are using an email relay service to sign up. This
+							KleckRelay instance does not support relaying to another email relay
+							service. You can either choose a different instance or sign up with a
+							different email address.
 						</DialogContentText>
 					</Grid>
 					<Grid item>
-						<DialogContentText>
-							Detected email relay:
-						</DialogContentText>
+						<DialogContentText>Detected email relay:</DialogContentText>
 					</Grid>
 					<Grid item>
 						<Alert severity="info">{TYPE_NAME_MAP[type!]}</Alert>
@@ -134,11 +120,7 @@ export default function DetectEmailAutofillService({
 				</Grid>
 			</DialogContent>
 			<DialogActions>
-				<Button
-					autoFocus
-					startIcon={<MdCheck />}
-					onClick={() => setType(null)}
-				>
+				<Button autoFocus startIcon={<MdCheck />} onClick={() => setType(null)}>
 					Got it
 				</Button>
 			</DialogActions>
diff --git a/src/routes/SignupRoute.tsx b/src/routes/SignupRoute.tsx
index eb17a27..7297570 100644
--- a/src/routes/SignupRoute.tsx
+++ b/src/routes/SignupRoute.tsx
@@ -9,26 +9,15 @@ import YouGotMail from "~/route-widgets/SignupRoute/YouGotMail"
 
 export default function SignupRoute(): ReactElement {
 	const serverSettings = useLoaderData() as ServerSettings
-	const [email, setEmail] = useLocalStorage<string>(
-		"signup-form-state-email",
-		"",
-	)
+	const [email, setEmail] = useLocalStorage<string>("signup-form-state-email", "")
 
 	const index = email ? 1 : 0
 
 	return (
 		<MultiStepForm
 			steps={[
-				<EmailForm
-					serverSettings={serverSettings}
-					onSignUp={setEmail}
-					key="email"
-				/>,
-				<YouGotMail
-					onGoBack={() => setEmail("")}
-					email={email || ""}
-					key="you_got_mail"
-				/>,
+				<EmailForm serverSettings={serverSettings} onSignUp={setEmail} key="email" />,
+				<YouGotMail onGoBack={() => setEmail("")} email={email || ""} key="you_got_mail" />,
 			]}
 			index={index}
 		/>
diff --git a/src/utils/when-enter-pressed.ts b/src/utils/when-enter-pressed.ts
index 51ddbed..d2659c4 100644
--- a/src/utils/when-enter-pressed.ts
+++ b/src/utils/when-enter-pressed.ts
@@ -1,8 +1,6 @@
 import {KeyboardEventHandler} from "react"
 
-export default function whenEnterPressed<T = HTMLDivElement>(
-	callback: KeyboardEventHandler<T>,
-) {
+export default function whenEnterPressed<T = HTMLDivElement>(callback: KeyboardEventHandler<T>) {
 	return (event: any) => {
 		if (event.key === "Enter") {
 			callback(event)