From 1ea6ff51a80c027a5789e35a4ca5419ba455517e Mon Sep 17 00:00:00 2001
From: Thiago Chaves <thiago.coh@gmail.com>
Date: Wed, 10 Aug 2022 18:38:20 +0300
Subject: [PATCH] Add language selection on card creation, move wiktionary
 functionality to lib folder

---
 src/lib/wiktionary/index.ts                   |  2 ++
 src/lib/wiktionary/localStorage.ts            |  9 ++++++
 .../wiktionary}/parseWiktionaryData.ts        | 23 +++++++++-----
 .../AddExpressionView/AddExpressionView.tsx   | 31 ++++++++++++++++---
 4 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/wiktionary/index.ts
 create mode 100644 src/lib/wiktionary/localStorage.ts
 rename src/{model => lib/wiktionary}/parseWiktionaryData.ts (85%)

diff --git a/src/lib/wiktionary/index.ts b/src/lib/wiktionary/index.ts
new file mode 100644
index 0000000..6a8fe37
--- /dev/null
+++ b/src/lib/wiktionary/index.ts
@@ -0,0 +1,2 @@
+export * from "./localStorage";
+export * from "./parseWiktionaryData";
diff --git a/src/lib/wiktionary/localStorage.ts b/src/lib/wiktionary/localStorage.ts
new file mode 100644
index 0000000..f8a4b89
--- /dev/null
+++ b/src/lib/wiktionary/localStorage.ts
@@ -0,0 +1,9 @@
+export const WiktionaryStorageKey = "wiktionary-language";
+
+export function getWiktionaryWordLanguage() {
+  return localStorage.getItem(WiktionaryStorageKey) || "Finnish";
+}
+
+export function setWiktionaryWordLanguage(value: string) {
+  localStorage.setItem(WiktionaryStorageKey, value);
+}
diff --git a/src/model/parseWiktionaryData.ts b/src/lib/wiktionary/parseWiktionaryData.ts
similarity index 85%
rename from src/model/parseWiktionaryData.ts
rename to src/lib/wiktionary/parseWiktionaryData.ts
index 36c7aac..6b5568b 100644
--- a/src/model/parseWiktionaryData.ts
+++ b/src/lib/wiktionary/parseWiktionaryData.ts
@@ -1,17 +1,24 @@
-import { Expression } from "./types";
+import { Expression } from "../../model/types";
 
-export function parseWiktionaryData(
-  prompt: string,
-  data: string
-): Expression | null {
-  // Prevent next.js SSR from crashing here
-  if (typeof window === "undefined") return null;
+// Currently only supports en.wiktionary.org (Wiktionary in English language)
+//                         ^^
 
+interface ParseWiktionaryDataArguments {
+  prompt: string;
+  language: string;
+  data: string;
+}
+
+export function parseWiktionaryData({
+  prompt,
+  language,
+  data,
+}: ParseWiktionaryDataArguments): Expression | null {
   const parser = new DOMParser();
   const document = parser.parseFromString(data, "text/html");
 
   // TODO settings-based language selection
-  const header = document.getElementById("Finnish")?.parentElement;
+  const header = document.getElementById(language)?.parentElement;
   if (!header) return null;
 
   // Grab window of wanted elements and filter out unwanted elements within the window
diff --git a/src/views/AddExpressionView/AddExpressionView.tsx b/src/views/AddExpressionView/AddExpressionView.tsx
index b94962b..cfd7793 100644
--- a/src/views/AddExpressionView/AddExpressionView.tsx
+++ b/src/views/AddExpressionView/AddExpressionView.tsx
@@ -2,11 +2,16 @@ import { useState } from "react";
 import URL from "url";
 import { ExpressionCard } from "../../components";
 import { ExpressionDescription } from "../../components/ExpressionDescription";
+import {
+  getWiktionaryWordLanguage,
+  parseWiktionaryData,
+  setWiktionaryWordLanguage,
+} from "../../lib/wiktionary";
 import { addExpressionWithRelationships, Expression } from "../../model";
-import { parseWiktionaryData } from "../../model/parseWiktionaryData";
 
 export function AddExpressionView() {
   const [prompt, setPrompt] = useState("");
+  const [language, setLanguage] = useState(getWiktionaryWordLanguage());
   const [expression, setExpression] = useState<Expression | null>(null);
   const [submitStatus, setSubmitStatus] =
     useState<string | undefined>(undefined);
@@ -28,6 +33,20 @@ export function AddExpressionView() {
           />
         ) : (
           <div className="content-query">
+            <label htmlFor="word-language">Language of the word: </label>
+            <select
+              value={language}
+              onChange={(event) => {
+                setWiktionaryWordLanguage(event.target.value);
+                setLanguage(event.target.value);
+              }}
+              id="word-language"
+              name="word-language"
+            >
+              <option value="Finnish">Finnish</option>
+              <option value="Portuguese">Portuguese</option>
+              <option value="Spanish">Spanish</option>
+            </select>
             <label htmlFor="query">Word: </label>
             <input
               autoComplete="off"
@@ -69,15 +88,17 @@ export function AddExpressionView() {
                 });
                 const result = await fetch(url);
                 const data = await result.json();
-                const expressionData = parseWiktionaryData(
+                const expressionData = parseWiktionaryData({
                   prompt,
-                  data.parse?.text?.["*"] || ""
-                );
+                  language,
+                  data: data.parse?.text?.["*"] || "",
+                });
                 if (!expressionData)
                   throw new Error(
-                    `Unable to find expression "${prompt}" on Wiktionary in the given language`
+                    `Unable to find ${language}-language word "${prompt}" on Wiktionary`
                   );
                 setExpression(expressionData);
+                setError(undefined);
               } catch (error) {
                 setError(error);
               }