Add English translation of the UI

808-Squad · ad-m · Jan 28, 2021 · Jan 28, 2021 · Jan 28, 2021 · Jan 28, 2021
commit ebcef525c4fa43c22d85b6c2ff7c93310a7867b9
diff --git a/public/messages/en.json b/public/messages/en.json
@@ -1,27 +1,31 @@
 {
-    "topBar": "Coronavirus - important information",
+    "topBar": "Coronavirus: PSA",
     "header": "COVID-19 Restrictions Generator",
-    "subHeader": "Check what is and what isn't allowed today",
-    "infoMessage": "Kancelaria Prezesa Rady Ministrów informuje, że od {date} roku:",
-    "button": "GENERUJ",
-    "buttonGenerateNew": "GENERUJ NOWE",
-    "footer1": "Ta strona to żart.",
-    "footer2": "Po prawdziwe informacje na temat obostrzeń udaj się ",
-    "footer3": "tutaj.",
-    "footer4": "Zagwiazdkuj {star} to na {githubLogo} {githubLink}",
-    "footer5": "GitHubie.",
-    "footer6": "Ikony dzięki {freepik} przez {flaticon}",
-    "footer7": "Aktualizacja ",
-    "sentence1": "Hotele dostępne są tylko dla {0}, {1}, {2} oraz {3}.",
-    "sentence2": "Wszystkie osoby przybywające do Polski z {4} {5} są {6}.",
-    "sentence3": "W zgromadzeniach {meta70} uczestniczyć maks. {7} {meta71} (nie dotyczy {8} oraz {9}).",
-    "sentence4": "Obowiązuje zakaz organizacji {10} oraz {11}",
-    "sentence5": "Zamknięte są {12}, {13} oraz {14}. Otwarte zostaną {15} oraz {16}, ale wyłącznie w {17}.",
-    "sentence6": "Restauracje i bary są {18}{19}.",
-    "sentence7": "Nauka zdalna w klasach {20} szkół podstawowych, {21} oraz {22}, za wyjątkiem {23} (chyba, że {24}).",
-    "sentence8": "Żłobki i przedszkola są {25}.",
-    "sentence9": "W {26} i {27} może przebywać maks. jedna osoba na {28} m kw. pomieszczenia.",
-    "sentence10": "W godzinach {29} zakupy mogą robić tylko osoby {30}.",
-    "sentence11": "W autobusach {meta320} być zajęte maks. {32} {meta321} (lub {31}% wszystkich miejsc)."    
-
+    "subHeader": "Find out what you can and cannot do.",
+    "infoMessage": "The National Health Services inform, that beginning {date}:",
+    "button": "GENERATE",
+    "buttonGenerateNew": "GENERATE AGAIN",
+    "footer1": "This page is a joke.",
+    "footer2": "Visit a {govLink} for restrictions in your area.",
+    "footer3": ".gov site",
+    "footerGovAddress": "https://travel.state.gov/content/travel/en/traveladvisories/COVID-19-Country-Specific-Information.html",
+    "footer4": "Give it a {star} star on {githubLogo} {githubLink}.",
+    "footer5": "GitHub",
+    "footer6": "Icons thanks to {freepik} through {flaticon}",
+    "footer7": "Updated ",
+    "sentence1": "Only {0}, {1}, {2} and {3} are allowed in hotels.",
+    "sentence2": "People returning to the country from {4} {5} are {6}.",
+    "sentence3": "At gatherings, there can be a maximum of {7} people (not including {8} and {9}).",
+    "sentence4": "Organising {10} and {11} is forbidden.",
+    "sentence5": "The {12}, {13} as well as {14} are closed. The {15} and {16} will be opened, although only on {17}.",
+    "sentence6": "Restaurants and bars are {18}{19}.",
+    "sentence7": "Remote teaching in primary school grades {20}, {21} and {22}, except {23} (unless {24}).",
+    "sentence8": "Nurseries and kindergartens are {25}.",
+    "sentence9": "In {26} and {27} there can only be a maximum of one person per {28} m².",
+    "sentence10": "{29} shopping is reserved for {30}.",
+    "sentence11": "In city buses, only up to {32} seats may be occupied (or {31}% of all seats).",
+    "dynamicQuarantine1": "exempt from quarantine",
+    "dynamicQuarantine2": "obliged to undergo quaranine for {days} days",
+    "dynamicRestaurant1": "closed",
+    "dynamicRestaurant2": ", provided {condition}"
 }
