ui: use lang pretest setting to locate related languages (#390)

packages/ui-default/.eslintrc.js

@@ -137,5 +137,6 @@ module.exports = {
     'jsx-a11y/no-static-element-interactions': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
   },
 };

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -87,7 +87,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
     super(props);
     if (!availableLangs[this.props.editorLang]) {
       // preference not allowed
-      const key = keys.find((i) => availableLangs[i].pretest === this.props.editorLang);
+      const key = keys.filter((i) => availableLangs[i].pretest)
+        .find((i) => availableLangs[i].pretest.split('.')[0] === this.props.editorLang.split('.')[0]);
       this.props.setEditorLanguage(key || keys[0]);
     }
   }

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.38.14",
+  "version": "4.38.15",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/problem_submit.page.js

@@ -1,71 +0,0 @@
-import { NamedPage } from 'vj/misc/Page';
-import getAvailableLangs from 'vj/utils/availableLangs';
-
-function setOptions($el, options) {
-  $el.empty();
-  $.each(options, (key, value) => {
-    $el.append($('<option></option>').attr('value', key).text(value));
-  });
-}
-
-const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
-  const { config } = UiContext.pdoc;
-  const availableLangs = getAvailableLangs(config.langs);
-
-  function onChangeMain(update = true) {
-    const options = {};
-    for (const key in availableLangs) {
-      if (key.startsWith(`${this.value}.`) && key !== this.value) options[key] = availableLangs[key].display;
-    }
-    setOptions($('#codelang-sub-select'), options);
-    if (Object.keys(options).length) {
-      $('#codelang-sub-container').show();
-      if (update) $('[name="lang"]').val($('#codelang-sub-select').val());
-    } else {
-      $('#codelang-sub-container').hide();
-      if (update) $('[name="lang"]').val(this.value);
-    }
-    return Object.keys(options)[0];
-  }
-  const main = {};
-  for (const key in availableLangs) {
-    if (config.langs && !config.langs.filter((i) => i === key || i.startsWith(`${key}.`)).length) continue;
-    if (!key.includes('.')) main[key] = window.LANGS[key].display;
-    else {
-      const a = key.split('.')[0];
-      main[a] = window.LANGS[a].display;
-    }
-  }
-  setOptions($('#codelang-main-select'), main);
-
-  let isFallback = false;
-  const current = $('[name="lang"]').val();
-  if (current.includes('.')) {
-    const [m] = current.split('.');
-    if (main[m]) {
-      $('#codelang-main-select').val(m);
-      const fallback = onChangeMain.call({ value: m }, false);
-      $('#codelang-sub-select').val(current);
-      if (fallback && !$('#codelang-sub-select').val()) {
-        $('#codelang-sub-select').val(fallback);
-        $('[name="lang"]').val(fallback);
-      }
-    } else isFallback = true;
-  } else if (main[current]) {
-    $('#codelang-main-select').val(current);
-    onChangeMain.call({ value: $('#codelang-main-select').val() }, false);
-  } else isFallback = true;
-
-  if (isFallback) {
-    $('#codelang-main-select').val(Object.keys(main)[0]);
-    onChangeMain.call({ value: Object.keys(main)[0] }, true);
-  }
-
-  $('#codelang-main-select').on('change', onChangeMain);
-  $('#codelang-sub-select').on('change', function () {
-    $('[name="lang"]').val(this.value);
-  });
-  if (Object.keys(main).length === 1) $('#codelang-main-container').hide();
-});
-
-export default page;

