add i18n support

.gitignore

@@ -9,7 +9,6 @@ package-lock.json
 # yarn
 yarn.lock
 
-
 *.js.map
 
 # obsidian

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "rollup --config rollup.config.js -w",
     "build": "rollup --config rollup.config.js --environment BUILD:production",
-    "dev2": "obsidian-plugin dev src/main.ts"
+    "test": "obsidian-plugin dev src/main.ts"
   },
   "keywords": [],
   "author": "Leonard and Ran",
@@ -29,11 +29,14 @@
     "typescript": "^4.2.4"
   },
   "dependencies": {
+    "i18next": "^21.5.2",
+    "i18next-browser-languagedetector": "^6.1.2",
     "node": "^16.10.0",
     "node-fetch": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-emoji-render": "^1.2.4",
+    "react-i18next": "^11.14.2",
     "react-markdown": "^7.1.0",
     "react-tabs": "^3.2.2"
   }

src/i18n.tsx

@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import enUsTrans from "./i18n/en-us.json";
+import zhCnTrans from "./i18n/zh-cn.json";
+import { initReactI18next } from 'react-i18next';
+ 
+const lang = window.localStorage.getItem('language');
+// console.log(lang)
+
+i18n.use(initReactI18next) 
+.init({
+  //资源文件
+  resources: {
+    en: {
+      translation: enUsTrans,
+    },
+    zh: {
+      translation: zhCnTrans,
+    },
+  },
+  fallbackLng: lang,
+  debug: false,
+  interpolation: {
+    escapeValue: false,
+  },
+})
+ 
+export default i18n;

src/i18n/en-us.json

@@ -0,0 +1,10 @@
+{
+    "Active":"Active",
+    "Completed":"Completed",
+    "HP":"HP",
+    "LEVEL":"LEVEL",
+    "GOLD":"GOLD",
+    "No Dailies Present":"No Dailies Present",
+    "No habits present.":"No habits present.",
+    "No Rewards present.":"No Rewards present."
+}

src/i18n/zh-cn.json

@@ -0,0 +1,10 @@
+{
+    "Active":"进行中",
+    "Completed":"已完成",
+    "HP":"生命值",
+    "LEVEL":"等级",
+    "GOLD":"金币",
+    "No Dailies Present":"目前每日任务为空",
+    "No habits present.":"目前习惯为空",
+    "No Rewards present.":"目前奖励为空"
+}

src/main.ts

@@ -15,7 +15,7 @@ export default class HabiticaSync extends Plugin {
     view: HabiticaSyncView;
 
     async onload() {
-        console.log("load plugin: habitica-sync")
+        // console.log("load plugin: habitica-sync")
         await this.loadSettings();
         this.addSettingTab(new HabiticaSyncSettingsTab(this.app, this));
         this.registerView(

src/view/App.tsx

@@ -3,6 +3,7 @@ import { Notice } from "obsidian";
 import { getStats, scoreTask, makeCronReq, costReward } from "./habiticaAPI"
 import Statsview from "./Components/Statsview"
 import Taskview from "./Components/Taskview"
+import "../i18n"
 
 class App extends React.Component<any, any> {
     private _username = "";
@@ -56,7 +57,7 @@ class App extends React.Component<any, any> {
             //         <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
             //         <button onClick={this.runCron}>Continue</button>
             //     </div>
-            // );
+            // ); 
             return (
                 <div className="cron"></div>
             )

src/view/Components/Statsview/index.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { useTranslation, Trans, Translation } from 'react-i18next'
 
 export default function Index(props: any) {
+    let { t ,i18n} = useTranslation()
     return(
         <div className="stats">
             {/* <div id="profile-name">{props.user_data.profile.name}</div> */}
             {console.log(props)}
-            <div className = "substats" id="hp">HP: {(props.user_data.stats.hp).toPrecision(3)}</div>
+            <div className = "substats" id="hp">{t('HP')}: {(props.user_data.stats.hp).toPrecision(3)}</div>
-            <div className = "substats" id="lvl">LEVEL: {props.user_data.stats.lvl}</div>
+            <div className = "substats" id="lvl">{t('LEVEL')}: {props.user_data.stats.lvl}</div>
-            <div className = "substats" id="gold">GOLD: {(props.user_data.stats.gp).toPrecision(3)}</div>
+            <div className = "substats" id="gold">{t('GOLD')}: {(props.user_data.stats.gp).toPrecision(3)}</div>
         </div>
     );
 }

src/view/Components/Taskview/Dailiesview/index.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import DailyItem from "./DailyItem"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { useTranslation, Trans, Translation } from 'react-i18next'
 
 export default function Index(props: any){
     if(props.dailys == undefined) {
-        return <div id="classDisplay">No Dailies Present</div>
+        return <div id="classDisplay"><Trans>No Dailies Present</Trans></div>
     }
     else {
         const incompleteDailies = props.dailys.map((daily: any) => {
@@ -18,8 +19,8 @@ export default function Index(props: any){
         const display = <div id="classDisplay">
                             <Tabs>
                             <TabList>
-                                <Tab>Active</Tab>
+                                <Tab><Trans>Active</Trans></Tab>
-                                <Tab>Completed</Tab>
+                                <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
                             <TabPanel>
                                 <ul>{incompleteDailies}</ul>

src/view/Components/Taskview/Habitsview/index.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import HabitItem from "./HabitItem"
+import { useTranslation, Trans, Translation } from 'react-i18next'
 
 export default function Index(props: any){
     if(props.habits == undefined) {
         return (<div id="classDisplay">
-                    No habits present.
+                    <Trans>No habits present.</Trans>
                 </div>)
     }
     else {

src/view/Components/Taskview/Rewardview/index.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import RewardItem from "./RewardItem"
+import { useTranslation, Trans, Translation } from 'react-i18next'
 
 export default function Index(props: any){
     if(props.rewards == undefined) {
         return (<div id="classDisplay">
-                    No Rewards present.
+                    <Trans>No Rewards present.</Trans>
                 </div>)
     }
     else {

src/view/Components/Taskview/Todoview/TodoItem.tsx

@@ -6,7 +6,6 @@ function TodoItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            {/* <p><Emoji text ={props.todo_text}></Emoji></p> */}
             <div>
                 <p><Emoji text={props.todo_text}></Emoji></p>
                 <ReactMarkdown children={props.todo_notes} />

src/view/Components/Taskview/Todoview/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import TodoItem from "./TodoItem"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { useTranslation, Trans, Translation } from 'react-i18next'
 
 export default function Index(props: any){
     if(props.todos == undefined) {
@@ -18,8 +19,8 @@ export default function Index(props: any){
         const display = <div id="classDisplay">
                             <Tabs>
                             <TabList>
-                                <Tab>Active</Tab>
+                                <Tab><Trans>Active</Trans></Tab>
-                                <Tab>Completed</Tab>
+                                <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
                             <TabPanel>
                                 <ul>{incompleteTodos}</ul>

styles.css

@@ -1,5 +1,4 @@
 * {
-  /* margin: 0; */
   padding: 0;
 }
 

tsconfig.json

@@ -6,6 +6,8 @@
     "module": "ESNext",
     "target": "es6",
     "jsx": "react",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
     "moduleResolution": "node",
     "importHelpers": true,