Prepare for UI + i18next

madhead · Oct 23, 2023 · a1ab1a4 · a1ab1a4
1 parent c3cf7f2
commit a1ab1a4
Show file tree

Hide file tree

Showing 46 changed files with 759 additions and 26 deletions.
diff --git a/mini-app/.pnp.cjs b/mini-app/.pnp.cjs
diff --git a/mini-app/.yarn/cache/@babel-runtime-npm-7.23.2-d013d6cf7e-6c4df4839e.zip b/mini-app/.yarn/cache/@babel-runtime-npm-7.23.2-d013d6cf7e-6c4df4839e.zip
diff --git a/mini-app/.yarn/cache/@nodelib-fs.scandir-npm-2.1.5-89c67370dd-a970d595bd.zip b/mini-app/.yarn/cache/@nodelib-fs.scandir-npm-2.1.5-89c67370dd-a970d595bd.zip
diff --git a/mini-app/.yarn/cache/@nodelib-fs.stat-npm-2.0.5-01f4dd3030-012480b5ca.zip b/mini-app/.yarn/cache/@nodelib-fs.stat-npm-2.0.5-01f4dd3030-012480b5ca.zip
diff --git a/mini-app/.yarn/cache/@nodelib-fs.walk-npm-1.2.8-b4a89da548-190c643f15.zip b/mini-app/.yarn/cache/@nodelib-fs.walk-npm-1.2.8-b4a89da548-190c643f15.zip
diff --git a/mini-app/.yarn/cache/copy-webpack-plugin-npm-11.0.0-9a07415855-df4f8743f0.zip b/mini-app/.yarn/cache/copy-webpack-plugin-npm-11.0.0-9a07415855-df4f8743f0.zip
diff --git a/mini-app/.yarn/cache/cross-fetch-npm-3.1.6-cdb982d446-704b3519ab.zip b/mini-app/.yarn/cache/cross-fetch-npm-3.1.6-cdb982d446-704b3519ab.zip
diff --git a/mini-app/.yarn/cache/dir-glob-npm-3.0.1-1aea628b1b-fa05e18324.zip b/mini-app/.yarn/cache/dir-glob-npm-3.0.1-1aea628b1b-fa05e18324.zip
diff --git a/mini-app/.yarn/cache/fast-glob-npm-3.3.1-8045ff8f4d-b6f3add640.zip b/mini-app/.yarn/cache/fast-glob-npm-3.3.1-8045ff8f4d-b6f3add640.zip
diff --git a/mini-app/.yarn/cache/fastq-npm-1.15.0-1013f6514e-0170e6bfcd.zip b/mini-app/.yarn/cache/fastq-npm-1.15.0-1013f6514e-0170e6bfcd.zip
diff --git a/mini-app/.yarn/cache/glob-parent-npm-6.0.2-2cbef12738-c13ee97978.zip b/mini-app/.yarn/cache/glob-parent-npm-6.0.2-2cbef12738-c13ee97978.zip
diff --git a/mini-app/.yarn/cache/globby-npm-13.2.2-47efcd4a86-f3d84ced58.zip b/mini-app/.yarn/cache/globby-npm-13.2.2-47efcd4a86-f3d84ced58.zip
diff --git a/mini-app/.yarn/cache/html-parse-stringify-npm-3.0.1-5762cd4b01-334fdebd4b.zip b/mini-app/.yarn/cache/html-parse-stringify-npm-3.0.1-5762cd4b01-334fdebd4b.zip
diff --git a/mini-app/.yarn/cache/i18next-browser-languagedetector-npm-7.1.0-1a79fe5d7c-36981b9a99.zip b/mini-app/.yarn/cache/i18next-browser-languagedetector-npm-7.1.0-1a79fe5d7c-36981b9a99.zip
diff --git a/mini-app/.yarn/cache/i18next-http-backend-npm-2.2.2-a3b91fce41-b098cf89e6.zip b/mini-app/.yarn/cache/i18next-http-backend-npm-2.2.2-a3b91fce41-b098cf89e6.zip
diff --git a/mini-app/.yarn/cache/i18next-npm-23.6.0-4f6240b991-0898be75ce.zip b/mini-app/.yarn/cache/i18next-npm-23.6.0-4f6240b991-0898be75ce.zip
diff --git a/mini-app/.yarn/cache/ignore-npm-5.2.4-fbe6e989e5-3d4c309c60.zip b/mini-app/.yarn/cache/ignore-npm-5.2.4-fbe6e989e5-3d4c309c60.zip
diff --git a/mini-app/.yarn/cache/merge2-npm-1.4.1-a2507bd06c-7268db63ed.zip b/mini-app/.yarn/cache/merge2-npm-1.4.1-a2507bd06c-7268db63ed.zip
diff --git a/mini-app/.yarn/cache/node-fetch-npm-2.7.0-587d57004e-d76d2f5edb.zip b/mini-app/.yarn/cache/node-fetch-npm-2.7.0-587d57004e-d76d2f5edb.zip
diff --git a/mini-app/.yarn/cache/normalize.css-npm-8.0.1-6124fb39b6-4698cae88e.zip b/mini-app/.yarn/cache/normalize.css-npm-8.0.1-6124fb39b6-4698cae88e.zip
diff --git a/mini-app/.yarn/cache/path-type-npm-4.0.0-10d47fc86a-5b1e2daa24.zip b/mini-app/.yarn/cache/path-type-npm-4.0.0-10d47fc86a-5b1e2daa24.zip
diff --git a/mini-app/.yarn/cache/queue-microtask-npm-1.2.3-fcc98e4e2d-b676f8c040.zip b/mini-app/.yarn/cache/queue-microtask-npm-1.2.3-fcc98e4e2d-b676f8c040.zip
diff --git a/mini-app/.yarn/cache/react-i18next-npm-13.3.1-2ad8c538c6-71a9ae4968.zip b/mini-app/.yarn/cache/react-i18next-npm-13.3.1-2ad8c538c6-71a9ae4968.zip
diff --git a/mini-app/.yarn/cache/regenerator-runtime-npm-0.14.0-e060897cf7-1c977ad82a.zip b/mini-app/.yarn/cache/regenerator-runtime-npm-0.14.0-e060897cf7-1c977ad82a.zip
diff --git a/mini-app/.yarn/cache/reusify-npm-1.0.4-95ac4aec11-c3076ebcc2.zip b/mini-app/.yarn/cache/reusify-npm-1.0.4-95ac4aec11-c3076ebcc2.zip
diff --git a/mini-app/.yarn/cache/run-parallel-npm-1.2.0-3f47ff2034-cb4f97ad25.zip b/mini-app/.yarn/cache/run-parallel-npm-1.2.0-3f47ff2034-cb4f97ad25.zip
diff --git a/mini-app/.yarn/cache/slash-npm-4.0.0-ce4bbc4a80-da8e4af737.zip b/mini-app/.yarn/cache/slash-npm-4.0.0-ce4bbc4a80-da8e4af737.zip
diff --git a/mini-app/.yarn/cache/tr46-npm-0.0.3-de53018915-726321c5ea.zip b/mini-app/.yarn/cache/tr46-npm-0.0.3-de53018915-726321c5ea.zip
diff --git a/mini-app/.yarn/cache/void-elements-npm-3.1.0-4f43780839-0390f81810.zip b/mini-app/.yarn/cache/void-elements-npm-3.1.0-4f43780839-0390f81810.zip
diff --git a/mini-app/.yarn/cache/webidl-conversions-npm-3.0.1-60310f6a2b-c92a0a6ab9.zip b/mini-app/.yarn/cache/webidl-conversions-npm-3.0.1-60310f6a2b-c92a0a6ab9.zip
diff --git a/mini-app/.yarn/cache/whatwg-url-npm-5.0.0-374fb45e60-b8daed4ad3.zip b/mini-app/.yarn/cache/whatwg-url-npm-5.0.0-374fb45e60-b8daed4ad3.zip
diff --git a/mini-app/package.json b/mini-app/package.json
@@ -5,14 +5,20 @@
     "packageManager": "[email protected]",
     "dependencies": {
         "@twa-dev/sdk": "^6.9.0",
+        "i18next": "^23.6.0",
+        "i18next-browser-languagedetector": "^7.1.0",
+        "i18next-http-backend": "^2.2.2",
+        "normalize.css": "^8.0.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-i18next": "^13.3.1"
     },
     "devDependencies": {
         "@types/node": "18.18.2",
         "@types/react": "^18.2.28",
         "@types/react-dom": "^18.2.13",
         "@types/webpack": "^5.28.3",
+        "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.8.1",
         "html-webpack-plugin": "^5.5.3",
         "less": "^4.2.0",

diff --git a/mini-app/src/common/error/Error.less b/mini-app/src/common/error/Error.less
@@ -0,0 +1,5 @@
+#error {
+  color: red;
+  font-size: large;
+  text-align: center;
+}
diff --git a/mini-app/src/common/error/Error.tsx b/mini-app/src/common/error/Error.tsx
@@ -0,0 +1,11 @@
+import "./Error.less";
+
+type ErrorProps = {
+  error: string;
+};
+
+function Error({ error }: ErrorProps) {
+  return <div id="error">{error}</div>;
+}
+
+export default Error;
diff --git a/mini-app/src/history/HistoryApp.tsx b/mini-app/src/history/HistoryApp.tsx
@@ -1,28 +1,15 @@
-import { useEffect, useState } from "react";
 import "./HistoryApp.less";
