Improved example

web-ridge · Jul 3, 2020 · 7480535 · 7480535
1 parent 9171765
commit 7480535
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 63 deletions.
diff --git a/example/package.json b/example/package.json
@@ -12,7 +12,7 @@
     "@types/react-dom": "^16.9.8",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-ridge-translations": "^0.0.1",
+    "react-ridge-translations": "^0.0.3",
     "react-scripts": "3.4.1",
     "typescript": "^3.9.6"
   },

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,35 +1,45 @@
-import React from 'react';
+import * as React from "react";
 import translate from "./translate";
 
 function App() {
-  const appScreen= translate.use().appScreen
-
-   const t =  translate.use()
-
+  const [firstName, setFirstName] = React.useState<string>("");
+  const translations = translate.use().appScreen;
 
   return (
-    <div className="App">
-      <header className="App-header">
+    <>
+      <h1>{translations.welcome({ firstName })}</h1>
+      <input
+        type="text"
+        placeholder={translations.fillFirstName}
+        onChange={(e) => setFirstName(e.currentTarget.value)}
+      />
+      <h2>{translations.doYouLike}</h2>
+
+      {translations.yes}
 
-          {appScreen.welcomeText({firstName: 'test'})}
-          <br />
-          {appScreen.yesText}
-      </header>
-        <h2>{appScreen.changeLanguageText}</h2>
-        <button onClick={()=>translate.setOptions({
-            language: 'fr',
-            fallback: 'en',
-        })}>Frans</button>
-        <button onClick={()=>translate.setOptions({
-            language: 'en',
-            fallback: 'en',
-        })}>Engels</button>
-        <button onClick={()=>translate.setOptions({
-            language: 'nl',
-            fallback: 'en',
-        })}>Nederlands</button>
-    </div>
+      <br />
+      <h2>{translations.changeLanguage}</h2>
+      <ChangeLanguageButton language={"fr"} label={"Français"} />
+      <ChangeLanguageButton language={"en"} label={"English"} />
+      <ChangeLanguageButton language={"nl"} label={"Nederlands"} />
+    </>
   );
 }
 
+function ChangeLanguageButton({
+  language,
+  label,
+}: {
+  language: "nl" | "fr" | "en";
+  label: string;
+}) {
+  const onClick = () => {
+    translate.setOptions({
+      language,
+      fallback: "en",
+    });
+  };
+  return <button onClick={onClick}>{label}</button>;
+}
+
 export default App;
diff --git a/example/src/translate.ts b/example/src/translate.ts
@@ -1,43 +1,58 @@
-import {createTranslations} from 'react-ridge-translations'
+import { createTranslations } from "react-ridge-translations";
 
 // first describe which languages are allowed/required (Typescript)
 type TranslationLanguages = {
-    nl: string
-    fr: string
-    en: string
-}
+  nl: string;
+  fr: string;
+  en: string;
+};
 
 const deviceLanguage = navigator.language;
-const availableLanguages: (keyof TranslationLanguages)[] = ['nl', 'en', 'fr'] ;
-const fallback = 'en'
+const availableLanguages: (keyof TranslationLanguages)[] = ["nl", "en", "fr"];
+const fallback = "en";
 
-function getBestLanguage(): typeof availableLanguages[number] | typeof fallback {
-    return availableLanguages.find(al => deviceLanguage.startsWith(al)) || fallback
+function getBestLanguage():
+  | typeof availableLanguages[number]
+  | typeof fallback {
+  return (
+    availableLanguages.find((al) => deviceLanguage.startsWith(al)) || fallback
+  );
 }
 
 // create a translation object with your translations
-const translate = createTranslations<TranslationLanguages>()({
-    appScreen:{
-        yesText: {
-            nl: 'Ja',
-            fr: 'Oui',
-            en: 'Yes',
-            yes: '',
-            why: '???',
-        },
-        welcomeText: ({ firstName }: { firstName: string }) => ({
-            nl: `Hallo ${firstName}`,
-            fr: `Bonjour ${firstName}`,
-            en: `Hello ${firstName}`,
-        }),
-        changeLanguageText: {
-            nl: 'Verander taal',
-            fr: 'Changer de langue',
-            en: 'Change language',
-        }
-    }
-}, {
+const translate = createTranslations<TranslationLanguages>()(
+  {
+    appScreen: {
+      yes: {
+        nl: "Ja",
+        fr: "Oui",
+        en: "Yes",
+      },
+      fillFirstName: {
+        nl: "Voornaam invullen",
+        fr: "Entrez votre prénom",
+        en: "Enter first name",
+      },
+      doYouLike: {
+        nl: "Vind je deze library goed?",
+        fr: "Aimez-vous cette bibliothèque?",
+        en: "Do you like this library?",
+      },
+      welcome: ({ firstName }: { firstName: string }) => ({
+        nl: `Hallo ${firstName}`,
+        fr: `Bonjour ${firstName}`,
+        en: `Hello ${firstName}`,
+      }),
+      changeLanguage: {
+        nl: "Verander taal",
+        fr: "Changer de langue",
+        en: "Change language",
+      },
+    },
+  },
+  {
     language: getBestLanguage(),
-    fallback: 'en',
-})
-export default translate
+    fallback: "en",
+  }
+);
+export default translate;
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -8643,10 +8643,10 @@ react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-ridge-translations@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/react-ridge-translations/-/react-ridge-translations-0.0.1.tgz#77a0168ed54f8448d98db5add07072f41c548b93"
-  integrity sha512-W6nAcMCKAbtzt+Y4xHfLlRtaBdapJ+OkbVTISXGcS77E83HAtNqaXWkFXL3P8weWH+qasnBNWtIHS1P47bP/zw==
+react-ridge-translations@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/react-ridge-translations/-/react-ridge-translations-0.0.3.tgz#2312d3c648f8a472e0bc557a622121bede6f510d"
+  integrity sha512-ne+iJ2oMDXS/pqrjdl4qR2p3S+9IUsHrlMHMTz554J0d2Xy8XluKGSYXa/6ZMnhpXKfDO9XfacFbmrci34IZsw==
 
 [email protected]:
   version "3.4.1"