made changes as requested

apertium · Mar 10, 2024 · fcf76ca · fcf76ca
1 parent f8838c3
commit fcf76ca
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 75 deletions.
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);
 
@@ -103,7 +109,9 @@ const Footer = ({
                 <span>{t('Notice_Mistake')}</span>{' '}
                 <a
                   className="p-0"
-                  href="https://github.com/apertium/apertium-html-tools"
+                  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"
                 >

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/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>;
+};