[ENH] Add ability to bulk create sets

functions/index.js

@@ -430,7 +430,7 @@ exports.createProgressWithIncorrect = functions.https.onCall((data, context) =>
  * @return {string} The original string with the unwanted characters removed.
  */
 function cleanseVocabString(item, ignoreCaps=false, ignoreAccents=false) {
-	const chars = /[\p{P}\p{S} ]+/ug;
+	const chars = /[\p{P}\p{S}\n ]+/ug;
 	let cleansed = item.replace(chars, "");
 	if (ignoreAccents) cleansed = cleansed.normalize('NFD').replace(/\p{Diacritic}/gu, "");
 	if (ignoreCaps) {

src/AcceptDialog.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Button from './Button';
+
+export default function ConfirmationDialog(props) {
+	return (
+		<>
+			<div className="overlay" onClick={props.acceptFunction}></div>
+			<div className="overlay-content confirmation-dialog accept-dialog">
+				<h3>{props.message}</h3>
+				<div className="button-container button-container--center">
+					<Button
+						onClick={props.acceptFunction}
+					>
+						Ok
+					</Button>
+				</div>
+			</div>
+		</>
+	)
+}

src/App.js

@@ -12,6 +12,7 @@ import Settings from "./Settings";
 import Progress from "./Progress";
 import UserSets from "./UserSets";
 import EditSet from "./EditSet";
+import BulkCreateSets from "./BulkCreateSets";
 import Error404 from "./Error404";
 import History from "./History";
 import MistakesHistory from "./MistakesHistory";
@@ -284,10 +285,13 @@ class App extends React.Component {
                     this.state.coloredEdges &&
                     <div className="colored-edges"></div>
                   }
-              </Route>
+                </Route>
                 <Route path="/create-set" exact>
                   <EditSet db={db} user={this.state.user} logEvent={analytics.logEvent} page={this.page} createSet={true} />
                 </Route>
+                <Route path="/create-set/bulk" exact>
+                  <BulkCreateSets db={db} user={this.state.user} logEvent={analytics.logEvent} page={this.page} />
+                </Route>
                 <Route path="/my-sets" exact>
                   <UserSets db={db} functions={functions} user={this.state.user} logEvent={analytics.logEvent} page={this.page} />
                 </Route>

src/BulkCreateSets.js

@@ -0,0 +1,394 @@
+import React, { Component } from 'react';
+import { withRouter, Prompt } from "react-router-dom";
+import { HomeRounded as HomeRoundedIcon, UndoRounded as TuneRoundedIcon } from "@material-ui/icons";
+import NavBar from "./NavBar";
+import Button from "./Button";
+import Footer from "./Footer";
+import LinkButton from "./LinkButton";
+import AcceptDialog from "./AcceptDialog";
+import Checkbox from '@material-ui/core/Checkbox';
+
+const emptySetData = {
+	title: "",
+	public: false,
+	text: "",
+	vocabPairs: [],
+	vocabChanged: false,
+	incompletePairFound: false,
+};
+
+export default withRouter(class BulkCreateSets extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			user: props.user,
+			db: props.db,
+			loading: false,
+			canSave: false,
+			sets: [
+				{
+					...emptySetData
+				}
+			],
+			navbarItems: [
+				{
+					type: "link",
+					link: "/",
+					icon: <HomeRoundedIcon />,
+					hideTextMobile: true,
+				}
+			],
+			termDefSeparator: "\\n",
+			pairSeparator: "\\n",
+			changesMade: false,
+			showErrorDialog: false,
+		};
+
+		let isMounted = true;
+		Object.defineProperty(this, "isMounted", {
+			get: () => isMounted,
+			set: (value) => isMounted = value,
+		});
+	}
+
+	setState = (state, callback = null) => {
+		if (this.isMounted) super.setState(state, callback);
+	}
+
+	alertLeavingWithoutSaving = (e = null) => {
+		if (this.state.changesMade) {
+			var confirmationMessage = "Are you sure you want to leave? You will lose any unsaved changes.";
+	
+			(e || window.event).returnValue = confirmationMessage; //Gecko + IE
+			return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+		}
+		return "";
+	}
+
+	async componentDidMount() {
+		window.addEventListener("beforeunload", this.alertLeavingWithoutSaving);
+
+		document.title = "Bulk Create Sets | Parandum";
+		this.props.logEvent("page_view");
+
+		this.firstSetNameInput.focus();
+		this.props.page.load();
+	}
+
+	componentWillUnmount = () => {
+		window.removeEventListener('beforeunload', this.alertLeavingWithoutSaving);
+		this.isMounted = false;
+		this.props.page.unload();
+	}
+
+	stopLoading = () => {
+		this.setState({
+			canSave: false,
+			loading: false,
+		});
+	}
+
+	cleanseVocabString = (item, otherPatterns=[]) => {
+		let newItem = item;
+		otherPatterns.map(pattern => newItem = newItem.replace(new RegExp(pattern, "g"), ""));
+		const chars = /[\p{P}\p{S}\n ]+/ug;
+		return newItem.replace(chars, "");
+	}
+
+	removeNewLines = (item) => item.replace(/[\n]+/ug, "")
+
+	handleSetDataChange = () => {
+		const sets = [...this.state.sets];
+		if (sets[this.state.sets.length - 1].text !== "" || sets[this.state.sets.length - 1].title !== "") {
+			sets.push({...emptySetData});
+			this.setState({
+				sets,
+				changesMade: true,
+			});
+		} else if (sets[this.state.sets.length - 2].text === "" && sets[this.state.sets.length - 2].title === "") {
+			sets.pop();
+			this.setState({
+				sets,
+				changesMade: true,
+			});
+		}
+	}
+
+	checkIfCanSave = async () => {
+		let anySetIncomplete = this.state.termDefSeparator === "" || this.state.pairSeparator === "";
+		let newSets;
+		if (!anySetIncomplete) {
+			let sets = [...this.state.sets];
+			const pairSeparator = this.state.pairSeparator.replace("\\n","\n");
+			const termDefSeparator = this.state.termDefSeparator.replace("\\n","\n");
+
+			const setsWithVocab = sets.slice(0,-1).map(set => {
+				let setIncomplete = this.cleanseVocabString(set.title) === "" || this.cleanseVocabString(set.text, [pairSeparator, termDefSeparator]) === "";
+				if (setIncomplete) {
+					anySetIncomplete = true;
+					return {
+						...set,
+						vocabChanged: false,
+						setIncomplete,
+					};
+				}
+				if (set.vocabChanged) {
+					let vocabPairs = [];
+					if (pairSeparator === termDefSeparator) {
+						set.text.trim().split(pairSeparator).forEach((item, index, arr) => {
+							if (index % 2 === 0) {
+								let definition = "unknown";
+								if (index === arr.length - 1 || this.cleanseVocabString(item, [pairSeparator, termDefSeparator]) === "" || this.cleanseVocabString(arr[index + 1], [pairSeparator, termDefSeparator]) === "") {
+									anySetIncomplete = setIncomplete = true;
+								}
+								else {
+									definition = arr[index + 1];
+								}
+								vocabPairs.push({
+									term: item,
+									definition,
+									sound: false,
+								});
+							};
+						});
+					} else {
+						vocabPairs = set.text.trim().split(pairSeparator)
+							.map((pair) => {
+								let [first, ...rest] = pair.split(termDefSeparator);
+								if (rest.length <= 0 || this.cleanseVocabString(first, [pairSeparator, termDefSeparator]) === "" || this.cleanseVocabString(rest.join(termDefSeparator), [pairSeparator, termDefSeparator]) === "") {
+									rest = "unknown";
+									anySetIncomplete = setIncomplete = true;
+								} else {
+									rest = rest.join(termDefSeparator);
+								}
+								return {
+									term: first,
+									definition: rest,
+									sound: false,
+								};
+							});
+					}
+
+					if (vocabPairs.length < 1) {
+						anySetIncomplete = setIncomplete = true;
+					}
+
+					return {
+						...set,
+						vocabPairs,
+						vocabChanged: false,
+						setIncomplete,
+					};
+				}
+				if (set.setIncomplete) {
+					anySetIncomplete = true;
+				}
+				return set;
+			});
+			newSets = setsWithVocab.concat(sets[sets.length - 1]);
+		} else {
+			newSets = [...this.state.sets];
+		}
+
+		this.setState({
+			sets: newSets,
+			canSave: !anySetIncomplete,
+			showErrorDialog: anySetIncomplete,
+		}, () => {if (!anySetIncomplete) this.saveSets()});
+	}
+
+	onTermDefSeparatorInputChange = (event) => {
+		this.setState({
+			termDefSeparator: event.target.value,
+		});
+	}
+
+	onPairSeparatorInputChange = (event) => {
+		this.setState({
+			pairSeparator: event.target.value,
+		});
+	}
+
+	onSetTitleInputChange = (event, setIndex) => {
+		let sets = [...this.state.sets];
+		sets[setIndex].title = event.target.value;
+		this.setState({
+			sets,
+		}, () => this.handleSetDataChange());
+	}
+
+	onPublicSetInputChange = (event, setIndex) => {
+		let sets = [...this.state.sets];
+		sets[setIndex].public = event.target.checked;
+		this.setState({
+			sets,
+		});
+	}
+
+	onVocabInputChange = (event, setIndex) => {
+		let sets = [...this.state.sets];
+		sets[setIndex].text = event.target.value;
+		sets[setIndex].vocabChanged = true;
+		this.setState({
+			sets,
+		}, () => this.handleSetDataChange());
+	}
+
+	saveSets = async () => {
+		if (this.state.canSave) {
+			this.setState({
+				loading: true,
+				canSave: false,
+			});
+
+			const db = this.state.db;
+			const setCollectionRef = db.collection("sets");
+
+			let promises = [];
+
+			this.state.sets.slice(0,-1).map(async (set) => {
+				let setDocRef = setCollectionRef.doc();
+				setDocRef.set({
+					title: set.title,
+					public: set.public,
+					owner: this.state.user.uid,
+					groups: [],
+				}).then(() => {
+					let vocabCollectionRef = setDocRef.collection("vocab");
+			
+					let batches = [db.batch()];
+
+					set.vocabPairs.map((vocabPair, index) => {
+						if (index % 248 === 0) {
+							promises.push(batches[batches.length - 1].commit());
+							batches.push(db.batch());
+						}
+
+						let vocabDocRef = vocabCollectionRef.doc()
+						return batches[batches.length - 1].set(vocabDocRef, {
+							term: this.removeNewLines(vocabPair.term),
+							definition: this.removeNewLines(vocabPair.definition),
+							sound: vocabPair.sound,
+						});
+					});
+					
+					if (!batches[batches.length - 1]._delegate._committed) promises.push(batches[batches.length - 1].commit().catch(() => null));
+				});
+			});
+
+			Promise.all(promises).then(() => {
+				this.stopLoading();
+				this.props.history.push("/");
+			}).catch((error) => {
+				console.log("Couldn't create sets: " + error);
+				this.stopLoading();
+			});
+		}
+	}
+
+	closeErrorDialog = () => {
+		this.setState({
+			showErrorDialog: false,
+		})
+	}
+
+	render() {
+		return (
+			<div>
+				<Prompt
+					when={this.state.changesMade}
+					message="Are you sure you want to leave? You will lose any unsaved changes."
+				/>
+
+				<NavBar items={this.state.navbarItems} />
+
+				<main>
+					<div className="page-header">
+						<h1>Bulk Create Sets</h1>
+						<LinkButton to="/create-set" icon={<TuneRoundedIcon/>}>Normal</LinkButton>
+					</div>
+					<div className="bulk-create-sets-section bulk-create-sets-header">
+						<label>
+							<input
+								type="text"
+								name="term-def-separator"
+								onChange={this.onTermDefSeparatorInputChange}
+								value={this.state.termDefSeparator}
+								autoComplete="off"
+								autoCapitalize="none"
+								autoCorrect="off"
+							/>
+							<span>Term/definition separator</span>
+						</label>
+						<label>
+							<input
+								type="text"
+								name="pair-separator"
+								onChange={this.onPairSeparatorInputChange}
+								value={this.state.pairSeparator}
+								autoComplete="off"
+								autoCapitalize="none"
+								autoCorrect="off"
+							/>
+							<span>Pair separator</span>
+						</label>
+					</div>
+					{
+						this.state.sets.map((data, setIndex) => 
+							<div className="bulk-create-sets-section" key={setIndex}>
+								<div className="page-header">
+									<h2>
+										<input
+											type="text"
+											name={`set_${setIndex}_title`}
+											onChange={(event) => this.onSetTitleInputChange(event, setIndex)}
+											placeholder="Set Title"
+											value={data.title}
+											className="set-title-input"
+											autoComplete="off"
+											ref={(inputEl) => {if (setIndex === 0) this.firstSetNameInput = inputEl}}
+										/>
+									</h2>
+								</div>
+							
+								<label>
+									<Checkbox
+										checked={data.public}
+										onChange={(event) => this.onPublicSetInputChange(event, setIndex)}
+										inputProps={{ 'aria-label': 'checkbox' }}
+									/>
+									<span>Public</span>
+								</label>
+
+								<div className="form create-set-vocab-list">
+
+									<textarea
+										name={`set_${setIndex}_vocab`}
+										onChange={(event) => this.onVocabInputChange(event, setIndex)}
+										value={data.text}
+										autoComplete="off"
+										autoCapitalize="none"
+										autoCorrect="off"
+										className="bulk-create-sets-text"
+										placeholder="Vocabulary"
+									/>
+								</div>
+							</div>
+						)
+					}
+
+					<Button
+						onClick={this.checkIfCanSave}
+						loading={this.state.loading}
+					>
+						Save
+					</Button>
+					{
+						this.state.showErrorDialog && <AcceptDialog acceptFunction={this.closeErrorDialog} message="Ensure all fields are filled in correctly"/>
+					}
+				</main>
+			<Footer />
+			</div>
+		)
+	}
+})

