apertium · satti-hari-krishna-reddy · Jan 13, 2024 · Jan 18, 2024 · Mar 10, 2024 · Mar 10, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import { ConfigContext, LocaleContext, StringsContext } from './context';
 import { PRELOADED_STRINGS, Strings, tt } from './util/localization';
 import { langDirection, toAlpha2Code } from './util/languages';
 import { Mode } from './types';
+import { TextProvider } from './util/initialTextValues';
 
 import Analyzer from './components/Analyzer';
 import { Path as DocTranslationPath } from './components/translator/DocTranslationForm';
@@ -23,6 +24,7 @@ import Sandbox from './components/Sandbox';
 import Translator from './components/translator/Translator';
 import { Mode as TranslatorMode } from './components/translator';
 import { Path as WebpageTranslationPath } from './components/translator/WebpageTranslationForm';
+
 import WithInstallationAlert from './components/WithInstallationAlert';
 import WithLocale from './components/WithLocale';
 
@@ -96,44 +98,46 @@ const App = ({ setLocale }: { setLocale: React.Dispatch<React.SetStateAction<str
     <MatomoProvider value={matomoInstance}>
       <StringsContext.Provider value={strings}>
         <WithInstallationAlert>
-          <div
-            ref={wrapRef}
-            style={{
-              height: 'auto !important',
-              margin: '0 auto -60px',
-              minHeight: '99.5%',
-            }}
-          >
-            <Navbar setLocale={setLocale} />
-            <Container>
-              {Object.values(Mode).map(
-                (mode) =>
-                  enabledModes.has(mode) && (
-                    <Route
-                      component={Interfaces[mode]}
-                      exact
-                      key={mode}
-                      path={mode === defaultMode ? ['/', `/${mode}`] : `/${mode}`}
-                    />
-                  ),
-              )}
-              {enabledModes.has(Mode.Translation) && (
-                <>
-                  <Route exact path={DocTranslationPath}>
-                    <Translator mode={TranslatorMode.Document} />
-                  </Route>
-                  <Route exact path={WebpageTranslationPath}>
-                    <Translator mode={TranslatorMode.Webpage} />
-                  </Route>
-                </>
-              )}
-              <div className="d-block d-sm-none float-left my-2">
-                <LocaleSelector setLocale={setLocale} />
-              </div>
-            </Container>
-            <div ref={pushRef} style={{ height: '60px' }} />
-          </div>
-          <Footer pushRef={pushRef} wrapRef={wrapRef} />
+          <TextProvider>
+            <div
+              ref={wrapRef}
+              style={{
+                height: 'auto !important',
+                margin: '0 auto -60px',
+                minHeight: '99.5%',
+              }}
+            >
+              <Navbar setLocale={setLocale} />
+              <Container>
+                {Object.values(Mode).map(
+                  (mode) =>
+                    enabledModes.has(mode) && (
+                      <Route
+                        component={Interfaces[mode]}
+                        exact
+                        key={mode}
+                        path={mode === defaultMode ? ['/', `/${mode}`] : `/${mode}`}
+                      />
+                    ),
+                )}
+                {enabledModes.has(Mode.Translation) && (
+                  <>
+                    <Route exact path={DocTranslationPath}>
+                      <Translator mode={TranslatorMode.Document} />
+                    </Route>
+                    <Route exact path={WebpageTranslationPath}>
+                      <Translator mode={TranslatorMode.Webpage} />
+                    </Route>
+                  </>
+                )}
+                <div className="d-block d-sm-none float-left my-2">
+                  <LocaleSelector setLocale={setLocale} />
+                </div>
+              </Container>
+              <div ref={pushRef} style={{ height: '60px' }} />
+            </div>
+            <Footer pushRef={pushRef} wrapRef={wrapRef} />
+          </TextProvider>
         </WithInstallationAlert>
       </StringsContext.Provider>
     </MatomoProvider>

diff --git a/src/components/footer/__tests__/index.test.tsx b/src/components/footer/__tests__/index.test.tsx
@@ -1,24 +1,29 @@
 import * as React from 'react';
 import { getAllByRole, render, screen, waitFor } from '@testing-library/react';
+import { Router } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 
 import Config from '../../../../config';
 import { ConfigContext } from '../../../context';
 import { Config as ConfigType } from '../../../types';
+import { createMemoryHistory } from 'history';
 
 import Footer from '..';
 
 const renderFooter = (config: Partial<ConfigType> = {}) => {
   const wrapRef = React.createRef<HTMLDivElement>();
   const pushRef = React.createRef<HTMLDivElement>();
+  const history = createMemoryHistory();
 
   render(
     <ConfigContext.Provider value={{ ...Config, ...config }}>
       <>
         <div ref={wrapRef}>
           <div ref={pushRef} />
         </div>
-        <Footer pushRef={pushRef} wrapRef={wrapRef} />
+        <Router history={history}>
+          <Footer pushRef={pushRef} wrapRef={wrapRef} />
+        </Router>
       </>
     </ConfigContext.Provider>,
   );
@@ -93,26 +98,4 @@ describe('Footer', () => {
       );
     });
   });