-import WebApp from "@twa-dev/sdk";
+import Error from "../common/error/Error";
 
-function HistoryApp() {
-  console.log(WebApp.initData);
-  console.log(WebApp.initDataUnsafe);
-
-  const [data, setData] = useState(null);
+import { useTranslation } from "react-i18next";
 
-  useEffect(() => {
-    async function fetchData() {
-      const data = await fetch("/app/api/test");
-      const json = await data.json();
-      setData(json);
-    }
-
-    fetchData();
-  }, []);
+function HistoryApp() {
+  const { t, i18n } = useTranslation();
 
   return (
-    <div>
-      <h1>History</h1>
-      Init Data: {WebApp.initData}
-    </div>
+    <>
+      <Error error={t("errors.outsideOfTelegram")} />
+    </>
   );
 }
 

diff --git a/mini-app/src/history/history.less b/mini-app/src/history/history.less
@@ -0,0 +1,15 @@
+@import url(https://fonts.googleapis.com/css2?family=Roboto);
+@import '~normalize.css/normalize.css';
+
+body {
+  font-family: "Roboto", sans-serif;
+  background-color: var(--tg-theme-bg-color);
+  padding: 80px;
+  height: var(--tg-viewport-height);
+}
+
+#root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/mini-app/src/history/history.tsx b/mini-app/src/history/history.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import "@twa-dev/sdk";
+
+import "../i18n/i18n"
+
 import "./history.less";
+
 import HistoryApp from "./HistoryApp";
 
 const root = ReactDOM.createRoot(

diff --git a/mini-app/src/i18n/en.json b/mini-app/src/i18n/en.json
@@ -0,0 +1,5 @@
+{
+    "errors": {
+        "outsideOfTelegram": "This app must be executed inside a Telegram client"
+    }
+}
diff --git a/mini-app/src/i18n/i18n.ts b/mini-app/src/i18n/i18n.ts
@@ -0,0 +1,21 @@
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import HttpBackend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+import WebApp from "@twa-dev/sdk";
+
+document.documentElement.lang = WebApp.initDataUnsafe.user?.language_code || "en";
+
+const httpBackend = new HttpBackend(null, {
+    loadPath: "/app/i18n/{{lng}}.json",
+});
+
+const languageDetector = new LanguageDetector(null, {
+    order: ["htmlTag"],
+});
+
+i18next.use(httpBackend).use(languageDetector).use(initReactI18next).init({
+    fallbackLng: "en",
+});
+
+export default i18next;
diff --git a/mini-app/src/i18n/it.json b/mini-app/src/i18n/it.json
diff --git a/mini-app/src/i18n/pt.json b/mini-app/src/i18n/pt.json
diff --git a/mini-app/src/i18n/ru.json b/mini-app/src/i18n/ru.json
@@ -0,0 +1,5 @@
+{
+    "errors": {
+        "outsideOfTelegram": "Это приложение нужно запускать внутри Telegram клиента"
+    }
+}
diff --git a/mini-app/src/index.html b/mini-app/src/index.html
@@ -2,6 +2,7 @@
 <html lang="">
 	<head>
 		<meta charset="UTF-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 		<title>Tyzenhaus</title>
 	</head>
 	<body>

diff --git a/mini-app/tsconfig.json b/mini-app/tsconfig.json
@@ -3,6 +3,7 @@
     "target": "es5",
     "module": "commonjs",
     "esModuleInterop": true,
+    "sourceMap": true,
     "strict": true,
     "lib": ["dom", "es5"],
     "jsx": "react-jsx"

diff --git a/mini-app/webpack/common.ts b/mini-app/webpack/common.ts
@@ -2,17 +2,19 @@ import path from "path";
 import webpack from "webpack";
 import "webpack-dev-server";
 import HtmlWebpackPlugin from "html-webpack-plugin";
+import CopyPlugin from "copy-webpack-plugin";
 
 const root = path.resolve(__dirname, "..");
 const src = path.resolve(root, "src");
+const build = path.resolve(root, "build");
 
 const configuration: webpack.Configuration = {
     entry: {
         history: [path.resolve(src, "history/history.tsx")],
         expense: [path.resolve(src, "expense/expense.tsx")],
     },
     output: {
-        path: path.resolve(root, "build"),
+        path: build,
         publicPath: "/app",
     },
     optimization: {
@@ -61,6 +63,17 @@ const configuration: webpack.Configuration = {
                     },
                 ],
             },
+            {
+                test: /\.css$/,
+                use: [
+                    {
+                        loader: "style-loader",
+                    },
+                    {
+                        loader: "css-loader",
+                    },
+                ],
+            },
         ],
     },
     plugins: [
@@ -76,6 +89,14 @@ const configuration: webpack.Configuration = {
             filename: "expense.html",
             chunks: ["expense"],
         }),
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: path.join(src, "/i18n"),
+                    to: path.join(build, "/i18n"),
+                },
+            ],
+        }),
     ],
 };