Add translations

front/locales/en/common.json

@@ -0,0 +1,6 @@
+{
+	"navbar": {
+		"home": "Home",
+		"login": "Login"
+	}
+}

front/locales/fr/common.json

@@ -0,0 +1,6 @@
+{
+	"navbar": {
+		"home": "Accueil",
+		"login": "Connexion"
+	}
+}

front/package.json

@@ -26,6 +26,7 @@
 		"@mui/icons-material": "^5.8.4",
 		"@mui/material": "^5.8.7",
 		"next": "12.2.2",
+		"next-translate": "^1.5.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-query": "^4.0.0-beta.23"

front/src/pages/_app.tsx

@@ -18,13 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { useState } from "react";
+import appWithI18n from "next-translate/appWithI18n";
 import { ThemeProvider } from "@mui/material";
 import NextApp, { AppContext } from "next/app";
 import type { AppProps } from "next/app";
 import { Hydrate, QueryClientProvider } from "react-query";
 import { createQueryClient, fetchQuery } from "~/utils/query";
 import { defaultTheme } from "~/utils/themes/default-theme";
-import { useState } from "react";
 
 const App = ({ Component, pageProps }: AppProps) => {
 	const [queryClient] = useState(() => createQueryClient());
@@ -48,4 +49,15 @@ App.getInitialProps = async (ctx: AppContext) => {
 	return appProps;
 };
 
-export default App;
+// The as any is needed since appWithI18n as wrong type hints
+export default appWithI18n(App as any, {
+	skipInitialProps: false,
+	locales: ["en", "fr"],
+	defaultLocale: "en",
+	loader: false,
+	pages: {
+		"*": ["common"],
+	},
+	loadLocaleFrom: (locale, namespace) =>
+		import(`../../locales/${locale}/${namespace}`).then((m) => m.default),
+});

front/src/pages/toto.tsx

@@ -19,17 +19,18 @@
  */
 
 import { QueryPage, useFetch } from "~/utils/query";
+import useTranslation from "next-translate/useTranslation";
 
 const Toto: QueryPage = ({}) => {
 	const libraries = useFetch<any>("libraries");
+	const { t } = useTranslation("common");
 
 	if (libraries.error) return <p>oups</p>;
 	if (!libraries.data) return <p>loading</p>;
 
-	console.log(libraries.data.items);
 	return (
 		<>
-			<p>toto</p>
+			<p>{t("navbar.home")}</p>
 			{libraries.data.items.map((x: any) => (
 				<p key={x.id}>{x.name}</p>
 			))}

front/src/utils/query.ts

@@ -21,12 +21,10 @@
 import { ComponentType } from "react";
 import { dehydrate, QueryClient, QueryFunctionContext, useQuery } from "react-query";
 
-const isServer = () => typeof window === "undefined"
-
 const queryFn = async <T>(context: QueryFunctionContext): Promise<T> => {
 	try {
 		const resp = await fetch(
-			[isServer() ? process.env.KYOO_URL : "/api"]
+			[typeof window === "undefined" ? process.env.KYOO_URL : "/api"]
 				.concat(context.pageParam ? [context.pageParam] : (context.queryKey as string[]))
 				.join("/"),
 		);
@@ -62,7 +60,9 @@ export const useFetch = <Data>(...params: [string]) => {
 };
 
 export const fetchQuery = async (queries: [[string]]) => {
-	if (!isServer()) return {};
+	// we can't put this check in a function because we want build time optimizations
+	// see https://github.com/vercel/next.js/issues/5354 for details
+	if (typeof window !== "undefined") return {};
 
 	const client = createQueryClient();
 	await Promise.all(queries.map((x) => client.prefetchQuery(x)));

front/yarn.lock

@@ -1938,6 +1938,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-translate@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/next-translate/-/next-translate-1.5.0.tgz#b1e5c4a8e55e31b3ed1b9428529f27c289c6b7bc"
+  integrity sha512-6amnuJWw22XbaM2DVhsYaOXelFLjTbMqTgqvB+h9VfE/H2aQ/edfT06ONQLQbsVV/I7Hn+93LTaV1/qOo6Kf9A==
+
 next@12.2.2:
   version "12.2.2"
   resolved "https://registry.yarnpkg.com/next/-/next-12.2.2.tgz#029bf5e4a18a891ca5d05b189b7cd983fd22c072"