cleanup

account/package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@lingdocs/inflect": "7.0.3",
+        "@lingdocs/inflect": "7.0.8",
         "base64url": "^3.0.1",
         "bcryptjs": "^2.4.3",
         "connect-redis": "^6.0.0",
@@ -126,9 +126,9 @@
       }
     },
     "node_modules/@lingdocs/inflect": {
-      "version": "7.0.3",
-      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz",
-      "integrity": "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA==",
+      "version": "7.0.8",
+      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.8.tgz",
+      "integrity": "sha512-+RuZ2Tcw4gGjWwNOpZb/C7kwgWBAILY4ZRSzZBrG3KN+jEDrW++wgB5LfaKkzHLIurI73L5rNc4FKYUw8zXn3A==",
       "dependencies": {
         "fp-ts": "^2.16.0",
         "pbf": "^3.2.1",
@@ -3109,9 +3109,9 @@
       }
     },
     "@lingdocs/inflect": {
-      "version": "7.0.3",
-      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz",
-      "integrity": "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA==",
+      "version": "7.0.8",
+      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.8.tgz",
+      "integrity": "sha512-+RuZ2Tcw4gGjWwNOpZb/C7kwgWBAILY4ZRSzZBrG3KN+jEDrW++wgB5LfaKkzHLIurI73L5rNc4FKYUw8zXn3A==",
       "requires": {
         "fp-ts": "^2.16.0",
         "pbf": "^3.2.1",

account/package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@lingdocs/inflect": "7.0.3",
+    "@lingdocs/inflect": "7.0.8",
     "base64url": "^3.0.1",
     "bcryptjs": "^2.4.3",
     "connect-redis": "^6.0.0",

account/yarn.lock

@@ -45,10 +45,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@lingdocs/inflect@7.0.3":
-  "integrity" "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA=="
-  "resolved" "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz"
-  "version" "7.0.3"
+"@lingdocs/inflect@7.0.8":
+  "integrity" "sha512-+RuZ2Tcw4gGjWwNOpZb/C7kwgWBAILY4ZRSzZBrG3KN+jEDrW++wgB5LfaKkzHLIurI73L5rNc4FKYUw8zXn3A=="
+  "resolved" "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.8.tgz"
+  "version" "7.0.8"
   dependencies:
     "fp-ts" "^2.16.0"
     "pbf" "^3.2.1"

functions/package.json

@@ -14,8 +14,8 @@
   },
   "main": "lib/functions/src/index.js",
   "dependencies": {
-    "@google-cloud/storage": "^5.8.1",
-    "@lingdocs/inflect": "7.0.3",
+    "@aws-sdk/client-s3": "^3.474.0",
+    "@lingdocs/inflect": "7.0.8",
     "@types/cors": "^2.8.10",
     "@types/google-spreadsheet": "^3.0.2",
     "@types/react": "^18.0.21",

functions/src/publish.ts

@@ -13,15 +13,20 @@ import {
 } from "@lingdocs/inflect";
 import { getWordList } from "./word-list-maker";
 import { PublishDictionaryResponse } from "../../website/src/types/functions-types";
-import { Storage } from "@google-cloud/storage";
-const storage = new Storage({
-  projectId: "lingdocs",
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
+import zlib from "zlib";
+const s3Client = new S3Client({
+  region: "auto",
+  endpoint: functions.config().r2.endpoint,
+  credentials: {
+    accessKeyId: functions.config().r2.access_key_id,
+    secretAccessKey: functions.config().r2.secret_access_key,
+  },
 });
 
 const title = "LingDocs Pashto Dictionary";
 const license = `Copyright © ${new Date().getFullYear()} lingdocs.com All Rights Reserved - Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License - https://creativecommons.org/licenses/by-nc-sa/4.0/`;
-const bucketName = "lingdocs";
-const baseUrl = `https://storage.googleapis.com/${bucketName}/`;
+const baseUrl = `https://storage.lingdocs.com/dictionary/`;
 const dictionaryFilename = "dictionary";
 const dictionaryInfoFilename = "dictionary-info";
 // const hunspellAffFileFilename = "ps_AFF.aff";
@@ -220,19 +225,36 @@ function checkForErrors(
 
 async function upload(content: Buffer | string, filename: string) {
   const isBuffer = typeof content !== "string";
-  const file = storage.bucket(bucketName).file(filename);
-  await file.save(content, {
-    gzip: isBuffer ? false : true,
-    predefinedAcl: "publicRead",
-    metadata: {
-      contentType: isBuffer
-        ? "application/octet-stream"
-        : filename.slice(-5) === ".json"
-        ? "application/json"
-        : "text/plain; charset=UTF-8",
-      cacheControl: "no-cache",
-    },
-  });
+  // upload to r2 (new destination)
+  if (isBuffer) {
+    const putObjectCommand = new PutObjectCommand({
+      Bucket: functions.config().r2.bucket_name,
+      Key: `dictionary/${filename}`,
+      Body: content,
+      CacheControl: "no-cache",
+      ContentType: "application/octet-stream",
+    });
+    await s3Client.send(putObjectCommand);
+  } else {
+    zlib.gzip(content, (err, buffer) => {
+      if (err) {
+        console.error(err);
+      }
+      const putObjectCommand = new PutObjectCommand({
+        Bucket: functions.config().r2.bucket_name,
+        Key: `dictionary/${filename}`,
+        CacheControl: "no-cache",
+        Body: buffer,
+        ContentEncoding: "gzip",
+        ContentType: filename.endsWith(".json")
+          ? "application/json"
+          : filename.endsWith(".xml")
+          ? "application/xml"
+          : "text/plain; charset=UTF-8",
+      });
+      s3Client.send(putObjectCommand).catch(console.error);
+    });
+  }
 }
 
 // async function uploadHunspellToStorage(wordlist: {
@@ -274,14 +296,21 @@ async function uploadDictionaryToStorage(dictionary: T.Dictionary) {
 }
 
 function makeSitemap(dictionary: T.Dictionary): string {
+  const pages = [
+    ...["", "about", "settings", "account", "phrase-builder", "new-entries"],
+    ...dictionary.entries.map((x) => `word?id=${x.ts}`),
+  ];
   return `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  ${dictionary.entries.map(
-    (entry) =>
-      `  <url>  
-    <loc>https://dictionary.lingdocs.com/word?id=${entry.ts}</loc>
+  ${pages
+    .map(
+      (page) =>
+        `
+  <url>
+    <loc>https://dictionary.lingdocs.com/${page}</loc>
   </url>`
-  )} 
+    )
+    .join("")}
 </urlset> 
 `;
 }

website/package.json

@@ -7,7 +7,7 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.2",
-    "@lingdocs/ps-react": "7.0.3",
+    "@lingdocs/ps-react": "7.0.8",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

website/public/index.html

@@ -11,6 +11,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="Pashto Dictionary">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="sitemap" type="application/xml" title="Sitemap" href="https://storage.lingdocs.com/dictionary/sitemap.xml" />
 
     <meta name="author" content="lingdocs.com" />
     <link rel="canonical" href="https://dictionary.lingdocs.com/" />

website/public/robots.txt

@@ -1,3 +1,4 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
+Sitemap: https://storage.lingdocs.com/dictionary/sitemap.xml

website/src/App.css

@@ -57,6 +57,10 @@ body {
     padding-bottom: 60px; */
 }
 
+dt {
+    float: left;
+}
+
 .p-text {
     font-size: var(--p-text-size);
 }

website/src/App.tsx

@@ -439,6 +439,13 @@ class App extends Component<RouteComponentProps, State> {
       action.type === "toggleSearchType"
     ) {
       if (this.props.location.pathname !== "/new-entries") {
+        if (
+          action.type === "toggleSearchType" &&
+          this.state.options.searchType === "fuzzy" &&
+          this.props.location.pathname !== "/search"
+        ) {
+          this.handleSearchValueChange("آ");
+        }
         this.setState((prevState) => ({
           options,
           page: 1,
@@ -636,12 +643,12 @@ class App extends Component<RouteComponentProps, State> {
                       </Link>
                     </div>
                   )}
-                  {/* <Link
+                  <Link
                     to="/new-entries"
                     className="plain-link font-weight-light"
                   >
                     <div className="my-4">New words this month</div>
-                  </Link> */}
+                  </Link>
                   <div className="my-4 pt-3">
                     <Link
                       to="/phrase-builder"

website/src/components/Entry.tsx

@@ -36,9 +36,9 @@ function Entry({
       data-testid="entry"
     >
       <div>
-        <strong>
+        <dt className="mr-2">
           <InlinePs opts={textOptions}>{{ p: entry.p, f: entry.f }}</InlinePs>
-        </strong>
+        </dt>
         {` `}
         <em>{entry.c}</em>
         {entry.a && !nonClickable && (
@@ -49,7 +49,9 @@ function Entry({
         )}
       </div>
       <ExtraEntryInfo entry={entry} textOptions={textOptions} />
-      <div className="entry-definition">{entry.e}</div>
+      <dd>
+        <div className="entry-definition">{entry.e}</div>
+      </dd>
     </div>
   );
 }

website/src/components/EntryAudioDisplay.tsx

@@ -0,0 +1,32 @@
+import { Types as T, InlinePs } from "@lingdocs/ps-react";
+import { getAudioPath } from "./PlayStorageAudio";
+
+export function EntryAudioDisplay({
+  entry,
+  opts,
+}: {
+  entry: T.DictionaryEntry;
+  opts: T.TextOptions;
+}) {
+  if (!entry.a) {
+    return null;
+  }
+  return (
+    <figure>
+      <figcaption className="mb-2 pl-2">
+        Listen to <InlinePs opts={opts}>{{ p: entry.p, f: entry.f }}</InlinePs>
+      </figcaption>
+      <audio
+        controls
+        controlsList="nofullscreen"
+        src={getAudioPath(entry.ts)}
+        preload="auto"
+      >
+        <a href={getAudioPath(entry.ts)}>
+          Download audio for{" "}
+          <InlinePs opts={opts}>{{ p: entry.p, f: entry.f }}</InlinePs>
+        </a>
+      </audio>
+    </figure>
+  );
+}

website/src/components/PlayStorageAudio.tsx

@@ -1,6 +1,10 @@
+export function getAudioPath(ts: number): string {
+  return `https://storage.lingdocs.com/audio/${ts}.mp3`;
+}
+
 export default function playStorageAudio(ts: number, callback: () => void) {
   if (!ts) return;
-  let audio = new Audio(`https://storage.lingdocs.com/audio/${ts}.mp3`);
+  let audio = new Audio(getAudioPath(ts));
   audio.addEventListener("ended", () => {
     callback();
     audio.remove();

website/src/lib/dictionary.ts

@@ -24,9 +24,9 @@ import { makeAWeeBitFuzzy } from "./wee-bit-fuzzy";
 import { getTextOptions } from "./get-text-options";
 import { DictionaryAPI, State } from "../types/dictionary-types";
 
-// const dictionaryBaseUrl = "https://storage.googleapis.com/lingdocs/";
-const dictionaryUrl = `https://storage.googleapis.com/lingdocs/dictionary`;
-const dictionaryInfoUrl = `https://storage.googleapis.com/lingdocs/dictionary-info`;
+const dictionaryBaseUrl = `https://storage.lingdocs.com/dictionary`;
+const dictionaryUrl = `${dictionaryBaseUrl}/dictionary`;
+const dictionaryInfoUrl = `${dictionaryBaseUrl}/dictionary-info`;
 
 const dictionaryInfoLocalStorageKey = "dictionaryInfo5";
 const dictionaryCollectionName = "dictionary3";

website/src/screens/IsolatedEntry.tsx

@@ -34,7 +34,7 @@ import { Modal } from "react-bootstrap";
 import { getTextOptions } from "../lib/get-text-options";
 import { entryFeeder } from "../lib/dictionary";
 import { State, DictionaryAPI } from "../types/dictionary-types";
-import playStorageAudio from "../components/PlayStorageAudio";
+import { EntryAudioDisplay } from "../components/EntryAudioDisplay";
 
 function IsolatedEntry({
   state,
@@ -46,7 +46,6 @@ function IsolatedEntry({
   isolateEntry: (ts: number) => void;
 }) {
   const [exploded, setExploded] = useState<boolean>(false);
-  const [playing, setPlaying] = useState<boolean>(false);
   const [editing, setEditing] = useState<boolean>(false);
   const [comment, setComment] = useState<string>("");
   const [editSubmitted, setEditSubmitted] = useState<boolean>(false);
@@ -57,7 +56,6 @@ function IsolatedEntry({
     setEditing(false);
     setComment("");
     setEditSubmitted(false);
-    setPlaying(false);
   }, [state]);
   function flashClippedMessage(m: string) {
     setShowClipped(m);
@@ -154,19 +152,16 @@ function IsolatedEntry({
     navigator.clipboard.writeText(JSON.stringify(entry));
     flashClippedMessage("entry data copied to clipboard");
   }
-  function handlePlayStorageAudio() {
-    if (!entry) return;
-    setPlaying(true);
-    playStorageAudio(entry.ts, () => {
-      setPlaying(false);
-    });
-  }
   return (
     <div className="wide-width-limiter">
       <Helmet>
-        <title>{entry.p} - LingDocs Pashto Dictionary</title>
+        <title>{entry.p} | LingDocs Pashto Dictionary</title>
+        <link
+          rel="canonical"
+          href={`https://dictionary.lingdocs.com/word?id=${entry.ts}`}
+        />
       </Helmet>
-      <div className="row">
+      <dl className="row mb-1">
         <div className="col-8">
           <Entry
             nonClickable
@@ -177,13 +172,6 @@ function IsolatedEntry({
         </div>
         <div className="col-4">
           <div className="d-flex flex-row justify-content-end">
-            {entry.a && (
-              <div className="clickable mr-3" onClick={handlePlayStorageAudio}>
-                <i
-                  className={`fas fa-lg fa-volume-${playing ? "down" : "off"}`}
-                />
-              </div>
-            )}
             <div
               className="clickable mr-3"
               onClick={() => setExploded((os) => !os)}
@@ -238,7 +226,8 @@ function IsolatedEntry({
             )}
           </div>
         </div>
-      </div>
+      </dl>
+      <EntryAudioDisplay entry={entry} opts={textOptions} />
       {wordlistWord && (
         <>
           {hasAttachment(wordlistWord, "audio") && (
@@ -369,6 +358,7 @@ function IsolatedEntry({
             state={{ ...state, results: relatedEntries }}
             isolateEntry={isolateEntry}
             handleInflectionSearch={() => null}
+            relatedResults
           />
         </>
       ) : (

website/src/screens/Results.tsx

@@ -8,212 +8,278 @@
 
 import { useState } from "react";
 import * as FT from "../types/functions-types";
-import { 
-    submissionBase,
-    addSubmission,
-} from "../lib/submissions";
+import { submissionBase, addSubmission } from "../lib/submissions";
 import { isPashtoScript } from "../lib/is-pashto";
 import Entry from "../components/Entry";
 import { Helmet } from "react-helmet";
 import InflectionFormMatchDisplay from "../components/InflectionFormMatchDisplay";
 import { getTextOptions } from "../lib/get-text-options";
-import {
-    State,
-} from "../types/dictionary-types";
+import { State } from "../types/dictionary-types";
 
 export const inflectionSearchIcon = "fas fa-search-plus";
 
 // TODO: put power results in a prop so we can do it from outside with the keyboard shortcut
-function Results({ state, isolateEntry, handleInflectionSearch }: {
-    state: State,
-    isolateEntry: (ts: number) => void,
-    handleInflectionSearch: () => void,
+function Results({
+  state,
+  isolateEntry,
+  handleInflectionSearch,
+  relatedResults,
+}: {
+  state: State;
+  isolateEntry: (ts: number) => void;
+  handleInflectionSearch: () => void;
+  relatedResults?: boolean;
 }) {
-    const [suggestionState, setSuggestionState] = useState<"none" | "editing" | "received">("none");
-    const [comment, setComment] = useState<string>("");
-    const [pashto, setPashto] = useState<string>("");
-    const [phonetics, setPhonetics] = useState<string>("");
-    const [english, setEnglish] = useState<string>("");
-    const textOptions = getTextOptions(state);
-    function startSuggestion() {
-        const toStart = state.searchValue;
-        if (isPashtoScript(toStart)) {
-            setPashto(toStart);
-            setPhonetics("");
-        } else {
-            setPashto("");
-            setPhonetics(toStart);           
-        }
-        setSuggestionState("editing");
+  const [suggestionState, setSuggestionState] = useState<
+    "none" | "editing" | "received"
+  >("none");
+  const [comment, setComment] = useState<string>("");
+  const [pashto, setPashto] = useState<string>("");
+  const [phonetics, setPhonetics] = useState<string>("");
+  const [english, setEnglish] = useState<string>("");
+  const textOptions = getTextOptions(state);
+  function startSuggestion() {
+    const toStart = state.searchValue;
+    if (isPashtoScript(toStart)) {
+      setPashto(toStart);
+      setPhonetics("");
+    } else {
+      setPashto("");
+      setPhonetics(toStart);
     }
-    function cancelSuggestion() {
-        setPashto("");
-        setPhonetics("");
-        setSuggestionState("none");
-    }
-    function submitSuggestion(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-        event.preventDefault();
-        if (!state.user) return;
-        const p = pashto;
-        const f = phonetics;
-        const e = english; 
-        const newEntry: FT.EntrySuggestion = {
-            ...submissionBase(state.user),
-            type: "entry suggestion",
-            entry: { ts: 0, i: 0, p, f, g: "", e },
-            comment,
-        };
-        addSubmission(newEntry, state.user);
-        setSuggestionState("received");
-    }
-    const inflectionResults = state.inflectionSearchResults;
-    return <div className="width-limiter">
+    setSuggestionState("editing");
+  }
+  function cancelSuggestion() {
+    setPashto("");
+    setPhonetics("");
+    setSuggestionState("none");
+  }
+  function submitSuggestion(
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) {
+    event.preventDefault();
+    if (!state.user) return;
+    const p = pashto;
+    const f = phonetics;
+    const e = english;
+    const newEntry: FT.EntrySuggestion = {
+      ...submissionBase(state.user),
+      type: "entry suggestion",
+      entry: { ts: 0, i: 0, p, f, g: "", e },
+      comment,
+    };
+    addSubmission(newEntry, state.user);
+    setSuggestionState("received");
+  }
+  const inflectionResults = state.inflectionSearchResults;
+  return (
+    <div className="width-limiter">
+      {!relatedResults && (
         <Helmet>
-            <title>LingDocs Pashto Dictionary</title>
+          <title>LingDocs Pashto Dictionary</title>
         </Helmet>
-        {(state.user && (window.location.pathname !== "/word") && suggestionState === "none" && inflectionResults === undefined) && <button
+      )}
+      {state.user &&
+        window.location.pathname !== "/word" &&
+        suggestionState === "none" &&
+        inflectionResults === undefined && (
+          <button
             type="button"
-            className={`btn btn-outline-secondary bg-white entry-suggestion-button${state.options.searchBarPosition === "bottom" ? " entry-suggestion-button-with-bottom-searchbar" : ""}`}
+            className={`btn btn-outline-secondary bg-white entry-suggestion-button${
+              state.options.searchBarPosition === "bottom"
+                ? " entry-suggestion-button-with-bottom-searchbar"
+                : ""
+            }`}
             onClick={startSuggestion}
-        >
+          >
             <i className="fas fa-plus" style={{ padding: "3px" }} />
-        </button>}
-        {(inflectionResults === undefined && suggestionState === "none" && window.location.pathname === "/search") && <button
+          </button>
+        )}
+      {inflectionResults === undefined &&
+        suggestionState === "none" &&
+        window.location.pathname === "/search" && (
+          <button
             type="button"
-            className={`btn btn-outline-secondary bg-white conjugation-search-button${state.options.searchBarPosition === "bottom" ? " conjugation-search-button-with-bottom-searchbar" : ""}`}
+            className={`btn btn-outline-secondary bg-white conjugation-search-button${
+              state.options.searchBarPosition === "bottom"
+                ? " conjugation-search-button-with-bottom-searchbar"
+                : ""
+            }`}
             onClick={handleInflectionSearch}
-        >
+          >
             <i className={inflectionSearchIcon} style={{ padding: "3px" }} />
-        </button>}
-        {inflectionResults === "searching" && <div>
-            <p className="lead mt-1">Searching conjugations/inflections... <i className="fas fa-hourglass-half" /></p>
-        </div>}
-        {inflectionResults && inflectionResults !== "searching" && <div>
-            <h4 className="mt-1 mb-3">Conjugation/Inflection Results</h4>
-            {inflectionResults.exact.length === 0 && inflectionResults.fuzzy.length === 0 && <div className="mt-4">
-                <div>No conjugation/inflection matches found for <strong>{state.searchValue}</strong></div>
-            </div>}
-            {(["exact", "fuzzy"] as ("exact" | "fuzzy")[]).map((t) => {
-                return (inflectionResults[t].length !== 0) ? <>
-                    <h5 className="mb-3">{t === "exact" ? "Exact" : "Approximate"} Matches</h5>
-                    {inflectionResults[t].map((p) => (
-                        <div key={p.entry.ts}>
-                            <Entry
-                                key={p.entry.i}
-                                entry={p.entry}
-                                textOptions={textOptions}
-                                isolateEntry={isolateEntry}
-                            />
-                            <div className="mb-3 ml-2">
-                                {p.forms.map((form, i) => (
-                                    <InflectionFormMatchDisplay
-                                        key={`inf-form${i}`}
-                                        textOptions={textOptions}
-                                        form={form}
-                                        entry={p.entry}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    ))}
-                </> : null;
-            })}
-        </div>}
-        {inflectionResults === undefined && suggestionState === "none" && state.results.map((entry) => (
-            <Entry
-                key={entry.i}
-                entry={entry}
-                textOptions={textOptions}
-                isolateEntry={isolateEntry}
-            />
-        ))}
-        {(state.user && (suggestionState === "editing")) && <div className="my-3">
-            <h5 className="mb-3">Suggest an entry for the dictionary:</h5>
-            <div className="form-group mt-4" style={{ maxWidth: "500px" }}>
-                <div className="row mb-2">
-                    <div className="col">
-                        <label htmlFor="suggestionPashto">Pashto:</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            dir="rtl"
-                            id="suggestionPashto"
-                            data-lpignore="true"
-                            value={pashto}
-                            autoComplete="off"
-                            autoCorrect="off"
-                            autoCapitalize="off"
-                            onChange={(e) => setPashto(e.target.value)}
-                        />
-                    </div>
-                    <div className="col">
-                        <label htmlFor="suggestionPhonetics">Phonetics:</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            dir="ltr"
-                            id="suggestionPhonetics"
-                            autoComplete="off"
-                            autoCorrect="off"
-                            autoCapitalize="off"
-                            data-lpignore="true"
-                            value={phonetics}
-                            onChange={(e) => setPhonetics(e.target.value)}
-                        />
-                    </div>
+          </button>
+        )}
+      {inflectionResults === "searching" && (
+        <div>
+          <p className="lead mt-1">
+            Searching conjugations/inflections...{" "}
+            <i className="fas fa-hourglass-half" />
+          </p>
+        </div>
+      )}
+      {inflectionResults && inflectionResults !== "searching" && (
+        <div>
+          <h4 className="mt-1 mb-3">Conjugation/Inflection Results</h4>
+          {inflectionResults.exact.length === 0 &&
+            inflectionResults.fuzzy.length === 0 && (
+              <div className="mt-4">
+                <div>
+                  No conjugation/inflection matches found for{" "}
+                  <strong>{state.searchValue}</strong>
                 </div>
-                <label htmlFor="suggestionEnglish">English:</label>
+              </div>
+            )}
+          {(["exact", "fuzzy"] as ("exact" | "fuzzy")[]).map((t) => {
+            return inflectionResults[t].length !== 0 ? (
+              <>
+                <h5 className="mb-3">
+                  {t === "exact" ? "Exact" : "Approximate"} Matches
+                </h5>
+                {inflectionResults[t].map((p) => (
+                  <div key={p.entry.ts}>
+                    <Entry
+                      key={p.entry.i}
+                      entry={p.entry}
+                      textOptions={textOptions}
+                      isolateEntry={isolateEntry}
+                    />
+                    <div className="mb-3 ml-2">
+                      {p.forms.map((form, i) => (
+                        <InflectionFormMatchDisplay
+                          key={`inf-form${i}`}
+                          textOptions={textOptions}
+                          form={form}
+                          entry={p.entry}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </>
+            ) : null;
+          })}
+        </div>
+      )}
+      {inflectionResults === undefined && suggestionState === "none" && (
+        <dl>
+          {state.results.map((entry) => (
+            <Entry
+              key={entry.i}
+              entry={entry}
+              textOptions={textOptions}
+              isolateEntry={isolateEntry}
+            />
+          ))}
+        </dl>
+      )}
+      {state.user && suggestionState === "editing" && (
+        <div className="my-3">
+          <h5 className="mb-3">Suggest an entry for the dictionary:</h5>
+          <div className="form-group mt-4" style={{ maxWidth: "500px" }}>
+            <div className="row mb-2">
+              <div className="col">
+                <label htmlFor="suggestionPashto">Pashto:</label>
                 <input
-                    type="text"
-                    className="form-control mb-2"
-                    id="suggestionEnglish"
-                    data-lpignore="true"
-                    value={english}
-                    autoComplete="off"
-                    onChange={(e) => setEnglish(e.target.value)}
+                  type="text"
+                  className="form-control"
+                  dir="rtl"
+                  id="suggestionPashto"
+                  data-lpignore="true"
+                  value={pashto}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  onChange={(e) => setPashto(e.target.value)}
                 />
-                <label htmlFor="editSuggestionForm">Comments:</label>
+              </div>
+              <div className="col">
+                <label htmlFor="suggestionPhonetics">Phonetics:</label>
                 <input
-                    type="text"
-                    className="form-control"
-                    id="editSuggestionForm"
-                    data-lpignore="true"
-                    value={comment}
-                    onChange={(e) => setComment(e.target.value)}
+                  type="text"
+                  className="form-control"
+                  dir="ltr"
+                  id="suggestionPhonetics"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  data-lpignore="true"
+                  value={phonetics}
+                  onChange={(e) => setPhonetics(e.target.value)}
                 />
+              </div>
             </div>
-            <button
-                type="button"
-                className="btn btn-secondary mr-3"
-                onClick={submitSuggestion}
-                data-testid="editWordSubmitButton"
-            >
-                Submit
-            </button>
-            <button
-                type="button"
-                className="btn btn-outline-secondary"
-                onClick={cancelSuggestion}
-                data-testid="editWordCancelButton"
-            >
-                Cancel
-            </button>
-        </div>}
-        {suggestionState === "received" && <div className="my-3">
-                Thanks for the help!
-            </div>
-        }
-        {(((inflectionResults === undefined) && suggestionState === "none" && state.searchValue && (!state.results.length))) && <div>
-            <h5 className="mt-2">No Results Found in {state.options.language}</h5>
-            {state.options.language === "Pashto" && isPashtoScript(state.searchValue) && <p className="mt-3">
-                Click on the <i className={inflectionSearchIcon} /> to search inflections and conjugations
-            </p>}
-            {state.options.searchType === "alphabetical" && <div className="mt-4 font-weight-light">
-                <div className="mb-3">You are using alphabetical browsing mode</div>
-                <div>Click on the <span className="fa fa-book" ></span> icon above for smart search <span className="fa fa-bolt" ></span></div>
-            </div>}
-        </div>}
-    </div>;
+            <label htmlFor="suggestionEnglish">English:</label>
+            <input
+              type="text"
+              className="form-control mb-2"
+              id="suggestionEnglish"
+              data-lpignore="true"
+              value={english}
+              autoComplete="off"
+              onChange={(e) => setEnglish(e.target.value)}
+            />
+            <label htmlFor="editSuggestionForm">Comments:</label>
+            <input
+              type="text"
+              className="form-control"
+              id="editSuggestionForm"
+              data-lpignore="true"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            />
+          </div>
+          <button
+            type="button"
+            className="btn btn-secondary mr-3"
+            onClick={submitSuggestion}
+            data-testid="editWordSubmitButton"
+          >
+            Submit
+          </button>
+          <button
+            type="button"
+            className="btn btn-outline-secondary"
+            onClick={cancelSuggestion}
+            data-testid="editWordCancelButton"
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+      {suggestionState === "received" && (
+        <div className="my-3">Thanks for the help!</div>
+      )}
+      {inflectionResults === undefined &&
+        suggestionState === "none" &&
+        state.searchValue &&
+        !state.results.length && (
+          <div>
+            <h5 className="mt-2">
+              No Results Found in {state.options.language}
+            </h5>
+            {state.options.language === "Pashto" &&
+              isPashtoScript(state.searchValue) && (
+                <p className="mt-3">
+                  Click on the <i className={inflectionSearchIcon} /> to search
+                  inflections and conjugations
+                </p>
+              )}
+            {state.options.searchType === "alphabetical" && (
+              <div className="mt-4 font-weight-light">
+                <div className="mb-3">
+                  You are using alphabetical browsing mode
+                </div>
+                <div>
+                  Click on the <span className="fa fa-book"></span> icon above
+                  for smart search <span className="fa fa-bolt"></span>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+    </div>
+  );
 }
 
-export default Results;
+export default Results;

website/yarn.lock

@@ -2349,10 +2349,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@lingdocs/ps-react@7.0.3":
-  version "7.0.3"
-  resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-7.0.3.tgz#9962fca6a7eeec1d9eec7938ca5fbf2c8634c228"
-  integrity sha512-/ASFFGudbqjEaZQ5OSHAwCQaZSdnPPInWv30rLR6ytLA+lS2udXLQHXkW+3ArUQ1UFBQlK1AC2+1tKNxvD2IrQ==
+"@lingdocs/ps-react@7.0.8":
+  version "7.0.8"
+  resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-7.0.8.tgz#4f59cf04237f2fb87054251429695bf44cb7be79"
+  integrity sha512-0TefQ1EBzGeJ+U4NYnXt/DB3QDZ1M8ALY8rOJgX7pj2N275+52yL2RXS6zrjjjKa/Ebr3XVNhK680O+JQh4anQ==
   dependencies:
     "@formkit/auto-animate" "^1.0.0-beta.3"
     classnames "^2.2.6"