-
-  describe('help improve buttons', () => {
-    it('opens about dialog on mobile', () => {
-      renderFooter();
-
-      userEvent.click(screen.getAllByRole('button', { name: 'Help_Improve-Default' })[0]);
-
-      expect(screen.getByRole('dialog').textContent).toMatchInlineSnapshot(
-        `"About_Apertium-Default×CloseWhat_Is_Apertium-DefaultApertium-Default"`,
-      );
-    });
-
-    it('opens about dialog on desktop', () => {
-      renderFooter();
-
-      userEvent.click(screen.getAllByRole('button', { name: 'Help_Improve-Default' })[1]);
-
-      expect(screen.getByRole('dialog').textContent).toMatchInlineSnapshot(
-        `"About_Apertium-Default×CloseWhat_Is_Apertium-DefaultApertium-Default"`,
-      );
-    });
-  });
 });
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -6,11 +6,14 @@ import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ModalProps } from 'react-bootstrap/Modal';
 import Nav from 'react-bootstrap/Nav';
+import { useHistory } from 'react-router-dom';
 
 import AboutModal from './AboutModal';
 import ContactModal from './ContactModal';
 import DocumentationModal from './DocumentationModal';
 import DownloadModal from './DownloadModal';
+import { TextContext } from '../../context';
+import { getUrlParam } from '../../util/url';
 import { useLocalization } from '../../util/localization';
 
 // eslint-disable-next-line
@@ -63,7 +66,7 @@ const FooterNav_ = ({
   );
 };
 const FooterNav = React.memo(FooterNav_);