src/EditSet.js

@@ -3,6 +3,7 @@ import { withRouter, Prompt } from "react-router-dom";
 import { HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
 import NavBar from "./NavBar";
 import Button from "./Button";
+import LinkButton from "./LinkButton";
 import Error404 from "./Error404";
 import Footer from "./Footer";
 import Checkbox from '@material-ui/core/Checkbox';
@@ -137,7 +138,7 @@ export default withRouter(class EditSet extends Component {
 	}
 
 	cleanseVocabString = (item) => {
-		const chars = /[\p{P}\p{S} ]+/ug;
+		const chars = /[\p{P}\p{S}\n ]+/ug;
 		return item.replace(chars, "");
 	}
 
@@ -360,6 +361,10 @@ export default withRouter(class EditSet extends Component {
 						>
 							Save
 						</Button>
+						{
+							this.props.createSet &&
+							<LinkButton to="/create-set/bulk">Bulk add</LinkButton>
+						}
 					</div>
 
 					<div className="form create-set-vocab-list">

src/css/App.css

@@ -304,7 +304,7 @@ label .MuiIconButton-label > input {
   border-radius: 150px;
   background: var(--primary-color-dark);
   margin: auto;
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   bottom: 0;

src/css/ConfirmationDialog.css

@@ -10,3 +10,7 @@
 	justify-content: space-between;
 	width: 100%;
 }
+
+.accept-dialog > .button-container {
+	justify-content: center;
+}

src/css/Form.css

@@ -26,6 +26,40 @@
 	flex-basis: 0;
 }
 
+.bulk-create-sets-section {
+	margin-top: 16px;
+}
+
+.bulk-create-sets-header, .bulk-create-sets-header > * {
+	display: flex;
+	flex-direction: row;
+	column-gap: 24px;
+	row-gap: 8px;
+	flex-wrap: wrap;
+}
+
+.bulk-create-sets-header > * {
+	column-gap: 8px;
+}
+
+.bulk-create-sets-header > * > input {
+	min-width: 36px;
+}
+
+.bulk-create-sets-text {
+	min-height: 400px;
+	font: inherit;
+	background: transparent;
+	color: inherit;
+	border: 2px solid var(--overlay-color);
+	padding: 8px;
+	margin: 12px 0;
+}
+
+.bulk-create-sets-text:focus {
+	outline: none;
+}
+
 .form .checkbox-list-container {
 	flex: 1;
 }

src/css/PopUp.css

@@ -22,7 +22,7 @@
 }
 
 .overlay-content {
-	position: absolute;
+	position: fixed;
 	margin: auto;
 	top: 0;
 	right: 0;