Handle expired token errors with new react-query approach

src/components/shells/ApiErrorShell.tsx

@@ -9,14 +9,17 @@ export default function ApiErrorShell() {
 	useEvents(data => {
 		switch (data.type) {
 			case EventTypes.API_CALL_FAIL:
+			case EventTypes.API_CALL_FAIL_V2: {
 				// If the stored token has expired, the user will have to log in again
-				if (data.response.status === 401) {
+				const thingWithStatus = "response" in data ? data.response : data.error;
+				if (thingWithStatus.status === 401) {
 					ApiActions.forceLogout();
 					void navigate("/login", {
 						viewTransition: true,
 					});
 				}
 				break;
+			}
 		}
 	});
 

src/data/ApiActions.ts

@@ -3,7 +3,7 @@ import type { ApiResponse } from "./ApiRequests";
 import ApiRequests from "./ApiRequests";
 import Events from "./events/Events";
 import { EventTypes } from "./events/eventTypes";
-import type { ApiGetDiscordResponse, ApiGetMeResponse, ApiPatchMeRequest } from "./schemas";
+import type { ApiPatchMeRequest } from "./schemas";
 import { useDiscordStore } from "./state/discord";
 import { useLoginStore } from "./state/login";
 import { useUserStore } from "./state/user";
@@ -84,7 +84,7 @@ import { useUserStore } from "./state/user";
 const TAG = "ApiActions";
 
 export default class ApiActions {
-	public static fetchSelf(): void {
+	static fetchSelf(): void {
 		Events.emit(EventTypes.FETCH_SELF);
 		this.invokeApi(
 			async () => ApiRequests.getMe(),
@@ -122,7 +122,7 @@ export default class ApiActions {
 		);
 	}
 
-	public static fetchDiscordConnection(): void {
+	static fetchDiscordConnection(): void {
 		Events.emit(EventTypes.FETCH_DISCORD_CONNECTION);
 		this.invokeApi(
 			async () => ApiRequests.getDiscord(),
@@ -167,7 +167,7 @@ export default class ApiActions {
 		);
 	}
 
-	public static exchangeRubCode(code: string, state: string): void {
+	static exchangeRubCode(code: string, state: string): void {
 		Events.emit(EventTypes.RUB_EXCHANGE_CODE);
 		this.invokeApi(
 			async () => ApiRequests.postAuthRubToken({ code, state }),

src/data/ApiRequests.ts

@@ -27,6 +27,8 @@ import type {
 	ApiPostAuthRubResponse,
 	ApiPostAuthRubTokenRequest,
 } from "./schemas";
+import Events from "./events/Events";
+import { EventTypes } from "./events/eventTypes";
 
 export type ApiResponse<T> = {
 	status: number;
@@ -150,6 +152,7 @@ export default class ApiRequests {
 			if (options?.errorHook) {
 				options.errorHook(error);
 			}
+			Events.emit(EventTypes.API_CALL_FAIL_V2, { error });
 			throw error;
 		}
 		return response.data;

src/data/events/eventTypes.ts

 import type { IntlMessageMap } from "../../components/i18n/AppIntlProvider";
-import type { ApiErrorResponse, ApiResponse } from "../ApiRequests";
+import type { ApiError, ApiErrorResponse, ApiResponse } from "../ApiRequests";
 import type {
 	ApiDeleteDiscordResponse,
 	ApiGetDiscordResponse,
@@ -35,6 +35,7 @@ export const EventTypes = {
 	LOGOUT_COMPLETE: "LOGOUT_COMPLETE",
 
 	API_CALL_FAIL: "API_CALL_FAIL",
+	API_CALL_FAIL_V2: "API_CALL_FAIL_V2",
 	POPUP_FAIL: "POPUP_FAIL",
 
 	LANGUAGE_LOAD_SUCCESS: "LANGUAGE_LOAD_SUCCESS",
@@ -62,6 +63,7 @@ export interface EventData {
 	[EventTypes.LOGOUT_FAIL]: { error: Error };
 
 	[EventTypes.API_CALL_FAIL]: { error: Error; response: ApiResponse<ApiErrorResponse> };
+	[EventTypes.API_CALL_FAIL_V2]: { error: ApiError };
 	[EventTypes.POPUP_FAIL]: { error: Error };
 
 	[EventTypes.LANGUAGE_LOAD_SUCCESS]: { language: IntlMessageMap };