448 lines
15 KiB
TypeScript
448 lines
15 KiB
TypeScript
|
/**
|
||
|
|
* Copyright (c) 2021 lingdocs.com
|
||
|
|
*
|
||
|
|
* This source code is licensed under the GPL3 license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import classNames from "classnames";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
import { VPExplorer } from "@lingdocs/ps-react";
|
||
|
|
import { entryFeeder } from "../lib/dictionary";
|
||
|
|
import {
|
||
|
|
InflectionsTable,
|
||
|
|
inflectWord,
|
||
|
|
Types as T,
|
||
|
|
InlinePs,
|
||
|
|
validateEntry,
|
||
|
|
typePredicates,
|
||
|
|
} from "@lingdocs/ps-react";
|
||
|
|
import Entry from "../components/Entry";
|
||
|
|
import * as FT from "../types/functions-types";
|
||
|
|
import { submissionBase, addSubmission } from "../lib/submissions";
|
||
|
|
import { Helmet } from "react-helmet";
|
||
|
|
import { TextOptions } from "@lingdocs/ps-react/dist/types";
|
||
|
|
import * as AT from "../types/account-types";
|
||
|
|
import { DictionaryAPI } from "../types/dictionary-types";
|
||
|
|
import { ErrorBoundary } from "react-error-boundary";
|
||
|
|
|
||
|
|
const textFields: { field: T.DictionaryEntryTextField; label: string }[] = [
|
||
|
|
{ field: "p", label: "Pashto" },
|
||
|
|
{ field: "f", label: "Phonetics" },
|
||
|
|
{ field: "e", label: "English" },
|
||
|
|
{ field: "c", label: "Part of Speech" },
|
||
|
|
{ field: "infap", label: "1st Masc. Irreg. Inflect. P" },
|
||
|
|
{ field: "infaf", label: "1st Masc. Irreg. Inflect. F" },
|
||
|
|
{ field: "infbp", label: "2nd Irreg. Inflect. Base P" },
|
||
|
|
{ field: "infbf", label: "2nd Irreg. Inflect. Base F" },
|
||
|
|
{ field: "app", label: "Arabic Plural P" },
|
||
|
|
{ field: "apf", label: "Arabic Plural F" },
|
||
|
|
{ field: "ppp", label: "Pashto Plural P" },
|
||
|
|
{ field: "ppf", label: "Pashto Plural F" },
|
||
|
|
{ field: "psp", label: "Imperf. Stem P" },
|
||
|
|
{ field: "psf", label: "Imperf. Stem F" },
|
||
|
|
{ field: "ssp", label: "Perf. Stem P" },
|
||
|
|
{ field: "ssf", label: "Perf. Stem F" },
|
||
|
|
{ field: "prp", label: "Perf. Root P" },
|
||
|
|
{ field: "prf", label: "Perf. Root F" },
|
||
|
|
{ field: "pprtp", label: "Past Part. P" },
|
||
|
|
{ field: "pprtf", label: "Past Part. F" },
|
||
|
|
{ field: "tppp", label: "3rd Pers. Masc. Sing P." },
|
||
|
|
{ field: "tppf", label: "3rd Pers. Masc. Sing F." },
|
||
|
|
{ field: "ec", label: "English Verb Conjugation" },
|
||
|
|
{ field: "ep", label: "English Verb Particle" },
|
||
|
|
];
|
||
|
|
|
||
|
|
const booleanFields: { field: T.DictionaryEntryBooleanField; label: string }[] =
|
||
|
|
[
|
||
|
|
{ field: "noInf", label: "no inflection" },
|
||
|
|
{ field: "shortIntrans", label: "short intrans" },
|
||
|
|
{ field: "noOo", label: "no oo prefix" },
|
||
|
|
{ field: "sepOo", label: "sep. oo prefix" },
|
||
|
|
{ field: "diacExcept", label: "diacritics except." },
|
||
|
|
];
|
||
|
|
|
||
|
|
const numberFields: { field: T.DictionaryEntryNumberField; label: string }[] = [
|
||
|
|
{ field: "l", label: "link" },
|
||
|
|
{ field: "separationAtP", label: "seperation at P" },
|
||
|
|
{ field: "separationAtF", label: "seperation at F" },
|
||
|
|
];
|
||
|
|
|
||
|
|
function OneField(props: {
|
||
|
|
value: string | number | undefined;
|
||
|
|
field: { field: T.DictionaryEntryField; label: string | JSX.Element };
|
||
|
|
errored?: boolean;
|
||
|
|
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="form-group">
|
||
|
|
<label htmlFor={props.field.field} className="small">
|
||
|
|
{props.field.label}
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id={props.field.field}
|
||
|
|
className={classNames("form-control", { "is-invalid": props.errored })}
|
||
|
|
name={props.field.field}
|
||
|
|
value={props.value ?? ""}
|
||
|
|
dir={props.field.field.slice(-1) === "p" ? "rtl" : "ltr"}
|
||
|
|
onChange={props.handleChange}
|
||
|
|
autoComplete="off"
|
||
|
|
autoCorrect="off"
|
||
|
|
autoCapitalize="off"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function EntryEditor({
|
||
|
|
isolatedEntry,
|
||
|
|
dictionary,
|
||
|
|
searchParams,
|
||
|
|
textOptions,
|
||
|
|
user,
|
||
|
|
}: {
|
||
|
|
isolatedEntry: T.DictionaryEntry | undefined;
|
||
|
|
textOptions: TextOptions;
|
||
|
|
dictionary: DictionaryAPI;
|
||
|
|
searchParams: URLSearchParams;
|
||
|
|
user: AT.LingdocsUser | undefined;
|
||
|
|
// removeFromSuggestions: (sTs: number) => void,
|
||
|
|
}) {
|
||
|
|
const [entry, setEntry] = useState<T.DictionaryEntry>(
|
||
|
|
isolatedEntry ?? { ts: 0, i: 0, p: "", f: "", g: "", e: "" }
|
||
|
|
);
|
||
|
|
const [matchingEntries, setMatchingEntries] = useState<T.DictionaryEntry[]>(
|
||
|
|
isolatedEntry ? searchForMatchingEntries(isolatedEntry.p) : []
|
||
|
|
);
|
||
|
|
const [erroneusFields, setErroneousFields] = useState<
|
||
|
|
T.DictionaryEntryField[]
|
||
|
|
>([]);
|
||
|
|
const [errors, setErrors] = useState<string[]>([]);
|
||
|
|
const [submitted, setSubmitted] = useState<boolean>(false);
|
||
|
|
const [deleted, setDeleted] = useState<boolean>(false);
|
||
|
|
const [willDeleteSuggestion, setWillDeleteSuggestion] =
|
||
|
|
useState<boolean>(true);
|
||
|
|
const comment = searchParams.get("comment");
|
||
|
|
const sTsString = searchParams.get("sTs");
|
||
|
|
const sTs = sTsString && sTsString !== "0" ? parseInt(sTsString) : undefined;
|
||
|
|
const suggestedWord =
|
||
|
|
searchParams.get("p") || searchParams.get("f")
|
||
|
|
? {
|
||
|
|
p: searchParams.get("p") || "",
|
||
|
|
f: searchParams.get("f") || "",
|
||
|
|
}
|
||
|
|
: undefined;
|
||
|
|
useEffect(() => {
|
||
|
|
setEntry(isolatedEntry ?? { ts: 1, i: 0, p: "", f: "", g: "", e: "" });
|
||
|
|
setMatchingEntries(
|
||
|
|
isolatedEntry ? searchForMatchingEntries(isolatedEntry.p) : []
|
||
|
|
);
|
||
|
|
// eslint-disable-next-line
|
||
|
|
}, [isolatedEntry]);
|
||
|
|
function searchForMatchingEntries(s: string): T.DictionaryEntry[] {
|
||
|
|
return dictionary
|
||
|
|
.exactPashtoSearch(s)
|
||
|
|
.filter((w) => w.ts !== isolatedEntry?.ts);
|
||
|
|
}
|
||
|
|
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||
|
|
const target = event.target;
|
||
|
|
const value = target.type === "checkbox" ? target.checked : target.value;
|
||
|
|
const name = target.name;
|
||
|
|
setEntry({
|
||
|
|
...entry,
|
||
|
|
[name]:
|
||
|
|
value &&
|
||
|
|
numberFields.find((x) => x.field === name) &&
|
||
|
|
typeof value === "string"
|
||
|
|
? parseInt(value)
|
||
|
|
: value,
|
||
|
|
});
|
||
|
|
if (erroneusFields.length) setErroneousFields([]);
|
||
|
|
if (name === "f" || name === "p") {
|
||
|
|
setMatchingEntries(searchForMatchingEntries(value as string));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function handleDelete() {
|
||
|
|
if (!user) return;
|
||
|
|
const submission: FT.EntryDeletion = {
|
||
|
|
...submissionBase(user),
|
||
|
|
type: "entry deletion",
|
||
|
|
ts: entry.ts,
|
||
|
|
};
|
||
|
|
addSubmission(submission, user);
|
||
|
|
setDeleted(true);
|
||
|
|
}
|
||
|
|
function handleSubmit(e: any) {
|
||
|
|
setErroneousFields([]);
|
||
|
|
setErrors([]);
|
||
|
|
e.preventDefault();
|
||
|
|
if (!user) return;
|
||
|
|
const result = validateEntry(entry);
|
||
|
|
if ("errors" in result) {
|
||
|
|
setErroneousFields(result.erroneousFields);
|
||
|
|
setErrors(result.errors);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// TODO: Check complement if checkComplement
|
||
|
|
const submission: FT.NewEntry | FT.EntryEdit = {
|
||
|
|
...submissionBase(user),
|
||
|
|
type: entry.ts === 1 ? "new entry" : "entry edit",
|
||
|
|
entry: { ...entry, ts: entry.ts === 1 ? Date.now() : entry.ts },
|
||
|
|
};
|
||
|
|
addSubmission(submission, user);
|
||
|
|
setSubmitted(true);
|
||
|
|
// TODO: Remove from suggestions
|
||
|
|
// if (willDeleteSuggestion && sTs) {
|
||
|
|
// removeFromSuggestions(sTs);
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
const complement = entry.l ? dictionary.findOneByTs(entry.l) : undefined;
|
||
|
|
const inf = ((): T.InflectorOutput | false => {
|
||
|
|
try {
|
||
|
|
return inflectWord(entry);
|
||
|
|
} catch (e) {
|
||
|
|
console.error("error inflecting entry", entry);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
const linkField: { field: "l"; label: string | JSX.Element } = {
|
||
|
|
field: "l",
|
||
|
|
label: (
|
||
|
|
<>
|
||
|
|
link{" "}
|
||
|
|
{entry.l ? (
|
||
|
|
complement ? (
|
||
|
|
<InlinePs opts={textOptions} ps={complement} />
|
||
|
|
) : (
|
||
|
|
"not found"
|
||
|
|
)
|
||
|
|
) : (
|
||
|
|
""
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className="width-limiter" style={{ marginBottom: "70px" }}>
|
||
|
|
<Helmet>
|
||
|
|
<link rel="canonical" href="https://dictionary.lingdocs.com/edit" />
|
||
|
|
<title>Edit - LingDocs Pashto Dictionary</title>
|
||
|
|
</Helmet>
|
||
|
|
{isolatedEntry && (
|
||
|
|
<Entry
|
||
|
|
admin={!!user?.admin}
|
||
|
|
nonClickable
|
||
|
|
entry={isolatedEntry}
|
||
|
|
textOptions={textOptions}
|
||
|
|
isolateEntry={() => null}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{suggestedWord && <InlinePs opts={textOptions} ps={suggestedWord} />}
|
||
|
|
{comment && <p>Comment: "{comment}"</p>}
|
||
|
|
{submitted ? (
|
||
|
|
"Edit submitted/saved"
|
||
|
|
) : deleted ? (
|
||
|
|
"Entry Deleted"
|
||
|
|
) : (
|
||
|
|
<div>
|
||
|
|
{matchingEntries.length > 0 && (
|
||
|
|
<div className="mb-1 text-center">
|
||
|
|
<strong>Matching Entries:</strong>
|
||
|
|
{matchingEntries.map((entry) => (
|
||
|
|
<div key={entry.ts}>
|
||
|
|
<Link to={`/edit?id=${entry.ts}`} className="plain-link">
|
||
|
|
<InlinePs opts={textOptions} ps={entry} />
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<form onSubmit={handleSubmit}>
|
||
|
|
<div className="row">
|
||
|
|
<div className="col">
|
||
|
|
{[textFields[0]].map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
field={field}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="col">
|
||
|
|
{[textFields[1]].map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
field={field}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{[textFields[2]].map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
field={field}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
<div className="row">
|
||
|
|
<div className="col">
|
||
|
|
{[textFields[3]].map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
field={field}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="col">
|
||
|
|
{[numberFields[0]].map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
field={linkField}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="row">
|
||
|
|
<div className="col">
|
||
|
|
{textFields.slice(4, 13).map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
field={field}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
{numberFields.slice(1).map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
field={field}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="col">
|
||
|
|
{textFields.slice(12, 23).map((field) => (
|
||
|
|
<OneField
|
||
|
|
key={field.field}
|
||
|
|
field={field}
|
||
|
|
errored={erroneusFields.includes(field.field)}
|
||
|
|
value={entry[field.field]}
|
||
|
|
handleChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{booleanFields.map((field) => (
|
||
|
|
<div className="form-group form-check-inline" key={field.field}>
|
||
|
|
<input
|
||
|
|
id={field.field}
|
||
|
|
type="checkbox"
|
||
|
|
className={classNames("form-check-input", {
|
||
|
|
"is-invalid": erroneusFields.includes(field.field),
|
||
|
|
})}
|
||
|
|
name={field.field}
|
||
|
|
checked={entry[field.field] || false}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
/>
|
||
|
|
<label htmlFor={field.field} className="form-check-label">
|
||
|
|
{field.label}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<div className="form-group">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="btn btn-primary mr-4"
|
||
|
|
onClick={handleSubmit}
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-danger"
|
||
|
|
onClick={handleDelete}
|
||
|
|
>
|
||
|
|
Delete Entry
|
||
|
|
</button>
|
||
|
|
{sTs && (
|
||
|
|
<div className="ml-3 form-group form-check-inline">
|
||
|
|
<input
|
||
|
|
id={"deleteSts"}
|
||
|
|
type="checkbox"
|
||
|
|
className="form-check-input"
|
||
|
|
name="deleteSts"
|
||
|
|
checked={willDeleteSuggestion}
|
||
|
|
onChange={(e) => setWillDeleteSuggestion(e.target.checked)}
|
||
|
|
/>
|
||
|
|
<label htmlFor="deleteSts" className="form-check-label">
|
||
|
|
Delete suggestion?
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{errors.length > 0 && (
|
||
|
|
<div className="alert alert-warning">
|
||
|
|
<ul className="mt-2">
|
||
|
|
{errors.map((error) => (
|
||
|
|
<li key={error}>{error}</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</form>
|
||
|
|
{inf && inf.inflections && (
|
||
|
|
<InflectionsTable inf={inf.inflections} textOptions={textOptions} />
|
||
|
|
)}
|
||
|
|
{inf && "plural" in inf && inf.plural !== undefined && (
|
||
|
|
<InflectionsTable inf={inf.plural} textOptions={textOptions} />
|
||
|
|
)}
|
||
|
|
{inf && "arabicPlural" in inf && inf.arabicPlural !== undefined && (
|
||
|
|
<InflectionsTable
|
||
|
|
inf={inf.arabicPlural}
|
||
|
|
textOptions={textOptions}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{/* TODO: aay tail from state options */}
|
||
|
|
{typePredicates.isVerbEntry({ entry, complement }) && (
|
||
|
|
<div className="pb-4">
|
||
|
|
<ErrorBoundary fallback={<h5>Error conjugating verb</h5>}>
|
||
|
|
<VPExplorer
|
||
|
|
verb={{
|
||
|
|
entry: entry as T.VerbDictionaryEntry,
|
||
|
|
complement,
|
||
|
|
}}
|
||
|
|
opts={textOptions}
|
||
|
|
entryFeeder={entryFeeder}
|
||
|
|
handleLinkClick="none"
|
||
|
|
/>
|
||
|
|
</ErrorBoundary>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default EntryEditor;
|