Merge pull request #29 from the-collab-lab/ce-vi-alert-empty-item

Add check to input field on the manage-list page
the-collab-lab · Mar 8, 2024 · 3e1607b · 3e1607b
2 parents bdd0ac7 + 6c39298
commit 3e1607b
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 49 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -65,6 +65,7 @@ export function App() {
 						path="/manage-list"
 						element={
 							<ManageList
+								data={data}
 								listPath={listPath}
 								userId={userId}
 								userEmail={userEmail}

diff --git a/src/components/ErrorMessage.css b/src/components/ErrorMessage.css
diff --git a/src/components/ErrorMessage.jsx b/src/components/ErrorMessage.jsx
@@ -0,0 +1,7 @@
+import './ErrorMessage.css';
+
+const ErrorMessage = (props) => {
+	return <div className="errorMessage">{<p>{props.errorMessage}</p>}</div>;
+};
+
+export default ErrorMessage;
diff --git a/src/components/ListForm.jsx b/src/components/ListForm.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { createList } from '../api';
 import { useNavigate } from 'react-router-dom';
+import { inputHasValue } from '../utils/inputValidation';
 
 const ListForm = (props) => {
 	const { setMessage, setListPath, userId, userEmail } = props;
@@ -9,7 +10,8 @@ const ListForm = (props) => {
 
 	const handleSubmit = async (event) => {
 		event.preventDefault();
-		if (newList.trim().length === 0) {
+
+		if (!inputHasValue(newList)) {
 			setMessage('Please type a list name :)');
 			setNewList('');
 			return;

diff --git a/src/utils/inputValidation.js b/src/utils/inputValidation.js
@@ -0,0 +1,14 @@
+export const inputHasValue = (value) => {
+	return value.trim().length === 0 ? false : true;
+};
+
+export const inputHasOnlyNUmbers = (string) => {
+	return !!string.match(/^\d+$/);
+};
+
+export const inputHasRepeatedValue = (string, value) => {
+	const regex = /[^a-z]/g;
+	const stringOne = string.toLowerCase().trim().replace(regex, '');
+	const stringTwo = value.toLowerCase().trim().replace(regex, '');
+	return stringOne === stringTwo ? true : false;
+};
diff --git a/src/views/Home.css b/src/views/Home.css
@@ -0,0 +1,3 @@
+.Home__form {
+	height: 8rem;
+}
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -2,22 +2,25 @@ import './Home.css';
 import { SingleList } from '../components';
 import { useState } from 'react';
 import ListForm from '../components/ListForm';
+import ErrorMessage from '../components/ErrorMessage';
 
 export function Home({ data, setListPath, userId, userEmail }) {
-	const [message, setMessage] = useState(null);
+	const [message, setMessage] = useState('');
 
 	return (
 		<div className="Home">
 			<p>
 				Hello from the home (<code>/</code>) page!
 			</p>
-			<ListForm
-				setMessage={setMessage}
-				setListPath={setListPath}
-				userId={userId}
-				userEmail={userEmail}
-			/>
-			<span> {message ? <p> {message} </p> : <></>} </span>
+			<div className="Home__form">
+				<ListForm
+					setMessage={setMessage}
+					setListPath={setListPath}
+					userId={userId}
+					userEmail={userEmail}
+				/>
+				{message !== '' && <ErrorMessage errorMessage={message} />}
+			</div>
 			<ul>
 				{data.map((list, i) => (
 					<SingleList

diff --git a/src/views/ManageList.css b/src/views/ManageList.css
@@ -0,0 +1,3 @@
+.ManageList__form {
+	height: 8rem;
+}
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -1,12 +1,17 @@
 import { useState } from 'react';
 import { addItem } from '../api/firebase';
 import { shareList } from '../api/firebase';
+import './ManageList.css';
+import ErrorMessage from '../components/ErrorMessage';
+import {
+	inputHasValue,
+	inputHasOnlyNUmbers,
+	inputHasRepeatedValue,
+} from '../utils/inputValidation';
 
-export function ManageList({ listPath, userId, userEmail }) {
-	const [errMessage, setErrMessage] = useState('');
-	const inputHasValue = (value) => {
-		return value.trim().length === 0 ? false : true;
-	};
+export function ManageList({ data, listPath, userId, userEmail }) {
+	const [addItemErrMessage, setAddItemErrMessage] = useState('');
+	const [shareListErrMessage, setShareListErrMessage] = useState('');
 
 	async function handleSubmit(e) {
 		e.preventDefault();
@@ -17,6 +22,18 @@ export function ManageList({ listPath, userId, userEmail }) {
 		let itemName = formData.get('item');
 		let time = formData.get('time');
 
+		if (!inputHasValue(itemName) || inputHasOnlyNUmbers(itemName)) {
+			setAddItemErrMessage('Please enter an item');
+			form.reset();
+			return;
+		}
+
+		if (data.some((item) => inputHasRepeatedValue(item.name, itemName))) {
+			setAddItemErrMessage('This item is already in your list');
+			form.reset();
+			return;
+		}
+
 		let daysUntilNextPurchase;
 		if (time === 'soon') {
 			daysUntilNextPurchase = 7;
@@ -26,10 +43,6 @@ export function ManageList({ listPath, userId, userEmail }) {
 			daysUntilNextPurchase = 30;
 		}
 
-		if (!inputHasValue(itemName)) {
-			form.reset();
-			return;
-		}
 		let response = await addItem(listPath, { itemName, daysUntilNextPurchase });
 
 		if (response) {
@@ -49,13 +62,13 @@ export function ManageList({ listPath, userId, userEmail }) {
 		let email = mailFormData.get('email');
 
 		if (!inputHasValue(email)) {
-			setErrMessage('Share the list by entering a valid user email');
+			setShareListErrMessage('Share the list by entering a valid user email');
 			mailForm.reset();
 			return;
 		}
 
 		if (email === userEmail) {
-			setErrMessage(
+			setShareListErrMessage(
 				'To share the list, enter the email of a user that is not you',
 			);
 			mailForm.reset();
@@ -72,37 +85,49 @@ export function ManageList({ listPath, userId, userEmail }) {
 	}
 
 	return (
-		<>
+		<div className="ManageList">
 			<p>
 				Hello from the <code>/manage-list</code> page!
 			</p>
-			<form method="post" onSubmit={handleSubmit}>
-				<label>
-					Add item
-					<input type="text" name="item"></input>
-				</label>
-				<label htmlFor="time-select">When do I need it?</label>
-				<select name="time" id="time-select">
-					<option value="soon">Soon (within 7 days)</option>
-					<option value="soonIsh">Soon-ish (in 14 days)</option>
-					<option value="notSoon">Not soon (in 30 days)</option>
-				</select>
-				<button type="submit">Submit</button>
-			</form>
-			<hr></hr>
-			<form method="post" onSubmit={sendInvite}>
-				<label htmlFor="email">
-					Share List with another user
-					<input
-						type="email"
-						name="email"
-						id="email"
-						onChange={() => setErrMessage('')}
-					></input>
-				</label>
-				<button type="submit">Submit</button>
-			</form>
-			{errMessage !== '' ? <p>{errMessage}</p> : null}
-		</>
+			<div className="ManageList__form">
+				<form method="post" onSubmit={handleSubmit}>
+					<label>
+						Add item
+						<input
+							type="text"
+							name="item"
+							onChange={() => setAddItemErrMessage('')}
+						></input>
+					</label>
+					<label htmlFor="time-select">When do I need it?</label>
+					<select name="time" id="time-select">
+						<option value="soon">Soon (within 7 days)</option>
+						<option value="soonIsh">Soon-ish (in 14 days)</option>
+						<option value="notSoon">Not soon (in 30 days)</option>
+					</select>
+					<button type="submit">Submit</button>
+				</form>
+				{addItemErrMessage !== '' && (
+					<ErrorMessage errorMessage={addItemErrMessage} />
+				)}
+			</div>
+			<div className="ManageList__form">
+				<form method="post" onSubmit={sendInvite}>
+					<label htmlFor="email">
+						Share List with another user
+						<input
+							type="email"
+							name="email"
+							id="email"
+							onChange={() => setShareListErrMessage('')}
+						></input>
+					</label>
+					<button type="submit">Submit</button>
+				</form>
+				{shareListErrMessage !== '' && (
+					<ErrorMessage errorMessage={shareListErrMessage} />
+				)}
+			</div>
+		</div>
 	);
 }