refactor: language endpoint

frontend/src/features/book/api/loader.js

@@ -1,5 +1,5 @@
 import { getBookQuery, getPageQuery } from "./query";
-import { definedLangInfoQuery } from "@language/api/language";
+import { userLanguageQuery } from "@language/api/query";
 import { settingsQuery } from "@settings/api/settings";
 import { softwareInfoQuery } from "@settings/api/settings";
 
@@ -12,7 +12,7 @@ function loader(queryClient) {
 
     const settingsData = await queryClient.ensureQueryData(settingsQuery);
     const languageData = await queryClient.ensureQueryData(
-      definedLangInfoQuery(bookData?.languageId)
+      userLanguageQuery(bookData?.languageId)
     );
     const softwareInfoData =
       await queryClient.ensureQueryData(softwareInfoQuery);

frontend/src/features/book/components/Book/Book.jsx

@@ -3,7 +3,7 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { Box } from "@mantine/core";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import { definedLangInfoQuery } from "@language/api/language";
+import { userLanguageQuery } from "@language/api/query";
 import { getTermQuery } from "@term/api/query";
 import { paneResizeStorage } from "@actions/utils";
 import PageSpinner from "@common/PageSpinner/PageSpinner";
@@ -50,7 +50,7 @@ function Book({ themeFormOpen, onThemeFormOpen, onDrawerOpen }) {
       : activeTerm.data);
 
   const { data: book } = useQuery(getBookQuery(id));
-  const { data: language } = useQuery(definedLangInfoQuery(book.languageId));
+  const { data: language } = useQuery(userLanguageQuery(book.languageId));
   const { data: term } = useQuery(getTermQuery(key));
 
   const [state, dispatch] = useBookState();
@@ -81,7 +81,7 @@ function Book({ themeFormOpen, onThemeFormOpen, onDrawerOpen }) {
     <>
       {!editMode && <ContextMenu contextMenuAreaRef={contextMenuAreaRef} />}
 
-      {editMode && <EditPane book={book} isRtl={language.isRightToLeft} />}
+      {editMode && <EditPane book={book} isRtl={language.right_to_left} />}
 
       <FocusPane
         book={book}
@@ -109,7 +109,7 @@ function Book({ themeFormOpen, onThemeFormOpen, onDrawerOpen }) {
             className={classes.paneLeft}>
             <ReadPane
               book={book}
-              isRtl={language.isRightToLeft}
+              isRtl={language.right_to_left}
               state={state}
               dispatch={dispatch}
               activeTerm={activeTerm}

frontend/src/features/book/components/NewBookForm/NewBookForm.jsx

@@ -33,7 +33,7 @@ import {
 } from "@tabler/icons-react";
 import LanguageCards from "@language/components/LanguageCards/LanguageCards";
 import FormButtons from "@common/FormButtons/FormButtons";
-import { defFormSettingsQuery } from "@language/api/language";
+import { userLanguageQuery } from "@language/api/query";
 import { initialQuery } from "@settings/api/settings";
 import { errorMessage } from "@resources/notifications";
 import { createBook, getBookDataFromUrl } from "../../api/api";
@@ -45,9 +45,9 @@ function NewBookForm({ openDrawer }) {
   const [params] = useSearchParams();
   const langId = params.get("langId");
   const isLangSelected = langId && langId !== "0";
-  const { data } = useQuery(defFormSettingsQuery(langId));
+  const { data: language } = useQuery(userLanguageQuery(langId));
   const { data: initial } = useQuery(initialQuery);
-  const dir = data?.right_to_left ? "rtl" : "ltr";
+  const dir = language?.right_to_left ? "rtl" : "ltr";
 
   const form = useForm({
     initialValues: {

frontend/src/features/book/components/common/LoadSampleBooksField/LoadSampleBooksField.jsx

@@ -3,7 +3,7 @@ import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
 import { ActionIcon, Select } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { IconCheck, IconSelector } from "@tabler/icons-react";
-import { predefinedListQuery } from "@language/api/language";
+import { predefinedLanguagesQuery } from "@language/api/query";
 import { keys as bookKeys } from "@book/api/keys";
 import { keys as settingsKeys } from "@settings/api/keys";
 import { keys as languageKeys } from "@language/api/keys";
@@ -19,7 +19,7 @@ function LoadSampleBooksField({
   onConfirm,
 }) {
   const queryClient = useQueryClient();
-  const { data: predefined } = useQuery(predefinedListQuery);
+  const { data: predefined } = useQuery(predefinedLanguagesQuery);
   const [langName, setLangName] = useState("");
 
   const loadSampleStoriesMutation = useMutation({
@@ -28,8 +28,10 @@ function LoadSampleBooksField({
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: bookKeys.books }),
         queryClient.invalidateQueries({ queryKey: settingsKeys.initial }),
-        queryClient.invalidateQueries({ queryKey: languageKeys.user }),
-        queryClient.invalidateQueries({ queryKey: languageKeys.predefined }),
+        queryClient.invalidateQueries({ queryKey: languageKeys.userLanguages }),
+        queryClient.invalidateQueries({
+          queryKey: languageKeys.predefinedLanguages,
+        }),
       ]);
       notifications.show(
         sampleBooksAdded(`Sample book(s) for "${langName}" added`)

frontend/src/features/language/api/api.js

@@ -1,3 +1,34 @@
+async function getUserLanguages() {
+  const response = await fetch("http://localhost:5001/api/languages/user");
+  return await response.json();
+}
+
+async function getPredefinedLanguages() {
+  const response = await fetch(
+    "http://localhost:5001/api/languages/predefined"
+  );
+  return await response.json();
+}
+
+async function getUserLanguage(id) {
+  const response = await fetch(
+    `http://localhost:5001/api/languages/user/${id}`
+  );
+  return await response.json();
+}
+
+async function getPredefinedLanguage(langName) {
+  const response = await fetch(
+    `http://localhost:5001/api/languages/predefined/${langName}`
+  );
+  return await response.json();
+}
+
+async function getLanguageParsers() {
+  const response = await fetch("http://localhost:5001/api/languages/parsers");
+  return await response.json();
+}
+
 async function createLanguage(data) {
   const response = await fetch(`http://localhost:5001/api/languages`, {
     method: "POST",
@@ -15,4 +46,11 @@ async function createLanguage(data) {
   return await response.json();
 }
 
-export { createLanguage };
+export {
+  getUserLanguages,
+  getPredefinedLanguages,
+  getLanguageParsers,
+  getUserLanguage,
+  getPredefinedLanguage,
+  createLanguage,
+};

frontend/src/features/language/api/keys.js

@@ -1,12 +1,7 @@
 export const keys = {
-  user: ["userLanguages"],
-  predefined: ["predefinedLanguages"],
-
-  defined: (id) => ["definedLanguage", id],
-
-  definedFormSettings: (id) => ["definedLanguageFormSettings", id],
-  predefinedFormSettings: (name) => ["predefinedLanguageFormSettings", name],
-
+  userLanguages: ["userLanguages"],
+  predefinedLanguages: ["predefinedLanguages"],
+  userLanguage: (id) => ["definedLanguage", id],
+  predefinedLanguage: (name) => ["predefinedLanguage", name],
   parsers: ["languageParsers"],
-  samples: (langName) => ["sampleStories", langName],
 };

frontend/src/features/language/api/loader.js

@@ -1,28 +1,24 @@
 import { initialQuery } from "@settings/api/settings";
 import {
-  definedListQuery,
+  userLanguagesQuery,
   parsersQuery,
-  predefFormSettingsQuery,
-  predefinedListQuery,
-} from "./language";
+  predefinedLanguagesQuery,
+} from "./query";
 
 function loader(queryClient) {
   return async () => {
-    const predefListData =
-      await queryClient.ensureQueryData(predefinedListQuery);
-    const defListData = await queryClient.ensureQueryData(definedListQuery);
+    const predefListData = await queryClient.ensureQueryData(
+      predefinedLanguagesQuery
+    );
+    const defListData = await queryClient.ensureQueryData(userLanguagesQuery);
     const parsersData = await queryClient.ensureQueryData(parsersQuery);
     const initialData = await queryClient.ensureQueryData(initialQuery);
-    const predefinedSettingsData = await queryClient.ensureQueryData(
-      predefFormSettingsQuery(null)
-    );
 
     return {
       predefListData,
       defListData,
       parsersData,
       initialData,
-      predefinedSettingsData,
     };
   };
 }

frontend/src/features/language/api/query.js

@@ -0,0 +1,46 @@
+import {
+  getLanguageParsers,
+  getPredefinedLanguage,
+  getPredefinedLanguages,
+  getUserLanguage,
+  getUserLanguages,
+} from "./api";
+import { keys } from "./keys";
+
+const userLanguageQuery = (id) => ({
+  queryKey: keys.userLanguage(id),
+  queryFn: () => getUserLanguage(id),
+  enabled: id != null && id !== "0",
+  refetchOnWindowFocus: false,
+});
+
+const predefinedLanguageQuery = (langName) => ({
+  queryKey: keys.predefinedLanguage(langName),
+  queryFn: () => getPredefinedLanguage(langName),
+  staleTime: Infinity,
+});
+
+const predefinedLanguagesQuery = {
+  queryKey: keys.predefinedLanguages,
+  queryFn: getPredefinedLanguages,
+  staleTime: Infinity,
+};
+
+const userLanguagesQuery = {
+  queryKey: keys.userLanguages,
+  queryFn: getUserLanguages,
+};
+
+const parsersQuery = {
+  queryKey: keys.parsers,
+  queryFn: getLanguageParsers,
+  staleTime: Infinity,
+};
+
+export {
+  userLanguagesQuery,
+  predefinedLanguagesQuery,
+  parsersQuery,
+  userLanguageQuery,
+  predefinedLanguageQuery,
+};

frontend/src/features/language/components/DictTabs/DictTabs.jsx

@@ -28,9 +28,11 @@ function DictTabs({
     onChange: onSetActiveTab,
   });
 
-  const allDicts = language.dictionaries.term;
-  const visibleDicts = allDicts.slice(0, MAX_VISIBLE_DICT_TABS);
-  const dropdownDicts = allDicts.slice(MAX_VISIBLE_DICT_TABS);
+  const termDicts = language.dictionaries.filter(
+    (dict) => dict.for === "terms"
+  );
+  const visibleDicts = termDicts.slice(0, MAX_VISIBLE_DICT_TABS);
+  const dropdownDicts = termDicts.slice(MAX_VISIBLE_DICT_TABS);
   // %E2%80%8B is the zero-width string.  The term is reparsed
   // on the server, so this doesn't need to be sent.
   const encodedTermText = encodeURIComponent(termText).replaceAll(
@@ -68,7 +70,7 @@ function DictTabs({
               label={dict.label}
               openDelay={150}
               refProp="innerRef">
-              {dict.isExternal ? (
+              {dict.type === "popup" ? (
                 <DictTabExternal
                   dict={dict}
                   termText={termText}
@@ -136,7 +138,7 @@ function DictTabs({
 
       {visibleDicts.map((dict, index) => {
         return (
-          !dict.isExternal && (
+          dict.type === "embedded" && (
             <Tabs.Panel
               style={{ height: "100%" }}
               key={dict.label}

frontend/src/features/language/components/LanguageCards/LanguageCards.jsx

@@ -1,19 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
 import { Group, Radio, rem, ScrollArea, Stack, Text } from "@mantine/core";
-import { definedListQuery } from "../../api/language";
+import { userLanguagesQuery } from "../../api/query";
 import classes from "./LanguageCards.module.css";
 
 function LanguageCards({ label, description }) {
-  const { data: languages } = useQuery(definedListQuery);
+  const { data: languages } = useQuery(userLanguagesQuery);
   const [params, setParams] = useSearchParams();
   const currentId = params.get("langId");
 
   function handleLanguageChange(id) {
-    if (id === currentId) {
-      return;
+    if (id === params.get("langId")) {
+      params.delete("langId");
+    } else {
+      params.set("langId", id);
     }
-    setParams({ langId: id });
+
+    setParams(params);
   }
 
   return (
@@ -27,7 +30,7 @@ function LanguageCards({ label, description }) {
       <ScrollArea type="scroll" offsetScrollbars="x">
         <Group gap={2} wrap="nowrap" align="stretch">
           {languages
-            .toSorted((a, b) => a.id > b.id)
+            .toSorted((a, b) => b.id - a.id)
             .map((data) => (
               <Radio.Card
                 key={data.id}