-
+const textUrlParam = 'dir';
 const Footer = ({
   wrapRef,
   pushRef,
@@ -72,6 +75,9 @@ const Footer = ({
   pushRef: React.RefObject<HTMLElement>;
 }): React.ReactElement => {
   const { t } = useLocalization();
+  const history = useHistory();
+  const languagePair = getUrlParam(history.location.search, textUrlParam);
+  const { srcText, tgtText } = React.useContext(TextContext);
 
   const [openTab, setOpenTab] = React.useState<Tab | undefined>(undefined);
 
@@ -101,26 +107,21 @@ const Footer = ({
             <div className="mb-4 d-flex flex-column">
               <div className="card d-inline-block bg-light p-2">
                 <span>{t('Notice_Mistake')}</span>{' '}
-                <Button className="p-0" onClick={() => setOpenTab(Tab.About)} tabIndex={0} variant="link">
-                  {t('Help_Improve')}
-                </Button>
+                <a
+                  className="p-0"
+                  href={`https://github.com/apertium/apertium-${
+                    languagePair ?? 'default'
+                  }/issues/new?title=Suggested+translation+improvement&body=SOURCE: ${srcText}%0A%0AGOT: ${tgtText}%0A%0AEXPECTED: %20%5BYOUR%20TRANSLATION%20SUGGESTION%20GOES%20HERE%5D`}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  {t('Help_Improve')}{' '}
+                </a>
               </div>
-              <a
-                className="text-muted d-none d-lg-block version align-self-end"
-                href="https://github.com/apertium/apertium-html-tools"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <small>{version}</small>
-              </a>
+
+              <small className="text-muted d-none d-lg-block version align-self-end">{version}</small>
             </div>
           </div>
-          <div className="align-self-end card card-body d-block bg-light d-md-none my-2 p-2">
-            <span>{t('Notice_Mistake')}</span>{' '}
-            <Button className="p-0" onClick={() => setOpenTab(Tab.About)} tabIndex={0} variant="link">
-              {t('Help_Improve')}
-            </Button>
-          </div>
         </div>
       </div>
 

diff --git a/src/components/translator/TextTranslationForm.tsx b/src/components/translator/TextTranslationForm.tsx
@@ -10,12 +10,12 @@ import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { useMatomo } from '@datapunt/matomo-tracker-react';
 
+import { APyContext, TextContext } from '../../context';
 import { DetectCompleteEvent, DetectEvent, PairPrefValues, TranslateEvent, baseUrlParams } from '.';
-import { MaxURLLength, buildNewSearch, getUrlParam } from '../../util/url';
-import { APyContext } from '../../context';
+import { MaxURLLength, buildNewSearch } from '../../util/url';
+
 import { buildUrl as buildWebpageTranslationUrl } from './WebpageTranslationForm';
 import { langDirection } from '../../util/languages';
-import useLocalStorage from '../../util/useLocalStorage';
 import { useLocalization } from '../../util/localization';
 
 const textUrlParam = 'q';
@@ -54,10 +54,7 @@ const TextTranslationForm = ({
   const srcTextareaRef = React.useRef<HTMLTextAreaElement>(null);
   const tgtTextareaRef = React.useRef<HTMLTextAreaElement>(null);
 
-  const [srcText, setSrcText] = useLocalStorage('srcText', '', {
-    overrideValue: getUrlParam(history.location.search, textUrlParam),
-  });
-  const [tgtText, setTgtText] = React.useState('');
+  const { srcText, setSrcText, tgtText, setTgtText } = React.useContext(TextContext);
 
   React.useEffect(() => {
     const baseParams = baseUrlParams({ srcLang, tgtLang });
@@ -130,7 +127,7 @@ const TextTranslationForm = ({
         }
       })();
     },
-    [apyFetch, markUnknown, prefs, setLoading, srcLang, srcText, tgtLang, trackEvent],
+    [apyFetch, markUnknown, prefs, setLoading, srcLang, srcText, setTgtText, tgtLang, trackEvent],
   );
 
   const translationTimer = React.useRef<number | null>(null);

diff --git a/src/components/translator/__tests__/TextTranslationForm.test.tsx b/src/components/translator/__tests__/TextTranslationForm.test.tsx
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 
 import { DetectCompleteEvent, DetectEvent, TranslateEvent } from '..';
 import TextTranslationForm, { Props } from '../TextTranslationForm';
-
+import { TextProvider } from '../../../util/initialTextValues';
 const renderTextTranslationForm = (
   props_: Partial<Props> = {},
   historyOptions?: MemoryHistoryBuildOptions,
@@ -26,7 +26,9 @@ const renderTextTranslationForm = (
 
   render(
     <Router history={history}>
-      <TextTranslationForm {...props} />
+      <TextProvider>
+        <TextTranslationForm {...props} />
+      </TextProvider>
     </Router>,
   );
 
@@ -158,7 +160,9 @@ describe('translation', () => {
         <>
           <button onClick={() => setSrcLang('cat')}>ChangeSrcLang</button>
           <Router history={history}>
-            <TextTranslationForm {...props} srcLang={srcLang} />
+            <TextProvider>
+              <TextTranslationForm {...props} srcLang={srcLang} />
+            </TextProvider>
           </Router>
         </>
       );

diff --git a/src/context.ts b/src/context.ts
@@ -3,10 +3,12 @@ import * as React from 'react';
 import Config from '../config';
 import { PRELOADED_STRINGS } from './util/strings';
 import { apyFetch } from './util';
+import { initialTextValues } from './util/initialTextValues';
 
 const LocaleContext = React.createContext(Config.defaultLocale);
 const ConfigContext = React.createContext(Config);
 const StringsContext = React.createContext(PRELOADED_STRINGS);
 const APyContext = React.createContext(apyFetch);
+const TextContext = React.createContext(initialTextValues);
 
-export { APyContext, ConfigContext, LocaleContext, StringsContext };
+export { APyContext, ConfigContext, LocaleContext, StringsContext, TextContext };
diff --git a/src/strings/eng.json b/src/strings/eng.json
@@ -58,7 +58,7 @@
     "Norm_Preferences": "Style preferences",
     "Documentation": "Documentation",
     "About_Apertium": "About Apertium",
-    "What_Is_Apertium": "<p>Apertium is a <b>free/open-source machine translation platform</b>, initially aimed at related-language pairs but expanded to deal with more divergent language pairs (such as English-Catalan). The platform provides</p> <ol> <li>a language-independent machine translation engine</li> <li>tools to manage the linguistic data necessary to build a machine translation system for a given language pair and</li> <li>linguistic data for a growing number of language pairs.</li> </ol> <p>Apertium welcomes new developers: if you think you can improve the engine or the tools, or develop linguistic data for us, do not hesitate to <a data-toggle='modal' data-target='#contactModal' data-text='Help_Improve' data-keyboard='true' data-dismiss='modal' style='cursor: pointer'>contact us</a>.</p>",
+    "What_Is_Apertium": "<p>Apertium is a <b>free/open-source machine translation platform</b>, initially aimed at related-language pairs but expanded to deal with more divergent language pairs (such as English-Catalan). The platform provides</p> <ol> <li>a language-independent machine translation engine</li> <li>tools to manage the linguistic data necessary to build a machine translation system for a given language pair and</li> <li>linguistic data for a growing number of language pairs.</li> </ol> <p>Apertium welcomes new developers: if you think you can improve the engine or the tools, or develop linguistic data for us, do not hesitate to <a href=\"https://wiki.apertium.org/wiki/Contact\" target=\"_blank\" rel=\"noopener noreferrer\">contact us</a>.</p>",
     "Documentation_Para": "Documentation can be found on our <a href='https://wiki.apertium.org/'>Wiki</a> under the <a href='https://wiki.apertium.org/wiki/Documentation' target='_blank' rel='noopener'>Documentation</a> sub-page. We have published various conference papers and journal articles, a list of which may be found on the Wiki under <a href='https://wiki.apertium.org/wiki/Publications' target='_blank' rel='noopener'>Publications</a>.",
     "Apertium_Downloads": "Apertium Downloads",
     "Downloads_Para": "Current versions of the <b>Apertium toolbox</b> as well as of <b>language-pair data</b> are available from <a href='https://github.com/apertium' target='_blank' rel='noopener'>the GitHub page</a>. Installation instructions for Apertium on all major platforms are provided on the <a href='https://wiki.apertium.org/wiki/Installation' target='_blank' rel='noopener'>Wiki's Installation page</a>.",

diff --git a/src/types.ts b/src/types.ts
@@ -25,3 +25,10 @@ export type Config = {
   subtitleColor?: string;
   showMoreLanguagesLink: boolean;
 };
+
+export type TextType = {
+  srcText: string;
+  setSrcText: React.Dispatch<React.SetStateAction<string>>;
+  tgtText: string;
+  setTgtText: React.Dispatch<React.SetStateAction<string>>;
+};
diff --git a/src/util/initialTextValues.tsx b/src/util/initialTextValues.tsx
@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { TextContext } from '../context';
+import { TextType } from '../types';
+import { getUrlParam } from '../util/url';
+
+import useLocalStorage from '../util/useLocalStorage';
+
+export const initialTextValues: TextType = {
+  srcText: '',
+  setSrcText: () => {
+    initialTextValues.srcText = ' Source Text';
+  },
+  tgtText: '',
+  setTgtText: () => {
+    initialTextValues.tgtText = 'Target Text';
+  },
+};
+
+export const TextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const textUrlParam = 'q';
+  const history = useHistory();
+  const [srcText, setSrcText] = useLocalStorage('srcText', '', {
+    overrideValue: getUrlParam(history.location.search, textUrlParam),
+  });
+  const [tgtText, setTgtText] = React.useState('');
+
+  return <TextContext.Provider value={{ srcText, setSrcText, tgtText, setTgtText }}>{children}</TextContext.Provider>;
+};