diff --git a/public/messages/pl.json b/public/messages/pl.json
@@ -1,27 +1,31 @@
 {
-    "topBar": "Koronawirus - ważne informacje",
+    "topBar": "Koronawirus: ważne informacje",
     "header": "Generator obostrzeń COVID-19",
     "subHeader": "Sprawdź, co dzisiaj wolno, a czego nie",
     "infoMessage": "Kancelaria Prezesa Rady Ministrów informuje, że od {date} roku:",
     "button": "GENERUJ",
     "buttonGenerateNew": "GENERUJ NOWE",
     "footer1": "Ta strona to żart.",
-    "footer2": "Po prawdziwe informacje na temat obostrzeń udaj się ",
-    "footer3": "tutaj.",
-    "footer4": "Zagwiazdkuj {star} to na {githubLogo} {githubLink}",
-    "footer5": "GitHubie.",
+    "footer2": "Po prawdziwe informacje na temat obostrzeń udaj się {govLink}.",
+    "footer3": "tutaj",
+    "footerGovAddress": "https://www.gov.pl/web/koronawirus",
+    "footer4": "Zagwiazdkuj {star} to na {githubLogo} {githubLink}.",
+    "footer5": "GitHubie",
     "footer6": "Ikony dzięki {freepik} przez {flaticon}",
     "footer7": "Aktualizacja ",
     "sentence1": "Hotele dostępne są tylko dla {0}, {1}, {2} oraz {3}.",
     "sentence2": "Wszystkie osoby przybywające do Polski z {4} {5} są {6}.",
-    "sentence3": "W zgromadzeniach {meta70} uczestniczyć maks. {7} {meta71} (nie dotyczy {8} oraz {9}).",
+    "sentence3": "W zgromadzeniach {meta_pl_7_0} uczestniczyć maks. {7} {meta_pl_7_1} (nie dotyczy {8} oraz {9}).",
     "sentence4": "Obowiązuje zakaz organizacji {10} oraz {11}",
     "sentence5": "Zamknięte są {12}, {13} oraz {14}. Otwarte zostaną {15} oraz {16}, ale wyłącznie w {17}.",
     "sentence6": "Restauracje i bary są {18}{19}.",
     "sentence7": "Nauka zdalna w klasach {20} szkół podstawowych, {21} oraz {22}, za wyjątkiem {23} (chyba, że {24}).",
     "sentence8": "Żłobki i przedszkola są {25}.",
     "sentence9": "W {26} i {27} może przebywać maks. jedna osoba na {28} m kw. pomieszczenia.",
     "sentence10": "W godzinach {29} zakupy mogą robić tylko osoby {30}.",
-    "sentence11": "W autobusach {meta320} być zajęte maks. {32} {meta321} (lub {31}% wszystkich miejsc)."    
-
+    "sentence11": "W autobusach {meta_pl_32_0} być zajęte maks. {32} {meta_pl_32_1} (lub {31}% wszystkich miejsc).",
+    "dynamicQuarantine1": "zwolnione z kwarantanny",
+    "dynamicQuarantine2": "zobowiązane do odbycia kwarantanny przez {days} dni",
+    "dynamicRestaurant1": "zamknięte",
+    "dynamicRestaurant2": ", pod warunkiem {condition}"
 }
diff --git a/src/generation-logic/generate.js b/src/generation-logic/generate.js
@@ -1,4 +1,5 @@
 import { chooseLanguage, shuffleArray } from '../utils'
+import { useIntl } from 'react-intl'
 
 const QUARANTINE_MIN = 7;
 const QUARANTINE_MAX = 14;
