How to translate the language of the parse-dashboard ?

[badboy-tian]

How to translate the language of the parse-dashboard ? I want to translate the language to chinaese

[flovilmart]

For now we don't have localization support for the dashboard, but this is something that would be nice.

[lxq20081128]

可以谈谈思路，我可以参与这个工作 Can talk about ideas, I can participate in this work

[flovilmart]

I’m not 100% familiar on how to properly i18n à react app, what the best practices are, and how we can move forward in an elegant way. @natanrolnik any ideas?

[vinmegamitensei]

Hey, I'm up to implement this. A friend and I want to use parse on a personal project and we want to translate it to portuguese. I may start right away, if you allow me.

[TomWFox]

@viniciusersouza Go for it! I think it would be great if you implement it in a way that makes it simple to add new languages. It would also be good if you are available to make future translations when wording is changed or new features are added.

I can't see anyone having any objections to this. Looking forward to seeing it 👍

[vinmegamitensei]

Sure, thanks for letting me be part of this! I'll start right now!

[nickponomar]

Hey @viniciusersouza , any progress on that? Can I support you there? We have a similar situation using parse dashboard for our project. Best, Nick

[vinmegamitensei]

My bad @nickpnmrv , a LOT happened since May 24, 2019 and I wasn't able to either continue this translation or any other personal project - totally consumed by my regular work. So, yeah, no progress on my part since then - sorry.

[badboy-tian]

any progress ?

[mtrezza]

If you want to pick this up I suggest to open a PR and link it to this issue. That way the PR is visible to everyone and anyone can pick it up and continue to work on it in case it becomes stale.

[badboy-tian]

@mtrezza @vinmegamitensei vin @lxq20081128 @flovilmart 我做了一个demo, 简单的制作了dashboard多语言, 地址: https://github.com/badboy-tian/parse-dashboard I create a simple demo support multi language. url: https://github.com/badboy-tian/parse-dashboard

Chinese Page: English Page:

npm install i18next  i18next-browser-languagedetector  react-i18next

change ../node_modules/parse/lib/browser/uuid.js

uuid = require('uuid/v4'); => uuid = require('uuid');

2, create Locales and i18n.js in src/dashboard

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en_translate from './locales/en.json';
import zh_translation from './locales/zh.json';
import LanguageDetector from "i18next-browser-languagedetector";

i18n.use(LanguageDetector)
    .use(initReactI18next).init({
        // fallbackLng: 'zh',
        debug: true,
        fallbackLng: 'en',
        resources: {
            en: {
                translation: en_translate
            },
            zh: {
                translation: zh_translation
            }
        },
        debug: false,
        interpolation: {
            escapeValue: false
        }
    });

zh.json

{
    "Start typing to filter": "APP过滤...",
    "Your Apps": "APP列表",
    "Server URL": "服务地址",
    "Server version": "服务版本",
    "At a glance": "概览",
    "total users": "总用户",
    "total installations": "总安装",
    "Server not reachable": "服务器无效",
    "unable to connect to server": "无法连接到服务器"
}

en.json

{
    "Start typing to filter": "Start typing to filter...",
    "Your Apps": "Your Apps",
    "Server URL": "Server URL",
    "Server version": "Server version",
    "At a glance": "At a glance",
    "total users": "total users",
    "total installations": "total installations",
    "Server not reachable": "Server not reachable",
    "unable to connect to server": "unable to connect to server"
}

3, import i18n in index.js

import './i18n';
import { useTranslation } from 'react-i18next';
....
....
const { t } = useTranslation();
global.t = t;

4. SlidebarBuilder.js

import React from 'react';
import Sidebar from 'components/Sidebar/Sidebar.react';
import { Translation } from 'react-i18next';

let accountSidebarSections = [
  {
    name: 'Your Apps',
    icon: 'blank-app-outline',
    link: '/apps'
  }, /*{
    name: 'Account Settings',
    icon: 'users-solid',
    link: '/account',
  }*/
];

export function buildAccountSidebar(options) {
  let {
    section,
    subsection
  } = options;

  return (
    <Translation>{
      t =>
        <Sidebar
          sections={accountSidebarSections.map(function (value) {
            value["name"] = t(value["name"]);
            return value;
          })}
          section={section}
          subsection={subsection}
          prefix={''} />
    }
    </Translation>
  );
}

Dashboard.js

const AppsIndexPage = () => (
      <Translation>
        {t =>
          <AccountView section={t('Your Apps')}>
            <AppsIndex newFeaturesInLatestVersion={this.state.newFeaturesInLatestVersion} />
          </AccountView>}
      </Translation>
    );