Manually fix translations and update node packages (#502)

front/apps/mobile/app/_layout.tsx

@@ -26,10 +26,6 @@ import {
 	Poppins_900Black,
 	useFonts,
 } from "@expo-google-fonts/poppins";
-import "@formatjs/intl-displaynames/locale-data/en";
-import "@formatjs/intl-displaynames/locale-data/fr";
-import "@formatjs/intl-displaynames/polyfill";
-import "@formatjs/intl-locale/polyfill";
 import { PortalProvider } from "@gorhom/portal";
 import { AccountProvider, createQueryClient, storage, useUserTheme } from "@kyoo/models";
 import { SnackbarProvider, ThemeSelector } from "@kyoo/primitives";
@@ -45,14 +41,11 @@ import "intl-pluralrules";
 import { type ReactNode, useEffect, useState } from "react";
 import { initReactI18next } from "react-i18next";
 import { useColorScheme } from "react-native";
+import resources from "../../../translations";
 
 import NetInfo from "@react-native-community/netinfo";
 import { onlineManager } from "@tanstack/react-query";
 import { useTheme } from "yoshiki/native";
-// TODO: use a backend to load jsons.
-import en from "../../../translations/en.json";
-import fr from "../../../translations/fr.json";
-import zh from "../../../translations/zh.json";
 
 onlineManager.setEventListener((setOnline) => {
 	return NetInfo.addEventListener((state) => {
@@ -81,11 +74,7 @@ i18next.use(initReactI18next).init({
 	},
 	fallbackLng: "en",
 	lng: getLocales()[0].languageCode ?? "en",
-	resources: {
-		en: { translation: en },
-		fr: { translation: fr },
-		zh: { translation: zh },
-	},
+	resources,
 });
 
 const NavigationThemeProvider = ({ children }: { children: ReactNode }) => {

front/apps/mobile/package.json

@@ -15,58 +15,57 @@
 	},
 	"dependencies": {
 		"@expo-google-fonts/poppins": "^0.2.3",
-		"@formatjs/intl-displaynames": "^6.6.6",
-		"@formatjs/intl-locale": "^3.4.5",
+		"@formatjs/intl-displaynames": "^6.6.8",
+		"@formatjs/intl-locale": "^4.0.0",
 		"@gorhom/portal": "^1.0.14",
-		"@kesha-antonov/react-native-background-downloader": "git+https://github.com/zoriya/react-native-background-downloader.git",
+		"@kesha-antonov/react-native-background-downloader": "^3.1.3",
 		"@kyoo/ui": "workspace:^",
-		"@material-symbols/svg-400": "^0.14.6",
-		"@react-native-community/netinfo": "11.1.0",
-		"@shopify/flash-list": "1.6.3",
-		"@tanstack/query-sync-storage-persister": "^5.17.19",
-		"@tanstack/react-query": "^5.17.19",
-		"@tanstack/react-query-persist-client": "^5.17.19",
+		"@material-symbols/svg-400": "^0.18.0",
+		"@react-native-community/netinfo": "11.3.1",
+		"@shopify/flash-list": "1.6.4",
+		"@tanstack/query-sync-storage-persister": "^5.37.1",
+		"@tanstack/react-query": "^5.37.1",
+		"@tanstack/react-query-persist-client": "^5.37.1",
 		"array-shuffle": "^3.0.0",
 		"babel-plugin-transform-inline-environment-variables": "^0.4.4",
-		"expo": "^50.0.4",
-		"expo-build-properties": "~0.11.0",
-		"expo-constants": "~15.4.5",
-		"expo-dev-client": "~3.3.7",
-		"expo-file-system": "~16.0.5",
-		"expo-font": "~11.10.2",
-		"expo-image-picker": "~14.7.1",
-		"expo-linear-gradient": "~12.7.1",
-		"expo-linking": "~6.2.2",
-		"expo-localization": "~14.8.3",
-		"expo-navigation-bar": "~2.8.1",
-		"expo-router": "3.4.6",
-		"expo-screen-orientation": "~6.4.1",
-		"expo-secure-store": "~12.8.1",
-		"expo-status-bar": "~1.11.1",
-		"expo-updates": "~0.24.9",
-		"i18next": "^23.7.20",
+		"expo": "^51.0.8",
+		"expo-build-properties": "~0.12.1",
+		"expo-constants": "~16.0.1",
+		"expo-dev-client": "~4.0.14",
+		"expo-file-system": "~17.0.1",
+		"expo-font": "~12.0.5",
+		"expo-image-picker": "~15.0.5",
+		"expo-linear-gradient": "~13.0.2",
+		"expo-linking": "~6.3.1",
+		"expo-localization": "~15.0.3",
+		"expo-navigation-bar": "~3.0.4",
+		"expo-router": "3.5.14",
+		"expo-screen-orientation": "~7.0.5",
+		"expo-secure-store": "~13.0.1",
+		"expo-status-bar": "~1.12.1",
+		"expo-updates": "~0.25.14",
+		"i18next": "^23.11.4",
 		"intl-pluralrules": "^2.0.1",
-		"moti": "^0.27.2",
+		"moti": "^0.29.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-i18next": "^14.0.1",
-		"react-native": "0.73.2",
-		"react-native-blurhash": "^1.1.11",
+		"react-i18next": "^14.1.1",
+		"react-native": "0.74.1",
+		"react-native-blurhash": "^2.0.2",
 		"react-native-fast-image": "^8.6.3",
-		"react-native-mmkv": "^2.11.0",
-		"react-native-reanimated": "~3.6.2",
-		"react-native-safe-area-context": "4.8.2",
-		"react-native-screens": "~3.29.0",
-		"react-native-svg": "14.1.0",
-		"react-native-uuid": "^2.0.1",
-		"react-native-video": "^6.0.0-beta.4",
+		"react-native-mmkv": "^2.12.2",
+		"react-native-reanimated": "~3.10.1",
+		"react-native-safe-area-context": "4.10.1",
+		"react-native-screens": "~3.31.1",
+		"react-native-svg": "15.2.0",
+		"react-native-uuid": "^2.0.2",
+		"react-native-video": "^6.0.0",
 		"yoshiki": "1.2.14"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.23.9",
-		"@types/react": "18.2.48",
-		"react-native-svg-transformer": "^1.3.0",
-		"typescript": "^5.3.3"
+		"@babel/core": "^7.24.5",
+		"react-native-svg-transformer": "^1.4.0",
+		"typescript": "~5.3.3"
 	},
 	"installConfig": {
 		"hoistingLimits": "workspaces"

front/apps/web/package.json

@@ -16,46 +16,45 @@
 		"@kyoo/models": "workspace:^",
 		"@kyoo/primitives": "workspace:^",
 		"@kyoo/ui": "workspace:^",
-		"@material-symbols/svg-400": "^0.14.6",
+		"@material-symbols/svg-400": "^0.18.0",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-select": "^2.0.0",
-		"@tanstack/react-query": "^5.17.19",
-		"@tanstack/react-query-devtools": "^5.17.21",
+		"@tanstack/react-query": "^5.37.1",
+		"@tanstack/react-query-devtools": "^5.37.1",
 		"array-shuffle": "^3.0.0",
-		"expo-image-picker": "~14.7.1",
-		"expo-linear-gradient": "^12.7.1",
-		"expo-modules-core": "^1.11.8",
-		"hls.js": "^1.5.6",
-		"i18next": "^23.7.20",
+		"expo-image-picker": "~15.0.5",
+		"expo-linear-gradient": "^13.0.2",
+		"expo-modules-core": "^1.12.11",
+		"hls.js": "^1.5.8",
+		"i18next": "^23.11.4",
 		"jassub": "^1.7.15",
-		"jotai": "^2.6.3",
-		"moti": "^0.27.2",
-		"next": "14.1.0",
+		"jotai": "^2.8.0",
+		"moti": "^0.29.0",
+		"next": "14.2.3",
 		"next-translate": "^2.6.2",
 		"raf": "^3.4.1",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"react-i18next": "^14.0.1",
-		"react-native-reanimated": "3.6.2",
-		"react-native-svg": "14.1.0",
-		"react-native-video": "^6.0.0-beta.4",
-		"react-native-web": "0.19.10",
-		"react-tooltip": "^5.26.0",
-		"solito": "^4.2.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
+		"react-i18next": "^14.1.1",
+		"react-native-reanimated": "3.11.0",
+		"react-native-svg": "15.3.0",
+		"react-native-video": "^6.0.0",
+		"react-native-web": "0.19.11",
+		"react-tooltip": "^5.26.4",
+		"solito": "^4.2.2",
 		"srt-webvtt": "zoriya/srt-webvtt#build",
 		"superjson": "^2.2.1",
-		"sweetalert2": "^11.10.4",
+		"sweetalert2": "^11.11.0",
 		"yoshiki": "1.2.14",
-		"zod": "^3.22.4"
+		"zod": "^3.23.8"
 	},
 	"devDependencies": {
 		"@svgr/webpack": "^8.1.0",
-		"@types/node": "20.11.7",
-		"@types/react": "18.2.48",
-		"@types/react-dom": "18.2.18",
+		"@types/node": "20.12.12",
+		"@types/react-dom": "18.3.0",
 		"copy-webpack-plugin": "^12.0.2",
-		"react-native": "0.73.2",
-		"typescript": "^5.3.3",
-		"webpack": "^5.90.0"
+		"react-native": "0.74.1",
+		"typescript": "^5.4.5",
+		"webpack": "^5.91.0"
 	}
 }

front/apps/web/src/i18n.tsx

@@ -22,10 +22,7 @@ import i18next, { type InitOptions } from "i18next";
 import type { AppContext, AppInitialProps, AppProps } from "next/app";
 import { type ComponentType, useMemo } from "react";
 import { I18nextProvider } from "react-i18next";
-
-import en from "../../../translations/en.json";
-import fr from "../../../translations/fr.json";
-import zh from "../../../translations/zh.json";
+import resources from "../../../translations";
 
 export const withTranslations = (
 	AppToTranslate: ComponentType<AppProps> & {
@@ -37,6 +34,7 @@ export const withTranslations = (
 		interpolation: {
 			escapeValue: false,
 		},
+		resources,
 	};
 
 	const AppWithTranslations = (props: AppProps) => {
@@ -45,10 +43,10 @@ export const withTranslations = (
 			i18next.init({
 				...commonOptions,
 				lng: props.pageProps.__lang,
-				resources: props.pageProps.__resources,
+				fallbackLng: "en",
 			});
 			return i18next;
-		}, [props.pageProps.__lang, props.pageProps.__resources]);
+		}, [props.pageProps.__lang]);
 
 		return (
 			<I18nextProvider i18n={li18n}>
@@ -59,21 +57,12 @@ export const withTranslations = (
 	AppWithTranslations.getInitialProps = async (ctx: AppContext) => {
 		const props: AppInitialProps = await AppToTranslate.getInitialProps(ctx);
 		const lng = ctx.router.locale || ctx.router.defaultLocale || "en";
-		// TODO: use a backend to fetch only the needed translations.
-		// TODO: use a different backend on the client and fetch needed translations.
-		const resources = {
-			en: { translation: en },
-			fr: { translation: fr },
-			zh: { translation: zh },
-		};
 		await i18n.init({
 			...commonOptions,
 			lng,
-			fallbackLng: ctx.router.defaultLocale || "en",
-			resources,
+			fallbackLng: "en",
 		});
 		props.pageProps.__lang = lng;
-		props.pageProps.__resources = resources;
 		return props;
 	};
 

front/package.json

@@ -17,7 +17,8 @@
 	"workspaces": ["apps/*", "packages/*"],
 	"devDependencies": {
 		"@biomejs/biome": "1.7.3",
-		"typescript": "5.3.3"
+		"@types/react": "~18.2.79",
+		"typescript": "5.4.5"
 	},
 	"packageManager": "[email protected]"
 }

front/packages/models/package.json

@@ -5,9 +5,8 @@
 	"sideEffects": false,
 	"packageManager": "[email protected]",
 	"devDependencies": {
-		"@types/react": "18.2.48",
-		"react-native-mmkv": "^2.11.0",
-		"typescript": "^5.3.3"
+		"react-native-mmkv": "^2.12.2",
+		"typescript": "^5.4.5"
 	},
 	"peerDependencies": {
 		"@tanstack/react-query": "*",
@@ -20,6 +19,6 @@
 		}
 	},
 	"dependencies": {
-		"zod": "^3.22.4"
+		"zod": "^3.23.8"
 	}
 }

front/packages/models/src/accounts.tsx

@@ -133,19 +133,31 @@ export const AccountProvider = ({
 		setApiUrl(selected?.apiUrl ?? defaultApiUrl);
 	}, [selected, setApiUrl]);
 
-	const user = useFetch({
+	const {
+		isSuccess: userIsSuccess,
+		isError: userIsError,
+		isLoading: userIsLoading,
+		isPlaceholderData: userIsPlaceholder,
+		data: user,
+		error: userError,
+	} = useFetch({
 		path: ["auth", "me"],
 		parser: UserP,
 		placeholderData: selected as User,
 		enabled: !!selected,
 	});
+	// Use a ref here because we don't want the effect to trigger when the selected
+	// value has changed, only when the fetch result changed
+	// If we trigger the effect when the selected value change, we enter an infinite render loop
+	const selectedRef = useRef(selected);
+	selectedRef.current = selected;
 	useEffect(() => {
-		if (!selected || !user.isSuccess || user.isPlaceholderData) return;
+		if (!selectedRef.current || !userIsSuccess || userIsPlaceholder) return;
 		// The id is different when user is stale data, we need to wait for the use effect to invalidate the query.
-		if (user.data.id !== selected.id) return;
-		const nUser = { ...selected, ...user.data };
-		if (!Object.is(selected, nUser)) updateAccount(nUser.id, nUser);
-	}, [selected, user]);
+		if (user.id !== selectedRef.current.id) return;
+		const nUser = { ...selectedRef.current, ...user };
+		updateAccount(nUser.id, nUser);
+	}, [user, userIsSuccess, userIsPlaceholder]);
 
 	const queryClient = useQueryClient();
 	const oldSelected = useRef<{ id: string; token: string } | null>(
@@ -154,7 +166,6 @@ export const AccountProvider = ({
 
 	const [permissionError, setPermissionError] = useState<KyooErrors | null>(null);
 
-	const userIsError = user.isError;
 	useEffect(() => {
 		// if the user change account (or connect/disconnect), reset query cache.
 		if (
@@ -180,8 +191,8 @@ export const AccountProvider = ({
 		<AccountContext.Provider value={accounts}>
 			<ConnectionErrorContext.Provider
 				value={{
-					error: (selected ? initialSsrError.current ?? user.error : null) ?? permissionError,
-					loading: user.isLoading,
+					error: (selected ? initialSsrError.current ?? userError : null) ?? permissionError,
+					loading: userIsLoading,
 					retry: () => {
 						queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
 					},

front/packages/models/src/query.tsx

@@ -33,6 +33,12 @@ import { type Page, Paged } from "./page";
 
 export let lastUsedUrl: string = null!;
 
+const cleanSlash = (str: string | null, keepFirst = false) => {
+	if (!str) return null;
+	if (keepFirst) return str.replace(/\/$/g, "");
+	return str.replace(/^\/|\/$/g, "");
+};
+
 export const queryFn = async <Parser extends z.ZodTypeAny>(
 	context: {
 		apiUrl?: string | null;
@@ -54,17 +60,16 @@ export const queryFn = async <Parser extends z.ZodTypeAny>(
 	lastUsedUrl = url!;
 
 	const token = iToken === undefined && context.authenticated !== false ? await getToken() : iToken;
-	const path = [url]
+	const path = [cleanSlash(url, true)]
 		.concat(
 			"path" in context
 				? (context.path as string[])
 				: "pageParam" in context && context.pageParam
-					? [context.pageParam as string]
+					? [cleanSlash(context.pageParam as string)]
 					: (context.queryKey as string[]),
 		)
 		.filter((x) => x)
 		.join("/")
-		.replace("//", "/")
 		.replace("/?", "?");
 	let resp: Response;
 	try {