packages/ui-default/pages/problem_submit.page.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import i18n from 'vj/utils/i18n';
+import { NamedPage } from 'vj/misc/Page';
+import getAvailableLangs from 'vj/utils/availableLangs';
+
+const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
+  const { config } = UiContext.pdoc;
+  const availableLangs = getAvailableLangs(config.langs);
+  const mainLangs = {};
+  const preferences = [($('[name="lang"]').val() as string) || ''];
+  for (const key in availableLangs) {
+    if (config.langs && !config.langs.filter((i) => i === key || i.startsWith(`${key}.`)).length) continue;
+    if (window.LANGS[key].pretest === preferences[0]) preferences.push(key);
+    if (!key.includes('.')) mainLangs[key] = window.LANGS[key].display;
+    else {
+      const a = key.split('.')[0];
+      mainLangs[a] = window.LANGS[a].display;
+    }
+  }
+  for (const key in availableLangs) {
+    if (config.langs && !config.langs.filter((i) => i === key || i.startsWith(`${key}.`)).length) continue;
+    if (window.LANGS[key].pretest?.split('.')[0] === preferences[0].split('.')[0]) preferences.push(key);
+  }
+
+  const [firstLoadMain, firstLoadSub] = (() => {
+    for (const preference of preferences) {
+      if (preference.includes('.')) {
+        const [l, r] = preference.split('.');
+        if (availableLangs[preference]) return [l, r];
+        if (availableLangs[l]) return [l, ''];
+      } else if (availableLangs[preference]) {
+        return [preference, ''];
+      }
+    }
+    return [Object.keys(mainLangs)[0], ''];
+  })();
+
+  function LanguageSelect() {
+    const [main, setMain] = React.useState(firstLoadMain);
+    const [sub, setSub] = React.useState(firstLoadSub);
+
+    const options = {};
+    for (const key in availableLangs) {
+      if (key.startsWith(`${main}.`)) options[key.split('.')[1]] = availableLangs[key].display;
+    }
+    React.useEffect(() => {
+      $('[name="lang"]').val(sub ? `${main}.${sub}` : main);
+    }, [main, sub]);
+    React.useEffect(() => {
+      const subselections = Object.keys(options).length;
+      if (options[sub]) return;
+      if (!subselections) setSub('');
+      if (subselections === 1) setSub(Object.keys(options)[0]);
+    }, [main]);
+
+    return (
+      <>
+        <div className="medium-5 columns form__item end">
+          <label>
+            {i18n('Code language')}
+            <div className="select-container">
+              <select value={main} onChange={(ev) => setMain(ev.target.value)} className="select">
+                {Object.keys(mainLangs).map((key) => (
+                  <option key={key} value={key}>{mainLangs[key]}</option>
+                ))}
+              </select>
+            </div>
+          </label>
+        </div>
+        {Object.keys(options).length > 1 && (
+          <div className="medium-5 columns form__item end">
+            <label>
+              {i18n('Code language')}
+              <div className="select-container">
+                <select value={sub} onChange={(ev) => setSub(ev.target.value)} className="select">
+                  {Object.keys(options).map((i) => (
+                    <option value={i} key={i}>{options[i]}</option>
+                  ))}
+                </select>
+              </div>
+            </label>
+          </div>
+        )}
+      </>
+    );
+  }
+
+  ReactDOM.createRoot(document.getElementById('codelang-selector')).render(<LanguageSelect />);
+});
+
+export default page;

packages/ui-default/templates/problem_submit.html

@@ -17,24 +17,7 @@
                 value:handler.user.codeLang
               }) }}
           </div>
-          <div class="row nojs--hide">
+          <div class="row nojs--hide" id="codelang-selector"></div>
-            <div class="medium-5 columns form__item end" id="codelang-main-container">
-              <label>
-                {{ _('Code language') }}
-                <div name="form_item_lang" class="select-container">
-                  <select id="codelang-main-select" class="select"></select>
-                </div>
-              </label>
-            </div>
-            <div class="medium-5 columns form__item end" style="display: none" id="codelang-sub-container">
-              <label>
-                {{ _('Code language') }}
-                <div name="form_item_lang" class="select-container">
-                  <select id="codelang-sub-select" class="select"></select>
-                </div>
-              </label>
-            </div>
-          </div>
           {{ form.form_textarea({label:'Code', columns:12, name:'code', extra_class:'monospace', autofocus:true}) }}
           <div class="row">
             <div class="medium-12 columns">