update prettier config

app/api/newsletter/subscribe.ts

@@ -15,7 +15,7 @@ const bodySchema = zod.object({
 
 export default async function subscribeToNewsletter(
 	req: BlitzApiRequest,
-	res: BlitzApiResponse<Response>
+	res: BlitzApiResponse<Response>,
 ) {
 	if (req.method !== "POST") {
 		const statusCode = 405;

app/auth/mutations/change-password.ts

@@ -20,5 +20,5 @@ export default resolver.pipe(
 		});
 
 		return true;
-	}
+	},
 );

app/auth/mutations/forgot-password.test.ts

@@ -18,7 +18,7 @@ jest.mock("preview-email", () => jest.fn());
 describe.skip("forgotPassword mutation", () => {
 	it("does not throw error if user doesn't exist", async () => {
 		await expect(
-			forgotPassword({ email: "no-user@email.com" }, {} as Ctx)
+			forgotPassword({ email: "no-user@email.com" }, {} as Ctx),
 		).resolves.not.toThrow();
 	});
 

app/auth/mutations/reset-password.test.ts

@@ -53,21 +53,21 @@ describe.skip("resetPassword mutation", () => {
 
 		// Non-existent token
 		await expect(
-			resetPassword({ token: "no-token", password: "", passwordConfirmation: "" }, mockCtx)
+			resetPassword({ token: "no-token", password: "", passwordConfirmation: "" }, mockCtx),
 		).rejects.toThrowError();
 
 		// Expired token
 		await expect(
 			resetPassword(
 				{ token: expiredToken, password: newPassword, passwordConfirmation: newPassword },
-				mockCtx
+				mockCtx,
-			)
+			),
 		).rejects.toThrowError();
 
 		// Good token
 		await resetPassword(
 			{ token: goodToken, password: newPassword, passwordConfirmation: newPassword },
-			mockCtx
+			mockCtx,
 		);
 
 		// Delete's the token
@@ -77,7 +77,7 @@ describe.skip("resetPassword mutation", () => {
 		// Updates user's password
 		const updatedUser = await db.user.findFirst({ where: { id: user.id } });
 		expect(await SecurePassword.verify(updatedUser!.hashedPassword, newPassword)).toBe(
-			SecurePassword.VALID
+			SecurePassword.VALID,
 		);
 	});
 });

app/core/components/labeled-text-field.tsx

@@ -52,7 +52,7 @@ export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldPro
 				`}</style>
 			</div>
 		);
-	}
+	},
 );
 
 export default LabeledTextField;

app/core/hooks/use-customer-phone-number.ts

@@ -8,7 +8,7 @@ export default function useCustomerPhoneNumber() {
 	const [customerPhoneNumber] = useQuery(
 		getCurrentCustomerPhoneNumber,
 		{},
-		{ enabled: hasCompletedOnboarding }
+		{ enabled: hasCompletedOnboarding },
 	);
 
 	return customerPhoneNumber;

app/core/layouts/layout/index.tsx

@@ -114,7 +114,7 @@ const ErrorBoundary = withRouter(
 
 			return this.props.children;
 		}
-	}
+	},
 );
 
 export default Layout;

app/messages/api/queue/fetch-messages.ts

@@ -21,7 +21,7 @@ const fetchMessagesQueue = Queue<Payload>("api/queue/fetch-messages", async ({ c
 		}),
 	]);
 	const messages = [...messagesSent, ...messagesReceived].sort(
-		(a, b) => a.dateCreated.getTime() - b.dateCreated.getTime()
+		(a, b) => a.dateCreated.getTime() - b.dateCreated.getTime(),
 	);
 
 	await insertMessagesQueue.enqueue(
@@ -31,7 +31,7 @@ const fetchMessagesQueue = Queue<Payload>("api/queue/fetch-messages", async ({ c
 		},
 		{
 			id: `insert-messages-${customerId}`,
-		}
+		},
 	);
 });
 

app/messages/api/queue/insert-incoming-message.ts

@@ -46,7 +46,7 @@ const insertIncomingMessageQueue = Queue<Payload>(
 				sentAt: new Date(message.dateCreated),
 			},
 		});
-	}
+	},
 );
 
 export default insertIncomingMessageQueue;

app/messages/api/queue/insert-messages.ts

@@ -29,7 +29,7 @@ const insertMessagesQueue = Queue<Payload>(
 			.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
 
 		await db.message.createMany({ data: sms });
-	}
+	},
 );
 
 export default insertMessagesQueue;

app/messages/api/queue/send-message.ts

@@ -19,7 +19,7 @@ const sendMessageQueue = Queue<Payload>(
 		try {
 			const message = await twilio(
 				customer!.accountSid!,
-				customer!.authToken!
+				customer!.authToken!,
 			).messages.create({
 				body: content,
 				to,
@@ -37,7 +37,7 @@ const sendMessageQueue = Queue<Payload>(
 	},
 	{
 		retry: ["1min"],
-	}
+	},
 );
 
 export default sendMessageQueue;

app/messages/api/webhook/incoming-message.ts

@@ -61,7 +61,7 @@ export default async function incomingMessageHandler(req: BlitzApiRequest, res:
 			customer.authToken,
 			twilioSignature,
 			url,
-			req.body
+			req.body,
 		);
 		if (!isRequestValid) {
 			const statusCode = 400;
@@ -83,7 +83,7 @@ export default async function incomingMessageHandler(req: BlitzApiRequest, res:
 				messageSid,
 				customerId: customer.id,
 			},
-			{ id: messageSid }
+			{ id: messageSid },
 		);
 
 		res.status(200).end();

app/messages/components/conversation.tsx

@@ -57,7 +57,7 @@ export default function Conversation() {
 								<div
 									className={clsx(
 										isSameNext ? "pb-1" : "pb-2",
-										isOutbound ? "text-right" : "text-left"
+										isOutbound ? "text-right" : "text-left",
 									)}
 								>
 									<span
@@ -65,7 +65,7 @@ export default function Conversation() {
 											"inline-block text-left w-[fit-content] p-2 rounded-lg text-white",
 											isOutbound
 												? "bg-[#3194ff] rounded-br-none"
-												: "bg-black rounded-bl-none"
+												: "bg-black rounded-bl-none",
 										)}
 									>
 										{message.content}

app/messages/components/new-message-area.tsx

@@ -25,7 +25,7 @@ const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
 	const sendMessageMutation = useMutation(sendMessage)[0];
 	const { setQueryData: setConversationsQueryData, refetch: refetchConversations } = useQuery(
 		getConversationsQuery,
-		{}
+		{},
 	)[1];
 	const {
 		register,
@@ -65,7 +65,7 @@ const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
 				nextConversations[recipient] = [...nextConversations[recipient]!, message];
 				return nextConversations;
 			},
-			{ refetch: false }
+			{ refetch: false },
 		);
 		setValue("content", "");
 		onSend?.();

app/messages/hooks/use-conversation.ts

@@ -15,6 +15,6 @@ export default function useConversation(recipient: string) {
 				return conversations[recipient]!;
 			},
 			keepPreviousData: true,
-		}
+		},
 	);
 }

app/messages/hooks/use-known-recipients.ts

@@ -9,6 +9,6 @@ export default function useKnownRecipients() {
 			select(conversations) {
 				return Object.keys(conversations);
 			},
-		}
+		},
 	);
 }

app/messages/mutations/send-message.ts

@@ -54,7 +54,7 @@ export default resolver.pipe(
 			},
 			{
 				id: message.id,
-			}
+			},
 		);
-	}
+	},
 );

app/messages/queries/get-conversation.ts

@@ -27,5 +27,5 @@ export default resolver.pipe(
 				content: decrypt(message.content, customer!.encryptionKey),
 			};
 		});
-	}
+	},
 );

app/messages/queries/get-conversations.ts

@@ -33,8 +33,8 @@ export default resolver.pipe(resolver.authorize(), async (_ = null, context) =>
 	}
 	conversations = Object.fromEntries(
 		Object.entries(conversations).sort(
-			([, a], [, b]) => b[b.length - 1]!.sentAt.getTime() - a[a.length - 1]!.sentAt.getTime()
+			([, a], [, b]) => b[b.length - 1]!.sentAt.getTime() - a[a.length - 1]!.sentAt.getTime(),
-		)
+		),
 	);
 
 	return conversations;

app/onboarding/api/queue/set-twilio-webhooks.ts

@@ -37,7 +37,7 @@ const setTwilioWebhooks = Queue<Payload>(
 					voiceApplicationSid: twimlAppSid,
 				}),
 		]);
-	}
+	},
 );
 
 export default setTwilioWebhooks;

app/onboarding/components/onboarding-layout.tsx

@@ -65,7 +65,7 @@ const OnboardingLayout: FunctionComponent<Props> = ({ children, currentStep, pre
 										key={step}
 										className={clsx(
 											stepIdx !== steps.length - 1 ? "pr-20 sm:pr-32" : "",
-											"relative"
+											"relative",
 										)}
 									>
 										{isComplete ? (

app/onboarding/mutations/set-phone-number.ts

@@ -20,7 +20,7 @@ export default resolver.pipe(
 		const customerId = customer!.id;
 		const phoneNumbers = await twilio(
 			customer!.accountSid!,
-			customer!.authToken!
+			customer!.authToken!,
 		).incomingPhoneNumbers.list();
 		const phoneNumber = phoneNumbers.find((phoneNumber) => phoneNumber.sid === phoneNumberSid)!;
 		await db.phoneNumber.create({
@@ -36,5 +36,5 @@ export default resolver.pipe(
 			fetchCallsQueue.enqueue({ customerId }, { id: `fetch-messages-${customerId}` }),
 			setTwilioWebhooks.enqueue({ customerId }, { id: `set-twilio-webhooks-${customerId}` }),
 		]);
-	}
+	},
 );

app/onboarding/mutations/set-twilio-api-fields.ts

@@ -22,5 +22,5 @@ export default resolver.pipe(
 				authToken: twilioAuthToken,
 			},
 		});
-	}
+	},
 );

app/onboarding/pages/welcome/step-three.tsx

@@ -70,7 +70,7 @@ const StepThree: BlitzPage<Props> = ({ availablePhoneNumbers }) => {
 					className={clsx(
 						"max-w-[240px] mt-6 mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
 						!isSubmitting && "bg-primary-600 hover:bg-primary-700",
-						isSubmitting && "bg-primary-400 cursor-not-allowed"
+						isSubmitting && "bg-primary-400 cursor-not-allowed",
 					)}
 				>
 					Save
@@ -131,7 +131,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async ({ req, res }
 
 	const incomingPhoneNumbers = await twilio(
 		customer.accountSid,
-		customer.authToken
+		customer.authToken,
 	).incomingPhoneNumbers.list();
 	const phoneNumbers = incomingPhoneNumbers.map(({ phoneNumber, sid }) => ({ phoneNumber, sid }));
 

app/onboarding/pages/welcome/step-two.tsx

@@ -1,7 +1,8 @@
+import type { FunctionComponent } from "react";
+import { Suspense, useEffect } from "react";
 import type { BlitzPage, GetServerSideProps } from "blitz";
 import { getSession, Routes, useMutation, useRouter } from "blitz";
 import clsx from "clsx";
-import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import db from "db";
@@ -80,7 +81,7 @@ const StepTwo: BlitzPage = () => {
 					className={clsx(
 						"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
 						!isSubmitting && "bg-primary-600 hover:bg-primary-700",
-						isSubmitting && "bg-primary-400 cursor-not-allowed"
+						isSubmitting && "bg-primary-400 cursor-not-allowed",
 					)}
 				>
 					Save
@@ -90,7 +91,15 @@ const StepTwo: BlitzPage = () => {
 	);
 };
 
-StepTwo.getLayout = function StepTwoLayout(page) {
+StepTwo.getLayout = (page) => {
+	return (
+		<Suspense fallback="Silence, ca pousse">
+			<StepTwoLayout>{page}</StepTwoLayout>
+		</Suspense>
+	);
+};
+
+const StepTwoLayout: FunctionComponent = ({ children }) => {
 	const { customer } = useCurrentCustomer();
 	const initialAuthToken = customer?.authToken ?? "";
 	const initialAccountSid = customer?.accountSid ?? "";
@@ -106,7 +115,7 @@ StepTwo.getLayout = function StepTwoLayout(page) {
 			}
 			previous={{ href: Routes.StepOne().pathname, label: "Back" }}
 		>
-			{page}
+			{children}
 		</OnboardingLayout>
 	);
 };

app/phone-calls/api/queue/fetch-calls.ts

@@ -21,7 +21,7 @@ const fetchCallsQueue = Queue<Payload>("api/queue/fetch-calls", async ({ custome
 		}),
 	]);
 	const calls = [...callsSent, ...callsReceived].sort(
-		(a, b) => a.dateCreated.getTime() - b.dateCreated.getTime()
+		(a, b) => a.dateCreated.getTime() - b.dateCreated.getTime(),
 	);
 
 	await insertCallsQueue.enqueue(
@@ -31,7 +31,7 @@ const fetchCallsQueue = Queue<Payload>("api/queue/fetch-calls", async ({ custome
 		},
 		{
 			id: `insert-calls-${customerId}`,
-		}
+		},
 	);
 });
 

app/phone-calls/queries/get-phone-calls.ts

@@ -28,5 +28,5 @@ export default resolver.pipe(
 			hasMore,
 			count,
 		};
-	}
+	},
 );

app/phone-numbers/queries/get-customer-phone-number.ts

@@ -15,5 +15,5 @@ export default resolver.pipe(resolver.zod(GetCustomerPhoneNumber), async ({ cust
 			phoneNumber: true,
 			phoneNumberSid: true,
 		},
-	})
+	}),
 );

app/settings/components/button.tsx

@@ -18,7 +18,7 @@ const Button: FunctionComponent<Props> = ({ children, type, variant, onClick, is
 				{
 					[VARIANTS_STYLES[variant].base]: !isDisabled,
 					[VARIANTS_STYLES[variant].disabled]: isDisabled,
-				}
+				},
 			)}
 			disabled={isDisabled}
 		>

app/settings/components/danger-zone.tsx

@@ -72,7 +72,7 @@ export default function DangerZone() {
 							{
 								"bg-red-400 cursor-not-allowed": isDeletingUser,
 								"bg-red-600 hover:bg-red-700": !isDeletingUser,
-							}
+							},
 						)}
 						onClick={onConfirm}
 						disabled={isDeletingUser}
@@ -87,7 +87,7 @@ export default function DangerZone() {
 							{
 								"bg-gray-50 cursor-not-allowed": isDeletingUser,
 								"hover:bg-gray-50": !isDeletingUser,
-							}
+							},
 						)}
 						onClick={closeModal}
 						disabled={isDeletingUser}

mailers/forgot-password-mailer.ts

@@ -36,7 +36,7 @@ export function forgotPasswordMailer({ to, token }: ResetPasswordMailer) {
 				// TODO - send the production email, like this:
 				// await postmark.sendEmail(msg)
 				throw new Error(
-					"No production email implementation in mailers/forgotPasswordMailer"
+					"No production email implementation in mailers/forgotPasswordMailer",
 				);
 			} else {
 				// Preview email in the browser

package.json

@@ -21,7 +21,11 @@
 		"semi": true,
 		"useTabs": true,
 		"tabWidth": 4,
-		"printWidth": 100
+		"printWidth": 100,
+		"trailingComma": "all",
+		"jsxBracketSameLine": false,
+		"quoteProps": "as-needed",
+		"singleQuote": false
 	},
 	"lint-staged": {
 		"*.{js,ts,tsx}": [

test/utils.tsx

@@ -26,7 +26,7 @@ export * from "@testing-library/react";
 // --------------------------------------------------
 export function render(
 	ui: RenderUI,
-	{ wrapper, router, dehydratedState, ...options }: RenderOptions = {}
+	{ wrapper, router, dehydratedState, ...options }: RenderOptions = {},
 ) {
 	if (!wrapper) {
 		// Add a default context wrapper if one isn't supplied from the test
@@ -54,7 +54,7 @@ export function render(
 // --------------------------------------------------
 export function renderHook(
 	hook: RenderHook,
-	{ wrapper, router, dehydratedState, ...options }: RenderHookOptions = {}
+	{ wrapper, router, dehydratedState, ...options }: RenderHookOptions = {},
 ) {
 	if (!wrapper) {
 		// Add a default context wrapper if one isn't supplied from the test