839 lines
27 KiB
TypeScript
839 lines
27 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.
|
|
*
|
|
*/
|
|
|
|
// TODO: Put the DB sync on the localDb object, and then have it cancel()'ed and removed as part of the deinitialization
|
|
// sync on initialization and cancel sync on de-initialization
|
|
|
|
import { Component } from "react";
|
|
import {
|
|
capitalizeFirstLetter,
|
|
defaultTextOptions,
|
|
revertSpelling,
|
|
standardizePashto,
|
|
Types as T,
|
|
} from "@lingdocs/ps-react";
|
|
import { withRouter, Route, RouteComponentProps, Link } from "react-router-dom";
|
|
import Helmet from "react-helmet";
|
|
import BottomNavItem from "./components/BottomNavItem";
|
|
import SearchBar from "./components/SearchBar";
|
|
import DictionaryStatusDisplay from "./components/DictionaryStatusDisplay";
|
|
import About from "./screens/About";
|
|
import Options from "./screens/Options";
|
|
import Results from "./screens/Results";
|
|
import Account from "./screens/Account";
|
|
import ReviewTasks from "./screens/ReviewTasks";
|
|
import EntryEditor from "./screens/EntryEditor";
|
|
import IsolatedEntry from "./screens/IsolatedEntry";
|
|
import PrivacyPolicy from "./screens/PrivacyPolicy";
|
|
import Wordlist from "./screens/Wordlist";
|
|
import {
|
|
saveOptions,
|
|
readOptions,
|
|
saveUser,
|
|
readUser,
|
|
} from "./lib/local-storage";
|
|
import { allEntries, dictionary, pageSize } from "./lib/dictionary";
|
|
import { optionsReducer, textOptionsReducer } from "./lib/options-reducer";
|
|
import hitBottom from "./lib/hitBottom";
|
|
import getWordId from "./lib/get-word-id";
|
|
import { CronJob } from "cron";
|
|
import Mousetrap from "mousetrap";
|
|
import { sendSubmissions } from "./lib/submissions";
|
|
import { getUser } from "./lib/backend-calls";
|
|
import { getWordlist } from "./lib/wordlist-database";
|
|
import {
|
|
startLocalDbs,
|
|
stopLocalDbs,
|
|
getAllDocsLocalDb,
|
|
} from "./lib/pouch-dbs";
|
|
import { forReview } from "./lib/spaced-repetition";
|
|
import { textBadge } from "./lib/badges";
|
|
import * as AT from "./types/account-types";
|
|
import ReactGA from "react-ga4";
|
|
import classNames from "classnames";
|
|
import { getTextOptions } from "./lib/get-text-options";
|
|
import { getTextFromShareTarget } from "./lib/share-target";
|
|
import { objIsEqual, userObjIsEqual } from "./lib/misc-helpers";
|
|
import {
|
|
State,
|
|
TextOptionsRecord,
|
|
TextOptionsAction,
|
|
OptionsAction,
|
|
} from "./types/dictionary-types";
|
|
import PhraseBuilder from "./screens/PhraseBuilder";
|
|
import { searchAllInflections } from "./lib/search-all-inflections";
|
|
import { addToWordlist } from "./lib/wordlist-database";
|
|
import ScriptToPhonetics from "./screens/ScriptToPhonetics";
|
|
import { pNums, convertNumShortcutToNum } from "./lib/misc-helpers";
|
|
|
|
const newWordsPeriod: "week" | "month" = "month";
|
|
|
|
// to allow Moustrap key combos even when input fields are in focus
|
|
Mousetrap.prototype.stopCallback = function () {
|
|
return false;
|
|
};
|
|
|
|
const prod = document.location.hostname === "dictionary.lingdocs.com";
|
|
|
|
if (prod) {
|
|
// TODO: migrate to https://www.npmjs.com/package/react-ga4
|
|
ReactGA.initialize("G-TPQY0GKDCW");
|
|
ReactGA.set({ anonymizeIp: true });
|
|
}
|
|
|
|
const possibleLandingPages = [
|
|
"/",
|
|
"/about",
|
|
"/settings",
|
|
"/word",
|
|
"/account",
|
|
"/new-entries",
|
|
"/share-target",
|
|
"/phrase-builder",
|
|
"/privacy",
|
|
"/script-to-phonetics",
|
|
];
|
|
const editorOnlyPages = ["/edit", "/review-tasks"];
|
|
|
|
class App extends Component<RouteComponentProps, State> {
|
|
constructor(props: RouteComponentProps) {
|
|
super(props);
|
|
const savedOptions = readOptions();
|
|
this.state = {
|
|
dictionaryStatus: "loading",
|
|
dictionaryInfo: undefined,
|
|
showModal: false,
|
|
// TODO: Choose between the saved options and the options in the saved user
|
|
options: savedOptions
|
|
? savedOptions
|
|
: {
|
|
language: "Pashto",
|
|
searchType: "fuzzy",
|
|
searchBarStickyFocus: false,
|
|
theme: window.matchMedia?.("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light",
|
|
textOptionsRecord: {
|
|
lastModified: Date.now() as AT.TimeStamp,
|
|
textOptions: defaultTextOptions,
|
|
},
|
|
wordlistMode: "browse",
|
|
wordlistReviewLanguage: "Pashto",
|
|
wordlistReviewBadge: true,
|
|
searchBarPosition: "top",
|
|
},
|
|
searchValue: "",
|
|
page: 1,
|
|
isolatedEntry: undefined,
|
|
results: [],
|
|
wordlist: [],
|
|
reviewTasks: [],
|
|
user: readUser(),
|
|
inflectionSearchResults: undefined,
|
|
};
|
|
this.handleOptionsUpdate = this.handleOptionsUpdate.bind(this);
|
|
this.handleTextOptionsUpdate = this.handleTextOptionsUpdate.bind(this);
|
|
this.handleSearchValueChange = this.handleSearchValueChange.bind(this);
|
|
this.handleIsolateEntry = this.handleIsolateEntry.bind(this);
|
|
this.handleScroll = this.handleScroll.bind(this);
|
|
this.handleGoBack = this.handleGoBack.bind(this);
|
|
this.handleLoadUser = this.handleLoadUser.bind(this);
|
|
this.handleRefreshWordlist = this.handleRefreshWordlist.bind(this);
|
|
this.handleRefreshReviewTasks = this.handleRefreshReviewTasks.bind(this);
|
|
this.handleDictionaryUpdate = this.handleDictionaryUpdate.bind(this);
|
|
this.handleInflectionSearch = this.handleInflectionSearch.bind(this);
|
|
}
|
|
|
|
public componentDidMount() {
|
|
window.addEventListener("scroll", this.handleScroll);
|
|
if (!possibleLandingPages.includes(this.props.location.pathname)) {
|
|
this.props.history.replace("/");
|
|
}
|
|
if (prod && !(this.state.user?.level === "editor")) {
|
|
ReactGA.send({
|
|
hitType: "pageview",
|
|
page: window.location.pathname + window.location.search,
|
|
});
|
|
}
|
|
dictionary
|
|
.initialize()
|
|
.then((r) => {
|
|
this.cronJob.start();
|
|
this.setState({
|
|
dictionaryStatus: "ready",
|
|
dictionaryInfo: r.dictionaryInfo,
|
|
});
|
|
this.handleLoadUser();
|
|
// incase it took forever and timed out - might need to reinitialize the wordlist here ??
|
|
if (this.state.user) {
|
|
startLocalDbs(this.state.user, {
|
|
wordlist: this.handleRefreshWordlist,
|
|
reviewTasks: this.handleRefreshReviewTasks,
|
|
});
|
|
}
|
|
if (this.props.location.pathname === "/word") {
|
|
const wordId = getWordId(this.props.location.search);
|
|
if (wordId) {
|
|
const word = dictionary.findOneByTs(wordId);
|
|
if (word) {
|
|
this.setState({ searchValue: word.p });
|
|
}
|
|
this.handleIsolateEntry(wordId);
|
|
} else {
|
|
// TODO: Make a word not found screen
|
|
console.error("somehow had a word path without a word id param");
|
|
this.props.history.replace("/");
|
|
}
|
|
}
|
|
if (this.props.location.pathname === "/share-target") {
|
|
const searchString = getTextFromShareTarget(window.location);
|
|
this.props.history.replace("/");
|
|
if (this.state.options.language === "English") {
|
|
this.handleOptionsUpdate({ type: "toggleLanguage" });
|
|
}
|
|
if (this.state.options.searchType === "alphabetical") {
|
|
this.handleOptionsUpdate({ type: "toggleSearchType" });
|
|
}
|
|
this.handleSearchValueChange(searchString);
|
|
}
|
|
if (this.props.location.pathname === "/new-entries") {
|
|
this.setState({
|
|
results: dictionary.getNewWords(newWordsPeriod),
|
|
page: 1,
|
|
});
|
|
}
|
|
if (r.response === "loaded from saved") {
|
|
this.handleDictionaryUpdate();
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
this.setState({ dictionaryStatus: "error loading" });
|
|
});
|
|
document.documentElement.setAttribute(
|
|
"data-theme",
|
|
this.state.options.theme
|
|
);
|
|
/* istanbul ignore if */
|
|
if (window.matchMedia) {
|
|
const prefersDarkQuery = window.matchMedia(
|
|
"(prefers-color-scheme: dark)"
|
|
);
|
|
prefersDarkQuery.addListener((e) => {
|
|
if (e.matches) {
|
|
this.handleOptionsUpdate({ type: "changeTheme", payload: "dark" });
|
|
}
|
|
});
|
|
const prefersLightQuery = window.matchMedia(
|
|
"(prefers-color-scheme: light)"
|
|
);
|
|
prefersLightQuery.addListener((e) => {
|
|
if (e.matches) {
|
|
this.handleOptionsUpdate({ type: "changeTheme", payload: "light" });
|
|
}
|
|
});
|
|
}
|
|
// shortcuts to isolote word in search results
|
|
Mousetrap.bind(
|
|
["1", "2", "3", "4", "5", "6", "7", "8", "9", ...pNums],
|
|
(e) => {
|
|
e.preventDefault();
|
|
if (e.repeat) {
|
|
return;
|
|
}
|
|
if (this.props.location.pathname !== "/search") {
|
|
return;
|
|
}
|
|
const toIsolate =
|
|
this.state.results[convertNumShortcutToNum(e.key) - 1];
|
|
if (!toIsolate) {
|
|
return;
|
|
}
|
|
this.handleIsolateEntry(toIsolate.ts);
|
|
}
|
|
);
|
|
Mousetrap.bind(
|
|
["ctrl+down", "ctrl+up", "command+down", "command+up"],
|
|
(e) => {
|
|
e.preventDefault();
|
|
if (e.repeat) {
|
|
return;
|
|
}
|
|
this.handleOptionsUpdate({ type: "toggleLanguage" });
|
|
}
|
|
);
|
|
Mousetrap.bind(["ctrl+b", "command+b"], (e) => {
|
|
e.preventDefault();
|
|
if (e.repeat) {
|
|
return;
|
|
}
|
|
this.handleSearchValueChange("");
|
|
});
|
|
Mousetrap.bind(["ctrl+i", "command+i"], (e) => {
|
|
e.preventDefault();
|
|
if (e.repeat) {
|
|
return;
|
|
}
|
|
if (!this.state.searchValue) {
|
|
return;
|
|
}
|
|
this.handleInflectionSearch();
|
|
});
|
|
Mousetrap.bind(["ctrl+s", "command+s"], (e) => {
|
|
if (this.state.user?.level === "basic") {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
if (!this.state.isolatedEntry) {
|
|
return;
|
|
}
|
|
const toAdd = {
|
|
entry: this.state.isolatedEntry,
|
|
notes: "",
|
|
};
|
|
addToWordlist(toAdd);
|
|
});
|
|
Mousetrap.bind(["ctrl+\\", "command+\\"], (e) => {
|
|
e.preventDefault();
|
|
if (e.repeat) {
|
|
return;
|
|
}
|
|
if (this.state.user?.level === "basic") {
|
|
return;
|
|
}
|
|
if (this.props.location.pathname !== "/wordlist") {
|
|
this.props.history.push("/wordlist");
|
|
} else {
|
|
this.handleGoBack();
|
|
}
|
|
});
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
this.cronJob.stop();
|
|
stopLocalDbs();
|
|
Mousetrap.unbind(["ctrl+down", "ctrl+up", "command+down", "command+up"]);
|
|
Mousetrap.unbind(["ctrl+b", "command+b"]);
|
|
Mousetrap.unbind(["ctrl+\\", "command+\\"]);
|
|
Mousetrap.unbind(["ctrl+s", "command+s"]);
|
|
Mousetrap.unbind(["ctrl+i", "command+i"]);
|
|
Mousetrap.unbind(["1", "2", "3", "4", "5", "6", "7", "8", "9"]);
|
|
}
|
|
|
|
public componentDidUpdate(prevProps: RouteComponentProps) {
|
|
if (this.props.location.pathname !== prevProps.location.pathname) {
|
|
if (prod && !(this.state.user?.level === "editor")) {
|
|
ReactGA.send({
|
|
hitType: "pageview",
|
|
page: window.location.pathname + window.location.search,
|
|
});
|
|
}
|
|
if (this.props.location.pathname === "/") {
|
|
this.handleSearchValueChange("");
|
|
}
|
|
if (this.props.location.pathname === "/new-entries") {
|
|
this.setState({
|
|
results: dictionary.getNewWords(newWordsPeriod),
|
|
page: 1,
|
|
});
|
|
}
|
|
if (
|
|
editorOnlyPages.includes(this.props.location.pathname) &&
|
|
!(this.state.user?.level === "editor")
|
|
) {
|
|
this.props.history.replace("/");
|
|
}
|
|
}
|
|
if (
|
|
getWordId(this.props.location.search) !==
|
|
getWordId(prevProps.location.search)
|
|
) {
|
|
if (prod && this.state.user?.level !== "editor") {
|
|
ReactGA.send({
|
|
type: "pageview",
|
|
page: window.location.pathname + window.location.search,
|
|
});
|
|
}
|
|
const wordId = getWordId(this.props.location.search);
|
|
/* istanbul ignore else */
|
|
if (wordId) {
|
|
this.handleIsolateEntry(wordId, true);
|
|
} else {
|
|
this.setState({ isolatedEntry: undefined });
|
|
}
|
|
}
|
|
// if (!["/wordlist", "/settings", "/review-tasks"].includes(this.props.location.pathname)) {
|
|
// window.scrollTo(0, 0);
|
|
// }
|
|
}
|
|
|
|
private async handleLoadUser(): Promise<void> {
|
|
try {
|
|
const prevUser = this.state.user;
|
|
const user = await getUser();
|
|
if (user === "offline") {
|
|
return;
|
|
}
|
|
if (user) {
|
|
sendSubmissions();
|
|
}
|
|
if (!user) {
|
|
if (this.state.user) {
|
|
console.log("setting state user because user is newly undefined");
|
|
this.setState({ user: undefined });
|
|
}
|
|
saveUser(undefined);
|
|
return;
|
|
}
|
|
if (!userObjIsEqual(prevUser, user)) {
|
|
console.log(
|
|
"setting state user because something is different about the user"
|
|
);
|
|
this.setState({ user });
|
|
saveUser(user);
|
|
}
|
|
if (user) {
|
|
startLocalDbs(user, {
|
|
wordlist: this.handleRefreshWordlist,
|
|
reviewTasks: this.handleRefreshReviewTasks,
|
|
});
|
|
} else {
|
|
stopLocalDbs();
|
|
}
|
|
} catch (err) {
|
|
console.error("error checking user level", err);
|
|
}
|
|
}
|
|
|
|
private handleDictionaryUpdate() {
|
|
// TODO: fix - what the heck happened and what's going on here
|
|
dictionary
|
|
.update(() => {
|
|
// this.setState({ dictionaryStatus: "updating" });
|
|
})
|
|
.then(({ dictionaryInfo }) => {
|
|
//if (this.state.dictionaryInfo?.release !== dictionaryInfo?.release) {
|
|
// to avoid unnecessary re-rendering that breaks things
|
|
this.setState({
|
|
dictionaryStatus: "ready",
|
|
dictionaryInfo,
|
|
});
|
|
//}
|
|
})
|
|
.catch(() => {
|
|
this.setState({ dictionaryStatus: "error loading" });
|
|
});
|
|
}
|
|
|
|
private handleOptionsUpdate(action: OptionsAction) {
|
|
if (action.type === "changeTheme") {
|
|
document.documentElement.setAttribute("data-theme", action.payload);
|
|
}
|
|
// TODO: use a seperate reducer for changing text options (otherwise you could just be updating the saved text options instead of the user text options that the program is going off of)
|
|
const options = optionsReducer(this.state.options, action);
|
|
saveOptions(options);
|
|
if (
|
|
action.type === "toggleLanguage" ||
|
|
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,
|
|
results: dictionary.search({ ...prevState, options }),
|
|
}));
|
|
window.scrollTo(0, 0);
|
|
} else {
|
|
this.setState({ options });
|
|
}
|
|
} else {
|
|
!objIsEqual(this.state.options, options) && this.setState({ options });
|
|
}
|
|
}
|
|
|
|
private handleTextOptionsUpdate(action: TextOptionsAction) {
|
|
const textOptions = textOptionsReducer(getTextOptions(this.state), action);
|
|
const lastModified = Date.now() as AT.TimeStamp;
|
|
const textOptionsRecord: TextOptionsRecord = {
|
|
lastModified,
|
|
textOptions,
|
|
};
|
|
this.handleOptionsUpdate({
|
|
type: "updateTextOptionsRecord",
|
|
payload: textOptionsRecord,
|
|
});
|
|
}
|
|
|
|
private handleSearchValueChange(searchValue: string) {
|
|
if (searchValue === " ") {
|
|
return;
|
|
}
|
|
const lastChar = searchValue[searchValue.length - 1];
|
|
// don't let people type in a single digit (to allow for number shortcuts)
|
|
// but do allow the whole thing to be numbers (to allow for pasting and searching for ts)
|
|
if (lastChar >= "0" && lastChar <= "9" && !/^\d+$/.test(searchValue)) {
|
|
return;
|
|
}
|
|
if (this.state.dictionaryStatus !== "ready") {
|
|
return;
|
|
}
|
|
if (searchValue === "") {
|
|
this.setState({
|
|
searchValue: "",
|
|
results: [],
|
|
page: 1,
|
|
inflectionSearchResults: undefined,
|
|
});
|
|
if (this.props.location.pathname !== "/") {
|
|
this.props.history.replace("/");
|
|
}
|
|
return;
|
|
}
|
|
this.setState((prevState) => ({
|
|
searchValue,
|
|
results: dictionary.search({ ...prevState, searchValue }),
|
|
page: 1,
|
|
inflectionSearchResults: undefined,
|
|
}));
|
|
if (this.props.history.location.pathname !== "/search") {
|
|
this.props.history.push("/search");
|
|
}
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
private handleIsolateEntry(ts: number, onlyState?: boolean) {
|
|
window.scrollTo(0, 0);
|
|
const isolatedEntry = dictionary.findOneByTs(ts);
|
|
if (!isolatedEntry) {
|
|
console.error("couldn't find word to isolate");
|
|
return;
|
|
}
|
|
this.setState({ isolatedEntry });
|
|
if (
|
|
!onlyState &&
|
|
(this.props.location.pathname !== "/word" ||
|
|
getWordId(this.props.location.search) !== ts)
|
|
) {
|
|
this.props.history.push(`/word?id=${isolatedEntry.ts}`);
|
|
}
|
|
}
|
|
|
|
// TODO: right now not checking user very often cause it messes with the state?
|
|
// causes the verb quizzer to reset?
|
|
private cronJob = new CronJob("1/10 * * * *", () => {
|
|
this.handleDictionaryUpdate();
|
|
this.handleLoadUser();
|
|
});
|
|
|
|
/* istanbul ignore next */
|
|
private handleScroll() {
|
|
if (
|
|
hitBottom() &&
|
|
this.props.location.pathname === "/search" &&
|
|
this.state.results.length >= pageSize * this.state.page
|
|
) {
|
|
const page = this.state.page + 1;
|
|
const moreResults = dictionary.search({ ...this.state, page });
|
|
if (moreResults.length > this.state.results.length) {
|
|
this.setState({
|
|
page,
|
|
results: moreResults,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
private handleInflectionSearch() {
|
|
function prepValueForSearch(
|
|
searchValue: string,
|
|
textOptions: T.TextOptions
|
|
): string {
|
|
const s = revertSpelling(searchValue, textOptions.spelling);
|
|
return standardizePashto(s.trim());
|
|
}
|
|
this.setState({ inflectionSearchResults: "searching" });
|
|
// need timeout to make sure the "searching" notice gets rendered before things lock up for the big search
|
|
setTimeout(() => {
|
|
const inflectionSearchResults = searchAllInflections(
|
|
allEntries(),
|
|
prepValueForSearch(
|
|
this.state.searchValue,
|
|
this.state.options.textOptionsRecord.textOptions
|
|
)
|
|
);
|
|
this.setState({ inflectionSearchResults });
|
|
}, 20);
|
|
}
|
|
|
|
private handleGoBack() {
|
|
this.props.history.goBack();
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
private handleRefreshWordlist() {
|
|
getWordlist().then((wordlist) => {
|
|
this.setState({ wordlist });
|
|
});
|
|
}
|
|
|
|
private handleRefreshReviewTasks() {
|
|
getAllDocsLocalDb("reviewTasks").then((reviewTasks) => {
|
|
this.setState({ reviewTasks });
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
style={{
|
|
paddingTop:
|
|
this.state.options.searchBarPosition === "top" ? "75px" : "7px",
|
|
paddingBottom: "60px",
|
|
}}
|
|
>
|
|
<Helmet>
|
|
<title>LingDocs Pashto Dictionary</title>
|
|
</Helmet>
|
|
{this.state.options.searchBarPosition === "top" && (
|
|
<SearchBar
|
|
state={this.state}
|
|
optionsDispatch={this.handleOptionsUpdate}
|
|
handleSearchValueChange={this.handleSearchValueChange}
|
|
/>
|
|
)}
|
|
<div className="container-fluid" data-testid="body">
|
|
{this.state.dictionaryStatus !== "ready" ? (
|
|
<DictionaryStatusDisplay status={this.state.dictionaryStatus} />
|
|
) : (
|
|
<>
|
|
<Route path="/" exact={true}>
|
|
<div className="text-center mt-4">
|
|
<h4 className="font-weight-light p-3 mb-4">
|
|
LingDocs Pashto Dictionary
|
|
</h4>
|
|
<div className="mt-4 font-weight-light">
|
|
<div className="mb-4 small">
|
|
{this.state.options.searchType === "alphabetical" ? (
|
|
<>
|
|
<span className="fa fa-book mr-2" /> Alphabetical
|
|
browsing mode
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="fa fa-bolt mr-2" /> Approximate
|
|
search mode
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{this.state.user?.level === "editor" && (
|
|
<div className="mt-4 font-weight-light">
|
|
<div className="mb-3">Editor privileges active</div>
|
|
<Link to="/edit">
|
|
<button className="btn btn-secondary">New Entry</button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
<Link
|
|
to="/new-entries"
|
|
className="plain-link font-weight-light"
|
|
>
|
|
<div className="my-4">New words this {newWordsPeriod}</div>
|
|
</Link>
|
|
<div className="my-4 pt-3">
|
|
<Link
|
|
to="/phrase-builder"
|
|
className="plain-link h5 font-weight-light"
|
|
>
|
|
Phrase Builder
|
|
</Link>
|
|
<span className="mx-1"> • </span>
|
|
<a
|
|
href="https://grammar.lingdocs.com"
|
|
className="plain-link h5 font-weight-light"
|
|
>
|
|
Grammar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Route>
|
|
<Route path="/about">
|
|
<About state={this.state} />
|
|
</Route>
|
|
<Route path="/privacy">
|
|
<PrivacyPolicy />
|
|
</Route>
|
|
<Route path="/phrase-builder">
|
|
<PhraseBuilder
|
|
state={this.state}
|
|
isolateEntry={this.handleIsolateEntry}
|
|
/>
|
|
</Route>
|
|
<Route path="/settings">
|
|
<Options
|
|
state={this.state}
|
|
options={this.state.options}
|
|
optionsDispatch={this.handleOptionsUpdate}
|
|
textOptionsDispatch={this.handleTextOptionsUpdate}
|
|
/>
|
|
</Route>
|
|
<Route path="/search">
|
|
<Results
|
|
state={this.state}
|
|
isolateEntry={this.handleIsolateEntry}
|
|
handleInflectionSearch={this.handleInflectionSearch}
|
|
/>
|
|
</Route>
|
|
<Route path="/new-entries">
|
|
<h4 className="mb-3">
|
|
New Words This {capitalizeFirstLetter(newWordsPeriod)}
|
|
</h4>
|
|
{this.state.results.length ? (
|
|
<Results
|
|
state={this.state}
|
|
isolateEntry={this.handleIsolateEntry}
|
|
handleInflectionSearch={this.handleInflectionSearch}
|
|
/>
|
|
) : (
|
|
<div>No new words added this {newWordsPeriod}</div>
|
|
)}
|
|
</Route>
|
|
<Route path="/account">
|
|
<Account
|
|
user={this.state.user}
|
|
loadUser={this.handleLoadUser}
|
|
/>
|
|
</Route>
|
|
<Route path="/word">
|
|
<IsolatedEntry
|
|
state={this.state}
|
|
dictionary={dictionary}
|
|
isolateEntry={this.handleIsolateEntry}
|
|
/>
|
|
</Route>
|
|
<Route path="/wordlist">
|
|
<Wordlist
|
|
options={this.state.options}
|
|
wordlist={this.state.wordlist}
|
|
isolateEntry={this.handleIsolateEntry}
|
|
optionsDispatch={this.handleOptionsUpdate}
|
|
user={this.state.user}
|
|
loadUser={this.handleLoadUser}
|
|
/>
|
|
</Route>
|
|
<Route path="/script-to-phonetics">
|
|
<ScriptToPhonetics />
|
|
</Route>
|
|
{this.state.user?.level === "editor" && (
|
|
<Route path="/edit">
|
|
<EntryEditor
|
|
isolatedEntry={this.state.isolatedEntry}
|
|
user={this.state.user}
|
|
textOptions={getTextOptions(this.state)}
|
|
dictionary={dictionary}
|
|
searchParams={
|
|
new URLSearchParams(this.props.history.location.search)
|
|
}
|
|
/>
|
|
</Route>
|
|
)}
|
|
{this.state.user?.level === "editor" && (
|
|
<Route path="/review-tasks">
|
|
<ReviewTasks state={this.state} />
|
|
</Route>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
<footer
|
|
className={classNames(
|
|
"footer",
|
|
{
|
|
"bg-white": !["/search", "/word"].includes(
|
|
this.props.location.pathname
|
|
),
|
|
},
|
|
{
|
|
"footer-thick":
|
|
this.state.options.searchBarPosition === "bottom" &&
|
|
!["/search", "/word"].includes(this.props.location.pathname),
|
|
},
|
|
{
|
|
"wee-less-footer":
|
|
this.state.options.searchBarPosition === "bottom" &&
|
|
["/search", "/word"].includes(this.props.location.pathname),
|
|
}
|
|
)}
|
|
>
|
|
<Route path="/" exact={true}>
|
|
<div className="buttons-footer">
|
|
<BottomNavItem label="About" icon="info-circle" page="/about" />
|
|
<BottomNavItem label="Settings" icon="cog" page="/settings" />
|
|
<BottomNavItem
|
|
label={this.state.user ? "Account" : "Sign In"}
|
|
icon="user"
|
|
page="/account"
|
|
/>
|
|
<BottomNavItem
|
|
label={`Wordlist ${
|
|
this.state.options.wordlistReviewBadge
|
|
? textBadge(forReview(this.state.wordlist).length)
|
|
: ""
|
|
}`}
|
|
icon="list"
|
|
page="/wordlist"
|
|
/>
|
|
{this.state.user?.level === "editor" && (
|
|
<BottomNavItem
|
|
label={`Tasks ${textBadge(this.state.reviewTasks.length)}`}
|
|
icon="edit"
|
|
page="/review-tasks"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Route>
|
|
<Route
|
|
path={[
|
|
"/about",
|
|
"/settings",
|
|
"/new-entries",
|
|
"/account",
|
|
"/wordlist",
|
|
"/edit",
|
|
"/review-tasks",
|
|
"/phrase-builder",
|
|
]}
|
|
>
|
|
<div className="buttons-footer">
|
|
<BottomNavItem label="Home" icon="home" page="/" />
|
|
</div>
|
|
</Route>
|
|
{this.state.options.searchBarPosition === "bottom" && (
|
|
<SearchBar
|
|
state={this.state}
|
|
optionsDispatch={this.handleOptionsUpdate}
|
|
handleSearchValueChange={this.handleSearchValueChange}
|
|
onBottom={true}
|
|
/>
|
|
)}
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(App);
|