@@ -56,12 +57,14 @@ function getRandom(n, data) {
 function getQuarantineDecision() {
     let rnd = Math.random();
     if (rnd <= 0.25) {
-        return "zwolnione z kwarantanny";
+        // return "zwolnione z kwarantanny";
+        return intl.formatMessage({id: "dynamicQuarantine1"});
     }
     else {
         rnd = Math.random();
         const quarantine_days = QUARANTINE_MIN + Math.floor(rnd * (QUARANTINE_MAX - QUARANTINE_MIN));
-        return "zobowiązane do odbycia kwarantanny przez " + quarantine_days + " dni";
+        // return "zobowiązane do odbycia kwarantanny przez " + quarantine_days + " dni";
+        return intl.formatMessage({id: "dynamicQuarantine2", values: { days: quarantine_days }});
     }
 }
 
@@ -70,10 +73,13 @@ function getBusSeatsNumber(percentage) {
 }
 
 function getRestaurantState(value1, value2) {
-    if (value1.includes("zamknięte")) {
+    // if (value1.includes("zamknięte")) {
+    const closedStr = intl.formatMessage({id: "dynamicRestaurant1"});
+    if (value1.includes(closedStr)) {
         return "";
     }
-    return `, pod warunkiem ${value2}`;
+    // return `, pod warunkiem ${value2}`;
+    return intl.formatMessage({id: "dynamicRestaurant2", values: { condition: value2 }});
 }
 
 function getSchoolGradeRange() {
@@ -109,7 +115,8 @@ export default function generate() {
     dict[31] = getRandom(31, data);
     dict[32] = getBusSeatsNumber(dict[31]);
     dict['meta'] = {};
-    dict['meta'][7] = (() => {
+    dict['meta']['pl'] = {};
+    dict['meta']['pl'][7] = (() => {
         const n = Number(dict[7]);
         if ((n % 10).between(2, 4) && !(n % 100).between(12, 14)) {
             return ['mogą', 'osoby'];
@@ -118,7 +125,7 @@ export default function generate() {
             return ['może', 'osób'];
         }
     })();
-    dict['meta'][32] = (() => {
+    dict['meta']['pl'][32] = (() => {
         const n = Number(dict[32]);
         if ((n % 10).between(2, 4) && !(n % 100).between(12, 14)) {
             return ['mogą', 'miejsca siedzące'];

diff --git a/src/index.jsx b/src/index.jsx
@@ -15,7 +15,7 @@ fetch(messagesPath)
 .then(response => {
   ReactDOM.render(
     <React.StrictMode>
-      <IntlProvider messages={response} locale="pl" defaultLocale="pl">
+      <IntlProvider messages={response} locale={language} defaultLocale={language}>
         <ReactBreakpoints breakpoints={breakpoints}>
           <App />
         </ReactBreakpoints>

diff --git a/src/ui/App.jsx b/src/ui/App.jsx
@@ -6,7 +6,7 @@ import ShareButtons from './ShareButtons'
 import AppHeader from './AppHeader'
 import AppFooter from './AppFooter'
 import { collectEvent, collectVisit, shuffleArray } from '../utils'
-import { FormattedMessage } from 'react-intl'
+import { useIntl, FormattedMessage } from 'react-intl'
 
 const Container = styled.div`
   height: 100vh;
@@ -118,10 +118,12 @@ const StyledButton = styled.button`
 
 
 function App(props) {
+  const intl = useIntl()
+
   /*
    * Format:
    *  sentences[n]          - value for sentence `n`
-   *  sentences['meta'][n]  - additional data for sentence `n`
+   *  sentences['meta'][locale][n]  - additional data for sentence `n` in `locale`
    */
   const [sentences, setSentences] = useState(null)
   const [buttonLabelId, setButtonLabelId] = useState("button")
@@ -142,17 +144,17 @@ function App(props) {
     (sentences => (<Sentence key="10"><FormattedMessage id="sentence10" values={getValues(sentences, [29, 30])} /></Sentence>)),
     (sentences => (<Sentence key="11"><FormattedMessage id="sentence11" values={{
       ...getValues(sentences, [31, 32]),
-      meta320: sentences['meta'][32][0],
-      meta321: sentences['meta'][32][1]
+      meta_pl_32_0: sentences['meta']['pl'][32][0],
+      meta_pl_32_1: sentences['meta']['pl'][32][1]
     }} /></Sentence>))
   ]
 
   const obligatorySentences = [
     (sentences => (<Sentence key="1"><FormattedMessage id="sentence1" values={getValues(sentences, [0, 1, 2, 3])}/></Sentence>)),
     (sentences => (<Sentence key="3"><FormattedMessage id="sentence3" values={{
       ...getValues(sentences, [7, 8, 9]),
-      meta70: sentences['meta'][7][0],
-      meta71: sentences['meta'][7][1]
+      meta_pl_7_0: sentences['meta']['pl'][7][0],
+      meta_pl_7_1: sentences['meta']['pl'][7][1]
     }} /></Sentence>)),
     (sentences => (<Sentence key="4"><FormattedMessage id="sentence4" values={getValues(sentences, [10, 11])} />.</Sentence>)),
     (sentences => (<Sentence key="9"><FormattedMessage id="sentence9" values={getValues(sentences, [26, 27, 28])} /></Sentence>)),
@@ -173,7 +175,7 @@ function App(props) {
     year: 'numeric'
   };
 
-  const date = (new Date()).toLocaleDateString('pl-PL', dateOpts)
+  const date = intl.formatDate(new Date(), dateOpts);
 
   shuffleArray(optionalSentences)
   const finalSentences = [

diff --git a/src/ui/AppFooter.jsx b/src/ui/AppFooter.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import breakpoints from './breakpoints'
 import styled from 'styled-components'
-import { FormattedMessage } from 'react-intl'
+import { useIntl, FormattedMessage } from 'react-intl'
 
 const Footer = styled.div`
   display: flex;
@@ -64,27 +64,33 @@ const StarIcon = styled.span`
   background-repeat: no-repeat;
 `
 
-const AppFooter = ({ }) => (
-  <>
-    <Footer>
-      <FooterText>
-        <b><FormattedMessage id="footer1" /></b> <FormattedMessage id="footer2" /><a href="https://www.gov.pl/web/koronawirus"><FormattedMessage id="footer3" /></a>
-        <br />
-        <FormattedMessage id="footer4" values={{
-          star: <StarIcon />,
-          githubLogo: <GithubIcon />,
-          githubLink: <a href="https://github.com/808-Squad/koronawirus.lol"><FormattedMessage id="footer5" /></a>
-        }} />
-        <br />
-        <FormattedMessage id="footer6" values={{
-          freepik: <a href="https://www.freepik.com" title="Freepik">Freepik</a>,
-          flaticon: <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
-        }}/>
-        <br />
-        <FormattedMessage id="footer7" /> 4.02.2021
-      </FooterText>
-    </Footer>
-  </>
-)
+const AppFooter = ({ }) => {
+  const intl = useIntl()
+  return (
+    <>
+      <Footer>
+        <FooterText>
+          <b><FormattedMessage id="footer1" /></b>&nbsp;
+          <FormattedMessage id="footer2" values={{
+            govLink: <a href={intl.formatMessage({id: "footerGovAddress"})}><FormattedMessage id="footer3" /></a>
+          }} />
+          <br />
+          <FormattedMessage id="footer4" values={{
+            star: <StarIcon />,
+            githubLogo: <GithubIcon />,
+            githubLink: <a href="https://github.com/808-Squad/koronawirus.lol"><FormattedMessage id="footer5" /></a>
+          }} />
+          <br />
+          <FormattedMessage id="footer6" values={{
+            freepik: <a href="https://www.freepik.com" title="Freepik">Freepik</a>,
+            flaticon: <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+          }}/>
+          <br />
+          <FormattedMessage id="footer7" /> 4.02.2021
+        </FooterText>
+      </Footer>
+    </>
+  )
+}
 
 export default AppFooter