From 59a0dd8caf4143d038cc809b9bb9cbde738bab9a Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 6 Aug 2019 11:23:34 -0700 Subject: Still not working --- ui/fuse.js | 5 ++ ui/package.json | 4 +- ui/src/components/main.tsx | 4 +- ui/src/i18n.ts | 32 +++++++++++ ui/src/index.tsx | 66 ++++++++++++----------- ui/yarn.lock | 131 +++++++++++++++++++-------------------------- 6 files changed, 133 insertions(+), 109 deletions(-) create mode 100644 ui/src/i18n.ts diff --git a/ui/fuse.js b/ui/fuse.js index 4755d9f5..cc2a206d 100644 --- a/ui/fuse.js +++ b/ui/fuse.js @@ -24,6 +24,11 @@ Sparky.task('config', _ => { transformers: { before: [transformClasscat(), transformInferno()], }, + alias: { + 'react': 'inferno-compat', + 'react-dom': 'inferno-compat', + 'react-redux': 'inferno-compat', + }, plugins: [ EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }), CSSPlugin(), diff --git a/ui/package.json b/ui/package.json index 20ecdd82..9ff9ebba 100644 --- a/ui/package.json +++ b/ui/package.json @@ -20,11 +20,12 @@ "@types/jwt-decode": "^2.2.1", "@types/markdown-it": "^0.0.7", "@types/markdown-it-container": "^2.0.2", + "@types/react-i18next": "^8.1.0", "autosize": "^4.0.2", "classcat": "^1.1.3", "dotenv": "^6.1.0", "inferno": "^7.0.1", - "inferno-router": "^7.0.1", + "inferno-i18next": "nimbusec-oss/inferno-i18next", "js-cookie": "^2.2.0", "jwt-decode": "^2.2.0", "markdown-it": "^8.4.2", @@ -35,6 +36,7 @@ "ws": "^7.0.0" }, "devDependencies": { + "@types/i18next": "^12.1.0", "fuse-box": "^3.1.3", "ts-transform-classcat": "^0.0.2", "ts-transform-inferno": "^4.0.2", diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index fe59ac2c..c513fc5c 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -7,6 +7,8 @@ import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; import { SiteForm } from './site-form'; import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum } from '../utils'; +import { useTranslation } from 'react-i18next'; +const { t } = useTranslation(); interface MainState { subscribedCommunities: Array; @@ -147,7 +149,7 @@ export class Main extends Component { trendingCommunities() { return (
-
Trending communities
+
{t('Trending')} communities
    {this.state.trendingCommunities.map(community =>
  • {community.name}
    • diff --git a/ui/src/i18n.ts b/ui/src/i18n.ts new file mode 100644 index 00000000..46604e91 --- /dev/null +++ b/ui/src/i18n.ts @@ -0,0 +1,32 @@ +import i18n from "i18next"; +import { initReactI18next } from "inferno-i18next"; + +// the translations +// (tip move them in a JSON file and import them) +const resources = { + en: { + translation: { + trending: "Trending", + } + }, + es: { + translation: { + trending: "Trending, but in spanish", + } + } +}; + +i18n + .use(initReactI18next) // passes i18n down to react-i18next + .init({ + resources, + lng: "en", + + keySeparator: false, // we do not use keys in form messages.welcome + + interpolation: { + escapeValue: false // react already safes from xss + } + }); + +export default i18n; diff --git a/ui/src/index.tsx b/ui/src/index.tsx index a50bf2a0..a13b84f8 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -1,5 +1,6 @@ import { render, Component } from 'inferno'; import { HashRouter, BrowserRouter, Route, Switch } from 'inferno-router'; +import { Provider } from 'inferno-i18next'; import { Main } from './components/main'; import { Navbar } from './components/navbar'; import { Footer } from './components/footer'; @@ -16,6 +17,7 @@ import { Inbox } from './components/inbox'; import { Search } from './components/search'; import { Sponsors } from './components/sponsors'; import { Symbols } from './components/symbols'; +import './i18n'; import './css/bootstrap.min.css'; import './css/main.css'; @@ -34,37 +36,39 @@ class Index extends Component { render() { return ( - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    -