Hari's GSoC Spell Checking UI: Initial Implementation

build.ts

@@ -66,12 +66,13 @@ const Plugin = {
 
     let defaultStrings: unknown;
 
-    let pairsResponse, analyzersResponse, generatorsResponse;
+    let pairsResponse, analyzersResponse, generatorsResponse, spellerResponse;
     try {
-      [pairsResponse, analyzersResponse, generatorsResponse] = await Promise.all([
+      [pairsResponse, analyzersResponse, generatorsResponse, spellerResponse] = await Promise.all([
         apyGet('list', {}),
         apyGet('list', { q: 'analyzers' }),
         apyGet('list', { q: 'generators' }),
+        apyGet('list', { q: 'spellers' }),
       ]);
     } catch (error) {
       let message = new String(error).toString();
@@ -104,6 +105,9 @@ const Plugin = {
     const generators = Object.fromEntries(
       Object.entries(generatorsResponse.data as Record<string, string>).filter(([code]) => allowedLang(code)),
     );
+    const spellers = Object.fromEntries(
+      Object.entries(spellerResponse.data as Record<string, string>).filter(([code]) => allowedLang(code)),
+    );
 
     let pairPrefs = {};
     try {
@@ -116,6 +120,7 @@ const Plugin = {
       ...pairs.flatMap(({ sourceLanguage, targetLanguage }) => [sourceLanguage, targetLanguage]),
       ...Object.keys(analyzers),
       ...Object.keys(generators),
+      ...Object.keys(spellers),
       ...Object.keys(languages),
       ...Object.keys(locales),
     ].filter(Boolean);
@@ -170,6 +175,7 @@ const Plugin = {
       'window.PAIR_PREFS': JSON.stringify(pairPrefs),
       'window.ANALYZERS': JSON.stringify(analyzers),
       'window.GENERATORS': JSON.stringify(generators),
+      'window.SPELLERS': JSON.stringify(spellers),
       ...initialOptions.define,
     };
 

config.ts

@@ -6,7 +6,7 @@ export default {
   apyURL: 'https://beta.apertium.org/apy',
 
   defaultMode: Mode.Translation,
-  enabledModes: new Set([Mode.Translation, Mode.Analysis, Mode.Generation, Mode.Sandbox]),
+  enabledModes: new Set([Mode.Translation, Mode.Analysis, Mode.Generation, Mode.Sandbox, Mode.SpellChecker]),
   translationChaining: true,
 
   subtitle: 'Beta',

src/App.tsx

@@ -20,6 +20,7 @@ import Generator from './components/Generator';
 import LocaleSelector from './components/LocaleSelector';
 import Navbar from './components/navbar';
 import Sandbox from './components/Sandbox';
+import SpellChecker from './components/spellchecker/SpellChecker';
 import Translator from './components/translator/Translator';
 import { Mode as TranslatorMode } from './components/translator';
 import { Path as WebpageTranslationPath } from './components/translator/WebpageTranslationForm';
@@ -31,6 +32,7 @@ const Interfaces = {
   [Mode.Analysis]: Analyzer,
   [Mode.Generation]: Generator,
   [Mode.Sandbox]: Sandbox,
+  [Mode.SpellChecker]: SpellChecker,
 } as Record<Mode, React.ComponentType<unknown>>;
 
 const App = ({ setLocale }: { setLocale: React.Dispatch<React.SetStateAction<string>> }): React.ReactElement => {

src/components/navbar/__tests__/index.test.tsx

@@ -33,7 +33,7 @@ describe('navigation options', () => {
     const navbar = screen.getByTestId('navbar-mobile');
     const links = getAllByRole(navbar, 'link', { name: (n) => n !== 'Toggle navigation' });
 
-    expect(links).toHaveLength(4);
+    expect(links).toHaveLength(5);
   });
 
   it('includes button', () => {

src/components/navbar/index.tsx

@@ -107,6 +107,18 @@ const NavbarNav: React.ComponentType = (props: NavProps) => {
           </LinkContainer>
         </Nav.Item>
       )}
+      {enabledModes.has(Mode.SpellChecker) && (
+        <Nav.Item as="li">
+          <LinkContainer
+            isActive={(_, { pathname }) =>
+              pathname === '/spellchecker' || (pathname === '/' && defaultMode === Mode.SpellChecker)
+            }
+            to={'/spellchecker'}
+          >
+            <Nav.Link>{t('Spell_Check')}</Nav.Link>
+          </LinkContainer>
+        </Nav.Item>
+      )}
     </Nav>
   );
 };